08行为与时间轴

1、第8章行为与时间轴本章重点：行为是由事件和动作两部分组成如何在网页中添加行为如何为“事件”选择合适的“动作”。 1第8章行为与时间轴8.1 “炫”网页软件下载之家 8.2行为的概述8.3 使用【行为】面板8.4向页面中添加基本行为8.5 时间轴概述8.6 实战演练28.1 “炫”网页软件下载之家 8.1.1 案例综述本例我们将在原有页面的基础上，添加Dreamweaver 8所提供的行为，并通过时间轴在页面中添加动画。 38.1 “炫”网页软件下载之家 8.1.2 案例分析添加行为的时候要遵循3个步骤： 选择对象。添加动作。调整事件。 48.1 “炫”网页软件下载之家 8.1.3 实现步骤准备

2、页面 。设置“弹出信息” 打开浏览器窗口 设置状态栏文本 设置文本域文本 创建图像交换功能 用时间轴控制图片替换 将层设置为可拖动创建小鸟飞翔动画 58.2行为的概述 行为是动作和触发该动作的事件的结合体事件事件是触发动态效果的原因，它可以被附加在各种页面元素上，也可以被附加到HTML标记中。 动作 动作其实是一段网页上的JavaScript代码，这些代码在特定事件被激发时执行，从而实现访问者与Web页进行交互，以多种方式更改页面或执行某些任务。通过动作来完成动态效果，如：打开浏览器窗口、显示或隐藏层、播放声音等都是动作。68.2行为的概述 事件与动作的关系 将“事件”和“动作”组合起来就构成

3、了“行为”。在将行为附加到页面元素之后，只要对该元素触发了所指定的事件，浏览器就会调用与该事件关联的动作（JavaScript）。 78.3 使用【行为】面板 选择【窗口】【行为】命令，打开【行为】面板 显示设置事件 显示所有事件 添加或删除动作 上下移动行为 88.3 使用【行为】面板 【显示设置事件】仅显示附加到当前文档的那些事件 【显示所有事件】按字母降序显示所有事件 【添加行为】在出现的动作菜单中, 选择一个动作，并指定该动作的相关参数，即可添加行为。【显示事件】在此菜单中选择确定哪些事件将显示在“事件”弹出式菜单中 【删除事件】单击“删除事件”按钮，可以从行为列表中删除所选的事件和动

4、作。【向上移动】和【向下移动】将特定事件的所选动作在行为列表中向上或向下移动。给定事件的动作是以选定的顺序执行的。98.4 向页面中添加基本行为添加行为：通过“行为”面板上的“添加行为”按钮，可以将行为附加到整个文档，也可以附加到链接、图像、表单元素或多种其他HTML元素中的任何一种。事件的选择：在添加行为后，当单击行为列表框中所选事件名称旁边的箭头按钮时，会出现一个下拉菜单，其中包含可以触发该动作的所有事件。只有在选择了行为列表中的某个事件时才显示此菜单。根据所选对象的不同，显示的事件也有所不同。 108.4 向页面中添加基本行为8.4.1 弹出信息使用【弹出信息】动作将显示一个带有指定消息

5、的警告窗口 使用【弹出信息】动作的操作步骤如下：选择对象并打开行为面板。单击按钮，并从“添加动作”菜单中选择【弹出信息】。打开“弹出信息”对话框。在【消息】域中输入在信息框中将要显示的信息文字。设置完成后单击【确定】按钮。检查【行为】面板中默认事件是否是所需的事件 ，如果不是，从弹出式菜单中选择另一个事件。 118.4 向页面中添加基本行为8.4.2 打开浏览器窗口使用的【打开浏览器窗口】动作在一个新的窗口中打开URL 使用【打开浏览器窗口】行为的操作步骤如下：选择一个对象并打开【行为】面板。单击单击按钮并从“添加动作”菜单中选择【打开浏览器窗口】命令。打开“打开浏览器窗口”对话框。设置完成后

6、单击【确定】按钮。检查【行为】面板中默认事件是否是所需的事件。如果不是，从弹出式菜单中选择另一个事件。 128.4 向页面中添加基本行为8.4.3 设置文本使用Dreamweaver内置的【设置文本】动作可以动态地设置层、框架、文本域以及状态栏的文本。 使用【设置文本】行为的操作步骤如下：选择一个对象并打开【行为】面板。单击单击按钮并从“添加动作”菜单中选择【设置文本】【设置状态栏文本】命令。打开“设置状态栏文本”对话框。在【消息】文本框中输入相应的信息。 138.4 向页面中添加基本行为8.4.4 检查表单利用【检查表单】动作可以为表单中各元素设置有效性规则，并检查指定文本域的内容以确保用户

7、输入正确的数据类型 使用【检查表单】动作的操作步骤如下：首先在文档中插入表单和文本域。然后执行下列步骤之一：如果要在用户填写表单时验证单个文本域，选取一个文本域，打开【行为】面板。如果要在用户提交表单时验证多个文本域，单击文档窗口左下角标签选择器中的标签并打开【行为】面板。148.4 向页面中添加基本行为8.4.4 检查表单从【添加行为】下拉列表中选择【检查表单】动作。重复以上操作检查其他的文本域。单击【确定】按钮，在【行为】面板中选择适当的事件。如果在用户提交表单时检查多个域，则onSubmit事件自动出现在“事件”菜单中。158.4 向页面中添加基本行为8.4.5 控制Shockwave或

8、Flash使用【控制Shockwave或Flash】动作可以控制页面中的Shockwave或Flash影片的播放、停止、倒带或者转到某一帧等操作 使用【控制Shockwave或Flash】动作的操作步骤如下:插入的Shockwave或Flash 对象。并在【属性检查器】中对该影片进行命名，只能这样才能对影片进行控制。在文档中插入控制按钮。选择某个插入的控制按钮，在【行为】面板中，单击+按钮,并从“添加动作”菜单中选择【控制Shockwave或Flash】命令。在对话框的【影片】下拉列表中选择一个影片。根据所选的控制按钮在【操作】域中选择播放、停止、倒带或者前往帧. 选择适当的事件触发该动作。

9、168.4 向页面中添加基本行为8.4.6 交换图像【交换图像】动作通过更改img标签的src属性将一个图像和另一个图像进行交换。 使用【交换图像】行为的操作步骤如下：在文档中插入图像在【图像属性】面板上为图像指定名称（便于在以后指定图像时，易于辨认）。选取并打开【行为】面板，单击按钮并从【动作】下拉列表中选择【交换图像】。在【行为】面板中选择适当的事件。使用同样的方法，设置其他的交换图像。 178.4 向页面中添加基本行为8.4.7 转到URL使用【转到URL】动作可以在当前窗口或指定窗口中打开一个新页 。 使用【转到URL】动作的操作步骤如下：选择要添加该动作的对象。选取并打开【行为】面板

10、，单击按钮并从【动作】下拉列表中选择【转到URL】在【行为】面板中选择适当的事件。 188.4 向页面中添加基本行为8.4.8 播放声音使用【播放声音】动作来播放声音 。 使用【播放声音】动作的操作步骤如下：选择要添加该动作的对象。选取并打开【行为】面板，单击按钮并从【动作】下拉列表中选择【播放声音】 。在该对话框单击【浏览】按钮选取声音文件，或者在【播放声音】域中输入声音文件的路径和名称。单击【确定】按钮。 在【行为】面板中选择适当的事件。 198.4 向页面中添加基本行为8.4.9 显示弹出式菜单使用【显示弹出式菜单】行为来创建或编辑Dreamweaver弹出菜单，或者打开并修改已插入Dr

11、eamweaver文档的Fireworks弹出菜单 。 使用【显示弹出式菜单】动作的操作步骤如下： 选择要添加该动作的对象。选取并打开【行为】面板，单击按钮并从【动作】下拉列表中选择【显示弹出式菜单】 。通过在【显示弹出式菜单】对话框中设置选项来创建水平或垂直的弹出菜单 。 在【行为】面板中选择适当的事件。 208.4 向页面中添加基本行为8.4.10 拖动层 【拖动层】动作允许访问者拖动层。使用此动作创建拼图游戏、滑块控件和其他可移动的界面元素。 使用【拖动层】动作的操作步骤如下： 选择标签，这里不要选择层，因为层在版本较低的浏览器中都不接受事件，所以必须选择一个不同的对象。 。选取并打开【

12、行为】面板，单击按钮并从【动作】下拉列表中选择【拖动层】，打开【拖动层】对话框，该对话框包括“基本”与“高级”两个标签，默认状态为“基本”。 218.4 向页面中添加基本行为8.4.10 拖动层 如果要进一步定义层的拖动控制点、在拖动层时跟踪层的移动以及当放下层时触发一个动作，可单击“高级”标签，继续进行“高级”标签中各选项的设置 。【拖动层】对话框设置完成后，单击【确定】按钮。检查【行为】面板中默认事件是否是所需的事件。如果不是，从弹出式菜单中选择合适的事件。 228.4 向页面中添加基本行为8.4.11 显示/隐藏层【显示-隐藏层】动作显示、隐藏或恢复一个或多个层的默认可见性。 使用【显示

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