7 行为和时间轴

9. 此时控制面板窗口同时增加了两项行为： 10. 按同样步骤分别为文字“网络媒体”、“学校资源”和“软件
资源”创建出弹出菜单。
11. 保存文件，在浏览器中浏览弹出菜单的效果。
实例5 弹出式菜单（二）
1. 新建网页文件 2. 在页面上输入网页标题文字和说明文字，并插入一个
1×4的表格，表格中输入站点类别信息：
在53帧处添加一个关键帧，并且在属性浮动面板中设置网页中的层 对象在此关键帧处的可见性（显示）为Hidden（隐藏）。
13. 添加动作 用鼠标点中时间轴浮动面板上标记为B栏处的第60帧的
位置。然后在行为浮动面板上添加一个让时间轴转到某 一帧的动作。
14. 预览修改 文件存盘，预栏动画效果。
实例8 网页小天使
1. 打开网页文件：打开实例7动画文字网页文件
2. 添加时间轴 在时间轴浮动面板上单击鼠标右键，在弹出的快捷菜单中，选择
“添加时间轴”，向网页添加一个新时间轴对象。
3. 添加层对象
4. 添加图片
5. 创建时间轴动画
6. 预览动画效果
7. 调整动画
8. 录制动画路径 删除建立好的小天使的时间轴动画。在时间轴浮动面板
实例4 弹出式菜单(一)
1. 新建一个网页 2. 在页面上输入网页标题文字和说明文字，并插入一个
1×4的表格，表格中输入站点类别信息：
3. 选中单元格中文本“音乐和娱乐”，在属性检查器中将连接地 址设定为“#”，并选中该文字链接；
4. 在行为面板中，打开“显示弹出式菜单”对话框；
5. 设定菜单项目
Dreamweaver MX中通过时间轴工具生成的动画是由JavaScript语句 来建。Dreamweaver MX将自动生成动画的源代码，而不需要网页编 辑人员手动编辑，使得网页编辑工作大大简化。
实例7 动画文字
1. 新建网页文件
2. 插入层对象
3. 插入文本内容
4. 打开时间轴浮动面板
象和上面的表格有一定的重叠部分。为层取名为“amuse”。 7. 添加动作 首先选中“音乐和娱乐”所在单元格，在行为浮动面板上，单击添
加按钮，选择“显示-隐藏层”动作，打开显示-隐藏层对话框。选中 层amuse，单击显示按钮，设置该层可见。浮动面板上出现了第一个 动作，该动作触发事件是onMouseOver(鼠标移上)。 还是选中“音乐和娱乐”所在单元格，同样打开显示-隐藏层对话框。 选中层amuse，单击隐藏按钮，设置本动作的功能是隐藏该层对象。 浮动面板上出现了第二个动作，修改该动作触发事件为 onMouseout(鼠标移出)。
6. 外观选项卡设置如下：
7. 切换到“高级”页，设定弹出式菜单无边框，其他项目为默认值。 无边框
8. 切换到位置页，设定“菜单 位置”为第二项，即“低于 且位于触发器的左边缘” ； 下面的“X”、“Y”栏用于 指定菜单相对于文字链接左 上角的位置，这里设置如图； 然后选中“在发生 onMouseOut事件时隐藏菜 单”选项
第七章 行为和时间轴
内容简介： 行为和时间轴是Dreamweaver MX为增强页 面效果、提高设计人员工作效率提供的功能，其实质是 在页面上自动生成JavaScript函数，实现页面上的交互 和简单动画功能。
学习目标：
1. 熟 练 掌 握 创 建 行 为 和 时 间 轴 的 基 本 方 法 ；
一、时间轴面板 在Dreamweaver MX中提供了图形化操作来定义动画，这
种操作是在时间轴面板中定义时间轴。使用动态HTML来 改变层的属性，或者随时间来改变关键帧中图象的属性。
①② ③ ④⑤⑥⑦ ⑧⑨ ⑩ ⑾ ⑿ ⒀
① 时间轴下拉列表框：时间轴下拉列表框指定当前在时间轴面板中显 示文档的哪个时间轴。在当前文档中定义的所有时间轴都会在这个 下拉列表中列出。
用鼠标拖拽小天使所在的层对象在网页上移动，Dreamweaver MX会自动记录下层对象运动的轨迹，作象动画
图象动画是指可以切换显示不同的动画效果。制作这种 效果，一般先在页面内插入一个图象，然后为时间轴添 加一个对象；在动画条中添加关键帧，在关键帧处改变 图象的源，即可实现图像的动画。
在行为面板添加 “打开浏览器窗口”行为动作，打开对 话框：
触发事件设置为onDblClick，即当鼠标双击文本的 时候，弹出新的浏览器窗口。
三、制作弹出式菜单
菜单的好处在于可以把很多暂时不需要的命令隐藏起来， 只有当鼠标点击菜单条时，才能以下拉菜单的形式显示这 些隐藏的命令。
Dreamweaver MX中提供的“显示弹出菜单”和“隐藏弹 出菜单”就能够设计这样的菜单效果。
边距设置为-140px。
5. 添加动画对象 用鼠标拖拽层Layer2对象，将其拖拽到时间轴浮动面板中。在结束
关键帧上，将层Layer2对象拖拽到层Layer1右面，即设置层 Layer2“左”边位置为600px。并选定“自动播放”和“循环”选项。
7．1 行为的事件和动作
在Dreamweaver MX中设 计行为是通过行为面板来 实现的 .
打开行为面板，在行为面 板中按下“增加行为”按 钮，就展开行为面板菜单
经常用到的几个动作主要是：播放声音、弹出信息、交换 图象、打开浏览器窗口、显示一隐藏层等。
常用的事件主要有以下几种： onLoad：当页面图片被载入后，onLoad事件被触发； onClick：当在页面上单击鼠标时，onClick事件被触发； onMouseOver：当鼠标被移入页面元素的上， onMouseOver事件被触发； onMouseOut：当鼠标移出页面元素时，onMouseOut 事件被触发。
二、创建层动画
时间轴主要用于创建和定义以层对象为基础的网页动画，其的作用和 功能特色为：
它突破了GIF、Flash动画等网页动画等网页动画只能在对象内部展现 动画内容的局限，使得设计者可以在整个网页范围内来建立动画效果。
通过时间轴工具和行为工具的结合使用，可以在网页中建立带有交互 能力的动画对象。
2. 设置username域检查
3. 设置truename域检查
4. 设置year域检查
5. 设置month域检查
6. 设置day域检查
7. 设置intro域检查
8. 设置password域检查
9. 存盘预览 当直接单击提交按钮时：
当故意将出生年月填错：
7．3 时间轴动画设计
选中层对象，在对应的浮动面板中，设置层的显示项为 Hidden，即层对象初始的可见性为隐藏
7. 为层添加动作 选中amuse层对象，然后在行为面板中，为这个层对象添
加两个显示-隐藏层动作。第一个动作是使amuse可见， 触发事件是onMouseOver。然后再添加一个使amuse层隐 藏的显示-隐藏层动作，触发事件设为onMouseOut。
中选中Timeline2中小天使的整个时间线动画对象，然后 单击鼠标右键，在弹出的快捷菜单中，选择删除，删除 该动画对象。 让小天使从网页的右边出来，将小天使的层对象，拖动 到网页的右边隐藏起来。然后，在时间线浮动面板上， 将当前帧设置为46帧，然后单击鼠标右键，在弹出的快 捷菜单中，选择“录制层路径”。
“溢出”的值设为“Hidden”，即当层中的内容超过边界 时就隐藏。并设层背景为粉色。 3. 插入子层 在Layer1中插入一子层Layer2，高度与Layer1同，“溢 出”栏选择“visible”，然后将光标放入到层Layer2中， 录入文本“北京电大”，设置文字样式。
4. 调整位置 将层Layer2放到层外（被隐藏）。若Layer2宽度为140px，则其左
② 行为通道：应该在时间轴中特定帧处执行的行为通道。 ③ 播放栏：显示当前在文档窗口中显示时间轴的哪一帧。 ④ 动画条：显示每个对象的动画的持续时间。 ⑤ 倒带：将播放栏移至时间轴中的第一帧。 ⑥ 后退：将播放栏向左移动一帧。 ⑦ 当前帧：指明当前播放的帧数。
⑧ 播放：将播放栏向右移动一帧。单击“播放”并按住鼠标可向前播 放时间轴。
3. 添加层对象：先在网页中添加一个层对象 要为网络导航的每个类别加上相应的站点列表，为了实
现想要得到的弹出菜单的效果，我们采用层对象来排布 网站列表。 4. 添加表格 为了整齐地排列站点列表，在层中插入一个5×1的表格。
5. 编辑站点列表和表格属性
6. 编辑层对象 把层对象移动到站点类别的表格中对应的单元格的下方，保持层对
5. 添加动画对象 ① 方法一：用鼠标拖拽层对象，将其拖拽到时间轴浮动面
板中； ② 方法二：选中层对象，用鼠标右键单击层对象，在弹出
菜单中选择“添加对象”； ③ 方法三：选中层对象，在时间轴浮动面板的第一帧的位
置单击鼠标右键，在弹出菜单中选择“添加对象”。
6. 调整动画长度
7. 设置动画起点
实例1 弹出信息
新建网页窗口 添加弹出信息动作
添加第二个弹出信息动作
输入文本信息
7．2 行为应用实例
一、 设置状态栏文字 实例2 设计当打开网页页面时在浏览器状态栏中显示欢迎词 1. 打开一个音乐网页 2. 点击“增加行为”按钮，在面板菜单中选择“设置文本
→设置状态条文本”，打开设置状态条对话框。
1. 新建文件 2. 向页面中插入一副图像 3. 用鼠标拖动页面上的图像，将其放到时间轴面板中的第
帧上。
4. 将15帧拉到60帧处，并在每10帧增加一个关键帧，并在每个关键 帧处重新在属性面板源文件栏处选择新图片文件。
5. 选择“自动播放”和“循环”选项，浏览效果。
实10 滚动动画
1. 新建文件 2. 插入层 层Layer1宽600px，高45px，在属性面板上，将其属性
2. 掌握常用行为和事件的应用，以及常用时间轴动画的设
计
；