任娟网页制作课件项目七幻灯片.pptVIP

项目七 制作美容网站 ——应用样式表 为网站首页设置样式——样式表的基本应用 为网站子页设置样式——样式表的高级应用 任务一 为网站首页设置样式 ——样式表的基本应用 相关知识 一、熟悉“CSS样式”面板 在Dreamweaver CS3中，我们可以借助“CSS样式”面板来新建、删除、编辑和应用样式，以及附加外部样式表等。选择“窗口”“CSS样式”菜单，可打开“CSS样式”面板。 二、CSS样式的存在方式 CSS样式以外部和内嵌两种方式存在于网页中，本节分别介绍。 外部CSS样式表：为增强CSS样式的通用性，我们可以创建扩展名为.css的样式表文件。 内部（或嵌入式）CSS样式表：是一系列包含在HTML文档head部分style标签内的CSS样式。 三、CSS样式的分类 根据应用对象的不同，CSS样式被分为以下三类。 （1）类样式 类样式又称自定义样式，它是唯一可应用于文档中任何对象的CSS样式类型，主要用于定义一些特殊的样式。 （2）标签样式 用来重定义HTML标签的样式。 （3）选择器样式 选择器样式又称高级样式，它主要用来定义链接文本的样式，也可用来重定义特定标签组合的样式。 四、创建样式的一般步骤 在Dreamweaver CS3中，可按照以下方法来创建CSS样式。 实施步骤 一、设置“body”样式 所谓“body”样式，就是为“body”标签设置样式，也就是我们前面所讲的标签样式。这是最常用的一种样式（具体操作见视频1-1）。 二、设置边框样式 本节通过为单元格设置边框样式，来为各栏目制作分界线（具体操作见视频1-2）。 三、设置列表样式 本节通过为网页中的列表文本设置样式，来学习列表样式的设置方法（具体操作见视频1-3）。 四、设置链接样式 默认情况下，网页中的链接文本为蓝色且有下划线，我们现在要设置文本在默认状态下为白色，而在鼠标经过时为浅紫色（具体操作见视频1-4）。 五、设置第2种链接样式 为将文本右侧的日期与文本区分开来，可为日期设置不同于文本的链接样式。本节通过为日期设置链接样式，来看看如何在同一个网页中设置两种链接样式（具体操作见视频1-5）。 任务二 为网站子页设置样式 ——样式表的高级应用 相关知识 一、附加外部样式 如果网站中多个网页文档用到了同一个样式，可以将该样式保存在外部样式文件中，然后将样式文件链接至各个网页文档，就可以对各文档应用该样式了。 二、CSS滤镜简介 应用CSS滤镜可为图像设置渐变、透明、阴影等效果。在“***的CSS规则定义”对话框左侧的“分类”列表中选择“扩展”选项，右侧的“过滤器”下拉列表中为用户提供了多种滤镜效果。 实施步骤 一、设置“body”样式 子页的“body”样式与首页一致，所以只要将前面创建的样式文件链接至该页面即可（具体操作见视频2-1）。 二、设置图片样式 本节使用CSS滤镜中的“Shadow”属性来给图像添加阴影（具体操作见视频2-2）。 三、设置表格边框样式 本节通过为表格下边框设置样式，来使网站子页“案例展示”区域上下呼应，形成更好的页面效果（具体操作见视频2-3）。 四、设置单元格边框样式 本节通过设置单元格的上边框样式，来为网站子页中展示的案例设置分界线（具体操作见视频2-4）。 知识拓展 美容、化妆品行业网站欣赏 本节介绍两个不错的美容、化妆品行业网站。