第8章 行为与时间轴

1、网页制作基础教程网页制作基础教程（Dreamweaver 8.0Dreamweaver 8.0）电子教案电子教案ISBN7121028824本章重点：本章重点：n行为是由事件和动作两部分组成行为是由事件和动作两部分组成n如何在网页中添加行为如何在网页中添加行为n如何为如何为“事件事件”选择合适的选择合适的“动动作作”。 8.1 8.1 “炫炫”网页网页软件下载之软件下载之家家 8.8.2 2行为的概述行为的概述8.8.3 3 使用【行为】面板使用【行为】面板8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.5 8.5 时间轴概述时间轴概述8.6 8.6 实战演练实战演练8.8.1 1

2、 “ “炫炫”网页网页软件下载之家软件下载之家 8.1.1 案例综述案例综述本例我们将在原有页面的基础上，添加本例我们将在原有页面的基础上，添加Dreamweaver 8Dreamweaver 8所提供的行为，并通过时间轴所提供的行为，并通过时间轴在页面中添加动画。在页面中添加动画。 8.8.1 1 “ “炫炫”网页网页软件下载之家软件下载之家 8.1.2 案例分析案例分析添加行为的时候要遵循添加行为的时候要遵循3 3个步骤：个步骤： n选择对象。选择对象。n添加动作。添加动作。n调整事件。调整事件。 8.8.1 1 “ “炫炫”网页网页软件下载之家软件下载之家 8.1.3 实现步骤实现步骤1

3、.1.准备页面准备页面 。2.2.设置设置“弹出信息弹出信息” ” 3.3.打开浏览器窗口打开浏览器窗口 4.4.设置状态栏文本设置状态栏文本 5.5.设置文本域文本设置文本域文本 6.6.创建图像交换功能创建图像交换功能 7.7.用时间轴控制图片替换用时间轴控制图片替换 8.8.将层设置为可拖动将层设置为可拖动9.9.创建小鸟飞翔动画创建小鸟飞翔动画 8.8.2 2行为的概述行为的概述 行为是动作和触发该动作的事件的结合体行为是动作和触发该动作的事件的结合体1.事件事件n事件是触发动态效果的原因，它可以被附加在各事件是触发动态效果的原因，它可以被附加在各种页面元素上，也可以被附加到种页面元素

4、上，也可以被附加到HTMLHTML标记中。标记中。 2.动作动作 n动作其实是一段网页上的动作其实是一段网页上的JavaScriptJavaScript代码，这些代码，这些代码在特定事件被激发时执行，从而实现访问者代码在特定事件被激发时执行，从而实现访问者与与WebWeb页进行交互，以多种方式更改页面或执行页进行交互，以多种方式更改页面或执行某些任务。某些任务。8.8.2 2行为的概述行为的概述 3.3.事件与动作的关系事件与动作的关系 n将将“事件事件”和和“动作动作”组合起来就构成了组合起来就构成了“行行为为”。在将行为附加到页面元素之后，只要对。在将行为附加到页面元素之后，只要对该元素触

5、发了所指定的事件，浏览器就会调用该元素触发了所指定的事件，浏览器就会调用与该事件关联的动作（与该事件关联的动作（JavaScriptJavaScript）。）。 8.8.3 3 使用【行为】面板使用【行为】面板 选择【窗口】【行为】命令，打开【行为】面板选择【窗口】【行为】命令，打开【行为】面板 显示设置事件 显示所有事件 添加或删除动作 上下移动行为 8.8.3 3 使用【行为】面板使用【行为】面板 n【显示设置事件】显示设置事件】仅显示附加到当前文档的那些仅显示附加到当前文档的那些事件事件 n【显示所有事件】【显示所有事件】按字母降序显示所有事件按字母降序显示所有事件 n【添加行为】【添加

6、行为】在出现的动作菜单中在出现的动作菜单中, , 选择一个动选择一个动作，并指定该动作的相关参数，即可添加行为。作，并指定该动作的相关参数，即可添加行为。n【显示事件】【显示事件】在此菜单中选择确定哪些事件将显在此菜单中选择确定哪些事件将显示在示在“事件事件”弹出式菜单中弹出式菜单中 n【删除事件】删除事件】单击单击“删除事件删除事件”按钮，可以从行按钮，可以从行为列表中删除所选的事件和动作。为列表中删除所选的事件和动作。n【向上移动】和【向下移动】【向上移动】和【向下移动】将特定事件的所选将特定事件的所选动作在行为列表中向上或向下移动。给定事件的动动作在行为列表中向上或向下移动。给定事件的动

7、作是以选定的顺序执行的。作是以选定的顺序执行的。8.8.4 4 向页面中添加基本行为向页面中添加基本行为添加行为：添加行为：通过通过“行为行为”面板上的面板上的“添加行为添加行为”按按钮，可以将行为附加到整个文档，也可以附加到链钮，可以将行为附加到整个文档，也可以附加到链接、图像、表单元素或多种其他接、图像、表单元素或多种其他HTMLHTML元素中的任何元素中的任何一种。一种。事件的选择事件的选择：在添加行为后，当单击行为列表框中在添加行为后，当单击行为列表框中所选事件名称旁边的箭头按钮时，会出现一个下拉所选事件名称旁边的箭头按钮时，会出现一个下拉菜单，其中包含可以触发该动作的所有事件。菜单，

8、其中包含可以触发该动作的所有事件。8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.1 8.4.1 弹出信息弹出信息使用【弹出信息】动作将显示一个带有指定消息的使用【弹出信息】动作将显示一个带有指定消息的警告窗口警告窗口 使用【弹出信息】动作的操作步骤如下：使用【弹出信息】动作的操作步骤如下：1.1.选择对象并打开行为面板。选择对象并打开行为面板。2.2.单击按钮，并从单击按钮，并从“添加动作添加动作”菜单中选择【弹出信息】。菜单中选择【弹出信息】。打开打开“弹出信息弹出信息”对话框。对话框。3.3.在【消息】域中输入在信息框中将要显示的信息文字。在【消息】域中输入在信息框中将要

9、显示的信息文字。4.4.设置完成后单击【确定】按钮。设置完成后单击【确定】按钮。5.5.检查【行为】面板中默认事件是否是所需的事件检查【行为】面板中默认事件是否是所需的事件 ，如果，如果不是，从弹出式菜单中选择另一个事件。不是，从弹出式菜单中选择另一个事件。 8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.2 8.4.2 打开浏览器窗口打开浏览器窗口使用的【打开浏览器窗口】动作在一个新的使用的【打开浏览器窗口】动作在一个新的窗口中打开窗口中打开URLURL 使用【打开浏览器窗口】行为的操作步骤如使用【打开浏览器窗口】行为的操作步骤如下：下：1.1.选择一个对象并打开【行为】面板

10、。选择一个对象并打开【行为】面板。2.2.单击单击按钮并从单击单击按钮并从“添加动作添加动作”菜单中选择【打开浏览器菜单中选择【打开浏览器窗口】命令。打开窗口】命令。打开“打开浏览器窗口打开浏览器窗口”对话框。对话框。3.3.设置完成后单击【确定】按钮。设置完成后单击【确定】按钮。4.4.检查【行为】面板中默认事件是否是所需的事件。如果不检查【行为】面板中默认事件是否是所需的事件。如果不是，从弹出式菜单中选择另一个事件。是，从弹出式菜单中选择另一个事件。 8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.3 8.4.3 设置文本设置文本使用使用DreamweaverDreamwe

11、aver内置的【设置文本】动作内置的【设置文本】动作可以动态地设置层、框架、文本域以及状态可以动态地设置层、框架、文本域以及状态栏的文本。栏的文本。 使用【设置文本】行为的操作步骤如下：使用【设置文本】行为的操作步骤如下：1.1.选择一个对象并打开【行为】面板。选择一个对象并打开【行为】面板。2.2.单击单击按钮并从单击单击按钮并从“添加动作添加动作”菜单中选择【设置文菜单中选择【设置文本】【设置状态栏文本】命令。打开本】【设置状态栏文本】命令。打开“设置状态栏设置状态栏文本文本”对话框。对话框。3.3.在【消息】文本框中输入相应的信息。在【消息】文本框中输入相应的信息。 8.8.4 4 向页

12、面中添加基本行为向页面中添加基本行为8.4.4 8.4.4 检查表单检查表单利用【检查表单】动作可以为表单中各元素利用【检查表单】动作可以为表单中各元素设置有效性规则，并检查指定文本域的内容设置有效性规则，并检查指定文本域的内容以确保用户输入正确的数据类型以确保用户输入正确的数据类型 使用【检查表单】动作的操作步骤如下：使用【检查表单】动作的操作步骤如下：1.1.首先在文档中插入表单和文本域。首先在文档中插入表单和文本域。2.2.然后执行下列步骤之一：然后执行下列步骤之一：n如果要在用户填写表单时验证单个文本域，如果要在用户填写表单时验证单个文本域，选取一个文本域，打开【行为】面板。选取一个文

13、本域，打开【行为】面板。n如果要在用户提交表单时验证多个文本域，如果要在用户提交表单时验证多个文本域，单击文档窗口左下角标签选择器中的单击文档窗口左下角标签选择器中的 form标签并打开【行为】面板。标签并打开【行为】面板。8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.4 8.4.4 检查表单检查表单3.3.从【添加行为】下拉列表中选择【检查表单】从【添加行为】下拉列表中选择【检查表单】动作。动作。4.4.重复以上操作检查其他的文本域。重复以上操作检查其他的文本域。5.5.单击【确定】按钮，在【行为】面板中选择适单击【确定】按钮，在【行为】面板中选择适当的事件。当的事件。6.

14、6.如果在用户提交表单时检查多个域，则如果在用户提交表单时检查多个域，则onSubmitonSubmit事件自动出现在事件自动出现在“事件事件”菜单中。菜单中。8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.5 8.4.5 控制控制ShockwaveShockwave或或FlashFlash使用【控制使用【控制ShockwaveShockwave或或FlashFlash】动作可以控制页动作可以控制页面中的面中的ShockwaveShockwave或或FlashFlash影片的播放、停止、倒影片的播放、停止、倒带或者转到某一帧等操作带或者转到某一帧等操作 使用【控制使用【控制Sh

15、ockwaveShockwave或或FlashFlash】动作的操作步骤动作的操作步骤如下如下: :1.1.插入的插入的ShockwaveShockwave或或Flash Flash 对象。并在【属性检查对象。并在【属性检查器】中对该影片进行命名，只能这样才能对影片进器】中对该影片进行命名，只能这样才能对影片进行控制。行控制。2.2.在文档中插入控制按钮。在文档中插入控制按钮。8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.5 8.4.5 控制控制ShockwaveShockwave或或FlashFlash使用【控制使用【控制ShockwaveShockwave或或FlashF

16、lash】动作的操作步动作的操作步骤如下骤如下: :3.3.选择某个插入的控制按钮，在【行为】面板中，选择某个插入的控制按钮，在【行为】面板中，单击单击+ +按钮按钮, ,并从并从“添加动作添加动作”菜单中选择【控制菜单中选择【控制ShockwaveShockwave或或FlashFlash】命令。命令。4.4.在对话框的【影片】下拉列表中选择一个影片。在对话框的【影片】下拉列表中选择一个影片。5.5.根据所选的控制按钮在【操作】域中选择播放、根据所选的控制按钮在【操作】域中选择播放、停止、倒带或者前往帧停止、倒带或者前往帧. . 6.6.选择适当的事件触发该动作。选择适当的事件触发该动作。

17、8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.6 8.4.6 交换图像交换图像【交换图像】动作通过更改【交换图像】动作通过更改imgimg标签的标签的srcsrc属属性将一个图像和另一个图像进行交换。性将一个图像和另一个图像进行交换。 使用【交换图像】行为的操作步骤如下：使用【交换图像】行为的操作步骤如下：1.1.在文档中插入图像在文档中插入图像2.2.在【图像属性】面板上为图像指定名称（便于在以后在【图像属性】面板上为图像指定名称（便于在以后指定图像时，易于辨认）。指定图像时，易于辨认）。3.3.选取并打开【行为】面板，单击按钮并从【动作】下选取并打开【行为】面板，单击按钮

18、并从【动作】下拉列表中选择【交换图像】。拉列表中选择【交换图像】。4.4.在【行为】面板中选择适当的事件。在【行为】面板中选择适当的事件。5.5.使用同样的方法，设置其他的交换图像。使用同样的方法，设置其他的交换图像。 8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.7 8.4.7 转到转到URLURL使用【转到使用【转到URLURL】动作可以在当前窗口或动作可以在当前窗口或指定窗口中打开一个新页指定窗口中打开一个新页 。 使用【转到使用【转到URLURL】动作的操作步骤如下：动作的操作步骤如下：1.1.选择要添加该动作的对象。选择要添加该动作的对象。2.2.选取并打开【行为】

19、面板，单击按钮并从【动作】选取并打开【行为】面板，单击按钮并从【动作】下拉列表中选择【转到下拉列表中选择【转到URLURL】3.3.在【行为】面板中选择适当的事件。在【行为】面板中选择适当的事件。 8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.8 8.4.8 播放声音播放声音使用【播放声音】动作来播放声音使用【播放声音】动作来播放声音 。 操作步骤如下：操作步骤如下：1.1.选择要添加该动作的对象。选择要添加该动作的对象。2.2.选取并打开【行为】面板，单击按钮并从【动作】选取并打开【行为】面板，单击按钮并从【动作】下拉列表中选择【播放声音】下拉列表中选择【播放声音】 。3.

20、3.在该对话框单击【浏览】按钮选取声音文件，或在该对话框单击【浏览】按钮选取声音文件，或者在【播放声音】域中输入声音文件的路径和名者在【播放声音】域中输入声音文件的路径和名称。单击【确定】按钮。称。单击【确定】按钮。 4.4.在【行为】面板中选择适当的事件。在【行为】面板中选择适当的事件。 8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.9 8.4.9 显示弹出式菜单显示弹出式菜单使用【显示弹出式菜单】行为来创建或编辑使用【显示弹出式菜单】行为来创建或编辑DreamweaverDreamweaver弹出菜单，或者打开并修改已插入弹出菜单，或者打开并修改已插入Dreamweave

21、rDreamweaver文档的文档的FireworksFireworks弹出菜单弹出菜单 。 操作步骤如下：操作步骤如下： 1.1.选择要添加该动作的对象。选择要添加该动作的对象。2.2.选取并打开【行为】面板，单击按钮并从【动作】下选取并打开【行为】面板，单击按钮并从【动作】下拉列表中选择【显示弹出式菜单】拉列表中选择【显示弹出式菜单】 。3.3.通过在【显示弹出式菜单】对话框中设置选项来创建通过在【显示弹出式菜单】对话框中设置选项来创建水平或垂直的弹出菜单水平或垂直的弹出菜单 。 4.4.在【行为】面板中选择适当的事件。在【行为】面板中选择适当的事件。 8.8.4 4 向页面中添加基本行为

22、向页面中添加基本行为8.4.10 8.4.10 拖动层拖动层 【拖动层】动作允许访问者拖动层。使用此动作【拖动层】动作允许访问者拖动层。使用此动作创建拼图游戏、滑块控件和其他可移动的界面元素。创建拼图游戏、滑块控件和其他可移动的界面元素。 使用【拖动层】动作的操作步骤如下：使用【拖动层】动作的操作步骤如下： 1.1.选择选择 body标签，这里不要选择层，因为层在版本较低标签，这里不要选择层，因为层在版本较低的浏览器中都不接受事件，所以必须选择一个不同的对象。的浏览器中都不接受事件，所以必须选择一个不同的对象。 2.2.选取并打开【行为】面板，单击按钮并从【动作】下拉选取并打开【行为】面板，单

23、击按钮并从【动作】下拉列表中选择【拖动层】，打开【拖动层】对话框，该对话列表中选择【拖动层】，打开【拖动层】对话框，该对话框包括框包括“基本基本”与与“高级高级”两个标签，默认状态为两个标签，默认状态为“基基本本”。 8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.10 8.4.10 拖动层拖动层 3.3.如果要进一步定义层的拖动控制点、在拖动层时跟踪如果要进一步定义层的拖动控制点、在拖动层时跟踪层的移动以及当放下层时触发一个动作，可单击层的移动以及当放下层时触发一个动作，可单击“高高级级”标签，继续进行标签，继续进行“高级高级”标签中各选项的设置标签中各选项的设置 。4.4.

24、【拖动层】对话框设置完成后，单击【确定】按钮。【拖动层】对话框设置完成后，单击【确定】按钮。5.5.检查【行为】面板中默认事件是否是所需的事件。如检查【行为】面板中默认事件是否是所需的事件。如果不是，从弹出式菜单中选择合适的事件。果不是，从弹出式菜单中选择合适的事件。 8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.11 8.4.11 显示显示/ /隐藏层隐藏层【显示显示- -隐藏层隐藏层】动作显示、隐藏或恢复动作显示、隐藏或恢复一个或多个层的默认可见性。一个或多个层的默认可见性。 使用使用【显示显示- -隐藏层隐藏层】动作操作步骤如下：动作操作步骤如下：1.1.在文档窗口创建

25、要附加该动作的层，然后在层中放置在文档窗口创建要附加该动作的层，然后在层中放置要隐藏要隐藏/ /显示的图像或文字；显示的图像或文字；2.2.打开打开【行为行为】面板，单击按钮并从面板，单击按钮并从【动作动作】下拉列表下拉列表中选择中选择【显示显示- -隐藏层隐藏层】，在对话框中设置参数；，在对话框中设置参数；3.3.单击单击【确定确定】按钮。检查默认事件是否是所需的事件按钮。检查默认事件是否是所需的事件。 8.5 8.5 时间轴概述时间轴概述8.5.1 8.5.1 使用时间轴面板使用时间轴面板 时间轴动画是通过时间轴动画是通过【时间轴时间轴】面板来制作完成的。面板来制作完成的。选择选择【窗口窗口】【时间轴时间轴】命令，在编辑窗口正下方打命令，在编辑窗口正下方打开开【时间轴时间轴】面板。面板。 8.5 8.5 时间轴概述时间轴概述8.5.2 8.5.2 创建时间轴动画创建时间轴动画 1 、通过时间轴创建动画、通过时间轴创建动画步骤如下：步骤如下：1.1.在页面中插入层，在层中插入图片或文本。在页面中插入层，在层中插入图片或文本。 2.2.选中该层，并将其拖动到选中该层，并将其拖动到【时间轴时间轴】面板中，面板中，在在【时间轴时间轴】面板中形成一段动画条。面板中形成一段动画条。3.3.定义动画开始和结束时动画对象的状态。定义动画开始和结束时动画对象的状态。 4.4.通过关