第15章 利用JavaScript制作网页特效

1、第第15章章 利用利用JavaScript制作网页特效制作网页特效 学习目标 添加网页行为 1 文本交互 2 窗口交互 3 图像交互 4 AP div交互5 网页对象交互 6 应用网页交互 v网页与其他平面媒体最大的区别就在于其 拥有强大的交互性。几乎所有的浏览器都 支持用户通过JavaScript等脚本语言编写各 种交互式应用程序，以响应网页浏览者的 各种即时操作。 v为提高用户通过JavaScript脚本语言实现网 页交互的效率，同时降低编写JavaScript脚 本的难度，Dreamweaver CS4提供了强大 的行为功能，允许用户通过可视化的操作， 为网页添加丰富的交互应用。 15.

2、1 检查网页标签 v标签是构成网页的基础。使用Dreamweaver CS4，用户可以通过【标签检查器】面板， 检查和设置当前选中的网页标签中各种类型 的可用属性，以及为该标签添加和编辑各种 行为。 15.1.1 检查标签属性 v【标签检查器】面板默认打开的是【属性】 的选项卡，在该选项卡中，提供了一个目 录树形式的分类列表，列出了当前选择的 标签各种属性的分类。 1、修改显示方式 在【标签检查器】面板中，用户可以单击【显 示列表视图】按钮 ，定义当前标签的属性以字 母顺序列表的方式显示。 2、标签属性类别 在类别视图模式下，Dreamweaver将各种网页 标签的属性分类会根据当前选择的标签

3、类型而 发生变化，动态地进行更新。 15.1.2 管理网页行为 v行为是Dreamweaver CS4中一项重要的功 能。通过该功能，用户无须编写JavaScript 脚本代码，即可通过界面操作选择相关类型 的行为，并设置触发该行为的事件以及目标， 实现网页的各种交互应用。 1使用行为选项卡使用行为选项卡 在使用Dreamweaver的行为功能时，应在 【标签检查器】面板中单击【行为】选项 卡，然后即可查看当前网页中添加的各种 行为，并通过面板对网页进行添加行为、 编辑行为等操作。 2Dreamweaver事件类型事件类型 在Dreamweaver所支持的事件中主要包括 15种，其中某些特殊的

4、类型只对特定的网 页标签有效。 15.1.2 管理网页行为 15.2 文本交互行为 vDreamweaver CS4内置了许多类型的交互 行为。其中，有4种交互行为与文本有关， 即设置容器文本、设置文本域文本、设置框 架文本以及设置状态栏文本等。使用这些行 为，可以方便地分别为各种网页容器标签、 文本域、框架或浏览器状态栏内添加文本内 容。 15.2.1 设置容器的文本 v容器是网页中包含内容的标签的统称， 典型的容器包括各种定义ID属性的表格、 层、框架、段落等块状标签。在应用容器 文本的交互行为后，可根据指定的事件触 发交互，将容器中已有的内容替换为更新 的内容。 15.2.2 设置状态栏

5、文本 v状态栏是在浏览器窗口底部，显示当前网页打开 状态以及鼠标滑过的网页对象等情况的一种特殊工 具栏。在网页中，用户可以通过JavaScript脚本语言 等定义状态栏中的文本内容。 vDreamweaver CS4提供了可视化的方法帮助用户 在状态栏添加文本内容，以使网页更加丰富多彩。 v在Dreamweaver中选中body标签，然后即可在 【标签检查器】面板的【行为】选项卡中单击【添 加行为】按钮 ，执行【设置文本】|【设置状态栏文 本】命令，在弹出的【设置状态栏文本】对话框中 输入文本，然后即可单击【确定】，在行为列表左 侧设置触发行为的事件。 15.3 窗口交互行为 v窗口交互行为也

6、是一种重要的网页交互 行为。同时，其也是最常用的网页交互行 为。在Dreamweaver CS4预置的行为中， 主要包括弹出信息和打开浏览器窗口等两 种窗口交互行为。 15.3.1 弹出信息 v【弹出消息】行为显示一个包含指定消息 的JavaScript警告。因为JavaScript警告对话 框只有一个【确定】按钮，所以使用此行为 可以提供用户信息，但不能为用户提供选择 操作。 15.3.2 打开浏览器窗口 v与弹出信息行为类似，打开浏览器窗口也 是一种重要的网页行为，其可以在行为触 发时为当前网页打开一个新的网页窗口， 并在窗口中显示其他网页文档的内容。打 开浏览器窗口的行为在网页设计中被使

7、用 的几率非常高，很多网页都通过打开浏览 器窗口的行为插入各种广告。 15.4 图像交互行为 v图像是网页中最明显且最容易让用户理解 的内容。在Dreamweaver CS4中，提供了 一些使图像更具有动感的行为，即Dreamw eaver图像交互行为。在Dreamweaver的图 像交互行为中，主要包括交换图像行为、导 航栏图像行为等2种。 15.4.1 交换图像 v交换图像功能是指将某一个网页图像转换 为其他网页图像的行为功能。在之前的章节 中，已介绍了使用Dreamweaver的【插入】 命令制作鼠标经过图像的功能。这种鼠标经 过功能其实就是一种交换图像功能。 vDreamweaver行

8、为中的交换图像行为比鼠 标经过图像的功能更加强大。其不仅能够制 作鼠标经过图像，还可以使图像交换的行为 响应任意一种网页浏览器支持的事件，包括 各种焦点事件、键盘事件、鼠标事件等。 15.4.2 导航栏图像 v导航条是网页中相当常见的版块。使用Dre amweaver CS4的行为功能，还可以制作出 更加复杂的，集成鼠标单击事件的导航条栏 目。此时，就可以使用Dreamweaver内置的 【设置导航栏图像】行为。 v在Dreamweaver中首先插入导航栏中的各 种按钮图像，在【属性】检查器中分别为各 按钮图像执行【设置导航栏图像】命令。 15.5 AP Div交互行为 v AP div是一种

9、重要的网页容器。其特点 是可以方便地固定在网页中任意的位置， 同时可以方便地设置大小尺寸等。因此， 在Dreamweaver中专门为这种网页容器设 计了多种交互行为。 15.5.1 拖动AP元素 vDreamweaver允许用户使用鼠标方便地拖拽网页 中的AP元素，将其固定在某个位置上。然而，在一 些网页中，往往允许用户自行在浏览器中拖动AP元 素。此时就需要为这些AP元素添加【拖动AP元素】 的特效。 v在Dreamweaver中一个可识别的（包含内容的） AP元素，然后即可将鼠标光标置于网页文档的空白 处，在【标签检查器】面板的【行为】选项卡中单 击【添加行为】按钮 ，执行【拖动AP元素】

10、命令， 打开【拖动AP元素】对话框。 15.5.2 显示-隐藏元素 v显示-隐藏元素行为可以显示、隐藏或者恢复一个或多个页 面元素的默认可见性。此行为用于在用户与网页进行交互时 显示信息。添加该行为的前提是，网页文档中要包括至少两 个元素，其中一个必须是AP元素。 v显示-隐藏元素行为通常被使用在一些特殊的网页元素，例 如下拉列表式的导航条、各种弹出式菜单、多个交换的网页 内容部分等。 v在Dreamweaver中分别建立多个AP元素，后即可分别在 【属性】检查器中设置其【可见性】的属性，只保留一个为 显示，其他均设置为隐藏。为网页添加相应数量的标签，然 后在选择某一个标签，在【标签检查器】面

11、板的【行为】选 项卡中单击【添加行为】按钮 ，执行【显示-隐藏元素】命 令，打开【显示-隐藏元素】对话框。 15.6 网页对象与行为 v除了文本、窗口、图像以及AP Div等网页 对象外，网页中还包括许多种对象。 Dreamweaver也为这些网页对象提供了一 些行为特效，包括效果行为、改变属性行为 等。 15.6.1 效果行为 v在网页设计中，经常需要为各种图像对象 添加一些带有动画特色的交互行为，以使网 页更加个性化。此时，就可以使用 Dreamweaver CS4中预置的效果行为。 Dreamweaver预置了7种基本的效果行为， 可以对图像进行各种带有渐进式的属性修改。 15.6.1

12、效果行为 1增大增大/收缩收缩 增大/收缩效果行为的作用名符其实，就是 渐进式地动态改变网页图像的尺寸，以制 作而成的特殊效果。在网页中选中已添加 的图像，在【属性】检查器中设置图像的 【ID】属性。 15.6.1 效果行为 2挤压挤压 挤压特效也是一种针对图像进行缩放的效 果。其与【增大/收缩】特效的区别在于， 用户无法直接设置收缩图像的起始尺寸、 结束尺寸以及收缩所花费的时间。在为图 像添加【挤压】特效后，图像会在以指定 的加速度缩小直至完全消失。 15.6.1 效果行为 3显示显示/渐隐渐隐 【显示/渐隐】特效与【增大/收缩】特效类 似，都可以通过相应的对话框进行定制， 以实现增加或降低

13、网页图像透明度的动画 效果。 15.6.1 效果行为 4晃动晃动 晃动特效的设置方式与挤压类似，在这类 特效中，用户都不需要设置任何相关的属 性，直接为图像添加行为即可。 15.6.1 效果行为 5滑动滑动 滑动特效也是一种重要的Dreamweaver行 为。其可以控制网页中的图像从上方坠落 到下方，或从下方上升到上方。与之前几 种关于图像的效果行为所区别，滑动的特 效不能直接应用于网页的图像，只能应用 到带有ID属性的层中。 15.6.1 效果行为 6遮帘遮帘 遮帘效果的作用是为图像添加一个遮罩， 从图像的上方或下方逐渐移动，直至将图 像完全遮盖。与滑动的效果类似，遮帘效 果也必须应用在带有ID属性的div标签内才 能够起作用。 15.6.1 效果行为 7高亮颜色高亮颜色 高亮颜色效果更改的是元素的背景颜色， 一般用于表格与AP元素等可定义背景图像 的网页容器。在为这些网页对象使用高亮 颜色特效时，应尽量避免在其中插入尺寸 较大的图像或视频等，以防止其遮罩住高 亮颜色特效。 15.6