Download presentation
Presentation is loading. Please wait.
1
第三讲 第一部分 web基础
2
1.1 Internet与Web 图1 Internet拓扑结构图
3
1.1 Internet与Web Internet的组成：
4
1.1 Internet与Web 1.1.1.4 IP地址: 根据IP地址辨别不同的主机 包含“网络地址”和“主机地址”两部分
是一个32位的二进制编码，标准写法是4个十进制数。范围为0~255。
5
1.1 Internet与Web 1.1.1.4 域名： 主机标识符 在Internet上是唯一的。
域名： 主机标识符 在Internet上是唯一的。 域名系统DNS（Domain Name System） 一个主机IP可对应多个域名，但一个域名只能对应一个IP。 域名的组织结构： 计算机名.组织机构名.网络名（机构类别）.最高层域 news.yahoo.com.cn
6
1.1 Internet与Web 1.1.1.4 IP地址与域名的互换： 域名——〉DNS服务器——〉IP地址 IP地址标示主机地址
7
1.1 Internet与Web 1.1.1.5 统一资源定位： 统一资源定位符（Uniform Resource Locator，URL）
URL是全球WWW网服务器资源的标准寻址定位编码，俗称“网址” URL格式： 协议://主机标示[:端口]/[路径/文件名]
8
1.1 Internet与Web 1.1.2.2 Web的特点： Web是一种超文本信息系统 Web是图形化的和易于导航的 Web与平台无关
9
1.1 Internet与Web Web的结构： Web客户机 客户端的浏览器 Web服务器 Web访问的四个步骤
10
1.2 认识网页 1.2.1 网页的概念 HTML和HTTP HTML语言实现了WWW服务的平台无关性；HTTP协议用来支持浏览页面
11
1.2 认识网页 1.2.2 网页的组成 超文本 超链接 超媒体 超媒体=超文本+超链接
12
1.2 认识网页 1.2.3 网页的浏览 Web浏览器 Web浏览器的工作方式 Web浏览器的功能
13
1.2 认识网页 1.2.4 静态网页与动态网页 静态网页：标准的HTML文件，扩展名为.htm或.html。
14
1.2 认识网页 1.2.4 静态网页与动态网页 客户端动态网页：包含可在客户端浏览器中执行的脚本程序。
15
1.2 认识网页 1.2.4 静态网页与动态网页 服务器端动态网页：也包含脚本程序，但脚本程序在服务器端执行。
16
1.3 网页中的基本元素 文本 图形 图像 音频 动画 视频 Mime类型
17
1.4 网页设计的常用工具 直接编写Web页的软件（批处理方式），如记事本等。
1.4 网页设计的常用工具 直接编写Web页的软件（批处理方式），如记事本等。 可视化编辑Web页的软件（所见即所得），如FrontPage，Dreamweaver等。 素材处理软件，如PhotoShop，Flash，Fireworks等。
18
1.5 网页开发的基本方法 网页设计的原则： 有创意、新颖以及有自己的特色。 有充实的内容和浏览价值。 网页的布局应由一定的艺术性
19
1.5 网页开发的基本方法 网页制作过程
20
第三讲 第二部分 网页语言——HTML
21
2.1 HTML基本语法 标记格式：<标记符 属性1[[属性2]……]> 属性格式：属性名=“值”
举例：<body text=“red”>…</body> 注意事项： HTML不区分大小写 标记符号用ASCII码书写 并非所有的Web浏览器都支持所有的标记
![2.1 HTML基本语法 标记格式：<标记符 属性1[[属性2]……]> 属性格式：属性名= 值](http://slidesplayer.com/slide/15435628/93/images/21/2.1+HTML%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95+%E6%A0%87%E8%AE%B0%E6%A0%BC%E5%BC%8F%EF%BC%9A%3C%E6%A0%87%E8%AE%B0%E7%AC%A6+%E5%B1%9E%E6%80%A71%5B%5B%E5%B1%9E%E6%80%A72%5D%E2%80%A6%E2%80%A6%5D%3E+%E5%B1%9E%E6%80%A7%E6%A0%BC%E5%BC%8F%EF%BC%9A%E5%B1%9E%E6%80%A7%E5%90%8D%3D+%E5%80%BC.jpg "举例：<body text= red >…</body> 注意事项： HTML不区分大小写. 标记符号用ASCII码书写. 并非所有的Web浏览器都支持所有的标记.")
22
2.2页面的基本构成元素 页面的基本构成
23
2.2页面的基本构成元素 HTML标记 HEAD标记 标记格式：<html>…</html>
标记格式：<head>…</head> 用于标记一个页面的头部。<title>、<meta>、<link>等
24
2.2页面的基本构成元素 BODY标记 标记格式：<body>…</body>
其间包含Web页面的具体内容。空格专用符“ ”；换行标记“br”。
25
2.3 页面控制标记 段落标记：<p align=#>…</p>
其中：#为left(左对齐),right (右对齐), center (居中对齐), justify (两端对齐)
26
2.3 页面控制标记 分行和禁行标记 分行标记<br>，强迫后面的文字换行显示。
禁行标记<nobr>…</nobr>，该标记中的内容不会随浏览器窗口宽度换行。
27
2.3 页面控制标记 预排版标记： 标记格式：<pre>…</pre>
其功能是让浏览器对在该标记中的内容格式不做修改地输出。
28
2.3 页面控制标记 文档分节标记 标记格式：<div>…</div>
功能：将多个段文本作为一节，从而可以对该节中的多段文本设置一致的格式。
29
2.3 页面控制标记 局部元素定义标记 标记格式：<span>…</span>
功能：为文本中的一个字或词定义特殊的格式。 例如：<span style=“color:red”>字或词</span>
30
2.3 页面控制标记 标题标记 格式：<h1>…</h1>
31
2.3 页面控制标记 转义字符与特殊字符 在HTML中有一些符号已被标记或标记的属性所占用，需要用这些符号时，必须使用HTML提供的特殊符号来表示这些符号。
32
2.3 页面控制标记 列表标记 列表是一种条理化排列信息的方法。优点是：内容显示直观、清洗。 符号列表
符号列表各项目左边无编号，是以特殊的符号表示，如实心方块、实心圆点、空心圆点等。
33
2.3 页面控制标记 HTML提供了三种符号列表标记：
34
2.3 页面控制标记 其中：<ul>标记可以带属性type=# ( #可以为disc(实心圆)、circle(空心圆点)或square(实心方块) ) 列表的每一行最前面都要加一个单边标记<li>,表示新的一行开始。 目前常用的符号列表标记为<ul>标记。
35
2.3 页面控制标记 2. 标号列表 标号列表就是各项目左边加上数字符号或其他有序的标号，如：a,b,c…；i,ii,iii,…；等。并且可以设定从何处开始计数编号。
36
2.3 页面控制标记 3. 说明列表 是指每一个列的前面不出现符号或标记的一种列表。
37
2.3 页面控制标记 4. 定制列表中的标记符号 在标记<li>中可以通过加入type=#属性来设定该列的符号形状。
其中：#取值可以为disc,circle,square
38
2.3 页面控制标记 5. 列表标记的嵌套 几种列表标记相互之间可以嵌套使用，即在一个列表标记之中又包含另一个列表标记。
注意：一个完整的标记包含另一个标记，不能出现交叉的情况。
39
2.3 页面控制标记 文字移动标记 标记格式： <marquee direction=#1>…</marquee>用于设置移动方向 <marquee behavior=#2>…</marquee>用于设置移动方式 其中：#1=left或right。#2=scroll, slide, alternate; scroll值使文字绕圈移动，slide值使文字从右移动到左边，alternate值使文字来回移动。
40
2.3 页面控制标记 文字移动区域的底色设置 属性为：bgcolor=#
其中：#可用#rrggbb 16进制数码的方法设置颜色或者用HTML预定义的色彩值。 例如： <marquee bgcolor=#aaaaaa>文字移动！</marquee>
41
2.3 页面控制标记 文字移动面积设置 文字移动默认的移动区域是文字所占的一整行。面积的属性有两个，一个是高(height),一个是宽(width) 属性：height=# width=# 其中：#的取值可以是像素、百分比等。
42
2.3 页面控制标记 注释 注释标记的功能在HTML文件中生成一个空格，容纳不在页面上出现的内容。注释标记中的内容都是隐蔽的，而主要作用是网页制作者对页面中的内容进行提示说明。 标记格式：<!--……--> 页面中的位置：<body>里面，不能在<head>中
43
2.3 页面控制标记 Meta标记 Meta标记主要用于设置动态链接、动态排列文件和网页关键字的设置。
该标记嵌入在<head>区中。
44
2.3 页面控制标记 Meta标记——动态链接 功能：设置一个网页经过一定的时间自动链接到另一个网页或者是另一个站点。
格式：<meta http-equiv=“refresh” content=“#; url=文件名或网址”> 其中： http-equiv=refresh是指定为动态链接到别的文件或网址；#代表延迟的时间，单位是秒(s)，url为要链接到的文件或网址。
45
2.3 页面控制标记 2. 动态排列文件 功能：可以用meta标记设置一个网页中的文字排版随窗口的大小改变而自动重排文字段落。
标记格式：<meta http-equiv=“content-type” content=“text/html; charset=GB2312”> 3. 网页关键词 功能：将设计好的主页提交给搜索引擎，就必须在主页中用meta标记加入关键词。 标记格式： <meta name=“keywords” content=“Internet, Business, Game”>
46
2.4 版面风格控制 文字大小标记<font> 功能：用于设置页面正文(body)中文字的大小。
标记格式：<font size=#>…</font> 其中：#取值为1到7。1号字最小，7号字最大。如果给出正负号，则表示在默认的3号字基础上增大或缩小字号。
47
2.4 版面风格控制 文字颜色设置 方法：在<font>标记中加入颜色属性来设置字体颜色。 属性格式：color=#
其中：#取值为16进制数码色彩。
48
2.4 版面风格控制 字体样式： HTML提供的常用字体样式标记有b(粗体)、i(斜体)、u(下划线)、strike(删除线)、sub(下标)、sup(上标)等。
49
2.4 版面风格控制 划线标记 水平线标记<hr> 属性包括：size, color, width
Size, width的单位有px(像素)、pt(镑)、cm(厘米)，默认情况下，浏览器按px(像素)来解释。
50
2.4 版面风格控制 背景和文本颜色的使用 背景颜色 标记格式：<body bgcolor=#> 其中：#为不同颜色值。
图片背景 标记格式：<body background=“图片文件名”> 3. 复合背景
51
2.4 版面风格控制 设置文本和超级链接的颜色 设置方法：在<body>标记中设置text=#,link=#,vlink=#和alink=#的属性值实现。 Text: 正文的颜色； Link: 未被访问的超级链接颜色 Vlink: 已被访问的超级链接颜色 Alink: 活动的超级链接颜色 举例：<body bgcolor=silver text=aqua link=red vlink=gray alink=purple>
52
2.5 超文本链接指针 超级链接标记 标记格式：<a href=“URL”>…</a>
其中：URL是要链接页面的URL。 一般将<a>标记中间包含的内容称为“热字或热区”。 目标窗口的设定(target) <a href=“URL” target=“#”>…</a> #是指：“_blank”, “_self”, “_parent”, “_top”。
53
2.5 超文本链接指针 嵌入声音文件 用标记bgsound嵌入背景音乐
标记格式：<bgsound src=“URL” loop=#> 用标记embed嵌入背景音乐 标记格式：<embed src=“URL” autostart=# width=* height=**></embed>
54
2.5 超文本链接指针 嵌入视频剪辑 用标记<img>嵌入视频剪辑
标记格式：<img dynsrc=“URL” start=#> #可以是fileopen或mouseover。 用标记<embed>嵌入视频剪辑 标记格式：<embed src=“URL” autostart=# width=* height=**></embed>
55
2.5 超文本链接指针 嵌入图像标记 标记格式：<img src=# alt=*>
其中：#为图像的URL；*为浏览器未完全读入图像时，在图像位置显示的文字。
56
2.5 超文本链接指针 图像标记（<img>）的属性 图片在网页中的大小设置 属性格式：height=# width=#
其中：#为数字或百分比，单位是像素。 图片与相邻文字的相对位置 属性格式：align=#
57
2.5 超文本链接指针 图片在页面中的水平和垂直布局 属性格式：hspace=# vspace=#
图片边框的属性设置 属性格式：border=# 其中：#为数字，单位是像素，默认值是0。
58
2.5 超文本链接指针 单图单向超级链接设置 是指对一个图片设置一个超级链接，当浏览者鼠标点击该图片时，就将超级链接的对象打开。
标记格式：<a href=“URL”><img src=“URL”></a>
59
2.5 超文本链接指针 单图多项超级链接设置 功能：把图片分成多个热区，每个热区设置一个超级链接。 标记格式：
<map name=“图像地图的名字”> <area shape=“热区块形状” coords=“坐标” href=“URL”> …… </map> <img rc=“图像的URL” usemap=“#地图的名称”>
60
2.6 表格 表格定义标记：<table>…</table>
表行定义标记： <tr>…</tr> 表头定义标记： <th>…</th> 单元格定义标记：<td>…</td>
61
2.6 表格 表格的属性 1.边框尺寸设置：border=n; 默认值是1. 2.表格尺寸设置：width=n, height=n.
3. 表格背景颜色设置：bgcolor=# 4. 表格框线厚度设置：cellspacing=# 5. 表格数据与边框的距离设置：cellspacing=#
62
2.6 表格 单元格的属性 Align=#属性：#为right, left, center
Valign=#属性：#为top, middle, bottom, baseline Nowarp属性：设定单元格中的内容不换行。 Width=n和height=n属性：设定单元格的宽度和高度。 Bgcolor=#属性：设定单元格的背景色。
63
2.6 表格 合并单元格 colspan=n属性：其功能是向右延伸合并水平单元格。 rowspan=n属性：其功能是向下延伸合并垂直单元格。
64
2.6 表格 表格标题设置 标记格式：<caption align=#>…</caption> 表格在页面中的布局
方式：在table标记中用align=#属性，#为left, right, center
65
2.8 框架结构的使用 框架基本概念 框架在网页设计中可以将浏览器窗口分割成几个不同的小窗口，各个窗口包含不同的页面，并且在替换窗口中页面文件时不会影响到其他窗口中的页面。 一个页面文件中框架的结构由框架集页面定义。包括：框架数目，框架大小，每个框架中要放置的页面等设置。
66
2.8 框架结构的使用 框架的基本结构 <html><head><title>…</title></head></html> <noframes>…</noframes> <frameset rows=#>(或<frameset cols=#>) <frame src=“URL”>… </frameset> </html>
67
2.8 框架结构的使用 其中： 框架由<frameset>标记指定，并且可以嵌套，分区中各部分显示的内容用<frame>指定。 可以将窗口横向(rows=#)分成几个部分，也可以纵向(cols=#)分成几个部分，还可以横向、纵向嵌套混合分框。
68
2.8 框架结构的使用 横向框架设计 标记格式：<frameset rows=#>
其中：#指定横向设置的框架的个数及框架的大小。（百分比或绝对大小） 例如： <frameset rows=“30%, 70%”> <frameset rows=“10%, *, 20%”>
69
2.8 框架结构的使用 纵向框架设计 标记格式：<frameset cols=#>
其中：#是指定纵向设置的框架个数及框架的大小。
70
2.8 框架结构的使用 混合框架设计 HTML语言允许框架嵌套使用，在一个横向或纵向框架中嵌套另一个框架集设置就构成了混合框架结构。
71
2.8 框架结构的使用 框架中文本的间距 框架中的文本与框架之间的间距可以通过在<frame>标记中使用marginwidth=#或marginheight=#属性设置。 Marginwidth=#指定文本与框架边界的横向距离。 Marginheight=#指定纵向距离。
72
2.8 框架结构的使用 框架结构见的关联 将某一个框架的链接内容输出到另一个框架。前者称为选择框架，后者作为输出框架或目标框架。
要实现这种超级链接就必须先给每个框架标记一个名字，然后给选择框架中的页面定义链接输出在那个目标框架的说明。 标记框架 指定输出目标框架
73
2.8 框架结构的使用 标记框架 标记框架在<frame>标记中用name属性来实现。
标记格式：<frame src=# name=框架名> <frameset cols=“20%,80%”> <frame src=“left.htm” name=select> <frame src=“right.htm” name=display> </frameset>
74
2.8 框架结构的使用 2. 指定输出目标框架 框架边框的设置
就是给在选择框架中的页面增加说明，使其页面中的超级链接对象在指定的目标框架中显示。 标记格式：<base target=“目标框架名”> 框架边框的设置 在<frameset>标记中用border=#属性来实现。 <frameset rows=“50%,50%” border=8>…</frameset>
75
2.9 DHTML DHTML技术概述 DHTML主要实现：动态的样式、动态的内容和动态的定位。
W3C把DHTML分为3个部分实现：脚本语言(包括JavaScript、VBScript等)、支持动态效果的浏览器和CSS样式表单。
76
2.9 DHTML DHTML的组成 HTML CSS（层叠样式表单） DOM（文档对象模型） SCRIPT（脚本程序语言）
Similar presentations
