网页特效设计

维普资讯

封面故事　

动感即生命　

网　特　设　

没有特效的网页是没有生命的镜子。　

各式各样的动态设计，为网页打开一扇会呼吸的窗子。　

爿咽让你的网页动起来７想让你的网　

，　，、页更具交互性７听好喽——　

创建翻滚图：Ｉｎｓｅｒｔ／Ｉ　ｎＩｅｒａｃｔｉｖｅ　Ｉｍ—　

ａｇｅｓ／Ｒｏｌ　ｌｏｖｅｒ　Ｉｍａｇｅｓ命令可以创建翻　

滚图，其对话框如图。　

翻滚图的制作　

动态网页技术中，翻滚图是比较　

墨囝■墨墨墨曩—●●—■——■—————■■　

・＿　

。＿　…

简单的，但它的效果却非常明显，因此　

常常可以在各大网站见到这种效果。　

所谓翻滚图，就是当鼠标移到一　

幅图像上时，该图像变成另外一幅图　

像，当鼠标离开图像时，图片又还原成　

～　

舅　

…　

’一　

…　

一一　

一　。………～

Ｉｍ　

…一…一　！‘！　

Ｇｏ　！　

▲一个简单的翻滚图实例，这是未触发前状　

态。　

▲这便是创建翻滚特效的对话框。　

当鼠标移上图片时，原图翻滚，替　

原来的模样。如图中，最左侧”滚动信　

息”的图片按钮。　

换威下图。　

Ｉｍａｇｅ　Ｎａｍｅ：翻滚图名称，不要用　

中文。本参数主要用来作为Ｊａｖａｓｃｒｉｐｔ　

的调用对象，一般采用默认名字就行　

了。　

■Ｈ　Ｉ　—ｉ…ｉ一……■一　

Ｏｒｉｇｉｎａｌ　Ｉｍａｇｅ：原始图片，即一般　

文件　）●嚣毽】　查看　）收蠢睦）快捷日　

～　

：　

情况下的图片，可以通过点按右边的　

文件夹标志在硬盘上找到该图片。　

Ｒｏｌｌｏｖｅｒ　Ｉｍａｇｅ：翻滚图片，就是当　

▲鼠标未移到按钮上时，图片是这个样子　

的。　

地址ｊ　无教工作室，ＶｎＩ１ｔｌｅ　ｌ１１　ｈｔ・　

｝嘲Ｉ　Ｕ　　

▲鼠标触发按钮后，可以看到文字颜色发生　

改变，其实是整个页面被替换。　

鼠标移上原图时要用哪张图片代替原　

图。　

Ｐｒｅｌｏａｄ　Ｒｏｌｌｏｖｅｒ　Ｉｍａｇｅｓ预取翻滚　

当鼠标移到这个按钮上的时候　

原图变成下图的图像：　

图，建议勾选，因为它可以在页面打开　

时就先读取资料，而不是当鼠标事件　

发生时才读取，有利于保持动作的流　

畅性。　

Ｗｈｅｎ　ＣＩｉｃｋｅｄ，Ｇｏ　ｔｏ　ＵＲＬ：用鼠　

在Ｄｒｅａｍｗｅａｖｅｒ的编辑窗口中，　

点按Ｉｎｓｅｒｔ／Ｉｎｔｅｒａｃｔｉｖ　Ｉｍａｇｅ／Ｒｏｏｌｏｖｅｒ　

Ｉｍａｇｅｓ

，

然后在弹出的窗１３中分别指　

定源图像（ｍｅｎｕＯ１　ａｂ．ｇｉｆ），翻滚图像　

（ｍｅｎｕＯ１ｂ．ｇｉｆ），最后点按”ＯＫ”。　

标点击翻滚图时跳转到哪个链接页面，　

可以是绝对地址，也可以是相对地址。　

下面，我们要制做一个简单的翻　

滚图，当网页打开时，图片如下图。　

一

—Ｌ　

ｃ—ｄ　

０　＿　・・　ｒ　Ｉ—ｋ￣＂—Ｉ—　

…

Ｇｏ…

…

Ｌ　

　“　

●　Ｒａｂ　～　

ｉ：］　

’・　

▲鼠标移动到按钮上后，原图片被设好的图　

片替换。　

▲重要的是要指定好源图像和翻滚图像。　

网址：ｗｗｗ．ｐｃｓｈ。ｐｐｅｒ．ｃｏｍ，ｃｎ　ＰＣＳＩ（￣］］ｐｅｒ　２００２　１　０．／５９　

维普资讯

网上家园建造全攻略　

Ｃｏｖｅｒ　Ｓｔｏｒｙ　

保存页面．然后打开该页面，就可　

以看到效果了。（也可以按Ｆ１　２键进　

行预览。）　

ｍｅ　ｎ　ｕ０１　ａ　ｇｉｆ　对应的图片是　

ｍｅｎｕ０１　ｂｇｉｆ　

．

片），２区放ｍ一０５７５．ｇｉｆ图片（刚刚　

我们做的图片），三区放文字，四区再　

做一个一行四列的表格，分别放ｂｌａｎｋ．　

ｇ＿ｆ

、

ｍ　ｅ　ｎ　ｕ０　２　ａ　

ｇｉｆ

ｍｅｎｕＯ２ｂ　ｇｉｆ　

对应的图片是　

本例中，一幅图控制另外一幅图，　

因此我们称其为一对一的翻滚图。　

Ｄｒｅａｍｗｅａｖｅｒ还能创建一对多关系　

ｍｅｎｕ０１　ａ．ｇ．ｆ

、

ｍｅｎｕ０１　ａ　ｇ＿ｆ

、　

ｍ　ｅ　ｎ　ｕ　０　３　ａ　

ｇｉｆ　对应的图片是　

ｍｅｎｕ０３ｂ

ｇｉｆ　

．

ｍｅｎｕ０１　ａ．ｇｉｆ图片，五区放ｌｏｇｏ．ｇｉｆ（工　

作室ｌｏｇｏ的图片）。　

的复杂翻滚图，如图。　

除了这些图片，我们还得制作一　

个透明图片（ｂｌａｎｋ．ｇｉｆ），作为一般状态　

下三个图标左边的显示图片；当鼠标　

移上三个图标时，本透明图片由相应　

的图标信息图片替换。　

Ｍｅｎｕ０１　ａ

ｗｏｒｄ１．ｇｉｆ　

Ｍｅｎｕ０２ａ

ｇｉｆ　

．

．

这里我们使用表格，主要是为了　

让网页各元素被严格控制，避免因图　

片的替换产生网页元素混乱的问题。　

３．设置行为：　

ｇｉｆ对应的图片信息：　

对应的图片信息　

要实现一对多的翻滚效果，得用　

行为（Ｂｅｈａｖｉｏｒ）来创建动态效果。至　

于什么是行为（Ｂｅｈａｖｉｏｒ），如何设置与　

应用Ｂｅｈａｖｉｏｒ，我们将在后面讲到，这　

里只需一步一步照做就行了。　

Ｄｒｅａｍｗｅａｖｅｒ中的动态技术，大多　

ｗｏｒｄ２ｇｉｆ　

．

▲一对多的复杂的翻滚图特效。其实就是由　

一

Ｍｅｎｕ０３ａｇｉｆ　

对应的图片信息　

．

个按钮触发多个事件。　

ｗｏｒｄ３．ｇｉｆ　

因为我们的网页底是透明的，而　

采用的都是Ｊａｖａｓｃｒｉｐｔ脚本语言．这　

种语言常常要求指明动作主体即对象，　

所以，给要产生动作的图片或其他元　

上图是一个完整的页面，当将鼠　

且我们把网页底部背景都设成图片了，　

那就只能制作一个透明图片，以防止　

出现多余的色块．总之．该图片在一般　

状态时，访问者应该看不到才行。　

２．页面规划　

标移上左下边三个图标时．原先的图　

标会改变，同时在左边区域显示该图　

标所代表的信息。如图。　

＿　＿‘＃　

素命名以便调用是非常必要的。一般　

情况下，这种命名会由电脑自动完成，　

如图片分别命名为Ｉｍａｇｅ　１，Ｉｍａｇｅ　

２

，

等等，在进行对象调用时，这些名　

大家首先查看一下各个图片在编　

根据刚才的分析，我们制作一个　

圆圈　

ｂ　

ｌ　

如图的表格：（为了大家看得更清楚，　

我们将表格边界设为可见，同时边界　

字就是最重要的指示！　

辑器属性面板中的名字．其中，透明图　

片名字为ｂｌａｎｋ，ｍｅｎｕ０１　ａ　ｇｉｆ图片名　

字为Ｉｍａｇｅ　３，ｍｅｎｕＯ２ａ．ｇｉｆ图片名字　

为Ｉｍａｇｅ　４．ｍｅｎｕＯ３ａ．ｇｉｆ图片名字为　

ｉｍａｇｅ　５。　

▲当鼠标移上按钮，不但字体颜色改变。还　

出现了说明文字。　

颜色为红色，但在实际制作中它只起　

一

种定位作用．所以不要也把边界参　

数设为１）　

现在我们来看一下如何制作这种　

网页。　

１．页面分析：　

网页中共有Ｂａｎｎｅｒ，右边的大图　

（ｍ一０　５　７　５．ｇ　ｉ　ｆ），左边有三个图标　

（ｍｅｎｕ０１ａ．ｇｉｆ：ｍｅｎｕＯ２ａ．ｇｉｆ：ｍｅｎｕＯ３ａ．　

ｇｉｆ），以及文字信息。　

另外，我们知道，所谓翻滚图就是　

鼠标移上去后发生图片替换的事件，　

匿　

▲在编辑器属性面板。可检查图片属性。　

▲页面使用表格。避免了网页元素的混乱。　

无论是一对一，还是一对多，都离不开　

这个原理。因此．要产生最后的效果，　

我们还得有几个替换图片。　

需要注意的是，ｍｅｎｕ０１　ａ．ｇｉｆ只是　

１区我们放ｔｉｔｌｅ．ｇｉｆ图片（标题图　

该图片文件本身的文件名，而不是动　

网址：ｗｗｗ　ｐｃ＝ｈｏｐｐｅｒ　￣＠１１１．ｃｎ　ＰＣ锄嗍嘲时２００２　１　０．／６０　

维普资讯

封面故事　

态语句中的对象名称，要在事件过程　

中调用对象．就得指明对象名，而不　

是文件名　

最后我们来设置三个图标的行为：　

的是ｍ＿Ｏ５７５图片．而另外一个Ｕｎｎａｍｅｄ　

＜ｉｍｇ＞图片是由于没有特殊效果．所　

Ｓｅｔ　Ｓｏｕｒｃｅ　ｔｏ中找到ｍｅｎｕ０１　ｂ．ｇｉｆ：　

现在不要按ＯＫ，我们马上进行信息　

显示图片的行为设置：在Ｉｍａｇｅｓ中　

选择Ｉｍａｇｅ　ｂｌａｎｋ”（确定Ｉｍａｇｅ１图　

以没有给它们起名．这个图片实际上　

是我们ｌｏｇｏ的图片。　

选中ｍｅｎｕ０１ａ　ｇｉｆ图片．然后点按Ｗｉｎ—　

ｄｏｗ／Ｂｅｈａｖｉｏｒ命令　打开行为窗口。　

假使我们要修改ｍｅｎｕ０１　ａ．ｇｉｆ这张　

图片的链接　点击ｂｌａｎｋ．选择一张图片　

ｗｏｒｄ１

ｇｉｆ

．

片发生替换的同时，ｂｌａｎｋ图片也发生　

替换）．在Ｓｅｔ　Ｓｏｕｒｃｅ　ｔｏ中找到ｗｏｒｄ１．　

．

也就是鼠标移到ｍｅｎｕ０１ａ．ｇｉｆ　

ｇｉｆ文件．最后点按ＯＫ，这样．我　

们就完成了第一个图标的一对多翻滚　

图设置。　

这张图片上的时候ｂｌａｎｋ要变换哪幅图．　

．＝Ｊ　．二Ｊ　

单击　ｏ　按钮就行了。　

以此类推．为其他两个图标进行　

相应的设置就成功了。　

翻滚图确实是非常简单的一项动　

态技术　但它的最终效果却具有如此　

令人着迷的魅力　以致于从简单的一　

▲行为窗口。为图片设置动作。　

对一翻滚　到一对多的翻滚替换　在互　

联网上都得到了大量的应用．而这，也　

点击左上角的”＋　号．在弹出　

的菜单中选择Ｓｗａｐ　Ｉｍａｇｅ。　

陵圈颤　

Ｉ‘　　Ｉｊ－　

正是我们将它列为第一项动态网页技　

术进行讲解的最主要原因！　

▲为源图片设置触发动作后要替换的图片。　

艺　：：　

…ｌ一　

　｝

ＣＳＳ滤镜的使用　

ＣＳＳ（Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ）中　

………　

｝　

｝　

在一对一的翻滚图中用到的插入命　

文简称样式单　它是近几年才发展起　

来的新技术。１　９　９　８年５月１　２日　

；：二：＿　

ｔ　

令．只能决定选中图本身的替换图．而　

不能决定其他图片的替换图。用行为命　

令却可以向其他图片发出命令进行替　

换。如鼠标移上ｍｅｎｕ０１ａ．ｇｉｆ图片．不　

：　

舅黑暇０・｝　

Ｉ………．．　１　

Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ　１ｅｖｅｌ　２成为　

了Ｗ　３　Ｃ　的新标准。同时．”Ｗ　３　Ｃ　

ＣｏｒｅＳｔｙｌｅｓ”和ＣＳＳ２　Ｖａｌｉｄａｔｉｏｎ　Ｓｅｒ—　

▲在行为窗口的下拉菜单中选择动作项。　

但告诉该图片用ｍｅｎｕ０１ｂ．ｇｉｆ图片进行　

替换，还用ｗｏｒｄ１．ｇｉｆ替换”ｂｌａｎｋ”图　

片。而这，也就形成了一对多的关系。　

ｖｉｃｅ”以及　ＣＳＳ　Ｔｅｓｔ　Ｓｕｉ　ｒｅ”宣布成　

立。它是～组样式，样式中的属性在　

ＨＴＭＬ元素中依次出现．并显示在浏览　

然后弹出设置窗口。　

Ｓｅｔ　Ｓｏｕｒｃｅ　ｔｏ：设置替换图片．可　

以通过点按右边的　”Ｂｒｏｗｓｅ”按钮在　

器中。样式可以定义在ＨＴＭＬ文档的标　

志（ＴＡＧ）里，也可以在外部附加文档　

～　妊卷　莹　—＿＿－—－＿＿一　一＝　　竺！　～ｊ　

：：　：：：　

｝…“　‘　

ｌ｝　

｝　

ｌ　

Ｓｅｌ　ｓ…　

ｌ￣ｄｏｅｄＩｎｌ￣ｅ＊　

文件夹中找到替换图片．也可以直接　

输入图片的地址。　

Ｐｒｅｌｏａｄ　Ｉｍａｇｅｓ：预取图片，其原　

理在前面我们已经讲过．建议勾选。　

Ｒｅｓｔｏｒｅ　Ｉｍａｇｅｓ　ｏｎＭｏｕｓｅＯｕｔ：当鼠　

作为外加文档。此时．一个样式表单　

可以作用于多个页面…甚至整个站　

点．因此具有更好的易用性和扩展　

性。你可以精确地控制主页里的每一　

个元素，比如一个字．用ＣＳＳ你可以　

控制它的前景色、背景色、背景图片　

Ｊ　

Ｒ∞啪ｌｍ＿０∞ｏｎＭ０ｕ＊ｅ￣ｕｔ　

标移出图片时恢复为一般状态下的原　

▲在弹出的窗口中选择参与动作的图片名。　

图像　建议勾选。　

精确位置、四周加边框等。　

随着网页设计技术的发展，人们　

已经不满足于原有的一些ＨＴＭＬ标记，　

而是希望能够为页面添加一些多媒体　

属性。ＣＳＳ技术的飞快发展使这些需　

我们知道了原理．就可以非常轻　

Ｉｍａｇｅｓ：图片列表框．其中罗列了　

所有网页中的图片，如ｂｌａｎｋ、Ｉｍａｇｅ３　

易地对ｍｅｎｕ０１　ａ．ｇ　ｆ进行设置了。先　

在Ｉｍａｇｅｓ中选择ｉｍａｇｅ　”Ｉｍａｇｅ３”　

等等．对了．那个ｉｍａｇｅ＜ｎ０５７５＞指　

（确定Ｉｍａｇｅ１图片将发生替换）　在　

网址　ＷＷＷ．ＰｃｓｈｏＰＰＩＩＬＣＯｍ．ｃｎ　ＰＣ轴蚓哪ｌｉｌｔ　２００２　１　０，／６１　

维普资讯

网上家园建造全攻略　

求成为了现实。现在我为大家介绍一　

个新的ＣＳＳ扩展部分：ＣＳＳ滤镜属性　

（ＦｉＩｔｅｒ　Ｐｒｏｐｅｒｔｉｅｓ）。使用这种技术可　

以把可视化的滤镜和转换效果添加到　

一

（ａｄ　ｄ＝ａｄｄ，ｄＩ　ｒｅｃｔｉ　ｏｎ＝ｄＩ　ｒｅｃｔｉ　ｏｎ．　

０到１００，０代表完全透明，１　００代表　

完全不透明。”ｆｉｎｉｓｈｏｐａｃｉｔｙ“是一个可　

ｓｔｒｅｎｇｔｈ＝ｓｔｒｅｎｇｔｈ）｝；　

Ｓｃｒｉｐｔ语言的语法为：［ｏｂｌｕｒｆｉｈｅｒ＝】　

ｏｂｊｅｃｔ　ｆｉ　ｈｅｒｓ．ｂｌｕｒ。　

选参数，如果想要设置渐变的透明效　

果，就可以使用他们来指定结束时的　

透明度。范围也是０到１００。”ｓｔｙｌｅ”　

参数指定了透明区域的形状特征。其　

中０代表统一形状　１代表线形、２代　

表放射状、３代表长方形。”ＳＴＡＲＴＸ”　

和”ＳＴＡＲＴＹ”代表渐变透明效果的开　

始ｘ和Ｙ坐标。”ＦＩＮＩＳＨＸ”和　ＦＩＮＩＳＨＹ　

个标准的ＨＴＭＬ元素上。当滤镜和渐　”ＡＤＤ”参数是一个布尔判断：　

变效果结合到一个基本的ＳＣＲＩＰＴＪＪ￣程　

序中后，网页设计者就可以拥有一个　

建立动态交互文档的强大工具。也就　

是ＣＳＳ　ＦＩＬＴＥＲ＋ＳＣＲＩＰＴ，这就说明想　

”ＴＲＵＥ”或者　＂ＦＡＬＳＥ”。它指定图片是否　

被改变成印象派的模糊效果。模糊效　

果是按顺时针的方向进行的，　

”ＤＩＲＥＣＴＩＯＮ　参数用来设置模糊的方　

要建立动态的文档还要一些ＳＣＲＩＰＴ　

（脚本语言）的基础。　

可视化滤镜属性只能用在ＨＴＭＬ控　

件元素上。所谓的ＨＴＭＬ控件元素就是　

它们在页面上定义了一个矩形空间，　

向。其中０度代表垂直向上，然后每４５　

度为一个单位。它的默认值是向左的　

２７０度。　ＳＴＲＥＮＧＴＨ　值只能使用整数　

代表渐变透明效果结束Ｘ和Ｙ的坐　

标。　

语句Ｓｔ　ＹＩ　ｅ＝“ｆｉ　Ｉｔｅ　ｒ：ＡＬＰＨＡ　

（ｏｐａｃｉｔｙ＝３０，ｆｉｎｉｓｈｏｐａｃｉｔｙ＝８Ｏ，ｓｔｙｌｅ＝０．　

Ｓｔａ　ｒｔｘ：１　５，ｓｔａ　ｒｔＹ＝１　５，ｆｉｎｉ　ＳｈＸ＝５０，　

来指定．她代表有多少像素的宽度将　

受到模糊影响。默认是５个。对于网页　

浏览器的窗口可以显示这些空间。　

下面拿模糊和透明效果做个例子。　

Ｂｌｕｒ滤镜的ＨＴＭＬ语法为｛ｉＩｔｅｒ：ｂｌｕｒ　

上的字体，如果设置他的模糊　

”ＡＤＤ＝１”

．

那么这些字体的效果会非常　

ｆｉｎｉｓｈｙ＝５０）“，其效果如图。　

好看的。语句ＳｔＹＩｅ＝”ｆｉ　Ｉｔｅ　ｒ：ｂＩ　ｕ　ｒ　

（ａｄｄ＝ｔｕｒｅ，ｄｉｒｅｃｔｉｏｎ＝１　３５，ｓｔｒｅｎｇｔｈ＝１０）　．　

其效果如图。　

元素　

８Ｏ０Ｙ　

说明　

雾　

无双工作室　

。　

，　

网页文档的主体元素所有　

的可见范围都在＜ＢＯＤＹ＞　

元素内　

表单域的按钮．可以有　

发送（ｓｕｂｍｉｔ）““重置　

（ｒｅｓｅｔ）　等形式　

０　

｛　

、、　

＾　々　‘　

ｋ　

互　瞄互　

定义了网页上的一个区域，　

这个区域的高度．宽度或　

者绝对位置者＆是已知的　

图片元素，通过指定　

▲带有透明度的图片比原图多了几分朦胧　

感。加以利用可以做出不错的效果。　

▲文字经过“Ｂｌｕｒ”特效处理。变得生动起　

来。　

ｓｒｃ”属性来指定图片　

的来源　

ＩＮＰＵＴ　

ＭＡＲＱＵＥＥ　

ＳＰＡＮ　

有了美丽生动的网页之后，你就　

ＡＩＰｈａ滤镜的语法是｛ＦＩＬＴＥＲ：　

可以将网页上传了。由于不同网站上　

传方式有别，这里就不一一列举了，你　

输入表单域　

移动字幕效果　

Ａ　Ｌ　Ｐ　Ｈ　Ａ（０　Ｐ　ａ　ｃ　ｉ　ｔ　Ｙ＝０　Ｐ　ａ　ｃ　ｉ　ｔ　Ｙ　

ｆｉｎｉｓｈＯｐａｃｉｔｙ＝ｆｉｎｉｓｈＯｐａｃｉｔｙ，ｓｔｙｌｅ＝ｓｔｙｌｅ，　

仔细看看提供商的说明应该就没什么　

定义了网页上的一个区域，　

这个区域的高度、宽度或　

者绝对位置都是已知的　

表格　

ｓｔａｒｔｘ＝ｓｔａｒｔｘ，ｓｔａｒｔｙ＝ｓｔａｒｔｙ，ｆｉｎｉｓｈｘ＝ｆｉｎｉｓｈｘ，　

问题。（王文钢）曙　

ｆｉｎｉｓｈｙ＝ｆｉｎｉｓｈｙ）｝。　

”Ａｌｐｈａ　可把一个目标元素与背景　

表格数据单元格　

文本区域　

混合．通过数值来控制混合程度，其实　

就是一个元素的透明度。通过指定坐　

多行输入文本框　

表格标题单元格　

标．可以指定点、线、面的透明度。他　

们的参数含义如下：　

”

表格标题　

表格行　

ｏｐａｃｉｔｙ”（透明度）．默认的范围　

网址：ＷＷＷ，ｐｃｓｈｏｐｐｅｒ，ｃｏｎｒ．ｃｎ　Ｐ８ＳＩ唧口ｅｒ　２００２　１　０．／６２