[推荐]轻松制作网页特效

chjh

轻松制作网页特效

——在Dreamweaver3中巧用CSS滤镜

在当今的网页制作中，很多漂亮的网页都用了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样式面板轻松地给网页加上各种滤镜效果。

chjh

给网页对象使用滤镜

步骤1：打开CSS样式编辑面板。 先启动Dreamweaver 3.0，找到Dreamweaver的样式表编辑图标，会弹出一个样式面板，如图1所示。

图1

chjh

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

图2

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

图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)可定义鼠标形状和设置滤镜。

chjh

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

图4

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

chjh

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

图5

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

chjh

滤镜格式及参数

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

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

[em14]

chjh

一、alpha滤镜

让网页对象产生透明的渐进效果

1.格式

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

2.参数说明

• 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坐标值。

[em14]

chjh

二、blur滤镜

让网页元素产生模糊的效果

1.格式

Blur(Add=?, Direction=?, Strength=?)

2.参数说明

• Add 是否要在已经应用Blur滤镜上的网页对象上显示原来的模糊对象。0:否;1:是。
• direction 设置模糊的方向。0（上），45（右上）， 90（右），135（右下）， 180（下），225（左下）， 270（左），315（左上）。
• Strength 指定模糊图像模糊的半径大小。单位是像素，默认值是5。

[em14]

chjh

三、chroma滤镜

让图像中的某一颜色变成透明色

1.格式

Chroma(Color=?)

2.参数说明

让图像中的某一颜色变成透明色。其值为色彩的16进制代码或RGB形式表示。

[em14]

chjh

四、dropshadow滤镜

让网页元素有一个下落式的阴影

1.格式 DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

2.参数说明

• Color 指定阴影的颜色
• OffX 指定阴影相对于元件对象在水平方向偏移量。单位是像素,有正负。
• offy 指定阴影相对于元件对象在垂直方向偏移量。单位是像素,有正负。
• positive 指定阴影的透明程度。0表示没有阴影，非0表示显示阴影的效果。

[em14][em14][em14][em14][em14][em14][em14][em14]