网页设计与制作：行为与时间轴

1、第第7章章 行为与时间轴行为与时间轴 随着随着Internet的普及，网站不再局限于提供的普及，网站不再局限于提供 信息的简单功能，越来越注重和用户的交互信息的简单功能，越来越注重和用户的交互 功能。越来越多的网站可以实现让访问者在功能。越来越多的网站可以实现让访问者在 网页上发表信息，或者进行网上交易等交互网页上发表信息，或者进行网上交易等交互 性的功能。性的功能。 7.1 行为 一、行为概述一、行为概述 行为，就是在网页中进行的一系列动作，通过这些行为，就是在网页中进行的一系列动作，通过这些 动作实现用户与页面的交互。动作实现用户与页面的交互。 行为由事件和动作组成，它通过对事件的响应执行

2、行为由事件和动作组成，它通过对事件的响应执行 相应的动作。事件是浏览器生成的消息，指示该页的浏相应的动作。事件是浏览器生成的消息，指示该页的浏 览者执行了某种操作。网页事件分为不同的种类。有的览者执行了某种操作。网页事件分为不同的种类。有的 与鼠标有关，有的与键盘有关，如鼠标单击、键盘某个与鼠标有关，有的与键盘有关，如鼠标单击、键盘某个 键按下等。有的事件还和网页相关，如网页下载完毕，键按下等。有的事件还和网页相关，如网页下载完毕， 网页切换等。网页切换等。 动作是用于完成特定任务预先编好的动作是用于完成特定任务预先编好的JavaScript代代 码，诸如打开一个浏览器窗口，播放声音等。行为是

3、事码，诸如打开一个浏览器窗口，播放声音等。行为是事 件和由该事件触发的动作的组合。行为允许浏览者改变件和由该事件触发的动作的组合。行为允许浏览者改变 网页的内容以及执行特定的动作。网页的内容以及执行特定的动作。 1行为面板行为面板 选择菜单选择菜单“窗口窗口/行为行为”(SHIFT+F4)，可以打开，可以打开“行为行为” 面板。面板。 面板主要功能：面板主要功能： 显示设置事件：仅显示附加到当前文档的那些事件。显示设置事件：仅显示附加到当前文档的那些事件。 显示所有事件：显示给定类别的所有事件。显示所有事件：显示给定类别的所有事件。 添加行为：是一个弹出菜单，其中包含可以附加到当前添加行为：是

4、一个弹出菜单，其中包含可以附加到当前 所选元素的行为。当从该列表中选择一个行为时，将出所选元素的行为。当从该列表中选择一个行为时，将出 现一个对话框，可以在该对话框中指定该动作的参数。现一个对话框，可以在该对话框中指定该动作的参数。 删除：从行为列表中删除所选的事件。删除：从行为列表中删除所选的事件。 2添加行为添加行为 为对象添加行为的步骤：为对象添加行为的步骤： 打开行为面板。打开行为面板。 在文档中选定一个对象。在文档中选定一个对象。 单击行为面板上的加号按钮，从弹出的行为列单击行为面板上的加号按钮，从弹出的行为列 表选项中选择合适的行为。根据所选定的行为，表选项中选择合适的行为。根据所

5、选定的行为， 在参数对话框中设置该行为的参数及指令。在参数对话框中设置该行为的参数及指令。 设置行为的参数，然后单击设置行为的参数，然后单击“确定确定”按钮。按钮。 3 Dreamweaver 的内置行为 交换图像：使图形交替显示。交换图像：使图形交替显示。 弹出信息：显示一个信息对话框，或者给用户一个提示信息。弹出信息：显示一个信息对话框，或者给用户一个提示信息。 恢复交换图像：重复前面的交换图像功能。恢复交换图像：重复前面的交换图像功能。 打开浏览器窗口：在打开网页时同时打开另一个网页。打开浏览器窗口：在打开网页时同时打开另一个网页。 拖动层：实现在页面上层的移动。拖动层：实现在页面上层的

6、移动。 播放声音：为网页加入声音。播放声音：为网页加入声音。 改变属性：更改对象某个属性。改变属性：更改对象某个属性。 显示隐藏层：显示或隐藏图层。显示隐藏层：显示或隐藏图层。 设置文本：在特定的地方设置文本。设置文本：在特定的地方设置文本。 调用调用JavaScript：调用相应的：调用相应的JavaScript脚本。脚本。 转到转到URL：自动转到指定的页面。：自动转到指定的页面。 显示弹出式菜单：制作显示弹出式菜单。显示弹出式菜单：制作显示弹出式菜单。 时间轴：制作更多的动态效果。时间轴：制作更多的动态效果。 l内置行为的使用方法内置行为的使用方法 1交换图像交换图像 选择菜单选择菜单“

7、插入插入/图像图像”，插入一幅图像。，插入一幅图像。 选择一个对象（通常是将交换的图像）并打开行为面选择一个对象（通常是将交换的图像）并打开行为面 板。板。 单击加号按钮并从弹出菜单中选择单击加号按钮并从弹出菜单中选择“交换图像交换图像”，打，打 开开 “交换图像交换图像”对话框。对话框。 从从“图像图像”列表中，选择要更改的源图像。列表中，选择要更改的源图像。 单击单击“浏览浏览”选择新图像文件，或在选择新图像文件，或在“设定源文件为设定源文件为” 文本框中输入新图像的路径和文件名。文本框中输入新图像的路径和文件名。 选择选择“预先载入图像预先载入图像”选项在载入页时将新图像载入选项在载入页

8、时将新图像载入 到浏览器的缓存中。到浏览器的缓存中。 2弹出信息弹出信息 “弹出信息弹出信息”动作的作用是在特定的事件被触发动作的作用是在特定的事件被触发 时弹出信息框，给浏览者提供动态的导航功能。时弹出信息框，给浏览者提供动态的导航功能。 具体操作过程：具体操作过程： 打开行为面板，从行为中选择打开行为面板，从行为中选择“弹出信息弹出信息”， 打开打开 “弹出信息弹出信息”对话框。对话框。 输入要在消息窗口中显示的内容。输入要在消息窗口中显示的内容。 3恢复交换图像 “恢复交换图像”动作只有在使用了“交换图像” 动作后才起作用，其功能是当鼠标离开变换图像后， 重新显示原来的图像。“恢复交换图

9、像”对话框如 图7-24所示。 4打开浏览器窗口 使用“打开浏览器窗口”动作在打开当前网页的同时，再 打开一个新的窗口。 具体操作过程： 选择一个对象并打开行为面板。 单击加号按钮并从弹出菜单中选择“打开浏览器窗 口”，打开 “打开浏览器窗口”对话框。 单击“浏览”选择一个文件，或输入要显示的 URL。 设置“打开浏览器窗口”的其他选项。 单击“确定”。 5拖动层 “拖动层”动作只对网页上的层起作用。此动作允许用户 拖动层。使用此动作创建拼板游戏、滑块控件和其它可移 动的界面元素。 具体操作过程： 选择菜单“插入/层”或单击插入栏上的“描绘层”按 钮，绘制一个层。 通过单击文档窗口底部标签选择

10、器中的 选择 body 标签。 打开“行为”面板。 单击加号按钮从弹出菜单中选择“拖动层”，打开 “拖动层”对话框。 进行参数设置 6播放声音 使用“播放声音”动作来播放声音。例如，在每次鼠标指 针滑过某个链接时播放一段声音，或在页载入时播放音乐 剪辑，或者点击某个按钮播放声音等。 具体操作过程： 选中一个对象，打开行为面板。 单击加号按钮并从弹出菜单中选择“播放声音”，打 开 “播放声音”对话框。 单击“浏览”选择一个声音文件，或在“播放声音” 文本框中输入路径和文件名。 保存页面，按F12预览。 7改变属性 使用“改变属性”动作更改对象某个属性的值。 具体操作过程： 选中一个对象，打开“行

11、为”面板。 单击加号按钮并从弹出菜单中选择“改变属 性”，打开 “改变属性”对话框。 从“对象类型”中选择要更改属性的对象的类 型，并设置参数。 保存页面。 8显示隐藏层显示隐藏层 插入一张图片。插入一张图片。 然后在文档窗口中绘制一个层，在层中添加所需内容，并将层的然后在文档窗口中绘制一个层，在层中添加所需内容，并将层的 可见性设置为可见性设置为hidden。 选中插入的图片对象。选中插入的图片对象。 打开行为面板，单击加号按钮并从弹出菜单中选择打开行为面板，单击加号按钮并从弹出菜单中选择“显示隐藏显示隐藏 层层”，打开显示隐藏层，打开显示隐藏层”对话框。对话框。 在在“命名的层命名的层”列

12、表中选择要更改其可见性的层。列表中选择要更改其可见性的层。 再重复第再重复第、步，当弹出步，当弹出“显示隐藏层显示隐藏层”窗口时，选择窗口时，选择“隐隐 藏藏”。 单击单击“确定确定”。 如果在事件中没有如果在事件中没有onMouseOver、onMouseOut事件，可将图片的事件，可将图片的 “链接链接”属性设置为属性设置为“#”。 保存页面。保存页面。 9设置文本设置文本 设置层文本。设置层文本。 “设置层文本设置层文本”动作用指定的内容替换网页上现有层的内动作用指定的内容替换网页上现有层的内 容。容。 具体操作过程：具体操作过程： 插入一张图片。插入一张图片。 在文档窗口中绘制一个层，

13、在层中输入需要的文字。在文档窗口中绘制一个层，在层中输入需要的文字。 选中插入的图片对象。选中插入的图片对象。 打开行为面板，单击加号按钮并从弹出菜单中选择打开行为面板，单击加号按钮并从弹出菜单中选择 “设置文本设置文本/设置层文本设置层文本”，打开，打开 “设置层文本设置层文本”对话框。对话框。 在在“新建新建HTML”中输入新的内容。中输入新的内容。 单击单击“确定确定”。 9设置文本设置文本 设置状态栏文本设置状态栏文本 “设置状态栏文本设置状态栏文本”动作在浏览器窗口底部左侧的状态栏动作在浏览器窗口底部左侧的状态栏 中显示信息。中显示信息。 具体操作过程：具体操作过程： 插入一张图片。

14、插入一张图片。 选中插入的图片对象。选中插入的图片对象。 打开行为面板，单击加号按钮并从弹出菜单中选择打开行为面板，单击加号按钮并从弹出菜单中选择 “设置文本设置文本/设置状态栏文本设置状态栏文本”，打开，打开 “设置状态栏文本设置状态栏文本” 对话框。对话框。 在在“消息消息”中输入新的内容。中输入新的内容。 单击单击“确定确定”。 9设置文本设置文本 设置框架文本设置框架文本 “设置框架文本设置框架文本”动作用指定的内容代替给定框架的内容动作用指定的内容代替给定框架的内容 和格式。和格式。 具体操作过程：具体操作过程： 选中一个链接选中一个链接 打开行为面板，单击加号按钮并从弹出菜单中选择

15、打开行为面板，单击加号按钮并从弹出菜单中选择 “设置文本设置文本/设置框架文本设置框架文本”，打开，打开“设置框架文本设置框架文本”对对 话框。话框。 在在“新建新建HTML”中输入任何有效的中输入任何有效的HTML。 单击单击“确定确定”。 10调用调用JavaScript “调用调用JavaScript”动作的作用是执行预先编写好的自定义动作的作用是执行预先编写好的自定义 函数或函数或JavaScript代码行。代码行。 在当前的页中插入一个按钮，然后选中该按钮。在当前的页中插入一个按钮，然后选中该按钮。 打开行为面板，单击加号按钮并从弹出菜单中选择打开行为面板，单击加号按钮并从弹出菜单中

16、选择 “调用调用JavaScript”，打开，打开“调用调用JavaScript”对话框。对话框。 在打开的调用在打开的调用JavaScript 窗口中键入：窗口中键入：window.close()。 点击点击“确定确定”退出对话框。并确认其缺省事件值为退出对话框。并确认其缺省事件值为 “onClick”。 保存页面。保存页面。 11转到转到URL “转到转到URL”动作在当前窗口或指定的框架中打开一个新动作在当前窗口或指定的框架中打开一个新 页。页。 选中一个链接。选中一个链接。 打开行为面板，单击加号按钮并从弹出菜单中选择打开行为面板，单击加号按钮并从弹出菜单中选择 “转到转到URL”，打

17、开，打开 “转到转到URL”对话框。对话框。 从从“打开在打开在”列表中选择列表中选择URL的目标窗口。的目标窗口。“打开在打开在” 列表自动列出当前框架集中所有的框架和主窗口。列表自动列出当前框架集中所有的框架和主窗口。 单击单击“浏览浏览”选择要打开的文档，或直接在选择要打开的文档，或直接在“URL”文文 本框中输入文档的路径和文件名。本框中输入文档的路径和文件名。 单击单击“确定确定”。 12显示弹出式菜单显示弹出式菜单 选中一个链接或一幅图片。选中一个链接或一幅图片。 打开行为面板，单击加号按钮并从弹出菜单中选择打开行为面板，单击加号按钮并从弹出菜单中选择“显示弹出式显示弹出式 菜单菜

18、单”，打开，打开 “显示弹出式菜单显示弹出式菜单”对话框。对话框。 在在“文本文本”中输入菜单的名称，通过单击中输入菜单的名称，通过单击“+”按钮来增加所需按钮来增加所需 菜单的数目。菜单的数目。 在创建了菜单项之后，使用在创建了菜单项之后，使用“显示弹出式菜单显示弹出式菜单”的的“外观外观”选项选项 卡设置菜单的外观。可以设置弹出式菜单的方向、字体属性和菜单卡设置菜单的外观。可以设置弹出式菜单的方向、字体属性和菜单 的一般状态等属性。的一般状态等属性。 使用使用“高级高级”选项卡设置菜单单元格的边框、颜色等属性。选项卡设置菜单单元格的边框、颜色等属性。 使用使用“位置位置”选项卡设置弹出菜单相对于触发图像或链接的显示选项卡设置弹出菜单相对于触发图像或链接的显示 位置。还可以设置当用户将鼠标指针移开触发器之后该菜单是否隐位置。还可以设置当用户将鼠标指针移开触发器之后该菜单是否隐 藏。藏。 保存该文档，按保存该文档，按F12浏览效果。浏览效果。 7、2时间轴时间轴 2、时间轴动画、时间轴动画 绘制一个层，在层中插入一幅图片，并在层上单击鼠标右键，弹绘制一个层，在层中插入一幅图片，并在层上单击鼠标右键，弹 出弹出式菜单。出弹出式菜单。 选择选择“添加到时间轴添加到时间轴”选项，打开选项，打开 “时间轴时间轴”面板。面板。 将层添加到时间轴