《网页设计与制作》教案-第18讲 使用CSS美化网页二

第18讲使用CSS美化网页二
1.1教学目标：
◆知识目标
1.掌握一些CSS样式表的基本滤镜效果。

2.理解Dreamweaver CS6新增加的Spry组件功能。

◆技能目标
1.能使用CSS样式表定义链接的各种状态
2.运用重定义HTML标签来统一页面元素格式
◆品质目标
培养学生认真细致、踏实进取的精神
1.2教学重点：
1.掌握一些CSS样式表的基本滤镜效果。

2.掌握Dreamweaver CS6新增加的Spry组件功能。

1.3 教学难点
制作CSS样式表的基本滤镜效果
1.4教学方法：讲练结合，任务驱动、分子任务操练
1.5课时安排：2课时
1.6教学对象分析：
这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。

1.7教学过程：
一、CSS滤镜
在许多图像编辑软件中都有制作特效的滤镜功能，例如Photoshop和Fireworks，滤镜神奇的功能常常使我们赞叹不绝。

在Dreamweaver中也有这样的功能，我们可以在CSS样式表中使用特定的语法来制作特效。

一般来说，制作文字特效往往使用专业的图像编辑软件，但是图像下载的时间较长，严重影响了页面的下载速度。

通过CSS样式表可以解决这个问题，CSS样式表的定义仅需要三至四行源代码，大大加快了页面下载的速度，同时又增加了页面的视觉效果。

但是，应用样式表也同时带来了许多问题，例如浏览器对样式表的兼容性，同时较复杂的样式表中要用到层，这对其他不支持样式表和层的浏览器来说，无疑是一种限制。

下面我们介绍利用CSS滤镜制作阴影字。

在“CSS样式”面板中单击“新建CSS样式”按钮，打开“新建CSS样式”对话框。

在“名称”文本框中输入样式表的名称，例如.shadow，在选择器类型选项中选择“类”，在“定义在”选项中选择“仅对该文档”，如图3-64所示。

单击“确定”按钮，则弹出“CSS样式定义”对话框。

在“字体”下拉列表中选择字体，例如Arial…，选择“颜色”为#FFCC33。

图3-64 新建样式
在左侧的“分类”列表中选择“定位”，在“类型”下拉列表中选择“绝对”，设置阴影的位置，如图3-65所示。

图3-65 设置“定位”参数
在对话框的“分类”列表框中选择“扩展”选项，在“过滤器”下拉列表中选择Shawdow(Color=?,Direction=?)选项，其中Color=?用以设定阴影的颜色，Direction=?用以设定阴影的方向。

如图3-66所示。

将问号改为相应的参数，例如Shawdow(Color=#FF0000,Direction=135)。

然后单击“确定”按钮。

图3-66 CSS样式扩展对话框
在文档编辑窗口中输入一段文字，用鼠标选择这段文字，然后将刚刚创建的样式应用到文字上。

完成后按F12键进行浏览，就可以看到文字的阴影显示效果，如图3-67所示。

图3-67 阴影文字效果
利用CSS滤镜还可以制作发光字、模糊字、遮罩等文字特效。

使用样式表制作特效，实际上使用的是层，这一点在页面的编辑环境下可以看出来。

在最上面的层中显示的是文字，而其他的层中设置相应阴影颜色的文字，并且按照指定的角度将层做相应的定位，用以完成文字阴影的效果。

二、静态滤镜
CSS静态滤镜共有13种，使被施加的对象产生各种静态的特殊效果。

Alpha滤镜：设置透明度的层次效果。

语法结构如下：
Fliter：Alpha (Opacity=起始透明度, FinishOpacity=结束透明度, Style=形状, StartX=?, StartY=?, FinishX=?, FinishY=?)
Blur滤镜：设置快速移动的模糊效果。

语法结构如下：
Fliter：Blur(Add=true(false), Direction=方向, Strength=强度)
Chroma滤镜：设置特定颜色的透明效果。

语法结构如下：
Fliter：Chroma(Color=color)
DropShadow滤镜：设置对象的阴影效果。

语法结构如下：
Fliter：DropShadow(Color=color, OffX=?, OffY=?, Positive=?)
FlipH、FlipV滤镜：Flip是滤镜的翻转属性，FlipH代表水平翻转、FlipV代表垂直翻转。

Glow滤镜：设置对象边缘光晕效果。

语法结构如下：
Fliter：Glow(Color=color, Strength=强度)
Mask滤镜：设置遮罩效果。

语法结构如下：
Fliter：Mask(Color=color)
Shadow滤镜：设置对象边缘光晕效果。

语法结构如下：
Fliter：Shadow(Color=color, Direction=方向)
Wave滤镜：把对象按照垂直的波纹样式打乱，产生波浪变形效果。

语法结构如下：
Fliter：Wave(Add=true(false), Freq=频率, LightStrength=增强光效, Phase=偏移量, Strength=强度)
Gray滤镜：设置图片的灰度效果。

Invert滤镜：将颜色的饱和度及亮度值完全反转。

Xray滤镜：使对象产生一种X射线效果。

三、动态滤镜
CSS动态滤镜可以为页面添加动人的淡入淡出、图像转化效果，分别是混合转换滤镜和显示转换滤镜两种转换效果。

混合转换滤镜：处理图像之间的淡入和淡出效果。

语法结构如下：
Fliter：BlendTrans(Duration=淡入和淡出的时间)
其中：Duration 指定了淡入和淡出的时间，以秒为单位。

显示转换滤镜：提供一种更为多变的转换效果，如图片转换。

语法结构如下：
Fliter：RevealTrans(Duration=转换的秒数, Transition=转换类型)
1.8归纳总结：
本讲介绍了对网页进行统一的一个有效工具——样式表，内容包括了掌握一些CSS样式表的基本滤镜效果，Dreamweaver CS6新增加的Spry组件功能。

1.9课后作业题：
1.什么是CSS滤镜？
2.什么静态滤镜？
3.什么动态滤镜？。