dreamweaver cs5网页制作项目五.pptVIP

项目五 应用CSS样式 任务一 样式表的基本应用 任务二 样式表的高级应用 任务一 样式表的基本应用 任务说明 预备知识 一、“CSS样式”面板 二、创建CSS样式 任务实施 一、为“欧妮雅”网站主页设置标签样式 二、为“欧妮雅”网站主页设置类样式（上） 三、为“欧妮雅”网站主页设置类样式（下） 四、为“欧妮雅”网站主页设置复合样式（上） 五、为“欧妮雅”网站主页设置复合样式（下） 任务二 样式表的高级应用 任务说明 预备知识 一、附加外部样式 二、CSS滤镜简介 任务实施——为“欧妮雅”网站子页附加外部样式 * * 使用CSS样式表可以为网页中的行、标题或单元格等标签定义样式，也可以为链接文本定义样式，还可以定义可应用于任何元素的样式，从而快速设置或更新网页的外观。 在Dreamweaver CS5中，我们可以使用两种方式创建CSS样式表，一种是利用“CSS样式”面板，在可视化的操作环境中进行创建；一种是在“代码”视图中直接编写相关的代码。本书我们主要学习利用“CSS样式”面板创建CSS样式表的操作。 使用“CSS样式”面板可以非常方便地新建、删除、编辑和应用样式，以及附加外部样式表等。选择“窗口”“CSS样式”菜单，可打开“CSS样式”面板。 下面我们学习创建CSS样式的方法，并在创建过程中了解CSS样式的类型及存在方式。 下面为“欧妮雅”网站主页创建一个“body”标签样式，并设置该样式的类型和方框属性（具体操作见视频5-1-1）。 下面创建一个类样式，并设置该样式的类型和列表属性，然后将创建的样式应用于“欧妮雅”网站主页中的列表文本（具体操作见视频5-1-2） 。 下面创建一个类样式，并设置该样式的边框属性，然后将创建的样式应用于“欧妮雅”网站主页中的相应单元格中，从而为各栏目制作分界线（具体操作见视频5-1-3）。 默认情况下，网页中的链接文本为蓝色且有下划线，下面为“欧妮雅”网站主页创建复合样式，并设置样式的“类型”属性，使该样式的链接文本在默认状态下为白色，而在鼠标经过时为浅紫色（具体操作见视频5-1-4）。 为了将“欧妮雅”网站主页文本右侧的日期与文本区分开来，可为日期设置不同于文本的超链接样式。下面通过为日期设置超链接样式，来看看如何在同一个网页中设置两种超链接样式（具体操作见视频5-1-5）。 任务一学习了样式表的基本应用，下面学习将定义好的样式文件链接至网站中其他网页的方法，以及CSS滤镜的应用。 一般在制作网站时，为保证同一网站中所有网页风格的一致性，可以将共用的样式保存在外部样式表文件中，然后将其链接至各个网页文档。这不仅大大减少了工作量，还方便了后期的维护和更新。下面我们就来学习如何将外部样式表文件链接至网页文档中。 应用CSS滤镜可为图像设置渐变、透明、阴影等效果。在“***的CSS规则定义”对话框左侧的“分类”列表中选择“扩展”选项，右侧的“过滤器（Filter）”下拉列表中提供了多种滤镜效果。 在学习了附加外部样式的方法后，就可以非常方便地为网站中的其他页面设置样式了。下面通过为“欧妮雅”网站子页设置样式，来巩固前面所学（具体操作见视频5-2）。 *