宇风多媒体---轻松制作网页特效

《大众软件》幻彩多媒体专栏 2000年第14期宇风多媒体工作室撰稿

在当今的网页制作中，很多漂亮的网页都用了CSS。 CSS是 Cascading Style Sheet的缩写，中文名字应当为：级联风格表单（或层叠样式表），我们在这里简称为CSS样式表。有了CSS的控制，我们的网页便会给人一种赏心悦目的感觉，同时字体的色彩变化也使主页变得更加生动活泼。CSS样式仍然不很完善，主要原因是没有一个主要的浏览器（如IE）完全支持它们的规范。它还是可以控制大多数传统的文字属性例如：font、size、alignment，还可指定类似定位、特殊效果和鼠标热区的独特的HTML属性。今天我们要向大家介绍的网页中的滤镜，就是CSS样式表中特殊效果这一类，但直接和CSS代码打交道并将其加入网页中，是多数人所头痛的事。

Dreamweaver对CSS的编辑支持是相当完善的。比如创建自定义样式、重定义样式、使用CSS选择、连接外部样式表文件等，这些CSS特有的编辑方式都可以在Dreamweaver中找到。并且在样式的定义内容上，Dreamweaver也是现在网页编辑软件中最完善的。网页制作者不需要接触到CSS的编写规范，就能通过选择项目和输入必要的参数完成CSS样式的定义。下面我们就来通过Dreamweaver的CSS样式面板轻松地给网页加上各种滤镜效果。

给网页对象使用滤镜

步骤1：打开CSS样式编辑面板。先启动Dreamweaver 3.0，找到Dreamweaver的样式表编辑图标

，会弹出一个样式面板，如图1所示。

步骤2：新建样式。如果当前页面中没有使用任何样式表，面板中现有样式就会为空。点击右下的新建按钮

，出现新样式类型对话框，如图2所示。

图9-13中提供了三种可选择的样式：“Make Custom Style(class)”(自定义样式)；“Redefine HTML Tag”(重新定义HTML标记符)；“Use CSS Select”(使用CSS选择器)。选择Make Custom Style(class)，注意在输入名称是要在名称前加上一个“.”号，作用是让浏览器知道这是一个样式表。将名字改为Filter1（不要用中文），确定后按下OK按纽，出现的样式表设置窗，如图3所示。

这里对其中一些属性做一下介绍：
Category(种类)：我们可以在制作框中通过下拉菜单设定样式表的众多属性，Dreamweaver将他们分成8类分别设置。以下是各类属性的简单说明。

Type（字体类型）：设置文本的字体(Font)，大小(Size)，粗体(Weight)，倾斜(Style)，小型大写字体（Variant），文本行高(Line Height)，场合(Case)，颜色(Color)，下划线、闪烁等修饰(Decoration)。
Background（背景）：文本背影颜色(Background)，文本的背景图象(Background Image)，滚动条等附加装置(Attachment)，水平线(Honizontal)，垂直线(Vertical)。
Block（块设置）：字距(Word Spacing)，字母间隔(Letter Spacing)，水平对齐方式(Vertical Alignment)，文本对齐方式(Text Align)，文本缩进(Text Indent)，空白区域(Whitespace)。
Box（盒子）：填充方式(Padding)，页边空白设置(Margin)。
Border（边界）：宽(Width)、颜色(Color)，边界样式(Style)。
List（列）：列类型(Type)，如前9.2介绍建立列一节；图标方式(Bullet)；位置(Position)。
Positioning（位置）：位置类型(Type)如相对、绝对等；可见度(Visibility)；Z轴位置(Z-Index)；溢出设置(Overfolw)；布置(Placement)；夹子(Clip)。
Extensions（扩展）：在视觉效果(Visual Effect)可定义鼠标形状和设置滤镜。

步骤3：编辑样式。在Category项中选择Extensions，选中Extensions后，右半边窗口就相应地变为Extensions调整选项（见图3）。有一个Visual Effect选项，选择下面的Filter，在如图4所示的下拉选单中选择一种滤镜，设置好参数后按OK。

说明：我们可以发现从下拉列表中有些滤镜格式带有末定参数，需将“？” 改成相应的数字，关于参数的设定请参照“滤镜格式及参数”部分。

步骤4：给对象加上效果。选中图片对象（或表格），然后从样式编辑面板中选择已定义的样式，如图5所示。

技巧：在Dreamweaver中不能直接给文字加上滤镜效果，另外有些滤镜效果也不能直接加在图片上，但用在表格上就没问题，因此我们可以将文字或图片加入表格中，并将表格边框线宽度设为0，这样我们就可以只看到文字或图片产生滤镜效果，而看不到表格的存在。另外，我们在Dreamweaver编辑环境中看不到滤镜效果，要想预览可按F12，或从菜单中选File>Preview in Browsers>iexplore。

滤镜格式及参数

滤镜就像是PhotoShop这一类图像处理软件所提供的特效一样，有了这些特效，就可以直接在HTML中对图片及文字进行特效处理了，而用图片处理软件编辑图片就要在网页中调用更多的图片。

在Dreamweaver的样式编辑器中有16种滤镜可供选择，其中的十种带参数，但有些在IE浏览器中看不到效果，所以我们选择性介绍有较好效果的滤镜。

Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

Opacity 用百分比表示不透明的程度。数值从0到100，0表是完全透明，100表示完全不透明。
FinishOpacity 这是一个同Opacity一起使用的选择性的参数，当同时设定Opacity和FinishOpacity时，可以制作出透明渐进的效果。数值从0到100表是完全透明，100表示完全不透明。
style 当以上两参数被使用时,，用于指定渐进的显示形状。0:无渐进;1直线渐进;2圆形渐进;3矩形辐射。
styleX 渐进开始的X坐标值。
styleY 渐进开始的Y坐标值。
finishX 渐进结束的X坐标值。
finishY 渐进结束的Y坐标值。