网页特效实现的探讨

第２９卷第１期　昆明冶金高等专科学校学报　

Ｖｏ１．２９　Ｎｏ．１　

２０１３年１月　

Ｊｏｕｒｎａｌ　ｏｆ　Ｋｕｎｍｉｎｇ　Ｍｅｔａｌｌｕｒｇｙ　Ｃｏｌｌｅｇｅ　

Ｊａｎ．２０１３　

ｄｏｉ：１０．３９６９／ｊ．ｉｓｓｎ．１００９—０４７９．２０１３．０１．００９　

网页特效实现的探讨　

丁海燕　

（云南大学信息学院，云南昆明６５００９１）　

摘要：网页不仅能够提供丰富多彩的信息，更以各种各样的特效效果吸引着浏览者。着重探讨了如何利用ＨＴ—　

ＭＬ标记符添加多媒体效果，利用Ｄｒｅａｍｗｅａｖｅｒ内置行为以及编写脚本程序实现丰富的页面动态效果，更好地实　

现用户与页面的交互。　

关键词：Ｄｒｅａｍｗｅａｖｅｒ行为；网页动态效果；ＨＴＭＬ；脚本语言　

中图分类号：ＴＰ３９３．０９２　文献标识码：Ａ　文章编号：１００９—０４７９一（２０１３）Ｏ１—００３７—０４　

Ｄｉｓｃｕｓｓｉｏｎ　ｏｎ　Ｒｅａｌｉｚａｔｉｏｎ　ｏｆ　Ｗｅｂｐａｇｅ　Ｓｐｅｃｉａｌ　Ｅｆｆｅｃｔｓ　

ＤＩ　ＮＧ　Ｈａｌ—ｖａｎ　

（Ｓｃｈｏｏｌ　ｏｆ　Ｉｎｆｏｒｍａｔｉｏｎ　Ｓｃｉｅｎｃｅ　ａｎｄ　Ｅｎｇｉｎｅｅｒｉｎｇ，Ｙｕｎｎａｎ　Ｕｎｉｖｅｒｓｉｔｙ，Ｋｕｎｍｉｎｇ　６５００９１，Ｃｈｉｎａ）　

Ａｂｓｔｒａｃｔ：Ｗｅｂｐａｇｅ　ｃａｎ　ｎｏｔ　ｏｎｌｙ　ｐｒｏｖｉｄｅｓ　ｅｎｏｕｇｈ　ｉｎｆｏｒｍａｔｉｏｎ，ｂｕｔ　ａｌｓｏ　ａｔｔｒａｃｔｓ　ｕｓｅｒｓ　ｂｙ　ａｌｌ　ｋｉｎｄｓ　ｏｆ　ｓｐｅ－　

ｃｉａｌ　ｅｆｆｅｃｔｓ．Ｔｈｉｓ　ｐａｐｅｒ　ｓｔａｔｅｓ　ｈｏｗ　ｔｏ　ｕｓｅ　ＨＴＭＬ　ｔａｇｓ　ｔｏ　ａｄｄ　ｍｕｌｔｉｍｅｄｉａ　ｅｆｆｅｃｔｓ　ｕｓｉｎｇ　ｂｕｉｌｔ—ｉｎ　Ｄｒｅａｍｗｅａｖｅｒ　

ｅｎｖｉｒｏｎｍｅｎｔ　ａｎｄ　ｄｅｖｅｌｏｐｉｎｇ　ｔｈｅ　Ｓｃｒｉｐｔ　ｐｒｏｇｒａｍ　ｔｏ　ｒｅａｌｉｚｅ　ａｂｕｎｄａｎｔ　ｗｅｂｐａｇｅ　ｄｙｎａｍｉｃ　ｅｆｆｅｃｔｓ，ｗｈｉｃｈ　ｉｓ　ｔｏ　

ｉｎｔｅｒａｃｔ　ｗｉｔｈ　ｕｓｅｒｓ　ｗｅｌ１．　

Ｋｅｙ　ｗｏｒｄｓ：Ｄｒｅａｍｗｅａｖｅｒ　ｂｅｈａｖｉｏｒ；ｗｅｂｐａｇｅ　ｓｐｅｃｉａｌ　ｅｆｆｅｃｔ；ＨＴＭＬ；ｓｃｒｉｐｔ　ｌａｎｇｕａｇｅ　

０引言　

网页除了合理的颜色搭配、美观的布局以外，最吸引人的地方就是各种网页特效，例如显示及隐藏层、　

旋转的文字、下拉菜单、飘舞的雪花、滚动的文字或图片、图片倒影、淡入淡出的图片效果、弹出新窗口、　

在线测试、显示当前日期和时间、网页过渡效果、背景图片自动定时切换、跟随鼠标移动的图片等等。本文　

从ＨＴＭＬ标记符、使用Ｄｒｅａｍｗｅａｖｅｒ内置行为以及使用脚本语言三方面阐述如何实现多种不同网页特效。　

１用ＨＴＭＬ标记实现网页的多媒体效果　

１．１背景音乐　

在网页中添加背景音乐，将以下代码放在＜ｂｏｄｙ＞与＜／ｂｏｄｙ＞之间：　

＜ｂｇｓｏｕｎｄ　ｓｒｃ＝”ＸＸ．ｍｐ３”ａｕｔｏｓｔａｒ＝”ｔｒｕｅ”ｌｏｏｐ　”ｉｎｆｉｎｉｔｅ”＞　

说明：ｓｒｃ＝”ＸＸ．ｍｐ３”表示媒体文件的路径，这里使用的是相对路径，则媒体文件与当前的网页　

必须放置在同一个目录下，否则会出错。　

１．２透明Ｆｌａｓｈ动画　

先准备好一张图片和一个适合做透明效果的Ｆｌａｓｈ动画（动画的背景颜色最好用单一的颜色），然　

后用Ｄｒｅａｍｗｅａｖｅｒ新建一个网页，插入一个一行一列的表格，表格的规格大小和事先准备好的图片宽高　

收稿日期：２０１２—０４—２７　

基金项目：教育部第三批高等学校特色专业建设点（ＴＳ１１１３５）；２０１２年云南大学教学改革项目：素质教育课程网页设　

计与制作、任务驱动教学方法改革与网络教学模式的研究和实践。　

作者简介：丁海燕（１９７４一），女，云南昆明人，副教授，理学硕士，主要从事计算机应用、网络与软件开发。　

３８　

一

昆明冶金高等专科学校学报　２０１３年１月　

样，然后把单元格的背景图片设为该图片。　

将光标定位在单元格中，切换到代码视图，将光标所在位置处的”＆ｎｂｓｐ；”删除，并书写以下代码：　

＜ｅｍｂｅｄ　ｓｒｃ＝”ＸＸ．ｓｗｆ”ｗｉｄｔｈ＝像素值ｈｅｉｇｈｔ＝像素值ｗｍｏｄｅ＝”ｔｒａｎｓｐａｒｅｎｔ”ａｌｉｇｎ＝”ｃｅｎｔｅｒ”　

＞＜／ｅｍｂｅｄ＞　

说明：ｗｍｏｄｅ＝”ｔｒａｎｓｐａｒｅｎｔ”控制当前Ｆｌａｓｈ动画的背景为透明。　

１．３滚动字幕　

使用＜ｍａｒｑｕｅｅ＞标记符可以在网页上创建一个水平或垂直滚动的文本字幕，将滚动的内容放在＜　

ｍａｒｑｕｅｅ＞＜／ｍａｒｑｕｅｅ＞之间即可。例如：＜ｍａｒｑｕｅｅ　ｄｉｒｅｃｔｉｏｎ＝”ｕｐ”ｂｅｈａｖｉｏｒ＝”ｓｃｒｏｌｌ”ｓｃｒｏｌｌａｍｏｕｎｔ＝　

１　０　ｓｃｒｏｌｌｄｅｌａｙ＝１　００　ｏｎｍｏｕｓｅｏｖｅｒ＝ｔｈｉｓ．ｓｔｏｐ（）ｏｎｍｏｕｓｅｏｕｔ＝ｔｈｉｓ．ｓｔａｒｔ（）＞　

＜ｍａｒｑｕｅｅ＞的常见属性有：　

ｄｉｒｅｃｔｉｏｎ表示滚动的方向，取值为ｌｅｆｔ、ｒｉｇｈｔ、ｕｐ、ｄｏｗｎ，默认为ｌｅｆｔ。　

ｂｅｈａｖｉｏｒ表示滚动的方式，取值为ｓｃｒｏｌｌ（连续滚动）、ｓｌｉｄｅ（滑动一次）、ａｌｔｅｒｎａｔｅ（来回滚动）。　

ｌｏｏｐ表示循环的次数，值是正整数，默认为无限循环。　

ｓｃｒｏｌｌａｍｏｕｎｔ表示运动速度，值是正整数，默认为６。　

ｓｃｒｏｌｌｄｅｌａｙ表示停顿时间，值是正整数，默认为０，单位是ｍｓ。　

ｏｎｍｏｕｓｅｏｖｅｒ：ｔｈｉｓ．ｓｔｏｐ（）ｏｎｍｏｕｓｅｏｕｔ＝ｔｈｉｓ．ｓｔａｒｔ（）表示当鼠标移人区域的时候滚动停止，当鼠　

标移开的时候又继续滚动。　

１．４实现网页的过渡效果　

网页过渡是指当浏览者进入或离开网页时，页面呈现不同的刷新效果，比如横百叶窗或竖百叶窗效　

果。制作网页过渡效果有直接插入ＭＥＴＡ标记和使用ＭＥＴＡ对话框２种方法。　

１）插入ＭＥＴＡ标记　

切换到需要增加网页过渡效果的页面的代码视图，在＜ｈｅａｄ＞与＜／ｈｅａｄ＞之间插入ＨＴＭＬ标记：　

＜ｈｅａｄ＞　

＜ｍｅｔａ　ｈｔｔＤ—ｅｑｕｉｖ＝”ｐａｇｅ—Ｅｘｉｔ”ｃｏｎｔｅｎｔ＝”ｒｅｖｅａｌＴｒａｎｓ（Ｄｕｒａｔｉｏｎ＝３，Ｔｒａｎｓｉｔｉｏｎ＝１０）”＞　

＜ｍｅｔａ　ｈｔｔｐ—ｅｑｕｉｖ＝”ｐａｇｅ—Ｅｎｔｅｒ”ｃｏｎｔｅｎｔ＝”ｒｅｖｅａｌＴｒａｎｓ（Ｄｕｒａｔｉｏｎ＝３，Ｔｒａｎｓｉｔｉｏｎ＝１０）”＞　

＜ｔｉｔｌｅ＞＜／ｔｉｔｌｅ＞　

＜／ｈｅａｄ＞　

说明：”ｈｔｔｐ—ｅｑｕｉｖ＝”Ｐａｇｅ—Ｅｘｉｔ”是指页面离开时所产生的过渡效果。ｈｔｔｐ—ｅｑｕｉｖ＝”Ｐａｇｅ—Ｅｎｔｅｒ”　

是指加载页面时产生的过渡效果。”Ｄｕｒａｔｉｏｎ”的值为页面动态过渡的时间，单位是Ｓ。”Ｔｒａｎｓｉｔｉｏｎ”是过渡　

方式，它的值为０～２３，分别对应２４种不同的过渡方式，如表１所示。　

表１　Ｔｒａｎｓｉｔｉｏｎ过渡方式的取值　

２）使用ＭＥＴＡ对话框　

（１）选择“插入”Ｉ“ＨＴＭＬ”Ｉ“文件头标签”Ｉ“ＭＥＴＡ”命令，这时会弹出一个ＭＥＴＡ对话框。　

（２）在“属性”下拉列表中选择“ＨＴｒＭ－ｅｑｕｉｖａｌｅｎｔ”　

（３）在“值”文本框中输入ｐａｇｅ—Ｅｘｉｔ，在“内容”文本框中输入ｒｅｖｅａｌＴｒａｎｓ（Ｄｕｒａｔｉｏｎ＝３，Ｔｒａｎｓｉ—　

ｔｉｏｎ＝５）　

第１期　丁海燕：网页特效实现的探讨　３９　

（４）单击“确定”按钮，然后保存文件，预览效果。　

２使用“行为＂实现网页特效　

２．１　Ｄｒｅａｍｗｅａｖｅｒ内置行为　

Ｄｒｅａｍｗｅａｖｅｒ提供的“行为”是事件和由该事件触发的动作的组合，Ｄｒｅａｍｗｅａｖｅｒ中提供了很多动　

作，其实就是标准的ＪａｖａＳｃｆｉｐｔ程序。如果所需要的功能在这些动作中，那么就不需要自己编写ＪａｖａＳ．　

ｃｒｉｐｔ程序了。只需要在【行为】面板中，预先指定一个动作，然后指定触发该动作的事件，从而将行　

为添加到页面中。虽然行为也是基于ＪａｖａＳｃｒｉｐｔ来实现动态网页和交互的，但却无需书写任何代码。　

Ｄｒｅａｍｗｅａｖｅｒ　８内置了大约２０多种常用的行为，也可以从Ｍａｃｒｏｍｅｄｉａ　Ｅｘｃｈａｎｇｅ　Ｗｅｂ站点以及第三方开　

发人员站点上下载更多的动作…。　

２．２行为的概念和要素　

行为是为响应某一具体事件而采用的一个或多个动作，它是Ｄｒｅａｍｗｅａｖｅｒ预置的ＪａｖａＳｃｒｉｐｔ程序库。　

当指定的事件触发时，将运行相应的ＪａｖａＳｃｒｉｐｔ程序，执行相应的动作。每个行为包括一个动作和一个　

事件。不同的浏览器支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。　

行为代码是客户端ＪａｖａＳｃｒｉｐｔ代码，它运行于浏览器中，而不是服务器上。不同的网页元素定义了　

不同的事件。一般而言，在大多数浏览器中，ｏｎＭｏｕｓｅＯｖｅｒ和ｏｎＣｌｉｃｋ是与链接有关的事件，而ｏｎＬｏａｄ　

是与图像或文档的ｂｏｄｙ部分有关的事件　。　

行为由对象、事件和动作三要素构成。　

１）对象（Ｏｂｊｅｃｔ）。对象是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒　

体文件等，甚至是整个页面。在网页制作中，可以根据需要将行为附加到整个文档、链接、图像、表单　

对象或任何其它的ＨＴＭＬ元素中，能否附加该行为由浏览器类型决定　Ｊ。不同的ＨＴＭＬ元素能接受的　

行为是不同的。　

２）动作（Ａｃｔｉｏｎ）。动作由预先编写的ＪａｖａＳｃｒｉｐｔ代码组成，这些代码执行特定的任务，例如打开　

浏览器窗口、显示／隐藏元素、播放声音、弹出消息框、播放／停止Ｆｌａｓｈ动画、交换图像、检查表单、　

设置层文本等。从浏览器的角度来看，动作与其它任何一段ＪａｖａＳｃｒｉｐｔ代码完全相同。　

３）事件（Ｅｖｅｎｔ）。事件是浏览器生成的消息，指示浏览者执行了某种操作。事件是触发动态效果　

的原因，它可以被附加到各种页面元素上，也可以被附加到ＨＴＭＬ标记中。一个事件总是针对页面元　

素或标记而言的，常见触发行为的事件如表２所示　Ｊ。　

３常用行为　

表２常见触发行为的事件　

使用Ｄｒｅａｍｗｅａｖｅｒ的【行为】面　

板，能够实现将行为添加到页面元　

素上，并且可以修改所添加行为的　

参数。在行为列表中，事件按字母　

顺序排列。如果同一事件有多个动　

作，则按照在列表上出现的顺序执行这些动作。Ｄｒｅａｍｗｅａｖｅｒ的标准动作包括显示弹出式菜单、交换图像、　

设置文本、弹出信息、打开浏览器窗口、调用ＪａｖａＳｃｒｉｐｔ、显示／隐藏层、拖动层等实例　Ｊ。用户可以将行　

为附加给整个文档，也可以附加给链接、图像以及表单元素等。　

３．１交换图像　

当把鼠标移动到网页上的一幅风景图像时，图像变成了怒放的玫瑰，移出图像时，又恢复显示原来的　

风景图片，这就是“交换图像”动作。“交换图像”动作通过更改ｉｍｇ标签的ＳｌＣ属性将一个图像和另一　

个图像进行交换。使用此动作创建鼠标经过和移出图像时的图像变化效果（包括一次交换多个图像）。　

３．２打开浏览器窗口　

很多网站在打开首页的同时，会弹出一个广告或通知的小窗口，这种效果就是用“打开浏览器窗口”　

行为实现的，这是一个常用行为。使用“打开浏览器窗口”行为可以在一个新的窗口中打开ＵＲＬ，并且可　

昆明冶金高等专科学校学报　２０１３年１月　

以指定新窗口的属性和名称。如果不指定该窗口的任何属性，打开时其大小和属性与打开它的窗口相　

同　。若要实现打开网页时就自动打开一个浏览器窗口，则要将默认的ｏｎＣｌｉｃｋ事件改为ｏｎＬｏａｄ事件。　

３．３设置文本　

可以设置４种文本：设置层文本、设置文本域文字、设置框架文本和设置状态栏文本，默认事件为　

“ＯｎＭｏｕｓｅＯｖｅｒ”。“设置层文本”动作就是用指定的内容替换页上现有层的内容和格式设置。该内容可　

以包括任何有效的ＨＴＭＬ源代码。通过在“设置层文本”对话框的“新建ＨＴＭＬ”文本框中包括ＨＴＭＬ　

标签，可对内容进行格式设置。“设置文本域文本”动作就是用指定的内容替换表单文本域的内容。　

“设置框架文本”动作就是用指定的内容替换指定框架的内容。“设置状态栏文本”动作就是在浏览器　

窗口的状态栏中显示消息　。　

３．４转到ＵＲＬ　

框架结构的网页可以实现当点击一个框架中的链接时，在另外一个框架中打开对应的页面。可是如果要　

实现点击一个链接同时改变２个或多个框架内容时该怎么办呢　７这时可以使用“转到ＵＲＬ”动作。　

“转到ＵＲＬ”动作在当前窗口或指定的框架中打开一个新页。此操作尤其适用于通过一次单击更改　

２个或多个框架的内容。　

４用脚本语言实现网页特效　

绝大部分网页特效都是用客户端脚本语言（ＪａｖａＳｃｒｉｐｔ或ＶＢＳｃｒｉｐｔ）实现的。ＪａｖａＳｃｒｉｐｔ结构简单，　

使用方便，其代码可以直接放入ＨＴＭＬ文档中，ＪａｖａＳｃｒｉｐｔ使得网页的交互性更强，更生动和灵活，当　

在浏览网页时做了某种操作就产生一个事件，ＪａｖａＳｃｒｉｐｔ所编写的程序可对相应的事件做出反应。　

例如，在网页中实现图片倒影效果的代码如下：　

＜ｂｏｄｙ　ｂｇｃｏｌｏｒ＝”＃ＦＦＦＦＦＦ”ｏｎｌｏａｄ：”ｍｙｆ（）”＞　

＜ｉｍｇ　ｈｅｉｇｈｔ＝１０２　ｉｄ＝ｍｙｉｍｇ　ｓｒｃ＝”ｐｅｎｇｕｉｎ．ｇｉｆ”ｗｉｄｔｈ＝２４０＞＜ＢＲ＞　

＜ｓｃｒｉｐｔ　ｌａｎｇｕａｇｅ＝ＪａｖａＳｃｒｉｐｔ＞　

＜！一一ｆｕｎｃｔｉｏｎ　ｍｙｆ（）　

｛ｓｅｔｌｎｔｅｒｖａｌ（”ｍｙｄｉｖ．ｆｉｌｔｅｒｓ．ｗａｖｅ．ｐｈａｓｅ＋＝１０”，１００）；｝　

ｉｆ（ｄｏｃｕｍｅｎｔ．ａｌ１）　

｛ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（　＜ｉｍｇ　ｉｄ＝ｍｙｄｉｖ　ｓｒｅ＝”　＋ｄｏｃｕｍｅｎｔ．ａｌ１．ｍｙｉｍｇ．ｓｒｅ＋…ｓｔｙｌｅ＝”ｆｉｌｔｅｒ：ｗａｖｅ　

（ｓｔｒｅｎｇｔｈ＝３，ｆｒｅｑ＝３，ｐｈａｓｅ＝０，ｌｉｇｈｔｓｔｒｅｎｇｔｈ＝３０）ｂｌｕｒ（）ｆｌｉｐｖ（）”＞　

｝　一一＞　

＜／ｓｃｒｉｐｔ＞＜／ｂｏｄｙ＞　

说明：函数ｍｙｆ（）是用ＪａｖａＳｃｒｉｐｔ语言编写的，通过＜ｓｃｒｉｐｔ＞标记插入到＜ｂｏｄｙ＞＜／ｂｏｄｙ＞之　

间，＜ｂｏｄｙ　ｂｇｃｏｌｏｒ＝”＃ＦＦＦＦＦＦ”ｏｎｌｏａｄ＝”ｍｙｆ（）”＞表示加载网页时调用ｍｙｆ（）函数。图片的　

ＣＳＳ样式使用了ｗａｖｅ滤镜（波形），并可以通过修改滤镜的参数，如强度ｓｔｒｅｎｇｔｈ，频率ｆｒｅｑ，相位　

ｐｈａｓｅ，亮度ｌｉｇｈｔｓｔｒｅｎｇｔ来控制图片倒影的效果。　

５结语　

网页中的动态效果可以通过ＨＴＭＬ的标记实现，也可以通过Ｄｒｅａｍｗｅａｖｅｒ自带的内置行为来实现，　

还可以通过在网页中嵌入脚本程序来实现，网页特效的实现一方面使网页变得绘声绘色；另一方面也促　

进了知识到能力的转换。在实际应用中，只有不断地实践和创新才能取得更好的网页动态效果。　

参考文献：　

［１］聂小燕，王敏，鲁才．Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３完全自学教程［Ｍ］．北京：机械工业出版社，２００９．　

［２］袁鑫．Ｄｒｅａｍｗｅａｖｅｒ　８的行为应用［Ｊ］．科技咨询导报，２００７（９）：１３—１５．　

［３］丁海燕．Ｄｒｅａｍｗｅａｖｅｒ网页设计与制作案例教程［Ｍ］．北京：清华大学出版社，２０１２．　

［４］丁蕙．Ｄｒｅａｍｗｅａｖｅｒ行为功能的分析与实现【Ｊ］．电脑知识与技术，２００８，４（４）：１２１０—１２１１　

［５］姚鲁宁．Ｄｒｅａｍｗｅａｖｅｒ内置行为的奥秘［Ｊ］．电脑技术，２００２（４）：５８—６１．