网页制作第4讲网页设计高级技术.ppt

1、本章知识点和技能点：本章知识点和技能点：wCSS样式、模板的创建与应用样式、模板的创建与应用w站点管理站点管理，进行检查超级链接、清理无用文，进行检查超级链接、清理无用文件等件等wDreamweaver、Fireworks、Flash三者的三者的连用连用10/27/2022110.1CSS样式表样式表wCSS（CascadingStyleSheet）即层叠样）即层叠样式表，是现在被广泛使用的格式控制技术。式表，是现在被广泛使用的格式控制技术。层叠样式表的功能非常强大，可以将其定义层叠样式表的功能非常强大，可以将其定义在在HTML的的TAG（标签）里，也可以存储为（标签）里，也可以存储为一个独立

2、的一个独立的.CSS文件做为链接文件。文件做为链接文件。w一个样式表文件可以作用于多个页面，甚至一个样式表文件可以作用于多个页面，甚至整个站点整个站点，因此具有很好的易用性和扩展性，因此具有很好的易用性和扩展性，它可以精确地控制页面中的每一个元素它可以精确地控制页面中的每一个元素10/27/20222w网页编辑器内设置的页面和浏览器中显示的页面实网页编辑器内设置的页面和浏览器中显示的页面实际效果往往有所差异，即使同一页面由于使用不同际效果往往有所差异，即使同一页面由于使用不同的浏览器或由于设置不同的分辨率，最终效果也都的浏览器或由于设置不同的分辨率，最终效果也都不同，这样设计者就很难让页面按自

3、己的意愿精确不同，这样设计者就很难让页面按自己的意愿精确布局，即便是掌握布局，即便是掌握HTML语言精髓的人也要通过多语言精髓的人也要通过多次地测试，才能驾驭好这些信息的排版。次地测试，才能驾驭好这些信息的排版。w样式表可以解决这样的问题，使页面完全按照制作样式表可以解决这样的问题，使页面完全按照制作者的设想显示。者的设想显示。我们可以通过它对网页上元素进行我们可以通过它对网页上元素进行精确的定位，轻易地控制文字、图片等各种对象。精确的定位，轻易地控制文字、图片等各种对象。内容结构和格式控制相分离，使得网页可以只由内内容结构和格式控制相分离，使得网页可以只由内容构成，而将所有网页的格式控制指向

4、某个容构成，而将所有网页的格式控制指向某个CSS样样式表文件，其好处表现在以下两个方面：式表文件，其好处表现在以下两个方面：10/27/20223w简化了网页的格式代码简化了网页的格式代码，外部的样式表会被浏览器，外部的样式表会被浏览器保存在缓存里，加快了下载显示的速度，也减少了保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式只被保需要上传的代码数量（因为重复设置的格式只被保存一次）。存一次）。w只要修改保存网站格式的只要修改保存网站格式的CSS样式表就可以改变整样式表就可以改变整个站点的风格特色。个站点的风格特色。在修改页面数量庞大的站点时在修改页面数量庞大

5、的站点时非常有用。非常有用。w使用样式表可以灵活地控制页面的布局和显示。使用样式表可以灵活地控制页面的布局和显示。CSS样式表的类型主要有：样式表的类型主要有：w外部样式：外部样式：当多个页面文件具有相同的样式时，可当多个页面文件具有相同的样式时，可以将以将CSS样式保存为独立的文件，所有页面文件可样式保存为独立的文件，所有页面文件可共享该样式文件。共享该样式文件。w嵌入式样式嵌入式样式：通过：通过标记符，可将样式信息标记符，可将样式信息作为文档的一部分用于作为文档的一部分用于HTML。w内联式样式：内联式样式：只包含在与它有关的标记内，对页面只包含在与它有关的标记内，对页面上其他的标记不起作

6、用。上其他的标记不起作用。10/27/2022410.1.1外部样式表外部样式表w通过通过Dreamweaver的的CSS样式面板可以很方便地创建样式面板可以很方便地创建和编辑样式表。和编辑样式表。w1.创建外部样式表创建外部样式表w这里我们以创建超级链接的样式为例说明这里我们以创建超级链接的样式为例说明CSS样式表的样式表的创建过程。超级链接的样式定义超级链接的四种状态，创建过程。超级链接的样式定义超级链接的四种状态，分别为：分别为：a:link定义链接普通状态的显示样式。定义链接普通状态的显示样式。a:visited定义被访问的链接的显示样式。定义被访问的链接的显示样式。a:hover定义

7、将鼠标置于超级链接之上的显示样式。定义将鼠标置于超级链接之上的显示样式。a:active定义超级链接即将点击时的显示样式。定义超级链接即将点击时的显示样式。w默认的超级链接有下划线，此处我们将去掉下划线，默认的超级链接有下划线，此处我们将去掉下划线，并重新定义超级链接四个状态的样式，具体操作过程如并重新定义超级链接四个状态的样式，具体操作过程如下：下：10/27/20225w步骤步骤1：打开：打开xiangce.htm，单击左侧框架区，单击左侧框架区域，执行【窗口】域，执行【窗口】【CSS样式】命令打开样式】命令打开left.htm文件的样式面板，如图所示。文件的样式面板，如图所示。10/27

8、/20226w步骤步骤2：单击样式面板底部的：单击样式面板底部的新增样式新增样式按钮，按钮，弹出弹出“新建新建CSS样式样式”对话框，设置对话框，设置“选择选择器类型器类型”为高级，在为高级，在“选择器选择器”的下拉列表的下拉列表中选择中选择“a:link”，“定义在定义在”设置为设置为“新新建样式表文件建样式表文件”，“新建新建CSS样式样式”对话框对话框的设置如图所示。然后单击【确定】按钮。的设置如图所示。然后单击【确定】按钮。10/27/20227w步骤步骤3：进入如图所示的：进入如图所示的“保存样式表文件为保存样式表文件为”对话框，选择路径、命名为对话框，选择路径、命名为mystyle

9、，然后，然后单击【保存】按钮。单击【保存】按钮。10/27/20228w步骤步骤4：进入：进入“CSS样式定义样式定义”对话框。该对对话框。该对话框左侧共有话框左侧共有8类选项，选择其中一类，右侧类选项，选择其中一类，右侧会出现相应的选项，在此定义样式的具体格会出现相应的选项，在此定义样式的具体格式。此处不希望链接对象出现下划线，可将式。此处不希望链接对象出现下划线，可将“修饰修饰”设置为设置为“无无”，其他设置如图所示。，其他设置如图所示。单击【确定】按钮完成单击【确定】按钮完成a:link状态的样式定义。状态的样式定义。10/27/20229步骤步骤5：定义链接：定义链接a:visited

10、状态的样式。单击样式面板底状态的样式。单击样式面板底部的部的编辑样式按钮，弹出如图编辑样式按钮，弹出如图1所示的所示的“编辑样式表编辑样式表”对对话框。在话框。在“编辑样式表编辑样式表”对话框中单击【新建】按钮也可对话框中单击【新建】按钮也可进入进入“新建新建CSS样式样式”对话框，设置对话框，设置“选择器类型选择器类型”为高为高级，级，“选择器选择器”设置为设置为“a:visited”，“定义在定义在”选择选择为第为第3步中创建的外部样式文件步中创建的外部样式文件mystyle.css，单击【确，单击【确定】按钮进入定】按钮进入“CSS样式定义样式定义”对话框，进行如图对话框，进行如图2所示

11、的所示的设置。单击【确定】按钮完成设置。单击【确定】按钮完成a:visited状态的样式定义。状态的样式定义。10/27/202210w步骤步骤6：按照上述步骤分别设置：按照上述步骤分别设置a:hover状态和状态和a:active状态的样式定义。字体、大小、修饰效果状态的样式定义。字体、大小、修饰效果都不变，只改变字体的颜色，都不变，只改变字体的颜色，a:hover状态字体颜状态字体颜色为色为#FF33CC，a:active状态字体颜色为状态字体颜色为#000000。设置超级链接样式后的设置超级链接样式后的CSS面板如图所示。面板如图所示。10/27/202211w步骤步骤7：保存后预览效果

12、，超级链接将无下划：保存后预览效果，超级链接将无下划线，如图所示。线，如图所示。10/27/2022122.应用外部样式表应用外部样式表w我们以在我们以在quwen.htm文档中引用已经编辑好的文档中引用已经编辑好的mystyle.css样式文件为例进行介绍，具体操作过样式文件为例进行介绍，具体操作过程如下：程如下：w步骤步骤1：打开：打开quwen.htm，选择【窗口】，选择【窗口】【CSS样式】命令打开样式面板。样式】命令打开样式面板。w步骤步骤2：单击样式面板底部的：单击样式面板底部的附加样式表附加样式表按钮，或按钮，或在样式面板中右击从弹出的菜单中选择在样式面板中右击从弹出的菜单中选择

13、“附加样式附加样式表表”，都可打开如图所示的对话框，通过【浏览】，都可打开如图所示的对话框，通过【浏览】按钮选择样式表文件，然后单击【确定】按钮即可。按钮选择样式表文件，然后单击【确定】按钮即可。10/27/202213w注意：注意：导入外部样式表与导入外部样式表与链接外部样式表的不链接外部样式表的不同在于：无论该网页是否应用了同在于：无论该网页是否应用了CSS样式表，其都将读取样式样式表，其都将读取样式表；链接样式表则在该网页应用表；链接样式表则在该网页应用CSS样式表时才去读样式表。样式表时才去读样式表。import导入的样式表优先级较高，当在文档标记内部定义的样导入的样式表优先级较高，当

14、在文档标记内部定义的样式与导入的样式发生冲突，则内部定义的样式将不起作用。链式与导入的样式发生冲突，则内部定义的样式将不起作用。链接外部样式表文件使用以下的语句：接外部样式表文件使用以下的语句：10/27/202214w导入外部样式表文件使用以下的语句：10/27/20221510.1.2嵌入式样式嵌入式样式w1.创建嵌入式样式创建嵌入式样式w这里我们以在新建这里我们以在新建yangshi.htm文档中创建文档中创建test嵌嵌入式样式为例进行介绍，具体的操作过程如下：入式样式为例进行介绍，具体的操作过程如下：w步骤步骤1：新建：新建yangshi.htm，执行【窗口】，执行【窗口】【CSS样

15、式】命令打开样式面板。样式】命令打开样式面板。w步骤步骤2：单击样式面板底部的：单击样式面板底部的新增样式按钮，弹出新增样式按钮，弹出“新建新建CSS样式样式”对话框，设置对话框，设置“选择器类型选择器类型”为为“类类”，“名称名称”为为“.test”，“定义在定义在”设置为设置为“仅对该文档仅对该文档”，然后单击【确定】按钮。，然后单击【确定】按钮。w步骤步骤3：进入：进入“.testCSS样式定义样式定义”对话框，分别对话框，分别进行进行“类型类型”和和“背景背景”选项的设置。然后单击【选项的设置。然后单击【确定】按钮完成确定】按钮完成test内部样式义。内部样式义。10/27/20221

16、6w步骤步骤4：切换到：切换到“代码代码”视图下，查看嵌入式样式的视图下，查看嵌入式样式的语句，在语句，在中包含如下语句：中包含如下语句：10/27/202217w2.应用嵌入式样式应用嵌入式样式w步骤步骤1：打开：打开yangshi.htm，输入文字，输入文字“动物的天堂、动物的世界！动物的天堂、动物的世界！”，如图（，如图（a）所）所示，选中文字。示，选中文字。w步骤步骤2：在其属性面板的：在其属性面板的“样式样式”选项中选择选项中选择创建的创建的test样式，即可应用样式，如图（样式，即可应用样式，如图（b）所示。所示。10/27/202218注意：注意：w应用嵌入式样式时的语句为：应用嵌入式样式时的语句为：动物的天堂、动物的世动物的天堂、动物的世界！界！10/27/20221910.1.3内联式样式内联式样式w我们以在我们以在yangshi.htm文档中创建段落标记文档中创建段落标记的的内联式样式为例进行介绍，具体的操作过程如下：内联式样式为例进行介绍，具体的操作过程如下：w步骤步骤1：打开：打开yangshi.htm，在文档窗口中输入，在文档窗口中输入“欢欢迎来到动物天堂之门