《网页设计与制作实例教程》第8章(王军)

清华大学出版社《网页设计与制作实例教程》第8章高等学校计算机应用规划教材添加网页特效

2024/9/15主编方其桂一个优秀的网站，不仅需要搭建合理的结构，丰富多彩的内容，得当的网页特效会使得网站更加吸引人。DreamweaverCS6中提供了通过网页行为、AP元素和Spry构件等来添加网页特效，使用简单方便，效果明显。本章通过实例，介绍各种网页特效的效果和添加网页特效的方法。内容提要使用网页行为添加网页特效使用AP元素增加网页特效使用Spry构件增强视觉效果010203章节目录内容提要教学内容DreamweaverCS6中的行为命令，实际上就是一系列具有特定功能的JavaScript程序脚本。一个完整的行为，需要包括“事件”和“动作”才能运行。“事件”是指在计算机上发生的一些操作；而“动作”则是指在发生了事件后，所触发并执行的一系列处理动作。教学内容8.1.1交换位图实例1交换位图选择2张图片，一张做为初始图像显示在网页中，当鼠标单击图像时，图像变成另一张图片，当鼠标离开图像显示范围时，图像又恢复到初始图像，本例中交换图像后的效果如下图所示教学内容8.1.2弹出信息实例2弹出信息

给图像设置“弹出信息”行为，当用户在当前图像区域单击图像时，触发“弹出信息”行为，以窗口形式显示信息内容，效果如图8-4所示。教学内容8.1.3打开窗口实例3打开浏览器窗口

对网页中的图像设置“打开浏览器窗口”动作，单击图像触发事件，打开指定网页。如图8-6(a)所示为网页显示效果，图8-6(b)所示为单击图片后显示的打开指定浏览器窗口效果。教学内容8.1.4其它效果实例4增大/收缩效果

对网页中的图像设置“效果”行为，设置单击图像时图像增大200%，鼠标离开图像区域后，恢复图像比率。如图8-8(a)所示是一幅有待处理的图像，图8-8(b)所示是一个处理完成的图像。教学内容8.1.4其它效果实例5晃动效果DreamweaverCS6效果行为中“晃动效果”经常用于网页中，通过晃动指定对象，达到引起用户的注意。

设置“晃动效果”首先要指定对象，再在行为列表中“效果”选项中设置“晃动”，最后设置行为触发动作。用户浏览网页是触发相关动作后，指定图像立即晃动以引起用户的注意。教学内容知识库1．DreamweaverCS6行为

在DreamweaverCS6中对象行为种类众多，作用各不相同，表8-1罗列出DreamweaverCS6行为的动作名称和动作的功能。动作名称动作的功能交换图像发生事件后，用其他图像来取代选定的图像弹出信息设置事件发生后，弹出窗口显示信息恢复交换图像设置事件后，恢复先前已经交换的图像打开浏览器窗口在新窗口中打开URL，可以定制窗口大小拖动AP元素设置鼠标可以拖动相应的apDiv元素改变属性改变选定对象的属性效果设置对象显示效果，分别有增大/收缩、挤压、显示/渐隐、晃动、滑动、遮帘和高亮颜色7种效果显示-隐藏元素根据设定的事件，显示或隐藏指定的内容检查插件检查当前设备是否具备相应的插件检查表单检查当前网页是否具有指定的表单设置文本在指定的内容中显示相应的内容，分为设置层文本、设置框架文本、设置文本域文本和设置状态栏文本教学内容知识库2．网页特效

网页特效是用程序代码在网页中实现的特殊效果或者特殊的功能的一种技术，是用网页脚本(javascript,vbscript)来编写制作动态特殊效果。它为网页活跃了网页的气氛，有时候会起到一定的亲切力。

它一般分为：时间日期类、页面背景类、页面特效类、图形图象类、按钮特效类、鼠标事件类、Cookie脚本、文本特效类、状态栏特效、代码生成类、导航菜单类、页面搜索类、在线测试类、密码类、技巧类、综合类和游戏类等等。DreamweaverCS6中的AP

元素（绝对定位元素）是分配有绝对位置的

HTML

页面元素，具体地说，就是

div

标签或其他任何标签。AP

元素可以包含文本、图像或其他任何可放置到

HTML

文档正文中的内容。8.2.1拖动元素效果实例6拖动元素APDiv在DreamweaverCS6中拥有绝对位置，在网页中先插入APDiv为对象设置好位置，再在APDiv中插入对象。要想实现鼠标拖动效果，就要为APDiv在行为中设置“拖动AP元素”效果。

制作时应先在网页中插入APDiv，再设置APDiv行为效果。8.2.2切换元素效果实例7切换元素

本例通过对多个AP元素添加鼠标响应的行为命令，实现控制AP元素的显示与隐藏，从而达到不同AP元素间的切换效果，如图8-15(a)所示为网页显示效果，图8-15(b)所示为单击图片后显示的打开指定浏览器窗口效果。8.2.3分割元素效果实例8分割AP元素

本例中将介绍在DreamweaverCS6中通过AP元素将分割成4份的图像完整的显示在网页中，以加快图像的显示效果。图8-19显示的是4幅由AP元素构成的一张完整的图像。

制作前，先用图像处理软件将大图像分割成4个小图像，然后在DreamweaverCS6中插入4个AP元素，分别在这4个AP元素中插入4个小图像。设定好各AP元素的位置后，即可在浏览器中显示完整的图像。8.2.4热点链接效果实例9热点链接

本例中将在中国地图中制作“北京天气预报”链接，通过鼠标单击地图中的北京所在位置，在新的页面显示“北京天气预报”。如图8-22(a)所示是单击前效果，图8-22(b)所示是单击后新的页面显示的效果。知识库1．AP元素Dreamweaver中，AP元素（绝对定位元素）是分配有绝对位置的HTML页面元素，具体地说，就是div标签或其他任何标签。AP元素可以包含文本、图像或其他任何可放置到HTML文档正文中的内容。

通过Dreamweaver，用户可以使用AP元素来设计页面的布局。可以将AP元素放置到其他AP元素的前后，隐藏某些AP元素而显示其他AP元素，以及在屏幕上移动AP元素。可以在一个AP元素中放置背景图像，然后在该AP元素的前面放置另一个包含带有透明背景的文本的AP元素。AP元素通常是绝对定位的div标签，可以将任何HTML元素（例如，一个图像）作为AP元素进行分类，方法是为其分配一个绝对位置。所有AP元素都将在“AP元素”面板中显示。知识库2．APDiv布局APDiv是HTML中的重要组成元素之一，网页可以通过APDiv实现对页面的规划和布局。div元素是一个块元素，在其中间可以包含文本、段落、表格、章节等复杂的内容。

在页面中使用div标记的的语法格式如下所示：<div参数>中间部分</div><div>标记中的常用参数如下：class:本HTML文件范围内的标识符class类；lang:语言信息，dir:文字方向onclick和ondblclick等：鼠标和键盘键各种事件发生时处理方法的定义。

在DreamweaverCS6中添加网页菜单特效，当用户选中一个菜单选项后，该选单会向下延伸出具有其他选项的另一个选单或链接打开菜单所对应的网页。DreamweaverCS6提供了两种菜单栏构件：水平菜单栏构件和垂直菜单栏构件。8.3.1创建菜单特效实例10创建菜单

本案例向我们展示了网页中的菜单创建与修改，在DreamweaverCS6中Spry构件提供了“Spry菜单栏”选项，利用这一选项可轻松在网页中创建菜单，图8-26就是应用“Spry菜单栏”选项创建的菜单。

制作时应先在在DreamweaverCS6中插入布局对象中的“Spry菜单栏”，再通过属性面板修改菜单选项即可。8.3.1创建菜单特效实例11编辑菜单

本案例向我们展示了在DreamweaverCS6中插入“Spry菜单栏”选项后，根据网页设计需要，编辑菜单栏以达到满意效果，效果如图8-29所示。

制作时应先在DreamweaverCS6中插入布局对象中的“Spry菜单栏”，再通过“属性”面板编辑菜单选项即可。8.3.2增加选项特效实例12选项特效

本例通过在DreamweaverCS6中插入“Spry选项卡面板”，运用“北京申办2022年冬季奥运会”案例，介绍北京申办2022年冬季奥运会相关知识，向读者介绍申办2022年冬季奥运会过程中一些知识，效果如图8-33所示。

制作本案例时，行在DreamweaverCS6中插入“Spry选项卡面板”，并根据知识内容需要添加或删除选项卡数量，然后修改各选项卡标题内容，输入选项卡正文内容。8.3.3使用折叠特效实例13折叠效果

本例中将继续以2022北京冬奥会内容为例，介绍在DreamweaverCS6中使用“Spry折叠式”选项实现网页如图8-36所示折叠效果。

制作本案例时，行在DreamweaverCS6中插入“Spry折叠式”，并根据知识内容需要添加或删除选项卡数量，然后修改各选项卡标题内容，输入选项卡正文内容。8.3.4显示可折叠特效实例14可折叠效果

本例中将在以DreamweaverCS6知识内容为案例，讲解DreamweaverCS6中“Spry可折叠面板”的使用，效果如图8-39所示。

制作本案例时，行在DreamweaverCS6中插入“Spry可折叠面板”，并根据知识内容需要确定面板的折叠或显示效果，然后修改各选项卡标题内容，输入选项卡正文内容。如果是多项折叠内容，需要多次插入“Spry可折叠面板”选项方可。知识库1．SprySpry框架是一个JavaScript

库，用户使用它可以构建能够向站点访问者提供更丰富体验的Web页。有了Spry，就可以使用

HTML、CSS和极少量的JavaScript将XML

数据合并到HTML文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。

在设计上，Spry框架的标记非常简单且便于那些具有HTML、CSS和JavaScript基础知识的用户使用。Spry框架主要面向专业Web设计人员或高级非专业Web设计人员。Spry可以使用XML和JSON两种格式的数据源。知识库2．查看网页特效源代码

当发现一个网页制作特效非常好，想查看网页特效源代码时，可按图8-42所示操作，查看网页源代码。8.4.1本章小结

本章主要介绍了添加网页特效所必须具备的基础知识，具体包括以下主要内容。

使用网页行为添加网页特效：详细介绍了在网页中给特定对象添加行为，实现对象的特殊效果，详细介绍了各种行为的应用，通过设置行为参数，增加网页特效的多样化。

使用AP元素增加网页特效：介绍了在网页中通过对APDiv标签特效处理，详细介绍了APDiv标签的使用，以及运用行为特效实现网页特效。

作用Spry构件增强视觉效果：详细介绍了使用Spry构件实现菜单、选项卡、折叠和可折叠4种网页特效，通过案例操作，分部讲解，使Spry构件由浅入深地展示在学习者面前。8.4.2强化练习一、填空题1.在浏览网页时，当用户将鼠标指针移到文字或图像上时，鼠标指针会改变形状或颜

色，这就是在提示浏览者，此对象为_____。2.

鼠标经过图像的效果由两张大小相等的图像组成，一张成为主图像，另一张称为次

图像。_____是首次载入网页时显示的图像，_____是当鼠标指针经过时更换的另一

张图像。3._____是网页中的一个区域，并且游离在文档之上。利用层可精确定位和重叠网页

元素。4.文档窗口中有3种视图方式，分别是_____、_____、_____。5._____是网页设计中一个非常有用的工具，它不仅可以将相关数据有序地排列在一

起，还可以精确地定位文字、图像等网页元素在页面中的位置，使得页面在形式上

丰富多彩又条理清楚，在组织上井然有序而不显单调。8.4.2强化练习二、选择题1.通过Dreamweaver

CS6的导入和导出站点的功能，站点导出的文件格式为（

）

A

.*.html

B.

*.ste

C

.*.gif

D.

*.css2.以下操作能实现连续输入空格的是

（

）A

.选择“编辑”——“首选参数”在常规选项卡中选择“允许多个连续的空格”复

选框

B.选择“插入”——“HMTL”——“特殊字符”——“不换行空格”命令C.按住快捷键

Ctrl

+

Shift

+

Space

D.

连续按多个空格键