第九章 行为与时间轴
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
7.4
向页面中添加基本行为
7.4.7 播放声音 使用【播放声音】动作来播放声音 。 使用【播放声音】动作的操作步骤如下：
1. 2.
3.
4.
选择要添加该动作的对象。 选 取 并打开 【行为 】 面板，单击按钮并 从 【动作】下拉列表中选择【播放声音】 。 在该对话框单击【浏览】按钮选取声音文件， 或者在【播放声音】域中输入声音文件的路 径和名称。单击【确定】按钮。 在【行为】面板中选择适当的事件。
7.4
7.4.10
3.
向页面中添加基本行为
拖动层
4.
5.
如果要进一步定义层的拖动控制点、在拖动层时 跟踪层的移动以及当放下层时触发一个动作，可 单击“高级”标签，继续进行“高级”标签中各 选项的设置 。 【拖动层】对话框设置完成后，单击【确定】按 钮。 检查【行为】面板中默认事件是否是所需的事件。 如果不是，从弹出式菜单中选择合适的事件。
7.4
向页面中添加基本行为
7.4.3 设置文本 使用Dreamweaver内置的【设置文本】动作 可以动态地设置层、框架、文本域以及状态 栏的文本。 使用【设置文本】行为的操作步骤如下：
1.
选择一个对象并打开【行为】面板。 单击单击按钮并从“添加动作”菜单中选择 【设置文本】｜【设置状态栏文本】命令。 打开“设置状态栏文本”对话框。 在【消息】文本框中输入相应的信息。
7.7 实战演练
一、实战效果－－－添加行为
7.7 实战演练
二、实战要求
利用行为为网页添加“弹出信息”和“打开浏览器” 功能。 添加拖动层行为
利用行为设置层文本和文本域文字
2.
3.
7.4
向页面中添加基本行为
7.4.4 检查表单 利用【检查表单】动作可以为表单中各元素 设置有效性规则，并检查指定文本域的内容 以确保用户输入正确的数据类型 使用【检查表单】动作的操作步骤如下：
1. 2.
首先在文档中插入表单和文本域。 然后执行下列步骤之一： 如果要在用户填写表单时验证单个文本域， 选取一个文本域，打开【行为】面板。 如果要在用户提交表单时验证多个文本域， 单击文档窗口左下角标签选择器中的 <form> 标签并打开【行为】面板。
7.2 行为的概述
事件与动作的关系
3.
将“事件”和“动作”组合起来就构成了“行 为”。在将行为附加到页面元素之后，只要对 该元素触发了所指定的事件，浏览器就会调用 与该事件关联的动作（JavaScript）。
7.3
使用【行为】面板
选择【窗口】｜【行为】命令，打开【行为】面板
显示设置事件 上下移动行为
7.4
7.4.1
向页面中添加基本行为
弹出信息
使用【弹出信息】动作将显示一个带有指定消息的 警告窗口 使用【弹出信息】动作的操作步骤如下： 1. 选择对象并打开行为面板。 2. 单击＋按钮，并从“添加动作”菜单中选择 【弹出信息】。打开“弹出信息”对话框。 3. 在【消息】域中输入在信息框中将要显示的信 息文字。 4. 设置完成后单击【确定】按钮。 5. 检查【行为】面板中默认事件是否是所需的事 件 ，如果不是，从弹出式菜单中选择另一个事 件。
7.4
7.4.9
向页面中添加基本行为
显示弹出式菜单
使用【显示弹出式菜单】行为来创建或编辑 Dreamweaver弹出菜单，或者打开并修改已插入 Dreamweaver文档的Fireworks弹出菜单 。 使用【显示弹出式菜单】动作的操作步骤如下： 1. 选择要添加该动作的对象。 2. 选 取 并打开 【行为 】 面板，单击按钮并 从 【动作】下拉列表中选择【显示弹出式 菜 单】 。 3. 通过在【显示弹出式菜单】对话框中设置选 项来创建水平或垂直的弹出菜单 。 4. 在【行为】面板中选择适当的事件。
7.5
wk.baidu.com
时间轴概述
7.5.1 使用时间轴面板
时间轴动画是通过【时间轴】面板来制作完成的。 选择【窗口】｜【时间轴】命令，在编辑窗口正下方打 开【时间轴】面板。
7.5
时间轴概述
7.5.2 创建时间轴动画 创建时间轴动画的步骤如下：
1. 2.
3. 4. 5.
在页面中插入层，在层中插入图片或文本。 选中该层，并将其拖动到【时间轴】面板中， 在【时间轴】面板中形成一段动画条。 定义动画开始和结束时动画对象的状态。 通过关键帧设置动画的运动路径。 按 F12预览动态效果
第7章 行为与时间轴
本章重点： 行为是由事件和动作两部分组成 如何在网页中添加行为 如何为“事件”选择合适的“动 作”。
第7章 行为与时间轴
7.1 “炫”网页――软件下载之 家 7.2 行为的概述 7.3 使用【行为】面板 7.4 向页面中添加基本行为 7.5 时间轴概述 7.7 实战演练
显示所有事件
添加或删除动作
7.3
使用【行为】面板
仅显示附加到当前文档的那些
【显示设置事件】
事件 【显示所有事件】 按字母降序显示所有事件 【添加行为】 在出现的动作菜单中, 选择一个动 作，并指定该动作的相关参数，即可添加行为。 【显示事件】 在此菜单中选择确定哪些事件将显 示在“事件”弹出式菜单中 【删除事件】 单击“删除事件”按钮，可以从行 为列表中删除所选的事件和动作。 【向上移动】和【向下移动】 将特定事件的所选 动作在行为列表中向上或向下移动。给定事件的动 作是以选定的顺序执行的。
7.4
向页面中添加基本行为
添加行为：通过“行为”面板上的“添加行为”按 钮，可以将行为附加到整个文档，也可以附加到链 接、图像、表单元素或多种其他HTML元素中的任何 一种。
事件的选择：在添加行为后，当单击行为列表框中 所选事件名称旁边的箭头按钮时，会出现一个下拉 菜单，其中包含可以触发该动作的所有事件。只有 在选择了行为列表中的某个事件时才显示此菜单。 根据所选对象的不同，显示的事件也有所不同。
7.4
7.4.10
向页面中添加基本行为
拖动层
【拖动层】动作允许访问者拖动层。使用此动作创建 拼图游戏、滑块控件和其他可移动的界面元素。 使用【拖动层】动作的操作步骤如下： 1.选择<body>标签，这里不要选择层，因为层在版本 较低的浏览器中都不接受事件，所以必须选择一个 不同的对象。 。 2.选取并打开【行为】面板，单击按钮并从【动作】 下拉列表中选择【拖动层】，打开【拖动层】对话 框，该对话框包括“基本”与“高级”两个标签， 默认状态为“基本”。
7.4
7.4.2
向页面中添加基本行为
打开浏览器窗口
使用的【打开浏览器窗口】动作在一个新的窗口中 打开URL 使用【打开浏览器窗口】行为的操作步骤如下： 1. 选择一个对象并打开【行为】面板。 2. 单击单击按钮并从“添加动作”菜单中选择【打 开浏览器窗口】命令。打开“打开浏览器窗口” 对话框。 3. 设置完成后单击【确定】按钮。 4. 检查【行为】面板中默认事件是否是所需的事件。 如果不是，从弹出式菜单中选择另一个事件。
准备页面 。 设置“弹出信息” 打开浏览器窗口 设置状态栏文本 设置文本域文本 创建图像交换功能 用时间轴控制图片替换 将层设置为可拖动 创建小鸟飞翔动画
7.1.3 实现步骤
1. 2. 3. 4. 5.
6.
7. 8.
9.
7.2 行为的概述
1.
2.
行为是动作和触发该动作的事件的结合体 事件 事件是触发动态效果的原因，它可以被附加在各 种页面元素上，也可以被附加到HTML标记中。 动作 动作其实是一段网页上的JavaScript代码，这些 代码在特定事件被激发时执行，从而实现访问者 与Web页进行交互，以多种方式更改页面或执行 某些任务。通过动作来完成动态效果，如：打开 浏览器窗口、显示或隐藏层、播放声音等都是动 作。
7.5
时间轴概述
7.5.3 在时间轴中加入行为 在时间轴上附加行为的操作步骤如下：
1. 2.
3.
4.
选中要附加行为的帧。 单击右键，在快捷菜单中选择【添加行为】命 令，打开【行为】面板。 在【行为】面板中，单击添加行为按钮，在弹 出的动作菜单中，选择要附加的行为。如选择 “显示/隐藏层”，在【显示/隐藏层】对话框 中设置其“隐藏”。 切换到【时间轴】面板，可以看到在附加行为 后，行为通过上的浅蓝色行为标记。
7.4
向页面中添加基本行为
7.4.11 显示/隐藏层 【显示-隐藏层】动作显示、隐藏或恢复一 个或多个层的默认可见性。 使用【显示-隐藏层】动作操作步骤如下：
1.
2.
3.
在文档窗口创建要附加该动作的层，然后在层 中放置要隐藏/显示的图像或文字； 打开【行为】面板，单击按钮并从【动作】下 拉列表中选择【显示-隐藏层】，在对话框中设 置参数； 单击【确定】按钮。检查默认事件是否是所需 的事件。
7.4
7.4.4
3.
向页面中添加基本行为
检查表单
从【添加行为】下拉列表中选择【检查表单】 动作。 重复以上操作检查其他的文本域。 单击【确定】按钮，在【行为】面板中选择适 当的事件。 如果在用户提交表单时检查多个域，则 onSubmit事件自动出现在“事件”菜单中。
4. 5.
6.
7.4
7.4.5
向页面中添加基本行为
控制Shockwave或Flash
使用【控制Shockwave或Flash】动作可以控制页面 中的Shockwave或Flash影片的播放、停止、倒带或 者转到某一帧等操作 使用【控制 Shockwave 或 Flash】动作的操作步骤如 下:
1.
2. 3.
4. 5.
6.
插入的Shockwave或Flash 对象。并在【属性检查器】 中对该影片进行命名，只能这样才能对影片进行控制。 在文档中插入控制按钮。 选择某个插入的控制按钮，在【行为】面板中，单击+ 按钮,并从“添加动作”菜单中选择【控制Shockwave 或Flash】命令。 在对话框的【影片】下拉列表中选择一个影片。 根据所选的控制按钮在【操作】域中选择播放、停止、 倒带或者前往帧. 选择适当的事件触发该动作。
7.4
向页面中添加基本行为
7.4.7 交换图像 【交换图像】动作通过更改img标签的src属 性将一个图像和另一个图像进行交换。 使用【交换图像】行为的操作步骤如下：
1. 2.
3.
4. 5.
在文档中插入图像 在【图像属性】面板上为图像指定名称（便 于在以后指定图像时，易于辨认）。 选 取 并打开 【行为 】 面板，单击按钮并 从 【动作】下拉列表中选择【交换图像】。 在【行为】面板中选择适当的事件。 使用同样的方法，设置其他的交换图像。
7.1
“炫”网页――软件下载之家
7.1.1 案例综述
本例我们将在原有页面的基础上，添加 Dreamweaver 8所提供的行为，并通过时间轴 在页面中添加动画。
7.1
“炫”网页――软件下载之家
7.1.2 案例分析
添加行为的时候要遵循3个步骤：
选择对象。 添加动作。 调整事件。
7.1
“炫”网页――软件下载之家
7.4
向页面中添加基本行为
7.4.7 转到URL 使用【转到URL】动作可以在当前窗口或指 定窗口中打开一个新页 。 使用【转到URL】动作的操作步骤如下：
1. 2.
3.
选择要添加该动作的对象。 选 取 并打开 【行为 】 面板，单击按钮并 从 【动作】下拉列表中选择【转到URL】 在【行为】面板中选择适当的事件。