第10章 使用行为制作网页特效

1. 创建或选择要触发行为的页面元素；
2. 选择要应用的行为，并设置其参数； 3. 指定触发该行为的事件。
4. 通过学习设置“打开浏览器窗口”行为的具体步骤，掌握了在 Dreamweaver中添加行为的方法。
《网页设计与制作案例教程》（第2版）
10.3 案例2 利用JavaScript实现加载网页时弹出消息框
《网页设计与制作案例教程》（第2版）
10.1 学习任务：认识行为
行为是Dreamweaver CS5中一个非常强大的工具。 使用行为，编程人员不用编写Javascript代码便可实现 多种动态网页特效。Dreamweaver CS5提供了很多 行为，这些行为放在其内部行为库中。
本节学习任务 认识行为，了解行为的相关概念以及属性、事件、 方法的含义；掌握行为面板的基本操作。
事件是触发动态效果的原因，它可以被附加到各种页面元素上， 也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而 言的，例如将鼠标指针移到图片上、把鼠标指针放在图片之外和单击 鼠标左键，是与鼠标有关的三个最常见的事件(onMouseOver、 onMouseOut、onClick)。不同浏览器支持的事件类型和数量是不 一样的，通常高版本的浏览器支持更多的事件。
《网页设计与制作案例教程》（第2版）
请在Dreamweaver 中完成案例的 制作。
《网页设计与制作案例教程》（第2版）
10.3.1 认识JavaScript
Dreamweaver CS5内置了丰富的行为。行为是某些事件触 发的动作，而动作则是Dreamweaver CS5库中的 JavaScript 代码或用户自定义的代码。
《网页设计与制作案例教程》（第2版）
JavaScript在网页中有两种简单的调用方法，一种 是直接将JavaScript脚本语言嵌入到网页中，另一种 是引用外部JavaScript文件。
《网页设计与制作案例教程》（第2版）
1．直接嵌入HTML文档
这是最常用的方法，大部分含有JavaScript的网页 都采用这种方法，打开网页文件“01.html”，可以查 看代码如下所示：
《网页设计与制作案例教程》（第2版）
操作步骤如下：
1. 在Dreamweaver中打开网页文件“10-3.html”，如图10-9所 示。
2. 选择“body”标签，单击“窗口→行为”菜单命令，打开”标签 检查器”面板，单击“添加行为”按钮 ，选择“调用Javascript” 菜单命令，弹出“调用Javascript”对话框。在文本框中输入 JavaScript脚本“window.alert("欢迎访问夏威夷风情网")”， 如图10-10所示。
动作是指最终需完成的动态效果，如交换图像、弹出信息、打开 浏览器窗口、播放声音等都是动作。动作通常是一段JavaScript代码。 在Dreamweaver CS5中使用内置行为时，系统会自动向页面中添 加JavaScript代码，用户完全不必自己编写。
《网页设计与制作案例教程》（第2版）
10.1.2 “标签检查器”面板
请在Dreamweaver中完成案例的制作。
《网页设计与制作案例教程》（第2版）
案例小结 本节主要介绍通过Dreamweaver内置的 “设置文本”行为为网页设置所要显示的内容。为网页 元素设置文字的重点在于HTML标签和JavaScript脚本 语言的使用。
《网页设计与制作案例教程》（第2版）
学习目标 使用Dreamwear的“打开浏览器窗口” 行为制作网页加载时弹出公告页。
知识要点 创建行为的步骤，“打开浏览器窗口”行 为。当加载网页时，弹出公告页，如图10-3所示。
《网页设计与制作案例教程》（第2版）
案例小结 在Dreamweaver CS5中，内置了丰富 的行为。行为的设置是通过”标签检查器”面板完成 的。添加行为的步骤为：
《网页Байду номын сангаас计与制作案例教程》（第2版）
10.1.1 行为概述
行为是对象为响应某一事件而采取的动作，它由对 象、事件和动作组成。
对象是产生行为的主体。很多网页元素都可以成为 对象，如图片、文字、多媒体文件等。此外，网页本身 有时也可作为对象。
《网页设计与制作案例教程》（第2版）
10.1.1 行为概述
《网页设计与制作案例教程》（第2版）
本章学习内容
10.1 学习任务：认识行为
10.2 案例1 制作网页加载时弹出公告页
10.3 案例2利用JavaScript实现加载网页时弹出消息框 10.4 案例3 使用行为设置图像特效 10.5 案例4 使用行为设置文本 10.6 案例5 使用行为设置跳转菜单效果 10.7 案例6 制作网页拼图游戏
《网页设计与制作案例教程》（第2版）
学习目标 为网页添加“设置状态栏文本”行为，当 浏览网页时在状态栏显示相应信息；为AP Div添加 “设置容器的文本”行为，当鼠标经过时，用指定内容 替换AP Div中的图像。
知识要点 为网页添加“设置状态栏文本”行为、为 AP Div添加“设置容器行为”。
学习目标 为网页调用JavaScript，当加载网页时， 弹出对话框，提示用户当前正访问的网站。
知识要点 了解JavaScript基本概念、在网页中引 用JavaScript脚本的两种方法，掌握通过“标签检查 器”面板调用JavaScript脚本的步骤。 在浏览器中打开网页时，弹出消息框，由浏览者单 击【确定】后继续浏览网站。效果如图10-7所示。
在Dreamweaver CS5中，对行为的添加和管理主 要通过”标签检查器”面板完成，在菜单栏中选择“窗 口→行为”命令或按<Shift+F4>组合键，可以打开” 标签检查器”面板，如图10-1所示。
《网页设计与制作案例教程》（第2版）
10.1.3 事件
用户与网页交互时产生的操作，称为事件。事件可以由用户引 发，也可能是页面发生改变，甚至还有看不见的事件（如Ajax的 交互进度改变）。绝大部分事都由用户的动作所引发，如：用户 单击鼠标触发onClick事件，若鼠标移动到目标时，触发 onMouseOver事件等等。在Javascript中，事件往往与事件处理 程序配套使用。
每个浏览器都提供一组事件，这些事件可以与”标签检查器” 面板的“动作”(+) 弹出菜单中列出的动作相关联。当网页的访 问者与页面进行交互时（例如，单击某个图像），浏览器会生成 事件；这些事件可用于调用执行动作的 JavaScript 函数。 Dreamweaver 提供多个可通过这些事件触发的常用动作。
JavaScript是一种由Netscape的LiveScript发展而来的面向 对象的客户端脚本语言，主要目的是为了解决服务器端编程语言 如Perl速度过慢的问题，以便为客户提供更加流畅的浏览体验。 JavaScript的正式名称是“ECMAScript”，由 ECMA （European Computer Manufacturers Association，欧洲电 脑厂商协会）组织发展和维护。ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)，JSript是微软为了取得技术优势，推出的 脚本语言。目前JavaScript的最新版本为2.0。
… <script type=“text/javascript”>
document.write("hello world!");
</script> Javascript……
…
《网页设计与制作案例教程》（第2版）
2．引用方式
如果已经存在一个Javascript源文件（以js为扩展名），则可 以在网页中引用它，以提高代码的利用率。其格式如下：
《网页设计与制作案例教程》（第2版）
10.4 案例3 使用行为设置图像特效
Dreamweaver CS5内置了“交换图像”、“预先载入图 像”、等图像行为特效。“交换图像”行为通过更改<img>标签 的src属性将一个图像和另一个图像进行交换。使用此行为可创建 “鼠标经过图像”的效果以及其他图像效果（包括一次交换多个 图像）。“预先载入图像”行为可以将不会立即出现在网页上的 图像载入到浏览器缓存中，这样可以防止由于网速导致图像下载 缓慢而带来的浏览延迟。 学习目标 在网页中插入一幅图像并设置ID，选中图像，添加 “交换图像”行为并设置参数，当鼠标经过图像时切换图像。
《网页设计与制作案例教程》（第2版）
10.1.4 Dreamweaver CS5的标准行为
针对Internet Explorer4.0或更高版本浏览器。在 “标签检查器”面板中，单击【添加行为】按钮 ，可 以展开行为菜单，如图10-2所示。
《网页设计与制作案例教程》（第2版）
10.2 案例1 制作网页加载时弹出公告页
第10章 使用行为制作网页特效
《网页设计与制作案例教程》（第2版）

Dreamweaver行为是一段Javascript代码，当某 个事件触发它时，将执行一个动作，如打开浏览器窗口 或显示页面元素。使用Dreamweaver内置的行为，不 需要编写代码，就可以实现复杂的网页特效。
10.6 案例5 使用行为设置跳转菜单效果
<script src＝"url" type="text/javascript"></script>
其中的url就是程序文件的地址。同样的，该语句可以放在 HTML文档头部或主体的任何部分。如果要实现“直接插入方式” 中所举例子的效果，可以首先创建一个Javascript源代码文件 “script.js”，其内容如下： document.write("hello world!"); 在网页“02.html”中，调用脚本文件“script.js”：