静态HTML网页制作.doc

1、1第五章 静态 HTML 网页制作5.1 HTML 文件编辑环境介绍5.1.1 常用名词在学习网页制作之前，我们有必要先了解一些常用的概念。（1）WWW 万维网“万维网” （Word Wide Web）简称 WWW，这是号称除了报纸、广播、电视外的第四大传播媒体。（2）Browser 浏览器要观看万维网上的内容，一个必要条件是要有一个万维网浏览器。目前常用的浏览器是微软（Microsoft ）公司的 Internet Explorer（简称 IE） ，网景公司（Netscape）的Communicator（通讯家） ，还有 Opera 等。（3）WebPage 网页当你浏览一个网站时，网站中的

2、每一页都称为一个“网页” 。网页是用来显示各种数据与信息的，它由文字、图片、声音、动画等组件组成。每个网页都是一个文件，我们通过浏览器可以查看其内容。（4）HomePage 主页当你上网浏览某个网站时，我们进入网站最先看到的网页称为“主页” ，也叫作“首页” ，这有点像自己家的门面一样。一般的网站管理者为了吸引上站者的眼球，都将主页做得很炫、很漂亮。（5）Web Site 网站“网站”就是用来存放网页文件的地方，通过浏览器便可以浏览网站上面的网页。（6）Hypertext 超文本“超文本”文件本身是一个文本文件，但其内容和一般文本文件又不一样，除了有一般信息内容之外，还有一些加注性描述用来产生

3、特殊效果，在显示文件时，浏览器先根据加注性描述对信息内容进行处理，最后才把结果展示给浏览者。这种文件当然也可以用一般的文字编辑软件打开，但却看不到加注性描述所产生的特殊效果，因为一般的文字编辑软件不能像浏览器那样根据加注性描述对信息内容进行处理。（7）Hyperlink 超级链接万维网能风行全球当然有其原因：美丽而动态的画面，方便而简易的使用界面，精彩而富于变化的内容，这些都是它的引人之处；但除了这些之外，它还有一个成功的利器，即它的无限的超级链接能力。譬如它具有网站内部网页间彼此连接的能力，我们称为“内部超级链接” ，还可以连接到其他网站，我们称之为 “外部超级链接” 。网络具有无限的连接性

4、才有它的意义，若没有连接功能，网站就像一座孤岛。（8）HTML 超文本描述语言HTML(HyperText Markup Language)，是一种专门用来设计网页的计算机语言，HTML对网页上的文字、图片等信息出现的位置、形式、顺序及关系都使用标记语法做出定义，同时对网页间加注超级链接关系。一般用 HTML 语言编写的网页文件，其扩展名都是 .htm2或.html。（9）TCP/IP 通讯协议TCP/IP（ Transport Control Protocol/Internet Protocol，传输控制协议/Internet 协议）是一组通讯协议的名称，而此通讯协议则是 Internet

5、中成千上万台计算机间沟通的语言，就好像人类的使用的语言一样，Internet 上的计算机主机就借着 TCP/IP 而能互相沟通，并且交换彼此音的文件数据。（10）IP 地址在 Internet 上每一台计算机之间要进行数据交换时，必须通过 TCP/IP 通讯协议，并且每一台计算机都最少有一个专属的 IP 地址，而要进行数据交换时，必须知道双方的 IP 地址，就好像打电话一样，必须知道电话号码。IP 地址的长度为 32 位，分为 4 段，每段 8位，用十进制数字表示，每段数字范围为 0255，段与段之间用句点隔开。例如159.226.1.1。（11）DNS 域名服务器由于 IP 地址是由四个 8

6、 位的数字组成，并不容易记忆，因此我们大多使用域名（Domain Name）来代表 IP 地址，为了将 Domain Name 转换成对应的 IP 地址，就必须经由 DNS 服务器来进行转换，就好像查字典一样，将 Domain Name 转换成 IP 地址。（12）URL 统一资源定位法网页上的超级链接是让你取得 Internet 上的网络资源，而这些网络资源的服务单位的IP 地址（ Internet Protocol Address，简称网址） ，是国际间是唯一的，我们将这些独一无二的身份证称为“统一资源定位法 ”（Universal Resource Locator，简称 URL） 。UR

7、L 的格式如下图所示：protocol :/ host.domain / path/filename 图 1 URL其中： protocol：为网络资源的通讯协议。常用的网络资源通讯协议如下：http：HyperText Tarnsfer Protocol，超文本传输协议，通过这种协议，才能显示出万维网上的各种媒体效果。ftp：File Transfer Protocol，是一种文件传输协议，用途在于使 Internet 上的主机可以交换文件数据。mail：电子邮件，经由网络系统将文件传送至远程的计算机主机。 host.domain：为所联机网络资源的主机名称。如：阜阳师范学院网站的地址为：图

8、 2 主机名称 path/filename：网络资源存放在网站内的路径及文件名称。如阜阳师范学院文学院的网址为：http :/ :8080 /xiweb/zwx/htdocs /index.asp通讯协议 主机名称 端口号 路径 文件名http :/ WWW 通讯协议 主机名称3图 3 路径及文件名说明：通讯协议和主机名称的英文字母可以不分大小写，但路径及文件名称的英文字母的大小写被视为不同的字符。表 1 网域类型代码和地区代码5.1.2 网站制作流程初期规划 中期实际行动 后期维护图 3 网站设计整体流程图网域类型的代码说明 地区代码说明代码 网域类型 地区代码 地区名称 地区代码 地区名

9、称.com 商业组织 .cn 中国大陆 .de 德国.edu 教育单位及学术研究单位 .us 美国 .nz 新西兰.net 管理网络的机构 .jp 日本 .uk 英国.int 国际组织 .hk 香港 .au 澳大利亚.mil 国防机构 .tw 台湾 .it 意大利.gov 政府机构 .ca 加拿大 .kr 韩国.org 研究单位及非营利组织 .sg 新加坡 .fr 法国构思主题 搜集资料 草图制作 网站制作局部测试上传测试推销网站后期维护构思主题 搜集资料 草图制作 网站制作局部测试上传测试推销网站后期维护45.1.3HTML 文件的生成、编辑与查看编辑网页有多种语言，目前最基本最常用的是 H

10、TML，HTML（Hyper Text Markup Language）是一种文件标记式的网络语言，现在已经成为 Internet 上专门用来制作网页文件的标准语言。由于 HTML 文件是一个纯文本文件 (Text File)，因此要产生 HTML 文件很简单，只要使用一般的文本编辑软件就可以了。在 Windows 环境下可以使用记事本、写字板、Word 或使用网页制作专用软件如 FrontPage、Dreamweaver 等，一旦文件的内容编辑好了，以扩展名.htm 或.html 方式存盘，就可以了。编辑好之后想查看生成网页的效果，可以直接双击它就行了，这时计算机会自动使用 IE 浏览器打开

11、 HTML 网页文件。现在给大家演示一下怎么用这些软件编辑 HTML 文件，也就是网页文件，并比较一下它们的优劣。其实目前专门用于 HTML 文件制作的软件很多，有的有自动提示功能，这里给大家推荐 ASPstudio，它还可以方便以后大学习动态网页的制作。5.2 HTML 编辑文字图片技巧HTML 是制作网页最基础的语言， Internet 上所有的 Web 网站的网页，95%以上都是以 HTML 格式来制作的。当然 HTML 一般只能生成静态的网页，以后大家可能会使用ASP、JSP 或 PHP 等语言来制作动态的网页，但这些 ASP 或 PHP 程序经服务器解译之后，最后呈现在客户端浏览器上

12、的还是 HTML 格式的，更为重要的是不管是 ASP、JSP 或 PHP或其他什么语言，一般都要和嵌入到 HTML 文件之中，或者自己被 HTML 嵌入。因此，有人认为使用 Frontpage 或 Dreamweaver 等所见即所得的网页编辑软件，就可以不必学习HTML 语言了，这是错误的，当然，如何你只想制作一个静态的网页，用这样的软件就可以了，甚至可以不学习 HTML 语言，但这种做法只能说是沙堆上建高楼，根基太差，只知其然不知其所以然，以后几乎没有进步发展的可能。5.2.1 HTML 基本语法一份标准的 HTML 文件是由标记（ Tag）和欲显示在网页上的内容所组成。欲显示的内容当然包

13、括文字、图片、图像、声音、视频等元素；而标记（Tag）的作用是标记网页元素在网页上出现的位置、形式、顺序及元素间的关系。在 HTML 中文件中，有些标记规定必须是以“tagname”符号开始，而以“/tagname”符号结束，我们称之为“成对标记” ；有些标记允许单一标记出现在欲显示元素的前面或后面，这是非成对标记，其基本格式有下列两种写法：语法 1：成对标记displaydata语法 2：非成对标记1. displaydata2. displaydata HTML 的语法使用上没有大小写的差别，可依自己的习惯来撰写。说明：是标记名称，用来表示这是标记的开始，标记前面加斜线表示标记5这是标记的

14、结束。displaydata 代表欲在网页上显示的内容。在标记内的 property（属性）用来改变 displaydata 的属性值。之前的内容都按 property 的值来显示。在设定 value 值时不一定要用双引号将属性值的头尾括起来，但建议最好用双引号，以免字符串中有空白而产生错误。不同标记所拥有的 property（属性）不一定相同，而且书写几个属性时，没有前后次序关系。每个 property（属性）都有其默认值。因此，标记内若省略某属性不写，则会使用默认值。HTML 的整体结构。人类的身体是由头部（ Head）和身体（Body）两大部分组成。HTML 文件的整体结构也是如此。其中

15、头部（ Head）就是指文件的标题，以 开头，以结束，中间用来定义标题的内容，身体是以 开头，以结束，两个标记之间用来放置欲显示的网页元素及其标记。其整体构架如图所示：图 4 HTML 的整体结构标记一个完整的 HTML 文件是以 标记开始，用来告诉浏览器这个文件是使用HTML 格式编写的；最后使用 标记结束，用来告诉浏览器此处是 HTML 文件的结束点。由图 4 我们可以看到，两者之间包含两个主要部分：一个是HTML 文件的头部，我们称之为 “标题设定区” ，放置一些有关该文件的识别数据，前后使用标记框住；另一部分是主体我们称之为“HTML 网页文本区” ，是呈现给浏览者观点的文件内容及其格

16、式，前后使用标记住。标记结构头部身体6标记主要用来提供此份文件的整体信息。包括标题栏名称、文件的网址、所采用的语种等。标记用来告诉浏览器这是文件标头的开始点；最后使用标记告诉浏览器此处是文件标头的结束点。但要记住必须成对出现。这对标记之间可以使用下列标记：（1）通过来设定标题栏名称。（2）通过来设定文件中超级链接的网址。（3）通过说明本文件使用什么语种，如本例是使用国标码。（4）通过来加入背景音乐。音乐文件的格式只能是.mid、.wav 或.asf 格式的。 “URL”为音乐文件的全路径，如为本地音乐，格式为：“src=“file:/D:work in fuyang语言文字信息处理教案 第 5

17、 章d067.WAV“”（5）通过可以在 HTML 文件任何地方加上注释。在一些关键地方加入注释是一个非常好的习惯。标记必须成对出现，之间所夹的文字就是你在浏览器标题栏所看到的标题名称。但要记住： 必须出现包含在标记之间。标记由于 Internet 的范围涵盖全球，因此也就面临英文、中文、法文、日文等语种在显示文字上的问题，我们可以在 HTML 文件中通过 标记来设定网页所属的语种。当然，这个标记还可以指定其他附加信息，这里不再多提。语法：功能：允许网页设计者在网页标头中加入自定义信息。说明：非成对标记，该标记必须写在之间。本例作用是指定文件格式为 text/html，语种是大五码（chars

18、et=big5）其他作用请参考 HTML 手册。标记这个标记的作用是在网页中加入背景音乐，其语法如下：语法：功能：按照指定的播放次数播放背景音乐。说明：非成对标记，必须写在之间。src 的值为“URL” ，用来指定音乐所在位置loop 的值为“playtimes” ，用来设定音乐播放次数，缺少值为 1 次，若值为-1 ，则表示播放无限次。该标记只在 IE 中有效。音乐文件的格式只能是.mid、.wav 或.asf 格式的。 “URL”为音乐文件的全路径，如为本地音乐，格式为：“src=“file:/D: work in fuyang语言文字信息处理教案第 5 章d067.WAV“”5.2.2

19、设定段落与对齐在 HTML 文件中，可以配合各种不同的标记来美化文字，如：设定文字的颜色、大小，7字体等。标记到之间是 HTML 文件最重要的部分，是真正呈现到浏览者面前的图文内容及其格式， 的语法如下：语法：功能：设定网页内容显示区的属性。说明：bgcolor：设置背景色background：设置背景图片text：设置文本颜色link：设置链接文本颜色alink：活动链接颜色值vlink：访问过的颜色值注：表示颜色：（1）用 red blue yellow green black white cyan magenta（2）用#rrggbb 表示：r、g、 b 使用 16 进制数如品红：#88

20、0088、青色：#008888省略全部属性，则网页背景色为白色，文字为黑色。前面提到，到之间的内容将按照其格式呈现到浏览者面前。我们现在在这中间输入一些内容来试试。例 1：欢迎光临我的网站 亲爱的各位同学：你只要认真听课，勤于练习，你会发现：“HTML 原来不难啊!”坚持下去，你很快会成为网友制作高手的!祝学习进步傅成宏2008.4.6实验结果表明，可以在浏览器中显示这些内容，但并没有按我们的排版样式显示。原因是我们的 HTML 文件并没有对这些内容加任何美化的标记。要想使浏览器按我们排版的样式显示，只要在内容的前后加上下面的标记就可以了。标记这个标记可以让文字的编排按我们设定的方式显示，也就

21、是说浏览器里显示的文字和我们在 HTML 文件里的排版方式一模一样。注意 要成对出现在和内部。来试试。8标记是换行标记，属于非成对标记。一般都是配合标记使用，使得网页的段落分明。如我们可以使用它来实现上面标记实现的功能。试试。实验结果我们发现，基本上实现了我们的要求，但每段开头没有空两格，尽管我们在源代码中手工加入了空格也不能让浏览器显示空格。这是因为要让浏览器显示空格，必须使用空格的特殊符号句柄“” 。在网页中要显示特殊符号，需要使用句柄并且在句柄的前面加上作为开头，常见特殊符号的句柄如下表。表 2 常见特殊符号句柄句柄 显示结果 句柄 显示结果空一格（半角） divide; “ &标记语法

22、： displaydata 功能：段落标记用来设定段落。说明：与 组成成对标记。一般配合 使用，让网页的段落分明。会使接下来的文字从新的一行开始显示，并且每个用 标记所形成的段落之间都会自动空一行，不会产生空行。 也可以省略不写。align 属性且为设定文字的对齐方式，其 value 属性值可设为：Left：左对齐；right：右对齐；center：中对齐。标记功能是将图文置中对齐，必须与成对出现。而 和的差别在于后者会跳出一个空行，前者不会。5.2.3 设定文字格式标记此为文字缩小一级标记，其后到之前的文字会缩小一级，此标记应该成对出现。标记与标记相反。试试！标题标记说明：一般用来设定标题字

23、的字体大小，使得标题字更加醒目，但它除了会改变字体大小之外，字体还会依大小自动加粗以提高浏览者的注意力，作为标题的文字会独占一行且上下各有一空行。9 最大、 最小，此标记应该成对出现。此标记中可以加入 align 属性来控制文字对齐方式。字体标记在一份 HTML 文件中,设定字体大小当然可能使用前面的三个标记， 和甚至还可以嵌套使用，但毕竟不太方便。因此 HTML 另外提供 来对整个段落的文字大小作设定，而且不会像那样将字体加粗并将文字上下空一行。字体标记除了可以设定字体大小之外，还通过 face 属性来设定字体和种类，通过 color 属性来设定文字的颜色，其语法如下：语法： display

24、data 功能：设定文字的大小、字体、颜色。说明：应与成对使用。size 属性，用来设定文字的大小。它的值为 17 值越大字体越大。默认值为 3。也可以使用相对大小设定，例如 size=”+1”或 size=”-1”表示将目前字体大小上升一级或下降一级。face 属性，用来设定文字字体的种类（如：face=”楷体_GB2312”） 。color 属性，用来设定文字颜色。正表是常用颜色名称（color=”green”）：颜色名称 代表颜色 颜色名称 代表颜色 颜色名称 代表颜色Aqua 水蓝色 black 黑色 blue 蓝色fuchsia 紫红色 gray 灰色 green 绿色line 石灰

25、色 maroon 栗色 navy 深蓝色olive 橄榄色 purple 紫色 red 红色sliver 银色 teal 蓝绿色 while 白色yellow 黄色 pink 粉红色文字的特殊标记见下表：表 3 常用的文字特殊标记标记 说明将标记范围内的文字以粗体显示将标记范围内的文字以斜体显示将标记范围内的文字加上下划线将标记范围内的文字以上标形式显示，如：2X 3+3X2+6X=5将标记范围内的文字以下标形式显示，如：2H 2O 22H 2O2以斜体来显示的重要文字以较小且加粗的方式显示文字在文字中间加上一条横线，用来显示要删除的文字以粗体来显示文字的重要性用来显示程序中的变量用来显示程序

26、中的代码文字用来将文字缩进显示10以斜体的方式显示参考文献用斜体来显示地址用来显示科学上的定律文字5.2.4 在网页中插入水平线一个 HTML 文件通过来产生段落，可能让文件的段落层次分明，让浏览者知道彼此间哪些是属于同一个部分的内容。但是一张网页可能有标题以及不同性质的内容，单靠段落标记来区分，层次上不够清楚。此时可能通过 标记加入水平线来加以区分，让浏览者很快区分出不同性质的内容。标记的语法如下：语法：功能：显示分层水平线。说明：非成对标记属性说明如下:align: 对齐方式 center、left、right，默认为 centerwidth: 左右长度，默认为窗口宽度，可用 60%来指定

27、其长度为屏幕宽度的比例size: 上下宽度，也可以用% 指定宽度color: 颜色noshade: 无阴影5.2.5 制作“跑马灯”在 HTML 标记中有个会产生简单特效的标记 ，人们俗称之为“跑马灯” 。语法如下：语法：displaydata功能：使文字或图片产生移动效果。说明：成对标记。各属性如下表：属性 说明loop 设定跑马灯的次数。可用数字表示。direction 设定跑马灯的移动方向，常用属性值如下：right：文字由左向右移动。left ：文字由右向左移动。 （默认值）scrolldelay 设定文字移动的速度，用来设定延迟时间，数值越大，速度越快，默认值为90，单位以毫秒来计算

28、。scrollamount 设定文字移动的速度，跑马灯文字移动距离，数值越大，速度越慢，默认值为 6，跑马灯移动以像素点为单位。behavior 设定文字走动方式，常用属性值如下： scroll：文字跑到心头之后再重新开始跑（默认值） 。 slide：文字跑完一次就不再跑了。 alternate：文字以左右来回移动的方式跑。11width 调整跑马灯的宽度height 调整跑马灯的高度。bgcolor 设定跑马灯的背景色。125.2.6 加入项目编号或符号【无序标签】 1. 序列标签基本上可分为两种，一种是“无序条列”，一种是“有序条列”。所谓“无序条列”当然就是意指各条列间并无顺序关系，纯粹

29、只是利用条列式方法来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。至于“有序条列”就是指各条列之间是有顺序的，从 1、2、3一直延伸下去。 2. 我们先来看看“无序列表标签”如何使用：无序标签 姓名：杰克升生日：1974/11/21星座：天蝎座其中标签即为“无序列表标签”，每增加一列内容，就必须加一个。3. 前面的符号一定是要圆形的吗？不，我们可以加入 TYPE=“形状名称“ 属性来改变其符号形状，一共有三个选择：DISK（实心圆） 、SQUARE （小正方形） 、CIRCLE（空心圆）三种（由于本页使用 CSS 故仅于 Netscape 看得出效果。 ）：13【有序标签】 1.

30、 接下来，我们来看看“有序列表标签”如何使用：有序标签 姓名：杰克升生日：1974/11/21星座：天蝎座其中标签即为“有序列表标签”，每增加一列内容，就必须加一个。2. 和无序列表标签一样，我们也可以选择不同的符号来显示顺序，一样是用 TYPE 属性来作更改，一更有五种符号：1（数字） 、A （大写英文字母） 、a（小写英文字母）、I（大写罗马字母） 、i（小写罗马字母）等五种： 3. 另外，我们亦可指定序列起始的数目，其方法为：5.2.7 插入图片在一个网页中，若能适时地插入一些图片、音乐、影像或是将某些文字语句改用图片来表示，不但使得该网页一目了然，而且生动引人。事实上几乎每个正式的网页

31、都有图片。先对图片文件有个大体的了解。一般而方言，我们见的图片格式最多的有.bmp 、.gif 、.jpeg 等。这里.bmp 是没有压缩的，所以文件很大，传输较费时，所在很少在网络上使用。（1）GIF：这种格式的图片只有 256 色，比较适合线条分明的图片。如小图标、按钮等，不适合储存照片或颜色较多的实物图片，另外这种格式可以用来制作简单的动画文件。（2）JPEG：可以储存全彩的图片或者灰度图形，与 GIF 适用类型正好相反。现在我们来向网页插入图片。语法如下：标记语法：14功能：在网页的当前位置显示一张图片。说明：非成对标记。各属性说明如下表。属性 说明src 设定图片所在位置及文件名al

32、ign 用来调整图片周围的文字与图片之间的对齐方式，常用属性值如下： left：设定图片向左对齐（默认） 。 right：设定图片向右对齐。 center：设定图片居中。 bottom：文字会对齐图片的下缘。 top：文字会对齐图片的上缘。 middle：图片垂直居中对齐文字。 absmiddle：图片更精确垂直居中对齐文字。为一组，是为组，两组不能同时使用。border 设定图片的外框vspace 设定文字、图片与图片上下之间的间隔hspace 设定文字、图片与图片左右之间的间隔width 调整图片宽度。height 调整图片高度。alt 当图片不存在或使用者的鼠标指向图片时出现的提示文字。

33、简单插入图片（并不能实现图片的居中对齐，这是 HTML 语法的一个 BUG，要实现图片居中对齐，须要用到标记，应该这样做：或者文字与同一行的图片对齐方式（top/middle/bottom）文字、图片与图片的间隔（vspace/hspace）跑马灯上加入图片（）如何在网上抓取图片5.2.8 加入音乐控制组件前面我们学过加入背景音乐的标记，它必须置于标记内，而且它是否播放、播放次数不能由浏览者决定，它只限于 midi、wav、asf 格式的文件，这些是其缺点。为克服15这些缺点，我们可以使用音乐控制组件标记。它可以让浏览者控制音乐的音量、播放次数、停止等。语法如下：语法：功能：设定音乐控制组件。

34、说明：非对成对标记，应放在内。不再像那样受格式限制，也可以用 、空格等来设置放置位置。5.2.9 为网页加上背景图片5.3 表格的制作前面我们讲到了如何调整文字、图片等元素在网页上的显示位置，使用的是align=left/center/right 和，但它们的功能是很有限的。要想在网页中使文字、图片等信息更灵活的定位，最好是使用表格。HTML 的表格功能表格（Tables）由多个水平行（Rows）和垂直栏（Colunms）组成，表格内的小方框为储存单元（Cells） 。当你在设计一张网页的时候，可以在适当的地方插入一个表格，然后将文字、图片等组件放入指定的储存单元中，也可以在同一个储存单元中放

35、入文字、图形等组件。这样做的好处是可以让数据限制在某个范围内显现，使得网页内的信息看起来井然有序。第 1 栏第 2 栏第 3 栏第 1 行 1.1 1.2 1.3第 2 行 2.1 2.2 2.3储存单元标记上图为 23 表格的基本结构，此表格对应的 HTML 语法如下：1.1 1.2 1.32.1 2.2 2.316语法说明：标记/属性 说明标记 声明表格的开始，并负责设定整个表格的属性。告知表格结束。标记 tr 是 table row 的缩写，用来声明这是表格中水平行的开始。 水平行结束。标记内可设置两个属性来控制该行内所有栏位的对齐方式： 水平对齐：align=”left” 、align

36、=”center” 、 align=”right” 垂直对齐：valign=”top”、 valign=”middle”、 valign=”bottom”标记 td 是 table data 的缩写，用来声明这是储存单元数据的开始，宣告结束。标记 th 是 table header 的缩写，用来定义表格字段（栏目）的名称，在标记文字预设为水平和垂直方向上居中对齐且字体加粗。也可在内加入 align 和valign 两个属性来自定义对齐方式，为层次清楚，一般放在内。border 属性 是标记的属性之一，用来设定表格外框的宽度，属性值为数字，数值越大框线越粗，省略 border 属性表示表格无外框

37、。练习：利用上述所学的标记，制作一张含有姓名、性别、QQ 号码的通讯簿表格。结果如下图。昵称 性别 QQ 号囧囧有神 女 447543891凤栖梧 女 157041432愛國者搗蛋 男 117520955咑尐僦鋌帥 男 253346901表格标题一张表格若缺少了标题，常常无法实时知道该表格的意义，因此大部分的表格都会在表格的上面加上标题文字，让人一开始就知道该表格的功用。在 HTML 中是通过标记来设定表格的标题的，其语法如下：语法：表格标题功能：当表格的标题或批注使用。说明： 此为成对标记，必须置于标记内，最好紧跟在的后面。align 属性：设定标题对方方式，有三种取值：left/cente

38、r/right。valign 属性：设定标题位置，可以和 align 属性连用，有两种取值：top: 将标题置于表格的上方（默认）bottom: 将标题置于表格的下方。17美化表格我们可以加上一些属性来美化表格，常用属性见下表：属 性 适用表格标记 功 能border 表格外框线的粗细，值为 0 则为取消外框线bordercolor 须先设置 border=”value”。bordercolorlight bordercoloradrk cellspacing 表格内框线粗细，欲取消内框线须先取消外框线background 表格背景图片width 可先设定 table 宽度，再依次分配每个 t

39、h、td 宽度，否则 HTML 会自动分配每列的宽度height 可先设定 table 高度，再依次分配每个 th、tr 、td 高度，否则 HTML 会自动分配每行的高度align 表格本身在网页中的水平对齐方式及单元格内文字水平对齐方式：left/center/rightvalign 单元格文字垂直对齐方式：top/middle/bottomcellpadding 表格内文字与表格框线之间的距离bgcolor 背景色表格中插入图片办法和在表格中加入文字是一样的，只要在之间加入 便可以将指定的图片放入到存储单元格内。练习：试试使用 border、cellspacing。表格的特殊变化：合并单

40、元格先看一个简单的：单元格纵向跨多行，如下图，怎么做？昵称 性别 QQ 号欲上初寒蝉 315367154安静地走开 254234670可口可乐女276529865三一 545251565虎哥 男 290007853这就是单元格的跨行或跨列的问题，就须要在或中使用 rowspan指定当前单元格跨几行，使用 colspan 指定当前单元格跨几列 (span:范围) ，相当于 Word 中的合并单元格。我们来看源代码。第二个简单的，单元格横向跨多列，如下图：昵称 欲上初寒蝉 安静地走开 可口可乐 三一 虎哥18性别 女 男QQ 号 315367154 254234670 276529865 5452

41、51565 290007853第三个稍微复杂的，表格内既有跨行又有跨列，如下图：规格 A 牌计算机 B 牌计算机 C 牌计算机CPU Pentium IV 2.0G 迅驰二代 1.7G 酷睿双核 2.0G内存 Kingston 2G硬盘 选购 Seagate 60G IMB80G5.4 超级链接何谓超级链接（Hyperlink ）当你在浏览网页时，移动鼠标到网页的某些文字或图片上，光标马上变成一只小手，就表示该处有个“超级链接” ，在该处单击鼠标左键，就可以立刻连接到这个“超级链接”所设定的位置去浏览。这些位置包括：某个网站、某个文件、某人的 Email 地址等等各式各样的 Internet

42、服务。超级链接是网页最吸引人的地方。适当地插入“超级链接”可以让你的网站无限地延伸，充分利用网络上其他资源，来增加网站本身的广度与深度。下面我们就来讨论在网页中插入超级链接的方法。标记想把某些文字或图片设定为超级链接，必须使用标记，a 是 anchor（锚）的第一个字母，其语法如下：语法：hypertext/graph功能：连结到其他的网络资源（URL）或书签。说明：必须成对使用。URL 网络资源参数可以下列项目： 网站：URL 为指定网站的地址。 网页：URL 为指定网页的地址，甚至可以是本机的网页，其语法为：表格 1 下载文件：如果连接的文件的后缀名不是 html，会将连接的文件下载到浏览

43、者的计算机。如：小狗儿 同份文件的书签如果网页的长度超过屏幕的上下距离，浏览者在某个项目上按一下，便直接跳到该项目的内容，省去滚动条的动作，此功能须有后面的name 属性相配合。如 bookmark.htm。 其他文件的书签原理同上。name 属性用来设定 bookmark 的名称，19position 属性这是一个很重要的属性，用来指定网页的放置位置，有如下几种取值：target=”_self”target=”_blank”target=”_top”target=”_parent”这里先了解一下，后面我们会结合实例来试试如何使用它们。练习：用超级链接制作一个网页，从这里能快速打开阜阳大学各院

44、系网站主页。提供下载格拉条链接到 Email请给我写信设定书签链接Step1：设定书签的语法语法：bookmarkmemo功能：在当前网页位置或不同网页位置设定一个书签。说明：bookmarkmemo 为连接点，也就是浏览者在书签超级链接处按一下，即跑到bookmarkmemo，而 bookmarkname 代表书签名称。Step2：跳到书第书签位置的超级链接语法语法：hypertext|graph功能：点击超级链接文字或图片，直接跳指定书签所在的位置。说明：在连接书签名称前面的“#”号不可少，否则就不能做书签超级链接了。插入下载链接标记除了可以用来连接其他网页之外，还可以连接动画文件，声音文

45、件等。制作文法很简单，只要把 URL 设定为指定的文件名就可以了。当浏览者点击这个超级链接时，可以直接显示或下载到自己电脑硬盘中。提示：除了.htm、html、.asp 文件外，其他文件都可以通过此方式提供下载。一些较大的文件，最好先压缩再上传，这样可以尽可能地减少浏览者等待的时间。链接特效（1）提示性文字文学院（2）鼠标悬停提示文学院（3）定制浏览器窗口Open更多特效请上网查找！205.5 表单的制作“表单”是什么？“表单”就是提供给浏览者输入数据的地方，当数据输入完毕后点击“确定”按钮，表单内的数据会传送给服务器。服务器会根据输入的数据做必要的处理。所以，表单就是网站与浏览者之间的桥梁，

46、以此达到浏览者与网站管理者之间的互动。我们从一个网站上看表单的例子。http:/:8080/xiweb/zwx/htdocs/index.asp表单中有单行文字框、单选框、复选框、下拉式清单、多行文字框、按钮等常见的 6种元素。好，我们现在学习如果生成这些表单元素。第一个表单， “单行文字框与密码框” ，运行效果见这里：第一 个表单，单行文字。第二个表单， “单选框” ，运行效果见这里：第二 个表单，单选框。第三个表单， “复选框” ，运行效果见这里：第三个表单，复选框。第四个表单， “下拉式清单” ，运行效果见这里：第四个表单，下拉式清单。第五个表单， “多行文字框” ，运行效果见这里：第五

47、个表单，多行文字框。第六个表单， “按钮” ，运行效果见这里：第六个表单，按钮。下面我们对表单做个小结：表单由 标记来定义，各表单元素的标记置于其内部。这些元素标记有：可以生成单行文字栏（单行文字、密码文字、隐藏文字） ；单选框、复选框、按钮。：可以生成下拉式清单。：可以生成多行文字框。最后，我们来为表单做个美化的工作。我们可以使用制作表格的标记，将表单内的字段做有顺序的排列，如果以此方式来排列表单内的字段，一张网页下来，不知道要打了多少行的程序，不但费时且不经济。所幸，HTML 提供了两个标记， 和 。 标记可以制作一个字段外框，将表单内同性质的字段框起，再利用 标记设定此字段外框的标题名称

48、。我们先来看一个范例的效果，第七个表单，表单外框标记。现在来分析一个这个范例的源代码，之后我们知道：可以用标记将你认为是同一类型内容的表单元素括起来作为一个区块，并且可以在里面加上“ 区块名” 来为每个区块取个标题名称。进一步美化：边框控制（1）设定边框大小（2）设定边框粗细颜色（3）同时设定（1）和（2）【框架的基本概念】 211. 首先，各位先看看下边这张图，我将利用这张图来作解说，这样子，讲起来可能会清楚一点。 OK！我们可以看见，右边的这个视窗，一共分为 1 、 2 、 3 三个框架，每一个框架，各有其显示的内容分别是a.htm、b.htm、c.htm 三个档案。然而左下角的那个 in

49、dex.htm 是做什么用的呢？ 2. 原来，左下角的这个档案 index.htm，就是要告诉电脑，我们要将画面分割成这样，也就是说，所有 Frame 的标签，其实都只摆在 index.htm 这个档案里。（当然，不是档名一定要叫做 index.htm 取其他档名也是可以的。） 3. 这样明白了吗？总之，您要分割几个框框，就一定会有几个对应的 html档案（假如您要分割 100 个框框，就要有 100 个 html 档就对了。），另外，还会多一个档案是来告诉电脑要如何分割的。（也就是例中的 index.htm 档啦！） 【开始分割】 1. 别急、别急，分割视窗可是一门学问，要分割也是要一步一步来的。看看刚刚那例子，想像画面是一个蛋糕，你要怎么割，才能割成那样呢？ 原始码 呈现结果 框窗实作2. 各位会发现，奇怪，在上面的语法中，怎么都没见到熟悉的身影？呵呵.没错，它已经被待会儿要加