Dreamweaver-CS5网页制作高级案例教程项目五

项目五创建“星光灿烂”电影网站——应用CSS样式一、学习目标二、理论指导三、任务实践一、学习目标在了解CSS样式的种类和存在方式的基础上，掌握常见样式的设置方法。掌握附加外部样式的方法，了解CSS滤镜的简单用法，掌握在同一个网页中设置两种链接样式的方法。能够在实践中熟练地应用CSS样式设置网页效果，制作出符合实际需要的网页。二、理论指导（一）样式表的基本应用CSS样式表是一个非常灵活的工具，使用它可以将网站中所有有关文档的样式保存在一个或多个样式文件中，当需要给网页定义样式时，只要将样式文件链接至各个网页即可，而不必再逐一地把繁杂的样式编写在每个文档结构中。1．“CSS样式”面板使用“CSS样式”面板可以非常方便地新建、删除、编辑和应用样式，以及附加外部样式表等。选择“窗口”“CSS样式”菜单，可打开“CSS样式”面板。2．CSS样式的存在方式CSS样式以外部和内嵌两种方式存在于网页中。•外部CSS样式表：为增强CSS样式的通用性，我们可以创建扩展名为.css的外部样式表文件，然后利用“CSS样式”面板将该文件链接至站点中的一个或多个网页中，从而使用户可直接应用其中定义的样式。•内部（或嵌入式）CSS样式表：是一系列包含在HTML文档head部分style标签内的CSS样式。3．创建CSS样式在DreamweaverCS5中，可按照以下步骤来创建CSS样式。（二）样式表的高级应用1．附加外部样式一般在制作网站时，为保证同一网站中所有网页风格的一致性，都会尽可能地使用同一种样式。这样就可以将共用的样式保存在外部样式表文件中，然后将其链接至各个网页文档。这不仅大大减少了工作量，还方便了后期的维护和更新。2．CSS滤镜简介应用CSS滤镜可为图像设置渐变、透明、阴影等效果。在“***的CSS规则定义”对话框左侧的“分类”列表中选择“扩展”选项，右侧的“过滤器（Filter）”下拉列表中为用户提供了多种滤镜效果。三、任务实践任务一为网站首页设置body样式本任务将以“星光灿烂”站点中的“index.html”网页为例，通过为其设置body样式，来学习标签样式在实际网页制作中的应用（具体操作见视频5-1）。任务二为网站首页设置列表样式本任务将以“星光灿烂”站点中的“index.html”网页为例，通过为其中的文字设置列表样式，来练习类样式在实际网页制作中的应用（具体操作见视频5-2）。任务三为网站首页设置链接样式本任务将以“星光灿烂”站点中的“index.html”网页为例，通过为其中的链接文本设置样式，来学习复合内容样式在实际网页制作中的应用（具体操作见视频4-3）。任务四为网站首页设置第2种链接样式有时候可能会遇到这种情况，你制作了一个网页，其中有很多链接文本，你想用不同的链接样式来区分这些链接文本，也就是设置两种不同样式的链接，那么如何设置呢？本任务通过给“星光灿烂”站点中的“index.html”网页添加一个链接样式来讲解此类样式的设置方法（具体操作见视频4-4）。任务五为网站首页设置图像样式理论指导中简单介绍了CSS滤镜，并制作了图像半透明效果。本任务将使用滤镜制作图像阴影效果，以进一步学习滤镜的应用（具体操作见视频4-5）。任务六为网站首页设置边框样式项目三中曾讲到过细线表格的制作方法，是通过设置表格和单元格背景颜色实现的。实际上使用CSS样式可以更容易实现，并且还可以实现各种特殊边线效果，本任务我们就来学习使用CSS样式制作特殊边线的方法（具体操作见视频4-6）。任务七为网站子页设置外部样式我们在任务一中曾创建了一个样式文件“s1.css”，本任务通过将其链接到网站中的其他页面，来学习“附加外部样式”在实际网页制作中的应用（具体操作见视频4-7）。