行为和时间轴PPT课件

《行为和时间轴PPT课件》由会员分享，可在线阅读，更多相关《行为和时间轴PPT课件（98页珍藏版）》请在金锄头文库上搜索。

1、行为和时间轴行为和时间轴 内容简介：内容简介：内容简介：内容简介： 行为和时间轴是行为和时间轴是行为和时间轴是行为和时间轴是DreamweaverMXDreamweaverMX为增强页为增强页为增强页为增强页面效果、提高设计人员工作效率提供的功能，其实质是面效果、提高设计人员工作效率提供的功能，其实质是面效果、提高设计人员工作效率提供的功能，其实质是面效果、提高设计人员工作效率提供的功能，其实质是在页面上自动生成在页面上自动生成在页面上自动生成在页面上自动生成JavaScriptJavaScript函数，实现页面上的交互函数，实现页面上的交互函数，实现页面上的交互函数，实现页面上的交互和简单动

2、画功能。和简单动画功能。和简单动画功能。和简单动画功能。 目标：目标：目标：目标：1. 1.熟熟 练练 掌掌 握握 创创 建建 行行 为为 和和 时时 间间 轴轴 的的 基基 本本 方方 法法 ；熟熟 练练 掌掌 握握 创创 建建 行行 为为 和和 时时 间间 轴轴 的的 基基 本本 方方 法法 ；2. 2. 掌掌握握常常用用行行为为和和事事件件的的应应用用，以以及及常常用用时时间间轴轴动动画画的的设设掌掌握握常常用用行行为为和和事事件件的的应应用用，以以及及常常用用时时间间轴轴动动画画的的设设计计；计计；3. 3.了解利用行为和时间轴定义所对应的了解利用行为和时间轴定义所对应的了解利用行为和

3、时间轴定义所对应的了解利用行为和时间轴定义所对应的JavaScriptJavaScript函数及其函数及其函数及其函数及其调用。调用。调用。调用。 JavaScriptJavaScript脚本的应用改善了网页的交互性能和显示效脚本的应用改善了网页的交互性能和显示效脚本的应用改善了网页的交互性能和显示效脚本的应用改善了网页的交互性能和显示效果，但是程序代码的编写和调式限制了它的广泛应用。果，但是程序代码的编写和调式限制了它的广泛应用。果，但是程序代码的编写和调式限制了它的广泛应用。果，但是程序代码的编写和调式限制了它的广泛应用。为了简化页面上为了简化页面上为了简化页面上为了简化页面上JavaSc

4、riptJavaScript脚本的开发过程并提高工作脚本的开发过程并提高工作脚本的开发过程并提高工作脚本的开发过程并提高工作效率，效率，效率，效率，DreamweaverMXDreamweaverMX提供了行为功能。行为是提供了行为功能。行为是提供了行为功能。行为是提供了行为功能。行为是DreamweaverMXDreamweaverMX预置的预置的预置的预置的JavaScriptJavaScript程序库。使用行为，程序库。使用行为，程序库。使用行为，程序库。使用行为，使得网页制作人员不用编程就能够实现一些程序动作。使得网页制作人员不用编程就能够实现一些程序动作。使得网页制作人员不用编程就能

5、够实现一些程序动作。使得网页制作人员不用编程就能够实现一些程序动作。 11行为的事件和动作行为的事件和动作行为的事件和动作行为的事件和动作 在在在在DreamweaverMXDreamweaverMX中设中设中设中设计行为是通过行为面板来计行为是通过行为面板来计行为是通过行为面板来计行为是通过行为面板来实现的实现的实现的实现的 . . 打开行为面板，在行为面打开行为面板，在行为面打开行为面板，在行为面打开行为面板，在行为面板中按下板中按下板中按下板中按下“ “增加行为增加行为增加行为增加行为” ”按按按按钮，就展开行为面板菜单钮，就展开行为面板菜单钮，就展开行为面板菜单钮，就展开行为面板菜单

6、经常用到的几个动作主要是：播放声音、弹出信息、交换经常用到的几个动作主要是：播放声音、弹出信息、交换经常用到的几个动作主要是：播放声音、弹出信息、交换经常用到的几个动作主要是：播放声音、弹出信息、交换图象、打开浏览器窗口、显示一隐藏层等。图象、打开浏览器窗口、显示一隐藏层等。图象、打开浏览器窗口、显示一隐藏层等。图象、打开浏览器窗口、显示一隐藏层等。 常用的事件主要有以下几种：常用的事件主要有以下几种：常用的事件主要有以下几种：常用的事件主要有以下几种：onLoadonLoad：当页面图片被载入后，：当页面图片被载入后，：当页面图片被载入后，：当页面图片被载入后，onLoadonLoad事件被

7、触发；事件被触发；事件被触发；事件被触发；onClickonClick：当在页面上单击鼠标时，：当在页面上单击鼠标时，：当在页面上单击鼠标时，：当在页面上单击鼠标时，onClickonClick事件被触发；事件被触发；事件被触发；事件被触发；onMouseOveronMouseOver：当鼠标被移入页面元素的上，：当鼠标被移入页面元素的上，：当鼠标被移入页面元素的上，：当鼠标被移入页面元素的上，onMouseOveronMouseOver事件被触发；事件被触发；事件被触发；事件被触发；onMouseOutonMouseOut：当鼠标移出页面元素时，：当鼠标移出页面元素时，：当鼠标移出页面元素时

8、，：当鼠标移出页面元素时，onMouseOutonMouseOut事件被触发。事件被触发。事件被触发。事件被触发。 实例实例实例实例1 1 1 1 弹出信息弹出信息弹出信息弹出信息 新建网页窗口新建网页窗口新建网页窗口新建网页窗口 添加弹出信息动作添加弹出信息动作添加弹出信息动作添加弹出信息动作 添加第二个弹出信息动作添加第二个弹出信息动作添加第二个弹出信息动作添加第二个弹出信息动作 输入文本信息输入文本信息输入文本信息输入文本信息22行为应用实例行为应用实例行为应用实例行为应用实例 一、一、一、一、 设置状态栏文字设置状态栏文字设置状态栏文字设置状态栏文字 实例实例实例实例2 2 设计当打开

9、网页页面时在浏览器状态栏中显示欢迎词设计当打开网页页面时在浏览器状态栏中显示欢迎词设计当打开网页页面时在浏览器状态栏中显示欢迎词设计当打开网页页面时在浏览器状态栏中显示欢迎词1. 1.打开一个音乐网页打开一个音乐网页打开一个音乐网页打开一个音乐网页2.2.2.2.点击点击点击点击“ “增加行为增加行为增加行为增加行为” ”按钮，在面板菜单中选择按钮，在面板菜单中选择按钮，在面板菜单中选择按钮，在面板菜单中选择“ “设置文本设置文本设置文本设置文本设置状态条文本设置状态条文本设置状态条文本设置状态条文本” ”，打开设置状态条对话框。，打开设置状态条对话框。，打开设置状态条对话框。，打开设置状态条

10、对话框。 3.3.3.3.在消息栏中输入文本在消息栏中输入文本在消息栏中输入文本在消息栏中输入文本 事件列选择事件列选择事件列选择事件列选择OnLoadOnLoad，动作列显示的是，动作列显示的是，动作列显示的是，动作列显示的是“ “显示状态条文本显示状态条文本显示状态条文本显示状态条文本” ”，表示当文挡载入时浏览器状态栏中显示定义的文本，表示当文挡载入时浏览器状态栏中显示定义的文本，表示当文挡载入时浏览器状态栏中显示定义的文本，表示当文挡载入时浏览器状态栏中显示定义的文本 按按按按F12F12键在浏览器中浏览效果键在浏览器中浏览效果键在浏览器中浏览效果键在浏览器中浏览效果实例实例实例实例3

11、3打开新浏览器窗口打开新浏览器窗口打开新浏览器窗口打开新浏览器窗口1. 1.新建一个网页新建一个网页新建一个网页新建一个网页2. 2.打开上个实例的网页打开上个实例的网页打开上个实例的网页打开上个实例的网页3.3.3.3.添加打开浏览器窗口添加打开浏览器窗口添加打开浏览器窗口添加打开浏览器窗口 设置设置设置设置Doublclick Me!Doublclick Me!Doublclick Me!Doublclick Me!文字颜色为绿色、加下划线、设文字颜色为绿色、加下划线、设文字颜色为绿色、加下划线、设文字颜色为绿色、加下划线、设置连接置连接置连接置连接“# # # #” 在行为面板添加在行为

12、面板添加在行为面板添加在行为面板添加 “打开浏览器窗口打开浏览器窗口打开浏览器窗口打开浏览器窗口”行为动作，打开对行为动作，打开对行为动作，打开对行为动作，打开对话框：话框：话框：话框： 触发事件设置为触发事件设置为触发事件设置为触发事件设置为onDblClickonDblClickonDblClickonDblClick，即当鼠标双击文本的时，即当鼠标双击文本的时，即当鼠标双击文本的时，即当鼠标双击文本的时候，弹出新的浏览器窗口。候，弹出新的浏览器窗口。候，弹出新的浏览器窗口。候，弹出新的浏览器窗口。三、制作弹出式菜单三、制作弹出式菜单三、制作弹出式菜单三、制作弹出式菜单 菜菜菜菜单单的好的

13、好的好的好处处在于可以把很多在于可以把很多在于可以把很多在于可以把很多暂时暂时不需要的命令不需要的命令不需要的命令不需要的命令隐隐藏起来，藏起来，藏起来，藏起来，只有当鼠只有当鼠只有当鼠只有当鼠标标点点点点击击菜菜菜菜单单条条条条时时，才能以下拉菜，才能以下拉菜，才能以下拉菜，才能以下拉菜单单的形式的形式的形式的形式显显示示示示这这些些些些隐隐藏的命令。藏的命令。藏的命令。藏的命令。 DreamweaverMXDreamweaverMX中提供的中提供的中提供的中提供的“ “显显示示示示弹弹出菜出菜出菜出菜单单” ”和和和和“ “隐隐藏藏藏藏弹弹出菜出菜出菜出菜单单” ”就能就能就能就能够设计这

14、样够设计这样的菜的菜的菜的菜单单效果。效果。效果。效果。实例实例实例实例44弹出式菜单弹出式菜单弹出式菜单弹出式菜单( (一一一一) )1. 1.新建一个网新建一个网新建一个网新建一个网页页2. 2.在在在在页页面上面上面上面上输输入网入网入网入网页标题页标题文字和文字和文字和文字和说说明文字，并插入一个明文字，并插入一个明文字，并插入一个明文字，并插入一个1414的表格，表格中的表格，表格中的表格，表格中的表格，表格中输输入站点入站点入站点入站点类别类别信息：信息：信息：信息： 3. 3.选中单元格中文本选中单元格中文本选中单元格中文本选中单元格中文本“ “音乐和娱乐音乐和娱乐音乐和娱乐音乐

15、和娱乐” ”，在属性检查器中将连接地，在属性检查器中将连接地，在属性检查器中将连接地，在属性检查器中将连接地址设定为址设定为址设定为址设定为“ “#”#”，并选中该文字链接；，并选中该文字链接；，并选中该文字链接；，并选中该文字链接；4. 4.在行为面板中，打开在行为面板中，打开在行为面板中，打开在行为面板中，打开“ “显示弹出式菜单显示弹出式菜单显示弹出式菜单显示弹出式菜单” ”对话框；对话框；对话框；对话框；5. 5.设定菜单项目设定菜单项目设定菜单项目设定菜单项目 6. 6.外观选项卡设置如下：外观选项卡设置如下：外观选项卡设置如下：外观选项卡设置如下：7. 7.切换到切换到切换到切换到

16、“ “高级高级高级高级” ”页，设定弹出式菜单无边框，其他项目为默认值。页，设定弹出式菜单无边框，其他项目为默认值。页，设定弹出式菜单无边框，其他项目为默认值。页，设定弹出式菜单无边框，其他项目为默认值。无边框无边框无边框无边框8. 8.切换到位置页，设定切换到位置页，设定切换到位置页，设定切换到位置页，设定“ “菜单菜单菜单菜单位置位置位置位置” ”为第二项，即为第二项，即为第二项，即为第二项，即“ “低于低于低于低于且位于触发器的左边缘且位于触发器的左边缘且位于触发器的左边缘且位于触发器的左边缘” ”；下面的下面的下面的下面的“ “X”X”、“ “Y”Y”栏用于栏用于栏用于栏用于指定菜单相

17、对于文字链接左指定菜单相对于文字链接左指定菜单相对于文字链接左指定菜单相对于文字链接左上角的位置，上角的位置，上角的位置，上角的位置，这里设置如图；这里设置如图；这里设置如图；这里设置如图；然后选中然后选中然后选中然后选中“ “在发生在发生在发生在发生onMouseOutonMouseOut事件时隐藏菜事件时隐藏菜事件时隐藏菜事件时隐藏菜单单单单” ”选项选项选项选项9. 9.此时控制面板窗口同时增加了两项行为：此时控制面板窗口同时增加了两项行为：此时控制面板窗口同时增加了两项行为：此时控制面板窗口同时增加了两项行为：10.10.按同样步骤分别为文字按同样步骤分别为文字按同样步骤分别为文字按同

18、样步骤分别为文字“ “网络媒体网络媒体网络媒体网络媒体” ”、“ “学校资源学校资源学校资源学校资源” ”和和和和“ “软件软件软件软件资源资源资源资源” ”创建出弹出菜单。创建出弹出菜单。创建出弹出菜单。创建出弹出菜单。11.11.保存文件，在浏览器中浏览弹出菜单的效果。保存文件，在浏览器中浏览弹出菜单的效果。保存文件，在浏览器中浏览弹出菜单的效果。保存文件，在浏览器中浏览弹出菜单的效果。实例实例实例实例55弹出式菜单（二）弹出式菜单（二）弹出式菜单（二）弹出式菜单（二）1. 1.新建网新建网新建网新建网页页文件文件文件文件2. 2.在在在在页页面上面上面上面上输输入网入网入网入网页标题页标

19、题文字和文字和文字和文字和说说明文字，并插入一个明文字，并插入一个明文字，并插入一个明文字，并插入一个1414的表格，表格中的表格，表格中的表格，表格中的表格，表格中输输入站点入站点入站点入站点类别类别信息：信息：信息：信息：3. 3.添加添加添加添加层对层对象：先在网象：先在网象：先在网象：先在网页页中添加一个中添加一个中添加一个中添加一个层对层对象象象象 要要要要为为网网网网络导络导航的每个航的每个航的每个航的每个类别类别加上相加上相加上相加上相应应的站点列表，的站点列表，的站点列表，的站点列表，为为了了了了实实现现想要得到的想要得到的想要得到的想要得到的弹弹出菜出菜出菜出菜单单的效果，我

20、的效果，我的效果，我的效果，我们们采用采用采用采用层对层对象来排布象来排布象来排布象来排布网站列表。网站列表。网站列表。网站列表。4. 4.添加表格添加表格添加表格添加表格 为为了整了整了整了整齐齐地排列站点列表，在地排列站点列表，在地排列站点列表，在地排列站点列表，在层层中插入一个中插入一个中插入一个中插入一个5151的表格。的表格。的表格。的表格。5. 5.编辑站点列表和表格属性编辑站点列表和表格属性编辑站点列表和表格属性编辑站点列表和表格属性6. 6.编辑层对编辑层对象象象象 把把把把层对层对象移象移象移象移动动到站点到站点到站点到站点类别类别的表格中的表格中的表格中的表格中对应对应的的

21、的的单单元格的下方，保持元格的下方，保持元格的下方，保持元格的下方，保持层对层对象和上面的表格有一定的重叠部分。象和上面的表格有一定的重叠部分。象和上面的表格有一定的重叠部分。象和上面的表格有一定的重叠部分。为层为层取名取名取名取名为为“ “amuse”amuse”。7. 7.添加添加添加添加动动作作作作 首先首先首先首先选选中中中中“ “音音音音乐乐和和和和娱乐娱乐” ”所在所在所在所在单单元格，在行元格，在行元格，在行元格，在行为为浮浮浮浮动动面板上，面板上，面板上，面板上，单击单击添添添添加按加按加按加按钮钮，选择选择“ “显显示示示示- -隐隐藏藏藏藏层层” ”动动作，打开作，打开作，

22、打开作，打开显显示示示示- -隐隐藏藏藏藏层对话层对话框。框。框。框。选选中中中中层层amuseamuse，单击显单击显示按示按示按示按钮钮，设设置置置置该层该层可可可可见见。浮。浮。浮。浮动动面板上出面板上出面板上出面板上出现现了第一个了第一个了第一个了第一个动动作，作，作，作，该动该动作作作作触触触触发发事件是事件是事件是事件是onMouseOveronMouseOver( (鼠鼠鼠鼠标标移上移上移上移上) )。 还还是是是是选选中中中中“ “音音音音乐乐和和和和娱乐娱乐” ”所在所在所在所在单单元格，同元格，同元格，同元格，同样样打开打开打开打开显显示示示示- -隐隐藏藏藏藏层对话层对话

23、框。框。框。框。选选中中中中层层amuseamuse，单击单击隐隐藏按藏按藏按藏按钮钮，设设置本置本置本置本动动作的功能是作的功能是作的功能是作的功能是隐隐藏藏藏藏该层对该层对象。象。象。象。浮浮浮浮动动面板上出面板上出面板上出面板上出现现了第二个了第二个了第二个了第二个动动作，修改作，修改作，修改作，修改该动该动作触作触作触作触发发事件事件事件事件为为onMouseoutonMouseout( (鼠鼠鼠鼠标标移出移出移出移出) )。 选选中中中中层对层对象，在象，在象，在象，在对应对应的浮的浮的浮的浮动动面板中，面板中，面板中，面板中，设设置置置置层层的的的的显显示示示示项为项为Hidden

24、Hidden，即，即，即，即层对层对象初始的可象初始的可象初始的可象初始的可见见性性性性为隐为隐藏藏藏藏 7. 7.为层为层添加添加添加添加动动作作作作 选选中中中中amuseamuse层对层对象，然后在行象，然后在行象，然后在行象，然后在行为为面板中，面板中，面板中，面板中，为这为这个个个个层对层对象添象添象添象添加两个加两个加两个加两个显显示示示示- -隐隐藏藏藏藏层动层动作。第一个作。第一个作。第一个作。第一个动动作是使作是使作是使作是使amuseamuse可可可可见见，触触触触发发事件是事件是事件是事件是onMouseOveronMouseOver。然后再添加一个使。然后再添加一个使。

25、然后再添加一个使。然后再添加一个使amuseamuse层隐层隐藏的藏的藏的藏的显显示示示示- -隐隐藏藏藏藏层动层动作，触作，触作，触作，触发发事件事件事件事件设为设为onMouseOutonMouseOut。9. 9.添加其它站点列表添加其它站点列表添加其它站点列表添加其它站点列表10.10.保存文件，浏览显示最终效果。保存文件，浏览显示最终效果。保存文件，浏览显示最终效果。保存文件，浏览显示最终效果。四、检查表单四、检查表单四、检查表单四、检查表单 DreamweaverMXDreamweaverMX的内置行的内置行的内置行的内置行为为中提供了一个中提供了一个中提供了一个中提供了一个“ “

26、检查检查表表表表单单” ”的行的行的行的行为为，目的是在用，目的是在用，目的是在用，目的是在用户户提交数据前提交数据前提交数据前提交数据前检查检查数据的合法性。数据的合法性。数据的合法性。数据的合法性。 实例实例实例实例 66你填对了吗？你填对了吗？你填对了吗？你填对了吗？ 第一部分：第一部分：第一部分：第一部分：我的注册表我的注册表我的注册表我的注册表-基本表单制作基本表单制作基本表单制作基本表单制作 第二部分：第二部分：第二部分：第二部分： 创创建建建建“ “检查检查表表表表单单” ”行行行行为对为对表表表表单单数据数据数据数据进进行合法性行合法性行合法性行合法性检查检查1. 1.添加添加

27、添加添加动动作作作作 选选中网中网中网中网页页中的提交按中的提交按中的提交按中的提交按钮钮，添加一个，添加一个，添加一个，添加一个检查检查表表表表单动单动作作作作 2. 2.设置设置设置设置usernameusername域检查域检查域检查域检查3. 3.设置设置设置设置truenametruename域检查域检查域检查域检查4. 4.设置设置设置设置yearyear域检查域检查域检查域检查5. 5.设置设置设置设置monthmonth域检查域检查域检查域检查6. 6.设置设置设置设置dayday域检查域检查域检查域检查7. 7.设置设置设置设置introintro域检查域检查域检查域检查8.

28、 8.设置设置设置设置passwordpassword域检查域检查域检查域检查9. 9. 存盘预览存盘预览存盘预览存盘预览 当直接单击提交按钮时：当直接单击提交按钮时：当直接单击提交按钮时：当直接单击提交按钮时： 当故意将出生年月填错：当故意将出生年月填错：当故意将出生年月填错：当故意将出生年月填错：33时间轴动画设计时间轴动画设计时间轴动画设计时间轴动画设计一、一、一、一、时间轴时间轴面板面板面板面板 在在在在DreamweaverMXDreamweaverMX中提供了中提供了中提供了中提供了图图形化操作来定形化操作来定形化操作来定形化操作来定义动义动画，画，画，画，这这种操作是在种操作是在

29、种操作是在种操作是在时间轴时间轴面板中定面板中定面板中定面板中定义时间轴义时间轴。使用。使用。使用。使用动态动态HTMLHTML来来来来改改改改变层变层的属性，或者随的属性，或者随的属性，或者随的属性，或者随时间时间来改来改来改来改变变关关关关键帧键帧中中中中图图象的属性。象的属性。象的属性。象的属性。 时间轴时间轴下拉列表框：下拉列表框：下拉列表框：下拉列表框：时间轴时间轴下拉列表框指定当前在下拉列表框指定当前在下拉列表框指定当前在下拉列表框指定当前在时间轴时间轴面板中面板中面板中面板中显显示文档的哪个示文档的哪个示文档的哪个示文档的哪个时间轴时间轴。在当前文档中定。在当前文档中定。在当前文

30、档中定。在当前文档中定义义的所有的所有的所有的所有时间轴时间轴都会在都会在都会在都会在这这个个个个下拉列表中列出。下拉列表中列出。下拉列表中列出。下拉列表中列出。行行行行为为通道：通道：通道：通道：应该应该在在在在时间轴时间轴中特定中特定中特定中特定帧处执帧处执行的行行的行行的行行的行为为通道。通道。通道。通道。播放播放播放播放栏栏：显显示当前在文档窗口中示当前在文档窗口中示当前在文档窗口中示当前在文档窗口中显显示示示示时间轴时间轴的哪一的哪一的哪一的哪一帧帧。动动画条：画条：画条：画条：显显示每个示每个示每个示每个对对象的象的象的象的动动画的持画的持画的持画的持续时间续时间。倒倒倒倒带带：将

31、播放：将播放：将播放：将播放栏栏移至移至移至移至时间轴时间轴中的第一中的第一中的第一中的第一帧帧。后退：将播放后退：将播放后退：将播放后退：将播放栏栏向左移向左移向左移向左移动动一一一一帧帧。当前当前当前当前帧帧：指明当前播放的：指明当前播放的：指明当前播放的：指明当前播放的帧帧数。数。数。数。播放：将播放播放：将播放播放：将播放播放：将播放栏栏向右移向右移向右移向右移动动一一一一帧帧。单击单击“ “播放播放播放播放” ”并按住鼠并按住鼠并按住鼠并按住鼠标标可向前播可向前播可向前播可向前播放放放放时间轴时间轴。动动画通道：画通道：画通道：画通道：显显示用于制作示用于制作示用于制作示用于制作层层

32、和和和和图图象象象象动动画的画的画的画的动动画条。画条。画条。画条。每秒每秒每秒每秒帧帧数（数（数（数（fpsfps）指示每秒）指示每秒）指示每秒）指示每秒钟动钟动画播放的画播放的画播放的画播放的帧帧数。数。数。数。 自自自自动动播放：播放：播放：播放：选选中此中此中此中此项项，当前，当前，当前，当前页页在在在在载载入入入入浏览浏览器器器器时时即自即自即自即自动动播放播放播放播放时间轴时间轴。 关关关关键帧键帧：动动画条中已画条中已画条中已画条中已经为对经为对象指定属性（如位置）的象指定属性（如位置）的象指定属性（如位置）的象指定属性（如位置）的帧帧。DreamweaverMXDreamwea

33、verMX会会会会计计算关算关算关算关键帧键帧的中的中的中的中间值间值。小。小。小。小圆标记圆标记表示关表示关表示关表示关键帧键帧。 循循循循环环：选选中此中此中此中此项项，当前，当前，当前，当前页页在在在在载载入入入入浏览浏览器器器器时时可以自可以自可以自可以自动动循循循循环环播放播放播放播放时间轴时间轴。二、创建层动画二、创建层动画二、创建层动画二、创建层动画 时间轴时间轴主要用于主要用于主要用于主要用于创创建和定建和定建和定建和定义义以以以以层对层对象象象象为为基基基基础础的网的网的网的网页动页动画，其的画，其的画，其的画，其的作用和作用和作用和作用和功能特色功能特色功能特色功能特色为为

34、： 它突破了它突破了它突破了它突破了GIFGIF、FlashFlash动动画等网画等网画等网画等网页动页动画等网画等网画等网画等网页动页动画只能在画只能在画只能在画只能在对对象内部展象内部展象内部展象内部展现现动动画内容的局限，使得画内容的局限，使得画内容的局限，使得画内容的局限，使得设计设计者可以在者可以在者可以在者可以在整个网整个网整个网整个网页页范范范范围围内来建立内来建立内来建立内来建立动动画效果。画效果。画效果。画效果。 通通通通过时间轴过时间轴工具和行工具和行工具和行工具和行为为工具的工具的工具的工具的结结合使用，可以在网合使用，可以在网合使用，可以在网合使用，可以在网页页中中中中

35、建立建立建立建立带带有交互有交互有交互有交互能力的能力的能力的能力的动动画画画画对对象象象象。 DreamweaverMXDreamweaverMX中通中通中通中通过时间轴过时间轴工具生成的工具生成的工具生成的工具生成的动动画是由画是由画是由画是由JavaScriptJavaScript语语句句句句来建。来建。来建。来建。DreamweaverMXDreamweaverMX将自将自将自将自动动生成生成生成生成动动画的源代画的源代画的源代画的源代码码，而不需要网，而不需要网，而不需要网，而不需要网页编页编辑辑人人人人员员手手手手动编辑动编辑，使得网，使得网，使得网，使得网页编辑页编辑工作大大工作

36、大大工作大大工作大大简简化。化。化。化。实例实例实例实例77动画文字动画文字动画文字动画文字1. 1.新建网页文件新建网页文件新建网页文件新建网页文件2. 2.插入层对象插入层对象插入层对象插入层对象3. 3.插入文本内容插入文本内容插入文本内容插入文本内容4. 4.打开时间轴浮动面板打开时间轴浮动面板打开时间轴浮动面板打开时间轴浮动面板5. 5.添加添加添加添加动动画画画画对对象象象象方法一：方法一：方法一：方法一：用鼠用鼠用鼠用鼠标标拖拽拖拽拖拽拖拽层对层对象，将其拖拽到象，将其拖拽到象，将其拖拽到象，将其拖拽到时间轴时间轴浮浮浮浮动动面面面面板中；板中；板中；板中；方法二：方法二：方法二

37、：方法二：选选中中中中层对层对象，用鼠象，用鼠象，用鼠象，用鼠标标右右右右键单击层对键单击层对象，在象，在象，在象，在弹弹出出出出菜菜菜菜单单中中中中选择选择“ “添加添加添加添加对对象象象象” ”；方法三：方法三：方法三：方法三：选选中中中中层对层对象，在象，在象，在象，在时间轴时间轴浮浮浮浮动动面板的第一面板的第一面板的第一面板的第一帧帧的位的位的位的位置置置置单击单击鼠鼠鼠鼠标标右右右右键键，在，在，在，在弹弹出菜出菜出菜出菜单单中中中中选择选择“ “添加添加添加添加对对象象象象” ”。6. 6.调整动画长度调整动画长度调整动画长度调整动画长度7. 7.设置动画起点设置动画起点设置动画起

38、点设置动画起点8. 8.添加关键帧、设置关键帧位置添加关键帧、设置关键帧位置添加关键帧、设置关键帧位置添加关键帧、设置关键帧位置9. 9.设置播放方式设置播放方式设置播放方式设置播放方式10.10.预览动画效果预览动画效果预览动画效果预览动画效果11.11.添加第二个添加第二个添加第二个添加第二个动动画画画画 对层对对层对象添加第二个象添加第二个象添加第二个象添加第二个动动画，在原来的画，在原来的画，在原来的画，在原来的时间轴动时间轴动画后面添画后面添画后面添画后面添加一个默加一个默加一个默加一个默认长认长度度度度为为1515帧帧的的的的动动画画画画对对象。象。象。象。12.12.设设置置置置

39、层对层对象属性象属性象属性象属性 将当前将当前将当前将当前帧设为帧设为4646帧帧（即（即（即（即刚刚才添加的才添加的才添加的才添加的动动画的第一画的第一画的第一画的第一帧帧），在），在），在），在浮浮浮浮动动面板中，将面板中，将面板中，将面板中，将层对层对象的象的象的象的显显示示示示设设置置置置为为Visible(Visible(可可可可见见) )。 在在在在5353帧处添加一个关键帧，并且在属性浮动面板中设置网页中的层帧处添加一个关键帧，并且在属性浮动面板中设置网页中的层帧处添加一个关键帧，并且在属性浮动面板中设置网页中的层帧处添加一个关键帧，并且在属性浮动面板中设置网页中的层对象在此关键

40、帧处的可见性（显示）为对象在此关键帧处的可见性（显示）为对象在此关键帧处的可见性（显示）为对象在此关键帧处的可见性（显示）为HiddenHidden（隐藏）。（隐藏）。（隐藏）。（隐藏）。13.13.添加添加添加添加动动作作作作 用鼠用鼠用鼠用鼠标标点中点中点中点中时间轴时间轴浮浮浮浮动动面板上面板上面板上面板上标记为标记为B B栏处栏处的第的第的第的第6060帧帧的的的的位置。然后在行位置。然后在行位置。然后在行位置。然后在行为为浮浮浮浮动动面板上添加一个面板上添加一个面板上添加一个面板上添加一个让时间轴转让时间轴转到某到某到某到某一一一一帧帧的的的的动动作。作。作。作。14.14.预览预览

41、修改修改修改修改 文件存文件存文件存文件存盘盘，预栏动预栏动画效果。画效果。画效果。画效果。1. 1.打开网页文件：打开实例打开网页文件：打开实例打开网页文件：打开实例打开网页文件：打开实例7 7动画文字网页文件动画文字网页文件动画文字网页文件动画文字网页文件2. 2. 添加时间轴添加时间轴添加时间轴添加时间轴 在时间轴浮动面板上单击鼠标右键，在弹出的快捷菜单中，选择在时间轴浮动面板上单击鼠标右键，在弹出的快捷菜单中，选择在时间轴浮动面板上单击鼠标右键，在弹出的快捷菜单中，选择在时间轴浮动面板上单击鼠标右键，在弹出的快捷菜单中，选择“ “添加时间轴添加时间轴添加时间轴添加时间轴” ”，向网页添

42、加一个新时间轴对象。，向网页添加一个新时间轴对象。，向网页添加一个新时间轴对象。，向网页添加一个新时间轴对象。3. 3.添加层对象添加层对象添加层对象添加层对象4. 4.添加图片添加图片添加图片添加图片5. 5.创建时间轴动画创建时间轴动画创建时间轴动画创建时间轴动画6. 6.预览动画效果预览动画效果预览动画效果预览动画效果7. 7.调整动画调整动画调整动画调整动画8. 8.录录制制制制动动画路径画路径画路径画路径 删删除建立好的小天使的除建立好的小天使的除建立好的小天使的除建立好的小天使的时间轴动时间轴动画。在画。在画。在画。在时间轴时间轴浮浮浮浮动动面板面板面板面板中中中中选选中中中中Ti

43、meline2Timeline2中小天使的整个中小天使的整个中小天使的整个中小天使的整个时间线动时间线动画画画画对对象，然后象，然后象，然后象，然后单击单击鼠鼠鼠鼠标标右右右右键键，在，在，在，在弹弹出的快捷菜出的快捷菜出的快捷菜出的快捷菜单单中，中，中，中，选择删选择删除，除，除，除，删删除除除除该动该动画画画画对对象。象。象。象。 让让小天使从网小天使从网小天使从网小天使从网页页的右的右的右的右边边出来，将小天使的出来，将小天使的出来，将小天使的出来，将小天使的层对层对象，拖象，拖象，拖象，拖动动到网到网到网到网页页的右的右的右的右边隐边隐藏起来。然后，在藏起来。然后，在藏起来。然后，在藏

44、起来。然后，在时间线时间线浮浮浮浮动动面板上，面板上，面板上，面板上，将当前将当前将当前将当前帧设帧设置置置置为为4646帧帧，然后，然后，然后，然后单击单击鼠鼠鼠鼠标标右右右右键键，在，在，在，在弹弹出的快出的快出的快出的快捷菜捷菜捷菜捷菜单单中，中，中，中，选择选择“ “录录制制制制层层路径路径路径路径” ”。 用鼠标拖拽小天使所在的层对象在网页上移动，用鼠标拖拽小天使所在的层对象在网页上移动，用鼠标拖拽小天使所在的层对象在网页上移动，用鼠标拖拽小天使所在的层对象在网页上移动，DreamweaverDreamweaverMXMX会自动记录下层对象运动的轨迹，作为动画的路径。会自动记录下层对

45、象运动的轨迹，作为动画的路径。会自动记录下层对象运动的轨迹，作为动画的路径。会自动记录下层对象运动的轨迹，作为动画的路径。9. 9.最终效果最终效果最终效果最终效果实例实例实例实例99图象动画图象动画图象动画图象动画 图图象象象象动动画是指可以切画是指可以切画是指可以切画是指可以切换显换显示不同的示不同的示不同的示不同的动动画效果。制作画效果。制作画效果。制作画效果。制作这这种种种种效果，一般先在效果，一般先在效果，一般先在效果，一般先在页页面内插入一个面内插入一个面内插入一个面内插入一个图图象，然后象，然后象，然后象，然后为时间轴为时间轴添添添添加一个加一个加一个加一个对对象；在象；在象；在

46、象；在动动画条中添加关画条中添加关画条中添加关画条中添加关键帧键帧，在关，在关，在关，在关键帧处键帧处改改改改变变图图象的源，即可象的源，即可象的源，即可象的源，即可实现图实现图像的像的像的像的动动画。画。画。画。1. 1.新建文件新建文件新建文件新建文件2. 2.向向向向页页面中插入一副面中插入一副面中插入一副面中插入一副图图像像像像3. 3.用鼠用鼠用鼠用鼠标标拖拖拖拖动页动页面上的面上的面上的面上的图图像，将其放到像，将其放到像，将其放到像，将其放到时间轴时间轴面板中的第面板中的第面板中的第面板中的第帧帧上。上。上。上。4. 4.将将将将1515帧拉到帧拉到帧拉到帧拉到6060帧处，并在

47、每帧处，并在每帧处，并在每帧处，并在每1010帧增加一个关键帧，并在每个关键帧增加一个关键帧，并在每个关键帧增加一个关键帧，并在每个关键帧增加一个关键帧，并在每个关键帧处重新在属性面板源文件栏处选择新图片文件。帧处重新在属性面板源文件栏处选择新图片文件。帧处重新在属性面板源文件栏处选择新图片文件。帧处重新在属性面板源文件栏处选择新图片文件。5. 5.选择选择“ “自自自自动动播放播放播放播放” ”和和和和“ “循循循循环环” ”选项选项，浏览浏览效果。效果。效果。效果。实实实实1010滚动动画滚动动画滚动动画滚动动画1. 1.新建文件新建文件新建文件新建文件2. 2.插入插入插入插入层层 层层

48、Layer1Layer1宽宽600px600px，高，高，高，高45px45px，在属性面板上，将其属性，在属性面板上，将其属性，在属性面板上，将其属性，在属性面板上，将其属性“ “溢出溢出溢出溢出” ”的的的的值设为值设为“ “Hidden”Hidden”，即当，即当，即当，即当层层中的内容超中的内容超中的内容超中的内容超过边过边界界界界时时就就就就隐隐藏。并藏。并藏。并藏。并设层设层背景背景背景背景为为粉色。粉色。粉色。粉色。3. 3.插入子插入子插入子插入子层层 在在在在Layer1Layer1中插入一子中插入一子中插入一子中插入一子层层Layer2Layer2，高度与，高度与，高度与，

49、高度与Layer1Layer1同，同，同，同，“ “溢溢溢溢出出出出” ”栏选择栏选择“ “visible”visible”，然后将光，然后将光，然后将光，然后将光标标放入到放入到放入到放入到层层Layer2Layer2中，中，中，中，录录入文本入文本入文本入文本“ “北京北京北京北京电电大大大大” ”，设设置文字置文字置文字置文字样样式。式。式。式。4. 4.调整位置调整位置调整位置调整位置 将层将层将层将层Layer2Layer2放到层外（被隐藏）。若放到层外（被隐藏）。若放到层外（被隐藏）。若放到层外（被隐藏）。若Layer2Layer2宽度为宽度为宽度为宽度为140px140px，则其

50、左，则其左，则其左，则其左边距设置为边距设置为边距设置为边距设置为-140px-140px。5. 5.添加动画对象添加动画对象添加动画对象添加动画对象 用鼠标拖拽层用鼠标拖拽层用鼠标拖拽层用鼠标拖拽层Layer2Layer2对象，将其拖拽到时间轴浮动面板中。在结束对象，将其拖拽到时间轴浮动面板中。在结束对象，将其拖拽到时间轴浮动面板中。在结束对象，将其拖拽到时间轴浮动面板中。在结束关键帧上，将层关键帧上，将层关键帧上，将层关键帧上，将层Layer2Layer2对象拖拽到层对象拖拽到层对象拖拽到层对象拖拽到层Layer1Layer1右面，即设置层右面，即设置层右面，即设置层右面，即设置层Laye

51、r2“Layer2“左左左左” ”边位置为边位置为边位置为边位置为600px600px。并选定。并选定。并选定。并选定“ “自动播放自动播放自动播放自动播放” ”和和和和“ “循环循环循环循环” ”选项。选项。选项。选项。6. 6.设定暂停播放设定暂停播放设定暂停播放设定暂停播放 选中层选中层选中层选中层Layer2Layer2，展开行为面板并打开面板菜单，选中命令，展开行为面板并打开面板菜单，选中命令，展开行为面板并打开面板菜单，选中命令，展开行为面板并打开面板菜单，选中命令“ “时间时间时间时间轴轴轴轴停止时间轴停止时间轴停止时间轴停止时间轴” ”，打开对话框，选择，打开对话框，选择，打开

52、对话框，选择，打开对话框，选择“ “TimeLine1”TimeLine1”。触发事。触发事。触发事。触发事件更改为件更改为件更改为件更改为“ “onMouseOver”onMouseOver”，即当鼠标指针移动到层上时就停止，即当鼠标指针移动到层上时就停止，即当鼠标指针移动到层上时就停止，即当鼠标指针移动到层上时就停止播放。播放。播放。播放。7. 7.设设定恢复播放定恢复播放定恢复播放定恢复播放 选选中中中中层层Layer2Layer2，展开行，展开行，展开行，展开行为为面板并打开面板菜面板并打开面板菜面板并打开面板菜面板并打开面板菜单单，选选中命中命中命中命令令令令“ “时间轴时间轴播放播放播放播放时间轴时间轴” ”，打开，打开，打开，打开对话对话框，框，框，框，选择选择“ “TimeLine1”TimeLine1”。触。触。触。触发发事件更改事件更改事件更改事件更改为为“ “onMouseOut”onMouseOut”，即，即，即，即当鼠当鼠当鼠当鼠标标指指指指针针移出移出移出移出层时层时就就就就继续继续播放播放播放播放时间轴时间轴。8. 8.保存保存保存保存页页面，面，面，面，浏览浏览效果效果效果效果