ASP动态网页设计教程课件(完整版)

1、ASP动态网页设计教程 1内 容 简 介 本书从实用的角度介绍了网站架设与网页制作的相关技术。全书共分11章：第1章介绍了互联网的基础知识；第2章介绍了IIS网站规划与管理；第3章是对HTML的简介；第4章介绍了VBScript的用法；第5章介绍了ASP的基础知识及简单应用；第6章介绍了HTML表单与ASP的应用；第7章介绍了ASP中的对象；第8章介绍了ASP与SQL Server的结合；第9章介绍了数据库查询的技巧；第10章介绍了如何访问文本文件；第11章是一个综合的设计实例。书2内 容 简 介 中每一章的例题几乎都与网站常用的功能有关，例如计数器、在线交易、动态切换网页、密码修改、聊天室等

2、，方便读者学以致用。 本书适合作为高职高专相关网站架设和网页制作课程的教材。也可作为对网站架设和网页制作感兴趣的初、中级读者的参考书籍。3目录第1章 认识互联网第2章 IIS网站规划与管理第3章 HTML简介第4章 VBScript第5章 ASP的第一次接触第6章 HTML表单与ASP第7章 ASP对象4目录第8章 ASP与SQL Server第9章 数据库查询的技巧第10章 文本文件的访问第11章 设计实例5参考文献1志凌团队，陈世明，江高举编著. ASP从入门到精通. 北京：中国铁道出版社，20012荣钦科技主笔室编著. ASP入门与应用. 北京：中国铁道出版社，20013黄刚等编著. M

3、acromedia Studio MX网页设计培训教程. 北京：清华大学出版社，20034林义证等编著. HTML与ASP网页制作教程. 北京：中国铁道出版社，20006第1章 认识互联网ASP动态网页设计教程第1章 认识互联网 国际互联网自1996年开始蓬勃地发展，发展初期都是以静态网 站为主，主要提供公司基本信息、产品的介绍等，这种纯粹以提供 信息为主的网站，是第一代互联网的基本特点。后来在美国由华人 杨智远领军的 Yahoo 网站，在网络上提供网站黄页簿分类检索的服 务(类似电信局的电话簿)，让网友通过 Yahoo 的搜索引擎(Search Engine)快速地在茫茫网海中找到所要的信息

4、，而逐渐在网络上崭 露头角，并得到全球上网人士的青睐，成为第二代网络应用的主流。到了最后，由于网站具有全球可用及全球统一的用户界面，因此许多的企业将原本在局域网使用的数据库，移植到互联网上，并与电子商务结合而成为第三代网站的主要应用。 本章主要以介绍Windows XP架设IIS(Internet Information Server)网站为基础，针对架设Web网站所需的相关知识做一个基本的介绍，让读者可以轻松及快速地进入网络世界的实际应用层次。 8第1章 认识互联网1.1 什么是互联网1.2 架站所需配置1.3 网站服务器1.4 完整的运行流程91.1 什么是互联网 互联网(Internet

5、)是以标准的TCP/IP通讯协议为基础，将分布在全球各地的局域网串联在一起，完成资源共享的网络世界。目前全世界约有千万个主机串联在互联网上，形成一个相连的Internet世界，这些主机是由个人、教育机构及企业用户等相关单位所设立，通过Internet可以达到资源共享的目的。 101.1 什么是互联网 1.1.1 互联网的架构1.1.2 客户端上网所需的配置111.1 什么是互联网1.1.1 互联网的架构 互联网的硬件架构如下图所示: 121.1 什么是互联网1.1.2 客户端上网所需的配置 下面是个人拨号上网所需准备的软、硬件设备：（1）个人计算机（2）调制解调器（3）电话线（4）操作系统（5

6、）浏览器（6）向ISP公司申请一个上网的账号（7）设置拨号上网的参数 131.1 什么是互联网1.1.2 客户端上网所需的配置1. 个人计算机个人计算机上网所需的基本配置建议如下：Pentium II以上的CPU； 64 MB以上的内存；3.5英寸软驱；4.3 GB以上的硬盘；32倍速以上的光驱；一个鼠标； 101键的标准键盘； 56K调制解调器；Windows操作系统；Internet Explorer浏览器(已内置于操作系统中)141.1 什么是互联网1.1.2 客户端上网所需的配置2. 调制解调器 调制解调器是一种数字与模拟信息转换的设备，个人计算机可以处理的是数字信息，而数据通过电话线

7、传输至远程时必须转换为模拟信号，当另一端收到模拟信号时，必须通过调制解调器再将模拟信号转为数字信号后，交给计算机处理。 151.1 什么是互联网1.1.2 客户端上网所需的配置3. Windows操作系统 操作系统是个人计算机必备的软件，通常个人计算机的硬件厂商均会随机附赠Windows操作系统，例如Windows 98，Windows 2000或Windows XP等。 另外，由于互联网采用TCP/IP通讯协议，因此您的操作系统一定要安装TCP/IP通讯协议，才可以连接上网。 161.1 什么是互联网1.1.2 客户端上网所需的配置4. 浏览器 Microsoft网络探险家浏览器的用户界面如

8、下图所示。 171.1 什么是互联网1.1.2 客户端上网所需的配置5. ISP ISP即为互联网服务提供者(Internet Service Provider)，它主要是提供企业及个人用户拨号上网的服务，当您准备好个人计算机等相关配置后，必须向ISP申请一个账号，方能利用Modem拨号上网。当然，也可以直接申请ADSL或其它专线服务，国内的ISP企业如163、236等。 181.1 什么是互联网1.1.2 客户端上网所需的配置6. IP 地址 在TCP/IP通讯协议的Internet环境上，每一部计算机主机均有一个地址（用以代表该主机），此地址是由四段0255的数字所组成，例如29，这组数字

9、称为IP 地址。 说明：拨号上网时，个人计算机的IP是由ISP主机动态指定，因此每次上网的地址均不相同，只有固定式的用户才有固定的IP地址。 191.2 架站所需配置 个人利用个人计算机及ADSL线路架设Web网站，其架构最为简单，如下图所示。 201.2 架站所需配置 若是小型公司架站的话，目前有一种利用ADSL架站的服务，它同时可让公司的多部个人计算机同时上网(ISP会提供5个IP地址)，利用该方案提供的路由器或集线器，即可立即连接到Internet。其系统架构如下图所示。 211.2 架站所需配置 若是企业用户架站，则系统的需求较为复杂，仅有Web 网站需求的企业，可参考的网站架构如下图

10、所示。 221.3 网站服务器 1.3.1 浏览器与网站服务器的关系1.3.2 Web Server与数据库服务器 231.3 网站服务器1.3.1 浏览器与网站服务器的关系 Web技术架构在主从 (Client/Server) 架构的环境下，Client 端用户接口的标准为浏览器，Server 端则是网站服务器(Web Server)。Client 端与 Server端通过HTML语言沟通，达到信息共享的目的，如下图所示。浏览器与 Web Server间的通讯是采用标准的HTTP通讯协议。241.3 网站服务器1.3.2 Web Server与数据库服务器 在电子商务网站中，数据库与 Web

11、 Server 均为独立 的主机，当客户通过浏览器进行下载时，系统的运作流 程如下图所示。 251.4 完整的运行流程 Web的详细运行流程整理如下：（1）客户拨号上网。（2）打开浏览器，输入网址，如 （此为新浪网的网址）。（3）浏览器发出Request信息，向“新浪”网站要求提供主页 的HTML文件。（4）“新浪”的 Web Server 读取主页(Home Page)，并返 回信息给浏览器。（5）浏览器解析 Web Server 送来的主页(HTML文件)， 根据主页的 HTML文件的内容，编排输出格式后显示 在浏览器的画面上，完成整个流程。 26第1章 认识互联网 相信读者看完本章，对互

12、联网的运作已有初步的了解，对于阅读后续的章节将有相当大的帮助，您若对互联网有兴趣的话，可以到W3C的网站查询相关技术数据。27第2章 IIS网站规划与管理 ASP动态网页设计教程第2章 IIS网站规划与管理 Web Server是网络系统平台上最重要的组件之一，由于Windows XP与Unix操作系统上的差异，IIS除提供标准的CGI接口以外，还为利用Windows操作系统特有的DLL模块，提供了特别量身订做的ISAPI接口，以提高整个IIS的运行效率。 本章我们将针对 IIS 的基本硬件需求、网站的规划管理，为读者介绍 Internet 服务管理器等相关工具的使用说明，让您在管理Web S

13、erver时，更得心应手。29第2章 IIS网站规划与管理 2.1 什么是IIS2.2 Internet服务管理器302.1 什么是IIS IIS全名为Internet Information Server，它是为微软针对Windows NT操作系统所设计的Web Server，其最大特色是可与Windows NT做紧密的结合。 312.1 什么是IIS 2.1.1 软硬件需求 2.1.2 IP地址的查询及设置 322.1 什么是IIS2.1.1 软硬件需求 1. 硬件需求 CPU：Pentium II以上，速度越快越好(也要考虑成本)。 内存：基本需求为128 MB，建议安装256 MB以上

14、。 硬盘：建议采用SCSI硬盘，例如UltraSCSI-3的硬盘。 2. 软件需求 操作系统：Windows XP Professional。 网站服务器：IIS 5.1。 安装SMTP服务。 安装FTP服务。 332.1 什么是IIS2.1.2 IP地址的查询及设置 有关TCP/IP中IP的设置步骤，请参考如下: 1.342.1 什么是IIS2.1.2 IP地址的查询及设置2.352.1 什么是IIS2.1.2 IP地址的查询及设置3.362.2 Internet服务管理器 Internet服务管理器是Microsoft针对互联网相关的服务，例如WWW、FTP、SMTP等服务所提出的管理工具

15、，通过它我们可以管理各种Internet的服务。本节要介绍的Internet服务管理器内容如下：372.2 Internet服务管理器 2.2.1 监视系统运行状态 2.2.2 设置主目录2.2.3 调整默认的Web文档2.2.4 停止Web Server服务2.2.5 重新启动Web Server服务2.2.6 新建虚拟目录 2.2.7 Web的日志 382.2 Internet服务管理器2.2.1 监视系统运行状态 操作步骤如下： 1.392.2 Internet服务管理器2.2.1 监视系统运行状态2.402.2 Internet服务管理器2.2.1 监视系统运行状态3.412.2 In

16、ternet服务管理器2.2.1 监视系统运行状态4.WWW服务的状态为运行中 422.2 Internet服务管理器2.2.1 监视系统运行状态5.可以看到“默认网站”中所有的目录信息 432.2 Internet服务管理器2.2.2 设置主目录 操作步骤如下： 1.442.2 Internet服务管理器2.2.2 设置主目录2.452.2 Internet服务管理器2.2.3 调整默认的Web文档 操作步骤如下： 1.462.2 Internet服务管理器2.2.3 调整默认的Web文档2.472.2 Internet服务管理器2.2.4 停止Web Server服务482.2 Inter

17、net服务管理器2.2.5 重新启动Web Server服务492.2 Internet服务管理器2.2.6 新建虚拟目录 虚拟目录是采用“别名(Alias)”的方式创建目录的对应关系。创建虚拟目录的操作步骤如下： 1.502.2 Internet服务管理器2.2.6 新建虚拟目录 2.512.2 Internet服务管理器2.2.6 新建虚拟目录 3.522.2 Internet服务管理器2.2.6 新建虚拟目录 4.532.2 Internet服务管理器2.2.6 新建虚拟目录 5.542.2 Internet服务管理器2.2.6 新建虚拟目录 6.552.2 Internet服务管理器2

18、.2.6 新建虚拟目录 7.562.2 Internet服务管理器2.2.6 新建虚拟目录 8.572.2 Internet服务管理器2.2.6 新建虚拟目录 9.新建的别名 vba 所对应的目录下，所有的文件已出现在画面上 582.2 Internet服务管理器2.2.7 Web的日志 IIS会将网络访问的记录存放在日志中，此日志的格式可以为下列3种： NCSA 公用日志文件格式 ODBC 日志 W3C 扩充日志文件格式 其中ODBC 日志是将Web的日志存放在ODBC数据库中，其余的是放在传统的顺序文件，默认值为W3C 扩充日志文件格式。 592.2 Internet服务管理器2.2.7

19、Web的日志 设置步骤如下： 1.602.2 Internet服务管理器2.2.7 Web的日志2.612.2 Internet服务管理器2.2.7 Web的日志3.“日志文件目录”的默认位置为C:WINDOWSsystem32LogFiles 62第2章 IIS网站规划与管理 本章针对IIS的基本硬件需求、网站的规划管理，为读者介绍了 Internet 服务管理器等相关工具的使用说明，使您在管理 Web Server 时，更得心应手。63第3章 HTML简介ASP动态网页设计教程第3章 HTML简介 3.1 什么是HTML3.2 背景设置3.3 文字属性的变化3.4 图文并茂的文件3.5 超

20、级链接3.6 表格3.7 段落3.8 水平线3.9 什么是CSS653.1 什么是HTML HTML全名为Hyper Text Markup Language，中文译为超文本标记语言，这是创建网页的脚本语言，它提供了精简而有力的文件定义，使我们可以设计出多姿多彩的超媒体文件(Hypermedia Document)，通过HTTP(Hyper Text Transfer Protocol)通讯协议，使得HTML文件可以在全球互联网(World Wide Web，WWW)上进行跨平台的文件交换。 HTML文件为纯文本的文件格式，可以用任何的文本编辑器来编辑，HTML是以标记来描述文件中的多媒体信息

21、。 663.1 什么是HTML 3.1.1 HTML文件 3.1.2 HTML组成的基本组件 673.1 什么是HTML3.1.1 HTML文件 HTML文件的结构是由 HEAD 及 BODY 两大部分所组成，如下图所示。 683.1 什么是HTML3.1.2 HTML组成的基本组件 此标记必须分别置于HTML文件的开头和结尾，其主要的功能是告诉浏览器(Browser)这是HTML文件，且文件是由起始标记开始，至结束标记结束。 此标记为文件的表头区，主要作用是用来描述关于网页的相关信息，例如编码方式、网页的标题等。 网页输出编排的重头戏几乎全部放在与之间，凡在网页上显示的各种文字或图片等，均必

22、须置于这一标记的范围内。 693.1 什么是HTMLHTML文件范例 (page3_1.htm) HTML第一步 How do you do! 执行结果如图所示。703.2 背景设置 在HTML中，可以自行定义网页的背景颜色或以某张图片填满网页的背景，而这些设置必须在 的属性里进行，其用法如下： Body的相关属性说明请见下页表所示。 713.2 背景设置 属 性说 明Text =“颜色值” 设置网页默认的字体颜色，对于没有特别指定颜色的文字，都以此设置为准。颜色值有两种表示方式，第一种为常数表示方式，例如red代表红色，yellow代表黄色等。另一种表示方式为RGB三原色的表示，颜色值是以三

23、组十六进制的RGB数值来表示（十六进制的前导字符为“#”），颜色值的格式如下“#RRGGBB”，例如红色的值为“#FF0000”，绿色的值为“#00FF00”，蓝色的值为“#0000FF”Link =“颜色值” 超级链接文字的字体颜色，默认值为蓝色加下划线的字，颜色的指定方法同上Vlink =“颜色值” 已点击（Click）过的超级链接文字的字体颜色Bgcolor =“颜色值” 指定网页的背景颜色，仅能指定单一颜色（无法指定渐变的颜色）Background =“图形名” 指定背景图将使图片充满整个浏览器的显示区，背景图片的格式以浏览器支持的图形格式为主，通常为.jpg或.gif的图形，目前有许

24、多浏览器已支持Kodak所发表的.png文件格式。若bgcolor与background同时指定，浏览器以background的设置为主723.2 背景设置 说明：浏览器对于每一个标记均有默认值，因此，上述的参数如果都不设置，也不会影响网页正常的显示。理论上不设置背景及字体颜色，反而会加速网页的下载速度，像鼎鼎大名的Yahoo，其网页都是不设置背景颜色。如下图所示： 733.3 文字属性的变化 HTML允许我们对文件中的文字做各种的变化，这些变化就如同使用Word设置文字的属性一样，可以设置文字的大小、颜色、使用的字体名称及字体样式等，详细的使用说明分述如下。743.3 文字属性的变化 3.3

25、.1 设置文字的字体、大小及颜色 3.3.2 文字的样式 3.3.3 空格符 3.3.4 换行 3.3.5 预先编排好的文字 3.3.6 编号及项目符号 753.3 文字属性的变化3.3.1 设置文字的字体、大小及颜色 在HTML中我们可以使用标记设置文字属性，它的语法如下： 显示的文字 HTML当初定义时，将字体由小到大排列，分为17个等级(字体的大小视浏览器的定义而异)，若不设置字体大小，其默认值为3。此外，字体大小也可以以3为基准用相对大小来表示，例如：+1代表4；-2代表1；以此类推。 763.3 文字属性的变化3.3.1 设置文字的字体、大小及颜色 设置文字属性范例(page3_2.

26、htm)如下： 设置文字属性 文字之美 773.3 文字属性的变化3.3.1 设置文字的字体、大小及颜色 上述范例在Microsoft Internet Explorer浏览器中输出的画面如下图所示。 783.3 文字属性的变化3.3.2 文字的样式 HTML 文件提供的文字样式有粗体字、斜体字、及加下划线等3种样式，且样式可混合指定使用，其使用方法如下： 粗体字： 粗体字 斜体字： 斜体字 加下划线：加下划线 粗体字+斜体字： 粗体字+斜体字 粗体字+加下划线： 粗体字+加下划线 文字的样式范例(page3_3.htm)见下页：793.3 文字属性的变化3.3.2 文字的样式 文字的样式 粗

27、体字 斜体字 加下划线 粗体字+斜体字 粗体字+加下划线 斜体字+加下划线 803.3 文字属性的变化3.3.2 文字的样式 在Microsoft Internet Explorer浏览器中，输出的画面如下图所示。 813.3 文字属性的变化3.3.3 空格符 在HTML中，空格符并不具有调整间距的功能(连续出现多个空格符时，仅第一个空格符有效)，若要正确的使用空格符，请改用HTML空格符的编码值()，这样才能完成空格符的功效，例如(page3_4.htm)： 空格符 第一行 前面按了三次空格符改用三个 编码值  823.3 文字属性的变化3.3.3 空格符 执行结果如下图所示 :这里

28、按了3 次空格符，结果只出现一个空格 改用 3 个编码值 则在结果中出现了3个空格。 833.3 文字属性的变化3.3.4 换行 在HTML文件中，换行必须使用标记，范例如下： page3_5.htm 换行 第一行 第二行 我不换行 执行结果如图所示。 843.3 文字属性的变化3.3.5 预先编排好的文字 可以使用标记，将已编辑好的文件置于此标记之中，它就可以按照您所想要的格式输出。 范例page3_6.htm: 预先编排好的文字 现在我想换行就换行， 再也不用看HTML的脸色了。 就算没有标记也没关系 853.3 文字属性的变化3.3.5 预先编排好的文字 执行结果如下图所示: 863.3

29、 文字属性的变化3.3.6 编号及项目符号 1. 编号 在HTML文件中项目编号是以标记并搭配标记表示。项目编号的用法如下： 范例page3_7.htm: 雄壮 编号 威武 男生要 873.3 文字属性的变化3.3.6 编号及项目符号 执行结果如下图所示。 883.3 文字属性的变化3.3.6 编号及项目符号 标记还可以 TYPE 属性设置不同的项目编号，可用的TYPE属性值如下表所示。 属性值说 明“A”项目符号为A, B, C,“a”项目符号为a, b, c, “I”项目符号为I, II, III, “i”项目符号为i, ii, iii, “1”项目符号为1, 2, 3, (默认值)893

30、.3 文字属性的变化3.3.6 编号及项目符号 范例page3_8.htm: 女生要 不同的项目编号 温柔 贤淑 男生要 雄壮 威武903.3 文字属性的变化3.3.6 编号及项目符号 执行结果如下图所示。 913.3 文字属性的变化3.3.6 编号及项目符号 2. 项目符号 项目符号是以特定的字符为编号，在HTML文件中是以标记表示，并须搭配.标记使用。项目符号的用法(范例page3_9.htm)如下： 女生要 项目符号 温柔 贤淑 男生要 雄壮 威武923.3 文字属性的变化3.3.6 编号及项目符号 执行结果如下图所示。 933.4 图文并茂的文件 在HTML文件中，图形文件与HTML文

31、件是分开存放的，通过HTML的 标记，描述欲显示的图形文件名称，即可在浏览器中显示图片。 标记的语法如下： 943.4 图文并茂的文件 3.4.1 指定文件来源 3.4.2 指定图形的宽度及高度 3.4.3 图片边框 3.4.4 图形或文字 3.4.5 对象居中 953.4 图文并茂的文件3.4.1 指定文件来源 在 src=“文件名”中，文件的名称有两种表示方式， 一种是明确的指出图形文件的完整路径，称为绝对路径；另一种是以目前网页所在的目录为基准(作为参考路径) ，称为相对路径。 1. 绝对路径 使用绝对路径显示图片实例的HTML源代码(page3_10.htm)如下： img src=/

32、fansjczs _d/upload10/226/1045269490/5302.jpg 显示图片 963.4 图文并茂的文件3.4.1 指定文件来源 执行结果如下图所示。 973.4 图文并茂的文件3.4.1 指定文件来源 2. 相对路径 相对路径的使用时机，是图形与目前的网页在同一个网站的目录下时使用，例如海河摄影艺术会的首页为index.htm，若首页显示LOGO图形的指定为 表示logo.gif这个图形与index.htm的首页在同一目录下，若则代表logo.gif是放在index.htm所在目录下的子目录images中，至于则是将logo.gif图形置于主文件(Document Ro

33、ot)下的Images子目录中。 983.4 图文并茂的文件3.4.2 指定图形的宽度及高度 在 标记中，也可以指定图形的宽度和高度。通常来说，我们并不用特别设置这两个属性，因为浏览器会以图形的宽度和高度自动显示，除非为了版面编排的问题，才会利用宽、高两个属性来调整图形显示的大小。另外，图片的宽度和高度也可用百分比%来表示，例如：width=50%，height=50%等。 说明：在Internet Explorer 6.0中宽度及高度，是指浏览器的宽度及高度的百分比。因此，width=50%在800600分辨率中，宽度相当于是400 pixel。993.4 图文并茂的文件3.4.3 图片边框

34、 在IE中所显示图形文件。其默认值是没有边框的，若为了美观或显眼起见，您可以利用Border属性为图形加上边框，并可指定边框的大小(粗细)。图形文件边框设置为默认值的HTML源代码(page3_11.htm)如下： 图片边框 !- body background-color: #C8E9FF; - 1003.4 图文并茂的文件3.4.3 图片边框 画面的显示效果如下图所示。1013.4 图文并茂的文件3.4.3 图片边框 将该图形文件边框设置为border=1，则该范例的HTML源代码变为(page3_12.htm) ： 图片边框 !- body background-color: #C8E9

35、FF; - 1023.4 图文并茂的文件3.4.3 图片边框 画面的显示效果如下图所示。加了边框之后，可突显Banner范围的视觉效果 1033.4 图文并茂的文件3.4.4 图形或文字 图形是网络带宽的杀手之一，为了节省网络的带宽，HTML的 标记也可以设置为图形代替文字。当用户设置浏览器只显示文字时，图形的部分即会以这些文字来展现。设置文字的属性为 alt，其用法见范例(page3_13.htm) 。 img src=Windows xp.gif alt=Windows xp border=1 显示图形或文字 1043.4 图文并茂的文件3.4.4 图形或文字 当浏览器取消显示图片时，画面

36、会自动以 alt 指定的文字输出，如下图所示。 1053.4 图文并茂的文件3.4.4 图形或文字 1. 如何取消显示图形 点选IE浏览器窗口中的“工具/Internet选项”命令，选择“高级”选项卡，取消“显示图片”复选框，如下图所示。 取消“显示图片”复选框 1063.4 图文并茂的文件3.4.4 图形或文字 2. 显示图形或文字 在HTML中，标记还提供图形与文字如何对齐的属性 Align。Align属性的用法见范例(page3_14.htm) 。 显示图形或文字 欢迎摄影爱好者参观 欢迎摄影爱好者参观 欢迎摄影爱好者参观 欢迎摄影爱好者参观 1073.4 图文并茂的文件3.4.4 图形

37、或文字 说明：标记在HTML中是一个非常特殊的标记，因为它只有起始标记而没有结束标记。所以，请注意！在HTML文件中不要加入这个标记。 执行结果 如图所示1083.4 图文并茂的文件3.4.5 对象居中 不论是文字对象或是图形对象，默认值都是靠左显示，但是HTML也提供对象居中的显示方式，其标记为，在与之间的任何对象均会被居中编排输出。例如： 文字居中 或 1093.5 超级链接 超级链接的概念: 所谓超级链接 (Hyperlink) ，就是当用鼠标点选文字、图片时，可以链接文字或图片到其他网页的功能(可跨网站链接) ，而超级链接又可分为文字超级链接和图片超级链接。1103.5 超级链接 3.

38、5.1 文字超级链接 3.5.2 图片超级链接 3.5.3 页内超级链接 3.5.4 超级链接电子邮件账号 1113.5 超级链接3.5.1 文字超级链接 如果要让网页中的某一段文字成为超级链接，只要在链接标题前后分别加入及 两个标记就可以了。范例(page3_15.htm)如下 ： 超链接 找工作、找人才，请单击 hlfjob人才求职网 1123.5 超级链接3.5.1 文字超级链接 结果显示如图所示。 当用户点选“hlfjob人才求职网”的超级链接时，将超级链接至。 1133.5 超级链接3.5.2 图片超级链接 图片超级链接的语法，大致上与文字超级链接相同，只是链接标题的部分改为图片。插

39、入图片的方式是在与之间加入 ，范例(page3_16.htm)如下 ： 图片超链接 hlfjob人才求 职网 1143.5 超级链接3.5.2 图片超级链接 Internet Explorer浏览器中的显示效果如下图所示。 当用户点选“02. bmp”图片或“hlfjob人才求职网”文字的超级链接时，将超级链接至。 1153.5 超级链接3.5.3 页内超级链接 除了文字与图形的链接以外，超级链接也可以发生在同一个网页之中，也就是文件内部的自我链接，此种链接方式比较适合长篇幅的网页。通常网页设计师会在页首标明网页的主题(Subject)，通过点选主题的方式，让光标直接移到主题所指的内容部分，减

40、少用户拖动滚动条或点击滚动条的次数。 下面是一篇HTML电子图书的网页，在“USB 接口应用指南”题目下方为同一网页内容中的所有主题，见下页图示。 说明：该范例(page3_17.htm) HTML源代码内容太多，在此略去。1163.5 超级链接3.5.3 页内超级链接 网页内超级链接的HTML语法，与外部超级链接的用法是相同的，惟一不同的是链接的标题若为同一网页，则必须使用页内链接的方式来处理，其页内链接的表示方式，是使用“#” 字符加上标记名称，例如： 一、让电脑支持 USB 当我们点选“一、让电脑支持 USB”的主题后，画面自动移至该主题上，如下页图所示。1173.5 超级链接3.5.3

41、 页内超级链接 为了配合上述的页内链接，此主题须加上页内标记名称。如此，当用户点选该主题时，浏览器才能识别要将页面移往何处。页内标记的用法如下： 一、让 电脑支持 USB1183.5 超级链接3.5.4 超级链接电子邮件账号 超级链接也可指定与用户计算机默认的电子邮件软件进行链接，以利于与电子邮件集成。例如在网页的页尾通常会摆放网站的服务信箱，如下图所示。 网站服务信箱1193.5 超级链接3.5.4 超级链接电子邮件账号 当用户点选该信箱时，会自动启动用户计算机内部默认的电子邮件软件(例如Outlook、Outlook Express等)，并将其E-mail地址放在收件人位置，如下图所示。

42、E-mail地址1203.5 超级链接3.5.4 超级链接电子邮件账号 链接电子邮件是使用“mailto:”，后面加上电子邮件账号而成；要链接电子邮件软件时，若有参数要自动带至电子邮件软件时 (如电子邮件主题)，则可由URL带参数来完成。范例(page3_19.htm)如下 ： 超级链接电子邮件 tjhldgz 1213.5 超级链接3.5.4 超级链接电子邮件账号 在Internet Explorer中浏览的效果如下图所示。 当点选邮件账号后，Outlook Express将自动被启动，且“主题”已自动填入“建议”等文字，如下页图所示。 1223.5 超级链接3.5.4 超级链接电子邮件账号

43、自动填入“建议”等文字 1233.5 超级链接3.5.4 超级链接电子邮件账号 电子邮件软件的相关参数很多，例如：抄送(CC)、主题(Subject)及信件内容等，都可以使用URL指定，要注意的是参数与参数之间须以“&”符号隔开，范例的HTML源代码(page3_20.htm)如下： 超级链接电子邮件 tjhldgz 1243.5 超级链接3.5.4 超级链接电子邮件账号 范例 (page3_20.htm)在Internet Explorer中运行效果如下图所示。 当用户点选后，在Outlook Express自动被启动时，相关的字段已自动填入适当的值，如下页图所示。1253.5 超级链接3.

44、5.4 超级链接电子邮件账号相关的字段已自动填入适当的值1263.6 表格 在HTML输出编排的标记当中，并没有指定显示位置的功能(例如文字要显示在x坐标等于5，y坐标等于100处)，因此对于复杂的版面就无法精确地编辑，此时只好通过表格来定位。 在HTML中表格可以用来定位。在HTML中表格的起始标记为，结束标记为，完整的标记语法如下： ： 实际上，表格又可分为列(Column)和行(Row)。竖的称为Column，横的我们称为Row。1273.6 表格 3.6.1 行与列 3.6.2 行与列的背景颜色 3.6.3 表格边框的颜色 3.6.4 表格间距 3.6.5 合并单元格 1283.6 表

45、格3.6.1 行与列 行的标记.必须配合表格使用，与之间代表一行。一般在编写表格时，必须先写行，然后再写列于其中，范例 (page3_21.htm)如下： 第二行，第一列 第二行，第二列 HTML的表格 第二行，第三列 第三行，第一列 第三行，第二列 第一行，第一列 第三行，第三列 第一行，第二列 第一行，第三列 这是一个3行3列(33)的表格 1293.6 表格3.6.1 行与列 利用Internet Explorer来观看的结果如下图所示。 说明：tr 是table row的意思，td 是table data的意思。1303.6 表格3.6.2 行与列的背景颜色 在IE浏览器中， 及 标记

46、均可以指定背景颜色，使用的原则是同一行的背景相同则在 中指定。例如： . . 若每一列的颜色均不相同，则可以在中指定颜色。例如： . . 1313.6 表格3.6.3 表格边框的颜色 HTML表格的边框(Border)若未指定，其默认值为0，也即无边框。要显示出表格，Border 的值必须大于0，至于边框的颜色可以使用 BorderColor 属性来指定，其用法范例 (page3_22.htm)如下： 第二行，第一列 第二行，第二列 表格边框的颜色 第二行，第三列 第三行，第一列 第三行，第二列 第一行，第一列 第三行，第三列 第一行，第二列 第一行，第三列 1323.6 表格3.6.3 表格

47、边框的颜色 利用浏览器Internet Explorer观看时，其显示的效果如下图所示。 1333.6 表格3.6.4 表格间距 在HTML中，表格间距有两个选项，一个是定义表格间的距离(CellSpacing)，默认值为2；另一个是定义表格内的字符与表格边界本身的距离(CellPadding)，默认值为1，未设置CellSpacing和CellPadding时的效果如图所示。 1343.6 表格3.6.4 表格间距 当设置cellspacing=“5”和cellpadding=“10”时的效果如下页图所示。1353.6 表格3.6.4 表格间距 若我们将上述两个属性都改为“0”，则其显示效果

48、如下图所示。1363.6 表格3.6.5 合并单元格 虽然表格是由列 (Column) 和行(Row) 所组成的，但却不一定是固定的个数，有时候我们必须使用合并表格的功能，合并表格又可分为：行合并与列合并两种，合并的原则为由上到下、由左到右。 1. 合并列 假如某一列横跨3个列 (占3个列的空间)，则可以在 标记的属性 colspan=n，指定占用的列数，范例 (page3_25.htm) HTML代码见下页： 1373.6 表格3.6.5 合并单元格 合并列 第一行，第一列 第一行，第二列 第一行，第三列 第一行，第四列 第二行，本列占3列 第二行，第四列 1383.6 表格3.6.5 合并

49、单元格 利用Internet Explorer来观看的结果如下图所示。 colspan=3 ,本列占3列 1393.6 表格3.6.5 合并单元格 2. 合并行 可以在 标记的属性rowspan=n，指定占用的行数，范例 (page3_26.htm) HTML代码如下： 合并行 第三行，第二列 第三行，第三列 第三行，第四列 第一行，本列纵跨3行 第四行，第一列 第一行，第二列 第四行，第二列 第一行，第三列 第四行，第三列 第一行，第四列 第四行，第四列 第二行，第二列 第二行，第三列 第二行，第四列1403.6 表格3.6.5 合并单元格 执行结果如图3.32所示。rowspan=3 ,本

50、列纵跨3行1413.7 段落 HTML是当初科学家们用来在网络上发表研究成果的工具，而研究成果不外乎是一些技术性的文件，因此HTML在设计之初即有段落标记的定义，段落标记是以 开始，而以 为结束标记。 1423.7 段落 范例(page3_27.htm)如下 ： html段落 让电脑支持 USB 现在的大部分电脑带有 USB 端口。一些老式主板和机箱中也有 USB 连接器，但可能不起作用。所以一定要检查主板或电脑操作手册，以便查出怎样使 USB 工作。在老式电脑上，可以在启动时查看电脑的 BIOS，以确定它是否支持 USB。为了使 USB 键盘或鼠标在DOS 状态下工作，应该选择 USB Le

51、gacy 支持选项(如果有该选项的话)。如果该主板不能接入 USB 设备，你就应该买一块 PCI 卡，以便将 USB 插槽添加到老式电脑中。 让 Windows 系统支持 USB 并非所有的 Windows 版本都支持 USB。Windows98 对很多外设都提供了全面的 USB支持。Windows95 的零售版则不支持 USB，只有后来与 PC 捆绑销售的 Windows95 版本才支持 USB。你可以看看你的 Windows95 版本信息(可右击“我的电脑”图标并选择“属性”)，如果版本号是以 B 或者 C 结尾，则你的这个Windows 95 只对有限范围的设备提供 USB 支持。 14

52、33.7 段落 显示的效果如下图所示。 在段落中也可以指定段落对齐方式，如靠左(Left)、靠右(Right)以及居中(Center)等，其用法如下： 段落文字 说明：使用段落标记，浏览器会自动在段落后面插入一空白行(这就是段落的定义)。 1443.8 水平线 标记是提供HTML画水平线的功能，并可指定水平线的宽度、大小等。其语法如下： 其中“宽度”可指定水平线的点数，也可指定显示屏幕宽度的百分比。例如： 显示Size为1，宽度为浏览 器画面80%的水平线 显示Size为1，宽度为480 pixel的水平线 1453.8 水平线 标记的用法范例 (page3_28.htm) HTML代码如下：

53、 水平线 1463.8 水平线 利用Internet Explorer来观看结果如下图所示。 说明：宽度若用屏幕宽度的百分比显示，将随屏幕宽度的变化而变化。1473.8 水平线 在实际应用上，通常是用水平线将文本与页尾分隔开，并在水平线下方显示版权声明或服务信箱等，请参考下图。 1483.9 什么是CSS CSS 是Cascading Style Sheet的缩写，中文译为“层叠样式表”。CSS样式表可以定义网页相关组件的各种属性变化，例如文字背景、字体、字体大小、对齐方式等，它也可以创建一个共同的样式表，让网站的相关网页直接套用，完全跳脱HTML语法及输出编排上的束缚。让网页更具视觉效果，并

54、可大幅度节省维护的时间。 在HTML4.0版以后，每一个HTML的标记(Tag)都有一个Class属性，Class的值须套用CSS的定义，方可做出各种精确的排版及样式指定的功能，令HTML输出的画面变得非常的精美及细致。 1493.9 什么是CSS 3.9.1 CSS类型 3.9.2 CSS在超级链接中的运用 3.9.3 实际范例 1503.9 什么是CSS3.9.1 CSS类型 在HTML网页中，CSS有下列3种不同的使用类型： 内嵌CSS 将CSS的定义写在HTML源代码标记之间，样式表的有效范围仅为此份HTML文件。 局部套用CSS 此类型的CSS与特定的HTML标记合并使用，它与内嵌C

55、SS最大的不同是局部套用仅会影响套用该段的样式，而不会影响其他非套用的部分。 外部链接CSS 外部链接CSS是将样式表以单独的文件存放，令网站的所有网页均可套用此样式，以降低维护的人力成本，并可让网站拥有一致性的风格。 1513.9 什么是CSS3.9.1 CSS类型 1. 内嵌CSS 范例 (page3_30.htm) HTML代码如下： CSS范例-01 CSS让网页美丽、大方、又好维护！ 1523.9 什么是CSS3.9.1 CSS类型 在浏览器的显示效果如下图所示。 修改样式表style1，将字体大小改为9点，并将颜色改为蓝色，显示效果如下图所示。 1533.9 什么是CSS3.9.1

56、 CSS类型 2. 局部套用CSS 不同的浏览器对HTML标记的输出编排格式均不相同，通过局部套用CSS 的功能，可以重新定义HTML标记的输出样式。例如HTML的段落标记，利用“局部套用CSS”的定义，可以让标记按照CSS的定义输出。 范例 (page3_32.htm) HTML代码请见下页。1543.9 什么是CSS3.9.1 CSS类型 CSS范例-03 CSS让网页美丽、大方、又好维护！ 1553.9 什么是CSS3.9.1 CSS类型 执行结果如下图所示。 若要同时定义多个HTML标记的样式，例如与标记，则可以使用范例 (page3_33.htm) 的语法。其HTML代码请见下页。

57、1563.9 什么是CSS3.9.1 CSS类型 CSS范例-04 CSS让网页美丽、大方、又好维护！ 预先编排的输出格式，也可以套用CSS 套用的方法请见源代码(css-04.htm)。 1573.9 什么是CSS3.9.1 CSS类型 执行结果如下图所示。 说明：样式名称若是HTML的标记，请勿在样式名称前加上“.”。1583.9 什么是CSS3.9.1 CSS类型 3. 外部链接CSS 也可以使用记事本等编辑样式表，并另外以一个新的文件存放 (例如common.css) ，则使用到此样式表的HTML 文件均可以外部链接的方式引用。外部链接的HTML语法如下： 其中标记为外部链接，rel参

58、数必须指定链接的文件类型，此处为样式表“stylesheet”，样式表的文件由href属性中指定(此例为common.css)。引用方式请参考范例 (page3_34.htm) ，其HTML代码请见下页。1593.9 什么是CSS3.9.1 CSS类型 CSS范例-05 CSS让网页美丽、大方、又好维护！ 预先编排的输出格式，也可以套用外部的CSS文件， 套用的方法请见源代码(css-05.htm)。 1603.9 什么是CSS3.9.1 CSS类型 执行结果如下图所示。1613.9 什么是CSS3.9.2 CSS在超级链接中的运用 CSS除可重新定义HTML标记以外，对于HTML的超级链接标

59、记提供更多的选项。 ：1623.9 什么是CSS3.9.2 CSS在超级链接的运用 上述的语法中，link为指定超级链接的样式；visited定义已点选过的超级链接样式；active则代表动作中的超级链接样式，hover则为鼠标光标移至超级链接时的样式。请参考下面的写法： a:link color:#0000ff; font-style:normal; cursor:hand; text-decoration:normal a:visited color:#ff0000; font-style:normal; text-decoration:normal a:active color:#000

60、0ff; font-style:normal; text-decoration:normal a:hover color:#cc0000; font-style:bold; text-decoration:none CSS范例-06 超级链接测试 1633.9 什么是CSS3.9.3 实际范例 1. CSS入门范例 下面是铁道出版社出书的HTML网页界面。1643.9 什么是CSS3.9.3 实际范例 该网页HTML源代码(page3_35.htm)如下(部分) ： ：1653.9 什么是CSS3.9.3 实际范例 其中.small代表定义一个称为small的样式，此样式的字体(font-fa