c课件第11章网站建设与网页制作.ppt

1、1第11章 网站建设与网页制作11.1 11.1 网站的创建复制与发布网站的创建复制与发布 11.2 11.2 HTMLHTML和和XHTML XHTML 11.3 11.3 页面定位与布局方法页面定位与布局方法 11.4 11.4 母版页母版页 11.5 11.5 CSSCSS样式设计样式设计 11.6 11.6 使用使用JavaScriptJavaScript创建网页特效创建网页特效 22 本章教学目的本章教学目的介绍介绍HTMLHTML标记和标记和XHTMLXHTML标记的用法及网页制作方法。标记的用法及网页制作方法。本章教学要求本章教学要求（1 1）掌握基本）掌握基本HTMLHTML标

2、记和标记和XHTMLXHTML标记的用法；标记的用法；（2 2）掌握页面布局及）掌握页面布局及CSSCSS的用法；的用法；（3 3）掌握母版页与内容页的设计方法；）掌握母版页与内容页的设计方法；（4 4）了解其他内容。）了解其他内容。33网站开发主要分两方面网站开发主要分两方面:u WebWeb页面设计页面设计 设计在客户端呈现的能被浏览器解析的界面，即平时所设计在客户端呈现的能被浏览器解析的界面，即平时所说的网页制作，一般使用说的网页制作，一般使用HTML(HTML(超文本标记语言超文本标记语言)实现。实现。u Web Web逻辑功能设计逻辑功能设计 指实现内部逻辑功能，早期使用脚本语言实现

3、，如指实现内部逻辑功能，早期使用脚本语言实现，如JavaScriptJavaScript、VBScriptVBScript等，但是脚本语言功能较弱，实现复等，但是脚本语言功能较弱，实现复杂。杂。4411.1 网站的创建 VS2005VS2005提供了三种创建站点的位置类型提供了三种创建站点的位置类型:u文件系统文件系统uFTPFTPuHTTPHTTP 三种类型中，一般使用文件系统。它可在本机任何一个位置三种类型中，一般使用文件系统。它可在本机任何一个位置创建网站，也可直接将创建的网站从一个文件夹移动或复制创建网站，也可直接将创建的网站从一个文件夹移动或复制到另一个文件夹，或者直接复制到另一台机

4、器中。到另一个文件夹，或者直接复制到另一台机器中。5511.211.2 HTMLHTML和和XHTMLXHTMLu 在在VS2005VS2005中网页默认使用的目标架构为：中网页默认使用的目标架构为：XHTML 1.0 TransitionalXHTML 1.0 TransitionaluXHTMLXHTML是在是在HTMLHTML（超文本标记语言）基础上为适应目前流行（超文本标记语言）基础上为适应目前流行的的XMLXML（可扩展标记语言）而发展的新一代（可扩展标记语言）而发展的新一代WebWeb标记语言。标记语言。uW3CW3C在在20002000年年1 1月首次提出月首次提出XHTMLXH

5、TML时，目标是将时，目标是将WebWeb翻译为翻译为XMLXML。XHTML 1.0XHTML 1.0是作为一种帮助是作为一种帮助WebWeb开发人员和创作工具制造商开发人员和创作工具制造商放弃传统放弃传统HTMLHTML标记语言，迁移到一个基于标记语言，迁移到一个基于XMLXML的新的的新的HTML-HTML-XMLXML的混合体而开发的，因此叫做的混合体而开发的，因此叫做XHTML 1.0 TransitionalXHTML 1.0 Transitional。6611.211.2 HTMLHTML和和XHTMLXHTML(续续)从使用角度说明从使用角度说明HTMLHTML与与XHTMLX

6、HTML的不同：的不同：u大小写大小写 HTML HTML不区分大小写，元素和属性名称可以是大写、小写或大小写混不区分大小写，元素和属性名称可以是大写、小写或大小写混合；而合；而XHTMLXHTML要求所有元素和属性名称必须是小写的，而属性值则大小要求所有元素和属性名称必须是小写的，而属性值则大小写均可。写均可。u标记嵌套标记嵌套 在在HTMLHTML中使用不正确的嵌套，一样可以在很多浏览器中使用；而中使用不正确的嵌套，一样可以在很多浏览器中使用；而XHTMLXHTML则要求嵌套必须完全正确。则要求嵌套必须完全正确。u有否结束标记有否结束标记 在在HTMLHTML中有些标记是可以没有结束标记；

7、而中有些标记是可以没有结束标记；而XHTMLXHTML要求所有标记都要求所有标记都必须有结束标记必须有结束标记 。77u引号引号 HTML HTML中的属性值可以用引号引起来，也可以不使用引号；但中的属性值可以用引号引起来，也可以不使用引号；但XHTMLXHTML中要求所有属性值都必须加引号。中要求所有属性值都必须加引号。u样式样式 如果不使用样式表，如果不使用样式表，HTMLHTML中的每一个样式都可以直接使用属性名中的每一个样式都可以直接使用属性名=属性值的方法设置样式；但是在属性值的方法设置样式；但是在XHTMLXHTML中，如果不样式表，则必须通中，如果不样式表，则必须通过过Style

8、Style属性来设置。属性来设置。8811.2.1 HTML11.2.1 HTML和和XHTMLXHTML的格式与标记的格式与标记u基本格式：基本格式：HTML HTML文档文档=首部（首部（headhead）+主体（主体（bodybody）u首部：由标记首部：由标记和和之间的内容构成。用于设置之间的内容构成。用于设置HTMLHTML文文件的标题、作者等信息（浏览器中不显示）。首部中可包含标题标件的标题、作者等信息（浏览器中不显示）。首部中可包含标题标记符记符 title title、样式标记符、样式标记符 style style、脚本语言标记符、脚本语言标记符 script script等。

9、等。u主体：由标记主体：由标记和和之间的内容构成。网页中的所有内之间的内容构成。网页中的所有内容，包括文字、图形、链接以及其他页面元素都包含在该标记符内。容，包括文字、图形、链接以及其他页面元素都包含在该标记符内。9911.2.1 HTML11.2.1 HTML和和XHTMLXHTML的格式与标记的格式与标记(续续)u HTMLHTML文档的一般形式为文档的一般形式为:文档标题文档标题 这是这是xhtmlxhtml文档的主体部分文档的主体部分 u 在在HTMLHTML文档中，标记和文档中，标记和/标记都是配对使用的。标记都是配对使用的。101011.2.1 HTML11.2.1 HTML和和X

10、HTMLXHTML的格式与标记的格式与标记(续续)中可以包含属性，一般格式为：中可以包含属性，一般格式为：标记标记 属性属性1=1=值值1 1 属性属性2=2=值值2 2 例如：例如：标记之间必须使用空格隔开，属性名和属性值之间用等号隔开，等号标记之间必须使用空格隔开，属性名和属性值之间用等号隔开，等号左边是属性名称，右边是属性值。左边是属性名称，右边是属性值。例例11-4:HTML11-4:HTML标记示例，主要代码如下标记示例，主要代码如下:111111.2.1 11.2.1 HTMLHTML和和XHTMLXHTML的格式与标记的格式与标记(续续)body color:Blue;style

11、=text-align:center 一个很有意义的计算题！一个很有意义的计算题！!-div style=text-align:left 如果令如果令A-Z A-Z 分别等于百分之分别等于百分之1-261-26，那么，那么 Hard work Hard work（努力工作）（努力工作）H+A+R+D+W+O+R+K=H+A+R+D+W+O+R+K=8+1+18+4+23+15+18+11=98%8+1+18+4+23+15+18+11=98%Knowledge Knowledge（知识）（知识）    K+N+O+W+L+E+D+G+E &nb

12、sp;K+N+O+W+L+E+D+G+E=11+14+15+23+12+5+4+7+5=96%=11+14+15+23+12+5+4+7+5=96%121211.2.1 HTML11.2.1 HTML和和XHTMLXHTML的格式与标记的格式与标记(续续)LoveLove（爱情）（爱情）   L+O+V+E=12+15+22+5=   L+O+V+E=12+15+22+5=54%54%Luck Luck（好运）（好运）   L+U+C+K=   L+U+C+K=12+21+3

13、+11=47%12+21+3+11=47%（这些我们通常认为重要的东西往往并不是最重要（这些我们通常认为重要的东西往往并不是最重要的）的）style=text-align:left 什么能使得生活变得圆满？什么能使得生活变得圆满？是是MoneyMoney（金钱）吗（金钱）吗? ? 不不!M+O+N+E+Y=13+15+14+5+25=72%M+O+N+E+Y=13+15+14+5+25=72%131311.2.1 HTML11.2.1 HTML和和XHTMLXHTML的格式与标记的格式与标记(续续)是是LeadershipLeadership（领导能力）吗（领导能力）吗?&

14、nbsp;? 不不!L+E+A+D+E+R+S+H+I+P=12+5+1+4+5+18+19+9+16=89%L+E+A+D+E+R+S+H+I+P=12+5+1+4+5+18+19+9+16=89%那么，什么能使生活变成那么，什么能使生活变成100%100%的圆满呢？的圆满呢？u 标记标记：设置文件中的标题。与其相似的有：设置文件中的标题。与其相似的有到到，其中，其中表示最大表示最大标题，标题，表示最小标题。其中的表示最小标题。其中的text-aligntext-align属性设置标题的水平对齐方式。属性设置标题的水平对齐方式。141411.2.1 HTML11.2.1 HTML和

15、和XHTMLXHTML的格式与标记的格式与标记(续续)u URLURL（统一资源定位符）用于定位（统一资源定位符）用于定位WebWeb上的文件信息，有绝上的文件信息，有绝对和相对之分。对和相对之分。1.1.绝对绝对URLURL：指完整的资源地址。：指完整的资源地址。具体形式：协议名称具体形式：协议名称:/:/计算机域名计算机域名/路径和文件名。路径和文件名。如：如：http:/ 表示路径和文表示路径和文件名在指定外部件名在指定外部InternetInternet资源时一般使用绝对资源时一般使用绝对URLURL。2.2.相对相对URLURL：指资源相对于当前页面的路径，如：指资源相对于当前页面的

16、路径，如mage/smile.gifmage/smile.gif 表示当前目录下的表示当前目录下的imageimage子目录下的子目录下的smile.gifsmile.gif文件。文件。151511.2.1 HTML11.2.1 HTML和和XHTMLXHTML的格式与标记的格式与标记(续续)例例11-511-5：设计两个静态页面，第一个页面链接到第二个页：设计两个静态页面，第一个页面链接到第二个页面。面。161611.3 11.3 页面定位与布局方法页面定位与布局方法 网页中常用的布局方法有两种：网页中常用的布局方法有两种：u利用表格进行布局利用表格进行布局u利用层进行布局利用层进行布局 两

17、种布局方法各有优缺点，设计者可以根据实际情况选择一种或同时两种布局方法各有优缺点，设计者可以根据实际情况选择一种或同时使用，而使用，而页面中的元素定位则是利用页面中的元素定位则是利用positionposition样式属性样式属性。171711.3.1 11.3.1 表格表格 表格除了可直接在单元格内显示内容，还可表格除了可直接在单元格内显示内容，还可将整个页面划分为若干个将整个页面划分为若干个独立的部分独立的部分，精确地定位文本、图像或其它元素。表格由行和列组成，精确地定位文本、图像或其它元素。表格由行和列组成，行列交叉构成了单元格。如下面代码对应右边的图：行列交叉构成了单元格。如下面代码对

18、应右边的图：第一行第一个单元格第一行第一个单元格 第一行第二个单元格第一行第二个单元格 在这段代码中，在这段代码中，每一个每一个作为一行，每一个作为一行，每一个作为该行中的一个单元格。作为该行中的一个单元格。181811.3.1 11.3.1 表格（续）表格（续）例例11-611-6：使用可视化界面设计表格。：使用可视化界面设计表格。191911.3.1 11.3.1 表格（续）表格（续）修改表格修改表格在在VS2005VS2005中非规则表格可以通过菜单和代码两种方式操作。中非规则表格可以通过菜单和代码两种方式操作。例例 11-7 11-7：效果：效果：202011.3.2 11.3.2 利

19、用表格进行页面布局利用表格进行页面布局VS2005VS2005中的表格布局模板简化了页面布局的制作过程。中的表格布局模板简化了页面布局的制作过程。例例11-811-8：利用表格模板进行页面布局：利用表格模板进行页面布局 212111.3.3 11.3.3 页内框架页内框架 网页制作中一个页面内的一部分区域中显示另一页面的内容，网页制作中一个页面内的一部分区域中显示另一页面的内容，可以利用页内框架完成。可以利用页内框架完成。页内框架只能在源视图下用直接输入代码的方式创建。常用格页内框架只能在源视图下用直接输入代码的方式创建。常用格式为：式为：不支持页内框架浏览器显示的内容不支持页内框架浏览器显示

20、的内容 例例11-911-9：在上例：在上例MyTable2.htmMyTable2.htm中使用页内框架制作页面。中使用页内框架制作页面。222211.3.3 11.3.3 页内框架（续）页内框架（续）target target 属性是控制超链接的目标文件如何显示的。属性是控制超链接的目标文件如何显示的。A A标记的标记的targettarget属性的特殊值：属性的特殊值：u _top_top：表示目标页面将占用整个浏览器窗口：表示目标页面将占用整个浏览器窗口 u _self _self：表示在当前超链接所在的框架中显示目标页面：表示在当前超链接所在的框架中显示目标页面u _blank _b

21、lank：表示在一个新的浏览器窗口中显示页面：表示在一个新的浏览器窗口中显示页面 u _parent _parent：表示将目标页面装入当前框架的父框架中，但是有的浏览器：表示将目标页面装入当前框架的父框架中，但是有的浏览器将其解释为将其解释为_top _top u 自定义自定义url url：指出目标页的路径：指出目标页的路径 232311.3.4 11.3.4 层的使用与布局方法层的使用与布局方法 divdiv标记标记是一个是一个区块级的区块级的HTMLHTML标记标记，在该标记之间可以添加段落、表格、，在该标记之间可以添加段落、表格、图片等内容。它的基本功能就是将一些标记元素组织起来，应

22、用图片等内容。它的基本功能就是将一些标记元素组织起来，应用divdiv标标记的属性为这些标记元素定义统一的样式，也可以为某些不支持特定属记的属性为这些标记元素定义统一的样式，也可以为某些不支持特定属性的标记元素应用该属性样式。利用性的标记元素应用该属性样式。利用JavascriptJavascript技术，可使同一层中所技术，可使同一层中所有元素一起显示、移动或隐藏。有元素一起显示、移动或隐藏。例例11-10 11-10：divdiv标记的基本用法。标记的基本用法。242411.3.4 11.3.4 层的使用与布局方法（续）层的使用与布局方法（续）uz-index属性 指当两个或多个元素占据同

23、一区域时应以什么样的顺序显示元素。利指当两个或多个元素占据同一区域时应以什么样的顺序显示元素。利 用它可以实现不同内容的重叠显示效果。其值大的层显示时位于上用它可以实现不同内容的重叠显示效果。其值大的层显示时位于上方，值小的位于下方，该值可正可负。若不定义则默认为第方，值小的位于下方，该值可正可负。若不定义则默认为第0 0层。层。uposition属性 指将层放在页面的位置。它有三个值：指将层放在页面的位置。它有三个值：absoluteabsolute、relativerelative和和staticstatic。若不指定则默认为若不指定则默认为staticstatic（正常流中的位置）。（正

24、常流中的位置）。absolute absolute指指相对于父容器左上角的的绝对坐标位置，位置，与屏幕分辨率无关；relative relative则指相对于父容器中流的起始位置，不一定是左上角。父容则指相对于父容器中流的起始位置，不一定是左上角。父容器指包含它的最近的一级，可以是器指包含它的最近的一级，可以是tabletable，也可以是，也可以是divdiv。例例 11-11 11-11：层的重叠显示效果。：层的重叠显示效果。252511.4 11.4 母版页母版页 母版页（母版页（Master PageMaster Page）的扩展名为）的扩展名为“.master.master”，它相当

25、，它相当于网页的模板。母版页除了留给其它网页修改的部分用专于网页的模板。母版页除了留给其它网页修改的部分用专门的门的ContentPlaceHolderContentPlaceHolder控件预留出来以外，其它部分与控件预留出来以外，其它部分与一般网页的设计没有什么区别。一般网页的设计没有什么区别。母版页的内容无法直接在浏览器中察看，只有通过其它页母版页的内容无法直接在浏览器中察看，只有通过其它页面的引用才可以显示。面的引用才可以显示。在其他网页中，只要引用了母版页，母版页的页面就可以在其他网页中，只要引用了母版页，母版页的页面就可以自动被解析出来，但是设计者只可以修改引用的母版页中自动被解析

26、出来，但是设计者只可以修改引用的母版页中预留的部分，而其它部分则不能修改，这样就可以使多个预留的部分，而其它部分则不能修改，这样就可以使多个页面的风格保持一致，给网页设计带来了很大的方便。页面的风格保持一致，给网页设计带来了很大的方便。262611.4 11.4 母版页（续）母版页（续）例例11-12 11-12：利用母版页建立页面外观风格一致的网页。：利用母版页建立页面外观风格一致的网页。272711.5 CSS11.5 CSS样式设计样式设计 层叠样式表简称层叠样式表简称CSSCSS（Cascading Style SheetsCascading Style Sheets），它），它可以控

27、制网页中可以控制网页中一个或多个元素的外观。一个或多个元素的外观。由于改变样式表中任何一个元素的显示样式，由于改变样式表中任何一个元素的显示样式，网页中所有与该样式级联的元素都会自动发生改变，因此使用网页中所有与该样式级联的元素都会自动发生改变，因此使用样式表样式表可以减少很多具有相同外观元素的重复设置工作可以减少很多具有相同外观元素的重复设置工作，从而给网页的设计，从而给网页的设计和维护带来了很大的方便。和维护带来了很大的方便。u 设置样式的方法有两种，一种是在代码编辑方式下直接使用设置样式的方法有两种，一种是在代码编辑方式下直接使用stylestyle设置设置样式，另一种是使用可视化界面。

28、样式，另一种是使用可视化界面。282811.5.1 11.5.1 样式与样式表（续）样式与样式表（续）例例11-13 11-13：使用：使用stylestyle设置样式设置样式 ，部分代码如下：，部分代码如下：第第1111章网站建设与网页制作章网站建设与网页制作 h2 style=font-size:20px;11.1 color:Blue;11.1 网站的创建复制与发布网站的创建复制与发布292911.5.1 11.5.1 样式与样式表（续）样式与样式表（续）上面的方法设置的样式称为上面的方法设置的样式称为内联式样式设置。式设置。优点：直观、方便。优点：直观、方便。缺点：若不喜欢某种样式，只

29、好不厌其烦的重新逐一修改每一个元素的样式。缺点：若不喜欢某种样式，只好不厌其烦的重新逐一修改每一个元素的样式。为避免一个个重复修改的麻烦，可以使用下面介绍的为避免一个个重复修改的麻烦，可以使用下面介绍的直接嵌入式样直接嵌入式样式设式设计。计。部分代码如下：部分代码如下：样式引用示例样式引用示例 h1font-size:40px;color:Red;h1font-size:40px;color:Red;h2font-size:20px;color:Blue;h2font-size:20px;color:Blue;303011.5.1 11.5.1 样式与样式表（续）样式与样式表（续）第第1111

30、章网站建设与网页制作章网站建设与网页制作 11.1 11.1 网站的创建复制与发布网站的创建复制与发布 11.2 11.2 常用常用HTMLHTML标记标记 第第1212章章ASP.NET WebASP.NET Web服务器控件服务器控件 12.1 12.1 标准控件标准控件 12.2 12.2 数据操作控件数据操作控件 与内联式样式不同的是，直接嵌入式样式将所有样式集中放了与内联式样式不同的是，直接嵌入式样式将所有样式集中放了和和之间的之间的和和中了，而中了，而和和内的标记不再有内的标记不再有stylestyle属性了。属性了。313111.5.1 11.5.1 样式与样式表（续）样式与样式

31、表（续）直接嵌入式样式只适用于它所在的网页直接嵌入式样式只适用于它所在的网页。如果要将其用于。如果要将其用于其它网页，就把样式放在一个独立的文件中其它网页，就把样式放在一个独立的文件中 。u 样式表（常用）样式表（常用）样式表：将网页元素的样式定义设计为一个独立的文件样式表：将网页元素的样式定义设计为一个独立的文件。凡是在网页的凡是在网页的headhead部分与该样式表文件建立链接的部分与该样式表文件建立链接的HTMLHTML文文件，其页面元素的样式就会按照样式表中的定义显示。样式件，其页面元素的样式就会按照样式表中的定义显示。样式文件的扩展名为文件的扩展名为“.css.css”文件中每个样式

32、的一般格式为：文件中每个样式的一般格式为：样式定义选择符样式定义选择符 样式属性样式属性1:1:值值1;1;样式属性样式属性2:2:值值2;2;323211.5.1 11.5.1 样式与样式表（续）样式与样式表（续）u 浏览器采用浏览器采用“就近使用就近使用”的原则，即采用最近定义的样式。的原则，即采用最近定义的样式。u 样式表中若没设置样式，它会以默认黑色样式显示。样式表中若没设置样式，它会以默认黑色样式显示。例例11-1411-14：同时使用三种方法设置样式：同时使用三种方法设置样式 333311.5.2 11.5.2 样式规则样式规则定义样式一般格式为：定义样式一般格式为：样式定义选择符

33、样式定义选择符 样式属性样式属性1:1:值值1;1;样式属性样式属性2:2:值值2;2;其中其中样式定义选择符指样式定义的对象，可选项有：样式定义选择符指样式定义的对象，可选项有：HTMLHTML标记、用户自定义的类、用户自定义的标记、用户自定义的类、用户自定义的IDID、虚类等、虚类等。uHTMLHTML标记标记 HTML HTML标记是最典型的选择符类型。如果有多个不同的标标记是最典型的选择符类型。如果有多个不同的标记要使用相同的样式，则可以采用编组的方法简化定义。记要使用相同的样式，则可以采用编组的方法简化定义。如：如：H1,H2,H3 color:redH1,H2,H3 color:r

34、ed 则所有的则所有的H1H1、H2H2、H3H3标题都将以红色显示，这种表示法标题都将以红色显示，这种表示法中，各元素之间要用逗号中，各元素之间要用逗号“,”分隔。分隔。343411.5.2 11.5.2 样式规则（续）样式规则（续）u类类 （classclass）用户自定义的类是用来为某一个用户自定义的类是用来为某一个HTMLHTML标记创建多个样标记创建多个样式，或者为多个标记创建同一种样式。式，或者为多个标记创建同一种样式。语法格式：语法格式：样式定义选择符样式定义选择符.类名类名 样式属性样式属性1:1:值值1;1;样式属性样式属性2:2:值值2;2;如：如：H1.firstH1.f

35、irst的样式代码：的样式代码：H1.first color:red;font-size:32pxH1.first color:red;font-size:32px H1.second H1.second的样式代码：的样式代码：H1.secondcolor:green;font-H1.secondcolor:green;font-size:44pxsize:44px CssExample4.htm CssExample4.htm的的 代码如下：代码如下：353511.5.2 11.5.2 样式规则（续）样式规则（续）样式引用示例样式引用示例33 link type=text/css href=

36、CssExample4.css rel=Stylesheet/第第1111章章 网站建设与网页制作网站建设与网页制作 h1 class=第第1212章章 ASP.NET Web ASP.NET Web服务器控件服务器控件 在设计视图下可以看到前一个在设计视图下可以看到前一个h1h1标题为红色标题为红色3232像素大小，像素大小，而后一个而后一个h1h1标题为绿色标题为绿色4444像素大小。像素大小。363611.5.2 11.5.2 样式规则（续）样式规则（续）使用使用类类的定义的定义可以为同一个标记定义不同的样式可以为同一个标记定义不同的样式，若要用，若要用类的定义为不同的标记定义相同的样式

37、，则在类的类的定义为不同的标记定义相同的样式，则在类的定义时直定义时直接使用接使用“.”类名的方式类名的方式，而不需要指定或选择某一标记名。，而不需要指定或选择某一标记名。如：在样式表中定义类：如：在样式表中定义类：.rrcolor:red.rrcolor:red 在在HTMLHTML文档中做如下文档中做如下引用引用：p rr本段落文字为红色本段落文字为红色 本标题为红色本标题为红色 则则标记和标记和标记中的文字因属同一个类，都以红色标记中的文字因属同一个类，都以红色字体显示。字体显示。373711.5.2 11.5.2 样式规则（续）样式规则（续）u 自定义自定义ID ID 自定义自定义ID

38、ID以以“#”为标志为标志，如：，如：#customId1 color:red#customId1 color:red网页中，在引用该样式的标记符内使用网页中，在引用该样式的标记符内使用idid属性即可，如：属性即可，如：P id=本段落文字为红色本段落文字为红色 IDID与类主要区别与类主要区别：类可以在同一个网页的多个标记中重复：类可以在同一个网页的多个标记中重复使用；而使用；而IDID则在同一网页中只能使用一次。则在同一网页中只能使用一次。383811.5.2 11.5.2 样式规则（续）样式规则（续）u虚类虚类 虚类是专用于虚类是专用于A A标记的选择符标记的选择符，使用虚类可以设置不

39、同类型，使用虚类可以设置不同类型超链接的显示方式。超链接的显示方式。1.1.A:link A:link 未被访问过的超链接未被访问过的超链接 2.2.A:visited A:visited 已被访问过的超链接已被访问过的超链接 3.3.A:active A:active 当超链接处于选中状态当超链接处于选中状态 4.4.A:hover A:hover 当鼠标指针移动到超链接上当鼠标指针移动到超链接上 使用【添加样式规则】对话框，虚类是被作为使用【添加样式规则】对话框，虚类是被作为HTMLHTML标记中标记中的一项来定义的，可以从【元素】的下拉框中找到这些定义的一项来定义的，可以从【元素】的下拉

40、框中找到这些定义对象。对象。393911.5.2 11.5.2 样式规则（续）样式规则（续）若在样式表文件中做如下样式设计：若在样式表文件中做如下样式设计：A:linkcolor:blue;font-size:32px;A:linkcolor:blue;font-size:32px;A:hovercolor:red;font-size:150%;text-A:hovercolor:red;font-size:150%;text-decoration:none;decoration:none;在其链接的在其链接的HTMLHTML文件的文件的间添加代码：间添加代码：进入百度搜索进入百度搜索 保存并

41、执行该保存并执行该HTMLHTML文件，看到文件，看到“进入百度搜索进入百度搜索”的超链接的超链接文字为蓝色文字为蓝色3232像素字体；当鼠标移到超链接上，字体会变为像素字体；当鼠标移到超链接上，字体会变为红色红色4848像素大小且没有下划线。像素大小且没有下划线。404011.5.2 11.5.2 样式规则（续）样式规则（续）u包含选择符包含选择符 对于有包含关系的元素可以利用包含选择符来定义被包含对于有包含关系的元素可以利用包含选择符来定义被包含元素的样式。描述方式为：元素的样式。描述方式为：选择符选择符1 1 选择符选择符2 2 属性属性:值值;即选择符即选择符1 1中包含选择符中包含选

42、择符2 2，选择符之间用空格分隔，这种，选择符之间用空格分隔，这种方式的定义只对选择符方式的定义只对选择符1 1中的选择符中的选择符2 2起作用，对单独的选择起作用，对单独的选择符符1 1或选择符或选择符2 2无效。无效。例例11-16:11-16:定义包含样式，使段落文字中的粗体字以红色显示。定义包含样式，使段落文字中的粗体字以红色显示。414111.5.2 11.5.2 样式规则（续）样式规则（续）HTML HTML标记、类和标记、类和IDID三者中，因为三者中，因为IDID选择符是对所定义选择符是对所定义元素的唯一标识，所以元素的唯一标识，所以优先权最高优先权最高，其次是类，其次是类，H

43、TMLHTML标记的标记的优先权最低优先权最低。如，在一个样式表文件中有如下的样式定义：如，在一个样式表文件中有如下的样式定义：P color:BlueP color:Blue.aa color:Red.aa color:Red#bb color:Yellow#bb color:Yellow 在链接此样式表文件的在链接此样式表文件的HTMLHTML文件中加入代码：文件中加入代码：本段落文字为本段落文字为IDID定义的黄色！定义的黄色！在浏览器中看到的文字是优先权最高的在浏览器中看到的文字是优先权最高的IDID所定义的黄色。所定义的黄色。424211.5.2 11.5.2 样式生成器（最常用）样

44、式生成器（最常用）例例11-18:11-18:使用样式生成器设计使用样式生成器设计h1h1、h2h2标记的样式。标记的样式。434311.5.4 CSS11.5.4 CSS单位单位u 长度单位长度单位 CSS CSS的长度单位主要分绝对单位和相对单位两种。的长度单位主要分绝对单位和相对单位两种。绝对单位：绝对单位：cmcm（厘米）、（厘米）、mmmm（毫米）、（毫米）、pxpx（像素）（像素）、inin（英寸）、（英寸）、ptpt（点，（点，1pt=1/721pt=1/72英寸）英寸）、pcpc（1pc=121pc=12点）点）相对单位：相对单位：（百分比）（百分比）、emem（当前浏览器字体

45、中大写字母（当前浏览器字体中大写字母“M M”的的宽度）、宽度）、exex（当前浏览器默认字体中小写字母（当前浏览器默认字体中小写字母“x x”的高度）。的高度）。常用：常用：pxpx、ptpt、%。444411.5.4 CSS11.5.4 CSS单位（续）单位（续）u颜色单位颜色单位 常用有两种：常用有两种：1.1.颜色名颜色名直接使用标准颜色名称；直接使用标准颜色名称；2.2.#RRGGBB#RRGGBB使用十六进制数表示颜色；使用十六进制数表示颜色；454511.6 11.6 使用使用JavaScriptJavaScript创建网页特效创建网页特效 利用利用JavaScriptJavaS

46、cript，可以在客户端直接对，可以在客户端直接对WebWeb中的元素中的元素进行进行编程控制，产生各种动态效果。同时，因为编程控制，产生各种动态效果。同时，因为JavaScriptJavaScript是在客是在客户端运行，所以可以不必依赖于服务器端的程序。户端运行，所以可以不必依赖于服务器端的程序。464611.6.1 11.6.1 脚本语言脚本语言 脚本语言是一种介于脚本语言是一种介于HTMLHTML和和C+C+、Visual BasicVisual Basic等程序等程序设计语言之间的语言，它在形式和功能上可能更接近后者，设计语言之间的语言，它在形式和功能上可能更接近后者，但它并不是应用

47、程序开发语言，语法规则没有那么严格和复但它并不是应用程序开发语言，语法规则没有那么严格和复杂，也无需编译。杂，也无需编译。可在可在WebWeb网页中使用脚本语言增加一些动态效果。网页中使用脚本语言增加一些动态效果。目前流行的浏览器脚本语言主要有：目前流行的浏览器脚本语言主要有：ECMAScriptECMAScript、JscriptJscript、JavaScriptJavaScript、VBScriptVBScript等。等。JavaScriptJavaScript脚本语言其常用格式如下所示：脚本语言其常用格式如下所示：script language=JavaScript type=text

48、/JavaScript!-/-网页中使用网页中使用scriptscript标记符是插入脚本程序最常见的方式。标记符是插入脚本程序最常见的方式。开始标记符开始标记符和结束标记符和结束标记符之间的内容就是脚之间的内容就是脚本程序。本程序。scriptscript标记符可以放置在标记符可以放置在HTMLHTML文件的很多地方，但文件的很多地方，但是为了增加可读性，是为了增加可读性，一般将一般将scriptscript标记符放置在标记符放置在块中块中。在在JavaScriptJavaScript脚本中，脚本中，“/*”和和“*/”之间包含的所有内容均为之间包含的所有内容均为脚本注释，如果脚本注释是单行

49、，可以直接用脚本注释，如果脚本注释是单行，可以直接用“/”开头。开头。484811.6.2 11.6.2 常用特效常用特效u警告信息框警告信息框Alert Alert 格式：格式：window.alert(sMessage)window.alert(sMessage)功能：弹出一个警告信息框，功能：弹出一个警告信息框，sMessagesMessage是用户输入的警告信息（字符是用户输入的警告信息（字符串）串）uMARQUEE MARQUEE 在在IEIE浏览器中，可以使用浏览器中，可以使用MARQUEEMARQUEE显示滚动字幕、图片、表格等各种显示滚动字幕、图片、表格等各种对象。对象。uobject object 可以利用可以利用objectobject在客户端显示或运行音频、视频、动画、应用程序等在客户端显示或运行音频、视频、动画、应用程序等各种对象。各种对象。4949本章作业本章作业P341P3413 3、4 4、7 7、8 8、1010（与下章作业一起交）（与下章作业一起交）本章结束可以做实验六本章结束可以做实验六