行为和时间轴

PPT文档演模板
行为和时间轴
3. 插入文本内容
PPT文档演模板
行为和时间轴
4. 打开时间轴浮动面板
PPT文档演模板
行为和时间轴
5. 添加动画对象 ① 方法一：用鼠标拖拽层对象，将其拖拽到时间轴浮动面
板中； ② 方法二：选中层对象，用鼠标右键单击层对象，在弹出
菜单中选择“添加对象”； ③ 方法三：选中层对象，在时间轴浮动面板的第一帧的位
行为和时间轴
3. 选中单元格中文本“音乐和娱乐”，在属性检查器中将连接地 址设定为“#”，并选中该文字链接；
4. 在行为面板中，打开“显示弹出式菜单”对话框；
PPT文档演模板
行为和时间轴
5. 设定菜单项目
PPT文档演模板
行为和时间轴
6. 外观选项卡设置如下：
PPT文档演模板
行为和时间轴
7. 切换到“高级”页，设定弹出式菜单无边框，其他项目为默认值。 •无边框
§ Dreamweaver MX中通过时间轴工具生成的动画是由JavaScript语句 来建。Dreamweaver MX将自动生成动画的源代码，而不需要网页编 辑人员手动编辑，使得网页编辑工作大大简化。
PPT文档演模板
行为和时间轴
实例7 动画文字
1. 新建网页文件
PPT文档演模板
行为和时间轴
2. 插入层对象
⑨ 动画通道：显示用于制作层和图象动画的动画条。 ⑩ 每秒帧数（fps）指示每秒钟动画播放的帧数。 ⑪ ⑾ 自动播放：选中此项，当前页在载入浏览器时即自动播放时间轴。 ⑫ ⑿ 关键帧：动画条中已经为对象指定属性（如位置）的帧。
Dreamweaver MX会计算关键帧的中间值。小圆标记表示关键帧。 ⑬ ⒀ 循环：选中此项，当前页在载入浏览器时可以自动循环播放时间
PPT文档演模板
行为和时间轴
PPT文档演模板
行为和时间轴
▪ 在53帧处添加一个关键帧，并且在属性浮动面板中设置网页中的层 对象在此关键帧处的可见性（显示）为Hidden（隐藏）。
PPT文档演模板
行为和时间轴
13. 添加动作 § 用鼠标点中时间轴浮动面板上标记为B栏处的第60帧的
位置。然后在行为浮动面板上添加一个让时间轴转到某 一帧的动作。
5. 编辑站点列表和表格属性
PPT文档演模板
行为和时间轴
6. 编辑层对象 1. 把层对象移动到站点类别的表格中对应的单元格的下方，保持层对
象和上面的表格有一定的重叠部分。为层取名为“amuse”。 7. 添加动作 1. 首先选中“音乐和娱乐”所在单元格，在行为浮动面板上，单击添
加按钮，选择“显示-隐藏层”动作，打开显示-隐藏层对话框。选中 层amuse，单击显示按钮，设置该层可见。浮动面板上出现了第一个 动作，该动作触发事件是onMouseOver(鼠标移上)。 2. 还是选中“音乐和娱乐”所在单元格，同样打开显示-隐藏层对话框。 选中层amuse，单击隐藏按钮，设置本动作的功能是隐藏该层对象。 浮动面板上出现了第二个动作，修改该动作触发事件为 onMouseout(鼠标移出)。
行为和时间轴
2. 设置username域检查
PPT文档演模板
行为和时间轴
3. 设置truename域检查
PPT文档演模板
行为和时间轴
4. 设置year域检查
PPT文档演模板
行为和时间轴
5. 设置month域检查
PPT文档演模板
行为和时间轴
6. 设置day域检查
PPT文档演模板
行为和时间轴
7. 设置intro域检查
行为和时间轴
3. 添加层对象：先在网页中添加一个层对象 § 要为网络导航的每个类别加上相应的站点列表，为了实
现想要得到的弹出菜单的效果，我们采用层对象来排布 网站列表。 4. 添加表格 § 为了整齐地排列站点列表，在层中插入一个5×1的表格。
PPT文档演模板
行为和时间轴
PPT文档演模板
行为和时间轴
② 行为通道：应该在时间轴中特定帧处执行的行为通道。 ③ 播放栏：显示当前在文档窗口中显示时间轴的哪一帧。 ④ 动画条：显示每个对象的动画的持续时间。 ⑤ 倒带：将播放栏移至时间轴中的第一帧。 ⑥ 后退：将播放栏向左移动一帧。 ⑦ 当前帧：指明当前播放的帧数。
PPT文档演模板
行为和时间轴
⑧ 播放：将播放栏向右移动一帧。单击“播放”并按住鼠标可向前播 放时间轴。
§ Dreamweaver MX中提供的“显示弹出菜单”和“隐藏弹 出菜单”就能够设计这样的菜单效果。
PPT文档演模板
行为和时间轴
实例4 弹出式菜单(一)
1. 新建一个网页 2. 在页面上输入网页标题文字和说明文字，并插入一个
1×4的表格，表格中输入站点类别信息：
PPT文档演模板
行为和时间轴
PPT文档演模板
PPT文档演模板
行为和时间轴
8. 设置password域检查
PPT文档演模板
行为和时间轴
9. 存盘预览 ▪ 当直接单击提交按钮时：
PPT文档演模板
行为和时间轴
▪ 当故意将出生年月填错：
PPT文档演模板
行为和时间轴
7．3 时间轴动画设计
一、时间轴面板 § 在Dreamweaver MX中提供了图形化操作来定义动画，这
计； 3. 了解利用行为和时间轴定义所对应的JavaScript函数及其
调用。
PPT文档演模板
行为和时间轴
§ JavaScript脚本的应用改善了网页的交互性能和显示效 果，但是程序代码的编写和调式限制了它的广泛应用。 为了简化页面上JavaScript脚本的开发过程并提高工作 效率，Dreamweaver MX提供了行为功能。行为是 Dreamweaver MX预置的JavaScript程序库。使用行为， 使得网页制作人员不用编程就能够实现一些程序动作。
PPT文档演模板
行为和时间轴
7．1 行为的事件和动作
§ 在Dreamweaver MX中设 计行为是通过行为面板来 实现的 .
§ 打开行为面板，在行为面 板中按下“增加行为”按 钮，就展开行为面板菜单
PPT文档演模板
行为和时间轴
§ 经常用到的几个动作主要是：播放声音、弹出信息、交换 图象、打开浏览器窗口、显示一隐藏层等。
行为和时间轴
PPT文档演模板
2020/12/5
行为和时间轴
§ 内容简介： 行为和时间轴是Dreamweaver MX为增强页 面效果、提高设计人员工作效率提供的功能，其实质是 在页面上自动生成JavaScript函数，实现页面上的交互 和简单动画功能。
PPT文档演模板
行为和时间轴
§ 学习目标： 1. 熟练掌握创建行为和时间轴的基本方法； 2. 掌握常用行为和事件的应用，以及常用时间轴动画的设
轴。
PPT文档演模板
行为和时间轴
二、创建层动画
§ 时间轴主要用于创建和定义以层对象为基础的网页动画，其的作用和 功能特色为：
§ 它突破了GIF、Flash动画等网页动画等网页动画只能在对象内部展现 动画内容的局限，使得设计者可以在整个网页范围内来建立动画效果。
§ 通过时间轴工具和行为工具的结合使用，可以在网页中建立带有交互 能力的动画对象。
→设置状态条文本”，打开设置状态条对话框。
PPT文档演模板
行为和时间轴
PPT文档演模板
行为和时间轴
3. 在消息栏中输入文本
PPT文档演模板
行为和时间轴
§ 事件列选择OnLoad，动作列显示的是“显示状态条文 本”，表示当文挡载入时浏览器状态栏中显示定义的文本
§ 按F12键在浏览器中浏览效果
PPT文档演模板
种操作是在时间轴面板中定义时间轴。使用动态HTML来 改变层的属性，或者随时间来改变关键帧中图象的属性。
PPT文档演模板
行为和时间轴
•①•② •③ •④•⑤•⑥•⑦ •⑧•⑨ •⑩ •⑾ •⑿ •⒀
PPT文档演模板
行为和时间轴
① 时间轴下拉列表框：时间轴下拉列表框指定当前在时间轴面板中显 示文档的哪个时间轴。在当前文档中定义的所有时间轴都会在这个 下拉列表中列出。
§ 常用的事件主要有以下几种： ➢ onLoad：当页面图片被载入后，onLoad事件被触发； ➢ onClick：当在页面上单击鼠标时，onClick事件被触发； ➢ onMouseOver：当鼠标被移入页面元素的上， onMouseOver事件被触发； ➢ onMouseOut：当鼠标移出页面元素时，onMouseOut 事件被触发。
行为和时间轴
PPT文档演模板
行为和时间轴
实例3 打开新浏览器窗口
1. 新建一个网页
PPT文档演模板
行为和时间轴
2. 打开上个实例的网页
PPT文档演模板
行为和时间轴
3. 添加打开浏览器窗口
▪ 设置Doublclick Me!!!文字颜色为绿色、加下划线、设 置连接“#”
▪ 在行为面板添加 “打开浏览器窗口”行为动作，打开对 话框：
PPT文档演模板
行为和时间轴
8. 切换到位置页，设定“菜单 位置”为第二项，即“低于 且位于触发器的左边缘” ； 下面的“X”、“Y”栏用于 指定菜单相对于文字链接左 上角的位置，这里设置如图； 然后选中“在发生 onMouseOut事件时隐藏菜 单”选项
PPT文档演模板
行为和时间轴
9. 此时控制面板窗口同时增加了两项行为： 10. 按同样步骤分别为文字“网络媒体”、“学校资源”和“软件
PPT文档演模板
行为和时间轴
▪ 触发事件设置为onDblClick，即当鼠标双击文本的 时候，弹出新的浏览器窗口。
PPT文档演模板
行为和时间轴
PPT文档演模板
行为和时间轴
三、制作弹出式菜单
§ 菜单的好处在于可以把很多暂时不需要的命令隐藏起来， 只有当鼠标点击菜单条时，才能以下拉菜单的形式显示这 些隐藏的命令。
实例 6 你填对了吗？
▪ 第一部分：我的注册表-----基本表单制作
PPT文档演模板
行为和时间轴
§ 第二部分： § 创建“检查表单”行为对表单数据进行合法性检查 1. 添加动作 § 选中网页中的提交按钮，添加一个检查表单动作
PPT文档演模板
行为和时间轴
PPT文档演模板
行为和时间轴
PPT文档演模板
PPT文档演模板
行为和时间轴
实例1 弹出信息
§ 新建网页窗口 § 添加弹出信息动作
PPT文档演模板
行为和时间轴
§ 添加第二个弹出信息动作
PPT文档演模板
行为和时间轴
§ 输入文本信息
PPT文档演模板
行为和时间轴
7．2 行为应用实例
一、 设置状态栏文字 实例2 设计当打开网页页面时在浏览器状态栏中显示欢迎词 1. 打开一个音乐网页 2. 点击“增加行为”按钮，在面板菜单中选择“设置文本
PPT文档演模板
行为和时间轴
PPT文档演模板
行为和时间轴
§ 选中层对象，在对应的浮动面板中，设置层的显示项为 Hidden，即层对象初始的可见性为隐藏
7. 为层添加动作 § 选中amuse层对象，然后在行为面板中，为这个层对象添
加两个显示-隐藏层动作。第一个动作是使amuse可见， 触发事件是onMouseOver。然后再添加一个使amuse层隐 藏的显示-隐藏层动作，触发事件设为onMouseOut。
置单击鼠标右键，在弹出菜单中选择“添加对象”。
PPT文档演模板
行为和时间轴
PPT文档演模板
行为和时间轴
6. 调整动画长度
PPT文档演模板
行为和时间轴
7. 设置动画起点
PPT文档演模板
行为和时间轴ቤተ መጻሕፍቲ ባይዱ
8. 添加关键帧、设置关键帧位置
PPT文档演模板
行为和时间轴
PPT文档演模板
行为和时间轴
9. 设置播放方式
PPT文档演模板
行为和时间轴
10. 预览动画效果
PPT文档演模板
行为和时间轴
11. 添加第二个动画 § 对层对象添加第二个动画，在原来的时间轴动画后面添
加一个默认长度为15帧的动画对象。 12. 设置层对象属性 § 将当前帧设为46帧（即刚才添加的动画的第一帧），在
浮动面板中，将层对象的显示设置为Visible(可见)。
资源”创建出弹出菜单。
PPT文档演模板
行为和时间轴
11. 保存文件，在浏览器中浏览弹出菜单的效果。
PPT文档演模板
行为和时间轴
实例5 弹出式菜单（二）
1. 新建网页文件 2. 在页面上输入网页标题文字和说明文字，并插入一个
1×4的表格，表格中输入站点类别信息：
PPT文档演模板
行为和时间轴
PPT文档演模板
PPT文档演模板
行为和时间轴
9. 添加其它站点列表
PPT文档演模板
行为和时间轴
10. 保存文件，浏览显示最终效果。
PPT文档演模板
行为和时间轴
四、检查表单
§ Dreamweaver MX的内置行为中提供了一个“检查表单” 的行为，目的是在用户提交数据前检查数据的合法性。
PPT文档演模板
行为和时间轴