第3章在网页中创建表单和样式.docx

得到的网页如图3.34所示。

图3.34阴影字

4.加亮边框的文字

加亮了边框的文字在网页里面将会特别显眼，示例代码如下：

得到的网页如图3.35所示。

图3.35加亮文字边框

可以通过对源代码的修改来制作出各种不同颜色的彩色浮雕。

3.2.4CSS滤镜

其实CSS还给用户提供了更加简单、高效和强大的特效实现方法，即使用CSS滤镜实现特效。

从IE4.0开始，就提供了一些内置的多媒体滤镜特效。

应用这些多媒体滤镜，可以非常方便地给文字加上许多可媲美图片的特效，并且图片还可以运用滤镜效果增色不少，灵活运用CSS的滤镜，可以使网页具有很好的视觉效果。

主要的滤镜种类及效果如表3.1所示。

表3.1滤镜种类及效果

滤镜

效果

Alpha

设置透明度

Blur

建立模糊效果

Chroma

把指定的颜色设置为透明

DropShadow

建立一种偏移的影像轮廓，即投射阴影

FlipH

水平翻转

FlipV

垂直翻转

Glow

为对象的外边界增加光效

Gray

降低图片的彩色度

Invert

将色彩、饱和度以及亮度值完全翻转建立底片效果

Light

在一个对象上进行灯光投影

Mask

为一个对象建立透明膜

Shadow

建立一个对象的固体轮廓，即阴影效果

Wave

在X轴和Y轴方向利用正弦波纹打乱图片

Xray

只显示对象的轮廓

1.Blur滤镜

Blur是常用的CSS滤镜之一，使用Blur滤镜可以让文字或者图片拥有立体的效果。

虽然图像处理软件同样可以达到此类效果，但是，使用Blur滤镜，不但让操作变得更加简单，而且由于用文本代替图片，也可以大大减小网页的所占存储空间，更便于浏览。

语法：

对于HTML：

{ilter:

blur（add=add,direction=direction,strength=strength）}

对于Script语言：

[oblurfilter=]object.filters.blur

Blur滤镜的参数如下：

●add属性：

用来确定是否在运动模糊中使用原有目标，其属性值有0和1两个。

属性值为0是指在模糊运动中不使用原有目标，大多数情况下适用于图像；属性值为1代表在模糊运动中使用原有目标，大多数情况下适用于文本。

●direction属性：

用来表示模糊移动时的角度，其属性值为0°~360°。

但是，当实际应用时，会发现其实只有八个方向，每两个相邻方向之间的间隔为45°。

●strength属性：

用来表示模糊移动时的距离，该属性值一般可以任意设置。

同一网页中可以使用不同参数的Blur滤镜，只要给它们命以不同的名称就行了。

例如：

--

.blur1{filter:

Blur（Add=true,Direction=135,Strength=15）}

.blur2{filter:

Blur（Add=true,Direction=135,Strength=10）}

-->

Blur滤镜产生的效果，如同用手指在一幅尚未干透的油画上迅速划过，而使画面变得模糊一样。

1）设置Blur滤镜

（1）选择DreamweaverMX2004的【窗口】|【CSS样式】命令，启动CSS样式表编辑器。

（2）单击

按钮，然后在弹出的对话框中单击【新建】按钮，弹出如图3.36所示的【新建CSS样式】对话框。

图3.36【新建CSS样式】对话框

（3）在对话框中输入要新创建的样式名称，本例为“.blur1”，然后单击【确定】按钮，弹出如图3.37所示的【.blur1的CSS样式定义】对话框。

（4）在【分类】列表框中选择【扩展】，在【过滤器】下拉列表中选择Blur，设置参数为：

Blur（Add=true,Direction=135,Strength=8）。

（5）单击【确定】按钮，完成创建。

在网页代码的与之间，会添加如下代码：

--

.blur1{filter:

Blur（Add=true,Direction=135,Strength=8）}

-->

图3.37设置参数

当然，直接把上面的语句加在与之间，也可以起到同样的作用。

2）把Blur加载到文字上

将.blur1样式加载到文字的方法如下：

（1）按照自己的需要，在网页上输入合适的文字。

（2）选取所要加载“.blur1”样式的文字所在的单元格，然后选择【窗口】|【CSS样式】命令，弹出样式表CSS编辑器。

此时，可以发现比刚才多了一个.blur1的选项，这就是刚创建的.blur1样式，如图3.38所示。

（3）在【CSS样式】面板中选择.blur1滤镜，此时，可看到应用了.blur1文字的源代码为：

文字。

图3.39中的文字就使用了Blur效果。

图3.38创建了CSS样式的CSS样式选项卡图3.39Blur显示效果

3）将Blur滤镜加载到图片上

比较图3.40和图3.41，后者是用滤镜效果后的效果图，与原图相比，产生了模糊的感觉。

图3.40原图图3.41加滤镜后的图像效果

要把我们刚才创建的滤镜样式加载到图片上的方法很简单，其具体操作步骤如下：

（1）使用【插入】面板上的图片插入按钮

插入图片。

（2）选择所要插入的图片，然后选择【CSS样式】面板上的.blurl就可以了。

2.DropShadow滤镜

DropShadow滤镜与前面介绍的Blur滤镜有点相似，但还是有些区别的。

在效果上类似于阴影字，但是实现的方法却简单得多。

语法：

{filter:

dropshadow（color=属性值1，offx=属性值2，offy=属性值3，positive=属性值4）；}

作用：

该滤镜主要用于产生重叠效果，其效果是由小括号中的各属性名及其对应的属性值来决定的。

DropShadow滤镜的参数如下：

●color属性：

用来设置投影文字的颜色，既可以填写颜色的英文名称，又可以填写颜色的十六进制代码。

●offx属性：

代表投影文字与原文字之间在水平方向上的偏移量。

●offy属性：

代表投影文字与原文字之间在垂直方向上的偏移量。

●positive属性：

如果为任何的非透明像素建立可见的投影，就选择TRUE（非0）；若为透明的像素建立透明效果，就选择FALSE（0）。

在CSS样式定义面板定义“过滤器”，如图3.42所示。

图3.42定义“过滤器”

DropShadow滤镜加载到文字上的效果比较好，与DIV实现的阴影字相比，DropShadow滤镜的效果显得更加逼真。

图3.43是一个带阴影的文字效果。

提示：

在文字中加载DropShadow滤镜非常实用，但是要注意，对较小的文字用这个滤镜可能会让文字模糊难辨。

所以，DropShadow滤镜一般都用在比较大而且需要强调的文字上。

图3.43带阴影的文字

3.Shadow滤镜

Shadow滤镜用于产生下落式阴影效果，其功能与DropShadow相似。

但是，两者却又有不同之处：

Shadow有渐进阴影感，而DropShadow没有渐进感，因此单单从阴影来看，Shadow会显得更真实一些，但是两者各有各的好处，谁也不能代替对方。

图3.44所示为应用Shadow的效果。

Shadow滤镜的参数如下：

●color：

阴影的颜色，取值格式为#RRGGBB，或者是颜色的英文名字。

●direction：

设置模糊的方向。

如果将此效果应用于一幅没底色的GIF图片上，也会产生很好的效果，如图3.44右图所示的图片和文字即为应用Shadow后的效果。

图3.44Shadow滤镜设置前后的图片和文字效果

4.Mask滤镜的应用

Mask是一种功能强大的滤镜，在适当的地方使用Mask滤镜可以产生出乎意料的视觉效果。

语法：

{filter:

mask（color=color）}

使用Mask滤镜属性可以为对象建立一个覆盖于表面的膜，其效果就如同戴着有色眼镜看物体一样，如图3.45所示即为矩形遮罩效果。

图3.45矩形遮罩效果

其代码为：

　　　

Mask滤镜只有一个参数color，也就是用来遮罩的颜色，以#RRGGBB为格式的颜色值。

只要在DreamweaverMX中给它选择一种适合的颜色就可以，如上面的Mask滤镜代码就是：

.mask1{filter:

mask（color=#FF3300）}

其实在Mask滤镜的使用中，重要的不是遮罩的颜色而是背景的颜色。

上例使用了白色Mask遮盖，代码是：

.mask1{filter:

mask（color=white）}

那些五彩缤纷的文字颜色实际上只不过是文字的背景颜色。

要完成这种效果也很简单，只要创建一个1×1的表格，选择合适的图片做背景，然后在表格里写上文字，再向单元格加上滤镜就完成了。

5.Alpha滤镜

Alpha滤镜用于改变目标元素的透明度，也就是将目标元素与背景融合。

这种溶合程度可以控制，而且通过指定坐标，还可以选定特定目标（如点、线、面）的透明度。

语法：

{FILTER：

ALPHA（opacity=opacity,finishopacity=inishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy）}

Alpha滤镜的参数如下：

●Opacity：

设置透明度。

用百分比表示其属性值，范围是0~100，0表示完全透明，100表示完全不透明。

●FinishOpacity：

与Opacity一起使用的选择性参数。

当同时设置Opacity和FinishOpacity时，可以制作出透明渐进的效果；其属性值也是0~100，0表示完全透明，100表示完全不透明。

●Style：

设置渐变风格。

同时设置了Opacity和FinishOpacity产生透明渐进时，它主要是用来指定渐进的显示形状，0代表均匀渐进，1代表线形渐进，2代表放射渐进，3代表直角渐进。

●StartX和StartY：

用来设置水平和垂直方向的渐进起始位置。

●FinishX和FinishY：

用来设置水平和垂直方向的渐进结束位置。

定义一种名为alpha1的Alpha滤镜，加载Alpha滤镜后的文字效果如图3.46所示。

图3.46加载Alpha滤镜的前后的图片和文本效果

图3.46的效果代码为：

Alpha（Opacity=10,FinishOpacity=90,Style=1,StartX=0,StartY=0,FinishX=80,FinishY=80）；

许多网站都采用“跑马灯”特效来处理文字，该例子具体制作方法如下：

（1）插入一个单元格，表格的背景为白色。

（2）在Dreamweaver中设置好Alpha滤镜，参数与前例相同。

（3）在表格中插入一个“跑马灯”，并在“跑马灯”中加入Alpha滤镜。

其中，“跑马灯”程序代码如下：

跑马灯内容

6.FlipH，FlipV滤镜

语法：

{filter:

fliph},{filter:

flipv}

作用：

分别是水平翻转和垂直翻转。

其使用方法与前面所说的几个滤镜相似，效果如图3.47所示。

（a）原图（b）水平翻转

（c）垂直翻转（d）垂直和水平翻转

图3.47FlipH,FlipV滤镜效果图

7.Gray，Invert，Xray滤镜

语法：

{filter:

gray},{filter:

invert},{filter:

xray}

Gray滤镜是将一张图片变成灰度图；Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值；Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的X光片。

Gray，Invert，Xray滤镜效果如图3.46所示。

（a）原图（b）Gray滤镜效果图（c）Invert滤镜效果图（d）Xray滤镜效果图

图3.48Gray,Invert,Xray滤镜效果图

8.Wave滤镜

Wave滤镜是对图像和文字产生抖动的效果。

语法：

{filter:

wave（add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength）}

Wave滤镜参数如下：

●wave：

把对象按垂直的波形样式打乱，默认为TRUE（非0）。

●add：

表示是否要把对象

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

第3章 在网页中创建表单和样式 网页 创建 表单 样式

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。