08-行为与时间轴.ppt

《08-行为与时间轴.ppt》由会员分享，可在线阅读，更多相关《08-行为与时间轴.ppt（28页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第8 8章行为章行为与时间轴与时间轴本章重点：本章重点：n行为是由事件和动作两部分组成行为是由事件和动作两部分组成n如何在网页中添加行为如何在网页中添加行为n如如何何为为“事事件件”选选择择合合适适的的“动动作作”。第第8 8章行为章行为与时间轴与时间轴8.1 8.1“炫炫”网页网页软件下载之软件下载之家家 8.8.2 2行为的概述行为的概述8.8.3 3 使用【行为】面板使用【行为】面板8.8.44向页面中添加基本向页面中添加基本行为行为8.5 8.5 时间轴概述时间轴概述8.6 8.6 实战演练实战演练8.8.1 1“炫炫”网页网页软件下载之家软件下载之家 8.1.1 案例综述案例综述本

2、例我们将在原有页面的基础上，添加本例我们将在原有页面的基础上，添加DreamweaverDreamweaver 8 8所提供的行为，并通过时间轴所提供的行为，并通过时间轴在页面中添加动画。在页面中添加动画。8.8.1 1“炫炫”网页网页软件下载之家软件下载之家 8.1.2 案例分析案例分析添加行为的时候要遵循添加行为的时候要遵循3 3个步骤：个步骤：n选择对象。选择对象。n添加动作。添加动作。n调整事件。调整事件。8.8.1 1“炫炫”网页网页软件下载之家软件下载之家 8.1.3 实现步骤实现步骤1.1.准备页面准备页面。2.2.设置设置“弹出信息弹出信息”3.3.打开浏览器窗口打开浏览器窗口

3、 4.4.设置状态栏文本设置状态栏文本 5.5.设置文本域文本设置文本域文本 6.6.创建图像交换功能创建图像交换功能 7.7.用时间轴控制图片替换用时间轴控制图片替换 8.8.将层设置为可拖动将层设置为可拖动9.9.创建小鸟飞翔动画创建小鸟飞翔动画 8.8.2 2行为的概述行为的概述 行为是动作和触发该动作的事件的结合体行为是动作和触发该动作的事件的结合体1.事件事件n事件是触发动态效果的原因，它可以被附加在各事件是触发动态效果的原因，它可以被附加在各种页面元素上，也可以被附加到种页面元素上，也可以被附加到HTMLHTML标记中。标记中。2.动作动作 n动作其实是一段网页上的动作其实是一段网

4、页上的JavaScriptJavaScript代码，这些代码，这些代码在特定事件被激发时执行，从而实现访问者代码在特定事件被激发时执行，从而实现访问者与与WebWeb页进行交互，以多种方式更改页面或执行页进行交互，以多种方式更改页面或执行某些任务。通过动作来完成动态效果，如：打开某些任务。通过动作来完成动态效果，如：打开浏览器窗口、显示或隐藏层、播放声音等都是动浏览器窗口、显示或隐藏层、播放声音等都是动作。作。8.8.2 2行为的概述行为的概述 3.3.事件与动作的关系事件与动作的关系 n将将“事件事件”和和“动作动作”组合起来就构成了组合起来就构成了“行行为为”。在将行为附加到页面元素之后，

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

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

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

8、，其中包含可以触发该动作的所有事件。只有菜单，其中包含可以触发该动作的所有事件。只有在选择了行为列表中的某个事件时才显示此菜单。在选择了行为列表中的某个事件时才显示此菜单。根据所选对象的不同，显示的事件也有所不同。根据所选对象的不同，显示的事件也有所不同。8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.1 8.4.1 弹出信息弹出信息使用【弹出信息】动作将显示一个带有指定消息的使用【弹出信息】动作将显示一个带有指定消息的警告窗口警告窗口 使用【弹出信息】动作的操作步骤如下：使用【弹出信息】动作的操作步骤如下：1.1.选择对象并打开行为面板。选择对象并打开行为面板。2.2.单单击

9、击按按钮钮，并并从从“添添加加动动作作”菜菜单单中中选选择择【弹出信息】。打开弹出信息】。打开“弹出信息弹出信息”对话框。对话框。3.3.在在【消消息息】域域中中输输入入在在信信息息框框中中将将要要显显示示的的信信息文字。息文字。4.4.设置完成后单击【确定】按钮。设置完成后单击【确定】按钮。5.5.检检查查【行行为为】面面板板中中默默认认事事件件是是否否是是所所需需的的事事件件 ，如如果果不不是是，从从弹弹出出式式菜菜单单中中选选择择另另一一个个事事件。件。8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.2 8.4.2 打开浏览器窗口打开浏览器窗口使用的【打开浏览器窗口】动作

10、在一个新的窗口中使用的【打开浏览器窗口】动作在一个新的窗口中打开打开URLURL 使用【打开浏览器窗口】行为的操作步骤如下：使用【打开浏览器窗口】行为的操作步骤如下：1.1.选择一个对象并打开【行为】面板。选择一个对象并打开【行为】面板。2.2.单击单击按钮并从单击单击按钮并从“添加动作添加动作”菜单中选择【打菜单中选择【打开浏览器窗口】命令。打开开浏览器窗口】命令。打开“打开浏览器窗口打开浏览器窗口”对话框。对话框。3.3.设置完成后单击【确定】按钮。设置完成后单击【确定】按钮。4.4.检查【行为】面板中默认事件是否是所需的事件。检查【行为】面板中默认事件是否是所需的事件。如果不是，从弹出式

11、菜单中选择另一个事件。如果不是，从弹出式菜单中选择另一个事件。8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.3 8.4.3 设置文本设置文本使用使用DreamweaverDreamweaver内置的【设置文本】动作内置的【设置文本】动作可以动态地设置层、框架、文本域以及状态可以动态地设置层、框架、文本域以及状态栏的文本。栏的文本。使用【设置文本】行为的操作步骤如下：使用【设置文本】行为的操作步骤如下：1.1.选择一个对象并打开【行为】面板。选择一个对象并打开【行为】面板。2.2.单击单击按钮并从单击单击按钮并从“添加动作添加动作”菜单中选择菜单中选择【设置文本】【设置状态栏文

12、本】命令。【设置文本】【设置状态栏文本】命令。打开打开“设置状态栏文本设置状态栏文本”对话框。对话框。3.3.在【消息】文本框中输入相应的信息。在【消息】文本框中输入相应的信息。8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.4 8.4.4 检查表单检查表单利用【检查表单】动作可以为表单中各元素利用【检查表单】动作可以为表单中各元素设置有效性规则，并检查指定文本域的内容设置有效性规则，并检查指定文本域的内容以确保用户输入正确的数据类型以确保用户输入正确的数据类型 使用【检查表单】动作的操作步骤如下：使用【检查表单】动作的操作步骤如下：1.1.首先在文档中插入表单和文本域。首先在

13、文档中插入表单和文本域。2.2.然后执行下列步骤之一：然后执行下列步骤之一：n如如果果要要在在用用户户填填写写表表单单时时验验证证单单个个文文本本域域，选取一个文本域，打开【行为】面板。选取一个文本域，打开【行为】面板。n如如果果要要在在用用户户提提交交表表单单时时验验证证多多个个文文本本域域，单单击击文文档档窗窗口口左左下下角角标标签签选选择择器器中中的的 form标签并打开【行为】面板。标签并打开【行为】面板。8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.4 8.4.4 检查表单检查表单3.3.从【添加行为】下拉列表中选择【检查表单】从【添加行为】下拉列表中选择【检查表单

14、】动作。动作。4.4.重复以上操作检查其他的文本域。重复以上操作检查其他的文本域。5.5.单击【确定】按钮，在【行为】面板中选择适单击【确定】按钮，在【行为】面板中选择适当的事件。当的事件。6.6.如果在用户提交表单时检查多个域，则如果在用户提交表单时检查多个域，则onSubmitonSubmit事件自动出现在事件自动出现在“事件事件”菜单中。菜单中。8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.5 8.4.5 控制控制ShockwaveShockwave或或FlashFlash使用【控制使用【控制ShockwaveShockwave或或FlashFlash】动作可以控制页面

15、动作可以控制页面中的中的ShockwaveShockwave或或FlashFlash影片的播放、停止、倒带或影片的播放、停止、倒带或者转到某一帧等操作者转到某一帧等操作 使使用用【控控制制ShockwaveShockwave或或FlashFlash】动动作作的的操操作作步步骤骤如如下下:1.1.插插入入的的ShockwaveShockwave或或Flash Flash 对对象象。并并在在【属属性性检检查查器器】中对该影片进行命名，只能这样才能对影片进行控制。中对该影片进行命名，只能这样才能对影片进行控制。2.2.在文档中插入控制按钮。在文档中插入控制按钮。3.3.选择某个插入的控制按钮，在【行

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

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

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

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

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

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

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

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

24、件是是否否是是所所需需的的事事件件。如果不是，从弹出式菜单中选择合适的事件。如果不是，从弹出式菜单中选择合适的事件。8.8.4 4 向页面中添加基本行为向页面中添加基本行为8.4.11 8.4.11 显示显示/隐藏层隐藏层【显示显示-隐藏层隐藏层】动作显示、隐藏或恢复一动作显示、隐藏或恢复一个或多个层的默认可见性。个或多个层的默认可见性。使用使用【显示显示-隐藏层隐藏层】动作操作步骤如下：动作操作步骤如下：1.1.在文档窗口创建要附加该动作的层，然后在层在文档窗口创建要附加该动作的层，然后在层中放置要隐藏中放置要隐藏/显示的图像或文字；显示的图像或文字；2.2.打开打开【行为行为】面板，单击按

25、钮并从面板，单击按钮并从【动作动作】下下拉列表中选择拉列表中选择【显示显示-隐藏层隐藏层】，在对话框中设，在对话框中设置参数；置参数；3.3.单击单击【确定确定】按钮。检查默认事件是否是所需按钮。检查默认事件是否是所需的事件的事件。8.5 8.5 时间轴概述时间轴概述8.5.1 8.5.1 使用时间轴面板使用时间轴面板 时间轴动画是通过时间轴动画是通过【时间轴时间轴】面板来制作完成的。面板来制作完成的。选择选择【窗口窗口】【时间轴时间轴】命令，在编辑窗口正下方打命令，在编辑窗口正下方打开开【时间轴时间轴】面板。面板。8.5 8.5 时间轴概述时间轴概述8.5.2 8.5.2 创建时间轴动画创建

26、时间轴动画创建时间轴动画的步骤如下：创建时间轴动画的步骤如下：1.1.在页面中插入层，在层中插入图片或文本。在页面中插入层，在层中插入图片或文本。2.2.选中该层，并将其拖动到选中该层，并将其拖动到【时间轴时间轴】面板中，面板中，在在【时间轴时间轴】面板中形成一段动画条。面板中形成一段动画条。3.3.定义动画开始和结束时动画对象的状态。定义动画开始和结束时动画对象的状态。4.4.通过关键帧设置动画的运动路径。通过关键帧设置动画的运动路径。5.5.按按 F12F12预览动态效果预览动态效果 8.5 8.5 时间轴概述时间轴概述8.5.3 8.5.3 在时间轴中加入行为在时间轴中加入行为在时间轴上

27、附加行为的操作步骤如下：在时间轴上附加行为的操作步骤如下：1.1.选中要附加行为的帧。选中要附加行为的帧。2.2.单击右键，在快捷菜单中选择单击右键，在快捷菜单中选择【添加行为添加行为】命命令，打开令，打开【行为行为】面板。面板。3.3.在在【行为行为】面板中，单击添加行为按钮，在弹面板中，单击添加行为按钮，在弹出的动作菜单中，选择要附加的行为。如选择出的动作菜单中，选择要附加的行为。如选择“显示显示/隐藏层隐藏层”，在，在【显示显示/隐藏层隐藏层】对话框对话框中设置其中设置其“隐藏隐藏”。4.4.切换到切换到【时间轴时间轴】面板，可以看到在附加行为面板，可以看到在附加行为后，行为通过上的浅蓝色行为标记。后，行为通过上的浅蓝色行为标记。8.68.6实战演练实战演练 一、实战效果添加行为一、实战效果添加行为8.68.6实战演练实战演练 二、实战要求二、实战要求利利用用行行为为为为网网页页添添加加“弹弹出出信信息息”和和“打打开开浏浏览览器器”功能。功能。添加拖动层行为添加拖动层行为利用行为设置层文本和文本域文字利用行为设置层文本和文本域文字