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

chjh 发表于 2004-9-7 08:19:00

<TABLE width="97%" align=center border=0>

<TR>
<TD height=51>
<DIV align=center>轻松制作网页特效</DIV></TD></TR></TABLE>
<DIV align=right>——在Dreamweaver3中巧用CSS滤镜 </DIV>
在当今的网页制作中，很多漂亮的网页都用了CSS。 CSS是 Cascading Style Sheet的缩写，中文名字应当为：级联风格表单（或层叠样式表），我们在这里简称为CSS样式表。有了CSS的控制，我们的网页便会给人一种赏心悦目的感觉，同时字体的色彩变化也使主页变得更加生动活泼。CSS样式仍然不很完善，主要原因是没有一个主要的浏览器（如IE）完全支持它们的规范。它还是可以控制大多数传统的文字属性例如：font、size、alignment，还可指定类似定位、特殊效果和鼠标热区的独特的HTML属性。今天我们要向大家介绍的网页中的滤镜，就是CSS样式表中特殊效果这一类，但直接和CSS代码打交道并将其加入网页中<a target="_blank" href="http://www.yfdmt.com/" target="_blank" >，</A>是多数人所头痛的事。
Dreamweaver对CSS的编辑支持是相当完善的。比如创建自定义样式、重定义样式、使用CSS选择、连接外部样式表文件等，这些CSS特有的编辑方式都可以在Dreamweaver中找到。并且在样式的定义内容上，Dreamweaver也是现在网页编辑软件中最完善的。网页制作者不需要接触到CSS的编写规范，就能通过选择项目和输入必要的参数完成CSS样式的定义。下面我们就来通过Dreamweaver的CSS样式面板轻松地给网页加上各种滤镜效果。

chjh 发表于 2004-9-7 08:20:00

<H2 align=left>给网页对象使用滤镜</H2>
步骤1：打开CSS样式编辑面板。先启动Dreamweaver 3.0<a target="_blank" href="http://www.yfdmt.com/" target="_blank" >，</A>找到Dreamweaver的样式表编辑图标<IMG src="http://www.yfdmt.com/webmedia/dw/css/image/css1.gif">，会弹出一个样式面板，如图1所示。
<IMG src="http://www.yfdmt.com/webmedia/dw/css/image/1.gif">
图1

chjh 发表于 2004-9-7 08:22:00

步骤2：新建样式。如果当前页面中没有使用任何样式表，面板中现有样式就会为空。点击右下的新建按钮<IMG src="http://www.yfdmt.com/webmedia/dw/css/image/new.gif">，出现新样式类型对话框，如图2所示。
<IMG src="http://www.yfdmt.com/webmedia/dw/css/image/2.gif">
图2
图9-13中提供了三种可选择的样式：“Make Custom Style(class)”(自定义样式)；“Redefine HTML Tag”(重新定义HTML标记符)；“Use CSS Select”(使用CSS选择器)。选择Make Custom Style(class)，注意在输入名称是要在名称前加上一个“.”号，作用是让浏览器知道这是一个样式表。将名字改为Filter1（不要用中文），确定后按下OK按纽，出现的样式表设置窗，如图3所示。
<IMG src="http://www.yfdmt.com/webmedia/dw/css/image/3.gif">
图3
这里对其中一些属性做一下介绍：
Category(种类)：我们可以在制作框中通过下拉菜单设定样式表的众多属性，Dreamweaver将他们分成8类分别设置。以下是各类属性的简单说明。
<DIV align=left>
<UL>
<LI>Type（字体类型）：设置文本的字体(Font)，大小(Size)，粗体(Weight)，倾斜(Style)，小型大写字体（Variant），文本行高(Line Height)，场合(Case)，颜色(Color)，下划线、闪烁等修饰(Decoration)。
<LI>Background（背景）：文本背影颜色(Background)，文本的背景图象(Background Image)，滚动条等附加装置(Attachment)，水平线(Honizontal)，垂直线(Vertical)。
<LI>Block（块设置）：字距(Word Spacing)，字母间隔(Letter Spacing)，水平对齐方式(Vertical Alignment)，文本对齐方式(Text Align)，文本缩进(Text Indent)，空白区域(Whitespace)。
<LI>Box（盒子）：填充方式(Padding)，页边空白设置(Margin)。
<LI>Border（边界）：宽(Width)、颜色(Color)，边界样式(Style)。
<LI>List（列）：列类型(Type)，如前9.2介绍建立列一节；图标方式(Bullet)；位置(Position)。
<LI>Positioning（位置）：位置类型(Type)如相对、绝对等；可见度(Visibility)；Z轴位置(Z-Index)；溢出设置(Overfolw)；布置(Placement)；夹子(Clip)。
<LI>Extensions（扩展）：在视觉效果(Visual Effect)可定义鼠标形状和设置滤镜。 </LI></UL></DIV>

chjh 发表于 2004-9-7 08:23:00

步骤3：编辑样式。在Category项中选择Extensions，选中Extensions后，右半边窗口就相应地变为Extensions调整选项（见图3）。有一个Visual Effect选项，选择下面的Filter，在如图4所示的下拉选单中选择一种滤镜，设置好参数后按OK。 
<IMG src="http://www.yfdmt.com/webmedia/dw/css/image/4.gif">
图4
说明：我们可以发现从下拉列表中有些滤镜格式带有末定参数，需将“？” 改成相应的数字，关于参数的设定请参照“滤镜格式及参数”部分。

chjh 发表于 2004-9-7 08:24:00

步骤4：给对象加上效果。选中图片对象（或表格），然后从样式编辑面板中选择已定义的样式，如图5所示。
<IMG src="http://www.yfdmt.com/webmedia/dw/css/image/5.gif">
图5 
技巧：在Dreamweaver中不能直接给文字加上滤镜效果，另外有些滤镜效果也不能直接加在图片上，但用在表格上就没问题，因此我们可以将文字或图片加入表格中，并将表格边框线宽度设为0，这样我们就可以只看到文字或图片产生滤镜效果，而看不到表格的存在。另外，我们在Dreamweaver编辑环境中看不到滤镜效果，要想预览可按F12，或从菜单中选File>Preview in Browsers>iexplore。

chjh 发表于 2004-9-7 08:25:00

<H2 align=left>滤镜格式及参数</H2>
滤镜就像是PhotoShop这一类图像处理软件所提供的特效一样，有了这些特效，就可以直接在HTML中对图片及文字进行特效处理了，而用图片处理软件编辑图片就要在网页中调用更多的图片。 
在Dreamweaver的样式编辑器中有16种滤镜可供选择，其中的十种带参数，但有些在IE浏览器中看不到效果，所以我们选择性介绍有较好效果的滤镜。

chjh 发表于 2004-9-7 08:26:00

一、alpha滤镜
让网页对象产生透明的渐进效果
1.格式
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
2.参数说明
<DIV align=left>
<UL>
<LI>Opacity 用百分比表示不透明的程度。数值从0到100，0表是完全透明，100表示完全不透明。
<LI>FinishOpacity 这是一个同Opacity一起使用的选择性的参数，当同时设定Opacity和FinishOpacity时，可以制作出透明渐进的效果。数值从0到100表是完全透明，100表示完全不透明。
<LI>style 当以上两参数被使用时,，用于指定渐进的显示形状。0:无渐进;1直线渐进;2圆形渐进;3矩形辐射。
<LI>styleX 渐进开始的X坐标值。
<LI>styleY 渐进开始的Y坐标值。
<LI>finishX 渐进结束的X坐标值。
<LI>finishY 渐进结束的Y坐标值。</LI></UL></DIV>

chjh 发表于 2004-9-7 08:26:00

二、blur滤镜
让网页元素产生模糊的效果
1.格式
Blur(Add=?, Direction=?, Strength=?)
2.参数说明
<DIV align=left>
<UL>
<LI>Add 是否要在已经应用Blur滤镜上的网页对象上显示原来的模糊对象。0:否;1:是。
<LI>direction 设置模糊的方向。0（上），45（右上）， 90（右），135（右下）， 180（下），225（左下）， 270（左），315（左上）。
<LI>Strength 指定模糊图像模糊的半径大小。单位是像素，默认值是5。 </LI></UL></DIV>

chjh 发表于 2004-9-7 08:27:00

三、chroma滤镜
让图像中的某一颜色变成透明色
1.格式
Chroma(Color=?)
2.参数说明
让图像中的某一颜色变成透明色。其值为色彩的16进制代码或RGB形式表示。

chjh 发表于 2004-9-7 08:28:00

四、dropshadow滤镜
让网页元素有一个下落式的阴影
1.格式 DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
2.参数说明
<DIV align=left>
<UL>
<LI>Color 指定阴影的颜色
<LI>OffX 指定阴影相对于元件对象在水平方向偏移量。单位是像素,有正负。
<LI>offy 指定阴影相对于元件对象在垂直方向偏移量。单位是像素,有正负。
<LI>positive 指定阴影的透明程度。0表示没有阴影，非0表示显示阴影的效果。 </LI></UL></DIV>

页: [1] 2

室内人's Archiver

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