行为与时间轴动画设计课件

第七章行为和时间轴

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

内容简介：行为和时间轴是DreamweaverMX为增强2学习目标：熟练掌握创建行为和时间轴的基本方法；

掌握常用行为和事件的应用，以及常用时间轴动画的设计；了解利用行为和时间轴定义所对应的JavaScript函数及其调用。学习目标：3JavaScript脚本的应用改善了网页的交互性能和显示效果，但是程序代码的编写和调式限制了它的广泛应用。为了简化页面上JavaScript脚本的开发过程并提高工作效率，DreamweaverMX提供了行为功能。行为是DreamweaverMX预置的JavaScript程序库。使用行为，使得网页制作人员不用编程就能够实现一些程序动作。

JavaScript脚本的应用改善了网页的交互性能和显示效果47．1行为的事件和动作在DreamweaverMX中设计行为是通过行为面板来实现的.打开行为面板，在行为面板中按下“增加行为”按钮，就展开行为面板菜单

7．1行为的事件和动作在DreamweaverMX5经常用到的几个动作主要是：播放声音、弹出信息、交换图象、打开浏览器窗口、显示一隐藏层等。常用的事件主要有以下几种：onLoad：当页面图片被载入后，onLoad事件被触发；onClick：当在页面上单击鼠标时，onClick事件被触发；onMouseOver：当鼠标被移入页面元素的上，onMouseOver事件被触发；onMouseOut：当鼠标移出页面元素时，onMouseOut事件被触发。

经常用到的几个动作主要是：播放声音、弹出信息、交换图象、打开6实例1弹出信息

新建网页窗口

添加弹出信息动作实例1弹出信息新建网页窗口

7添加第二个弹出信息动作添加第二个弹出信息动作8输入文本信息输入文本信息97．2行为应用实例

一、

设置状态栏文字

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

7．2行为应用实例一、设置状态栏文字10行为与时间轴动画设计11在消息栏中输入文本

在消息栏中输入文本12事件列选择OnLoad，动作列显示的是“显示状态条文本”，表示当文挡载入时浏览器状态栏中显示定义的文本

按F12键在浏览器中浏览效果事件列选择OnLoad，动作列显示的是“显示状态条文本”，表13行为与时间轴动画设计14实例3打开新浏览器窗口新建一个网页实例3打开新浏览器窗口新建一个网页15打开上个实例的网页打开上个实例的网页16添加打开浏览器窗口设置DoublclickMe!!!文字颜色为绿色、加下划线、设置连接“#”在行为面板添加“打开浏览器窗口”行为动作，打开对话框：添加打开浏览器窗口17触发事件设置为onDblClick，即当鼠标双击文本的时候，弹出新的浏览器窗口。触发事件设置为onDblClick，即当鼠标双击文本的时候，18行为与时间轴动画设计19三、制作弹出式菜单菜单的好处在于可以把很多暂时不需要的命令隐藏起来，只有当鼠标点击菜单条时，才能以下拉菜单的形式显示这些隐藏的命令。DreamweaverMX中提供的“显示弹出菜单”和“隐藏弹出菜单”就能够设计这样的菜单效果。三、制作弹出式菜单菜单的好处在于可以把很多暂时不需要的命令隐20实例4弹出式菜单(一)新建一个网页在页面上输入网页标题文字和说明文字，并插入一个1×4的表格，表格中输入站点类别信息：实例4弹出式菜单(一)新建一个网页21行为与时间轴动画设计22选中单元格中文本“音乐和娱乐”，在属性检查器中将连接地址设定为“#”，并选中该文字链接；在行为面板中，打开“显示弹出式菜单”对话框；选中单元格中文本“音乐和娱乐”，在属性检查器中将连接地址设定23设定菜单项目设定菜单项目24外观选项卡设置如下：外观选项卡设置如下：25切换到“高级”页，设定弹出式菜单无边框，其他项目为默认值。无边框切换到“高级”页，设定弹出式菜单无边框，其他项目为默认值。无26切换到位置页，设定“菜单位置”为第二项，即“低于且位于触发器的左边缘”；下面的“X”、“Y”栏用于指定菜单相对于文字链接左上角的位置，这里设置如图；然后选中“在发生onMouseOut事件时隐藏菜单”选项切换到位置页，设定“菜单位置”为第二项，即“低于且位于触发器27此时控制面板窗口同时增加了两项行为：按同样步骤分别为文字“网络媒体”、“学校资源”和“软件资源”创建出弹出菜单。此时控制面板窗口同时增加了两项行为：28保存文件，在浏览器中浏览弹出菜单的效果。保存文件，在浏览器中浏览弹出菜单的效果。29实例5弹出式菜单（二）新建网页文件在页面上输入网页标题文字和说明文字，并插入一个1×4的表格，表格中输入站点类别信息：实例5弹出式菜单（二）新建网页文件30行为与时间轴动画设计31添加层对象：先在网页中添加一个层对象要为网络导航的每个类别加上相应的站点列表，为了实现想要得到的弹出菜单的效果，我们采用层对象来排布网站列表。添加表格为了整齐地排列站点列表，在层中插入一个5×1的表格。添加层对象：先在网页中添加一个层对象32行为与时间轴动画设计33编辑站点列表和表格属性编辑站点列表和表格属性34编辑层对象把层对象移动到站点类别的表格中对应的单元格的下方，保持层对象和上面的表格有一定的重叠部分。为层取名为“amuse”。添加动作首先选中“音乐和娱乐”所在单元格，在行为浮动面板上，单击添加按钮，选择“显示-隐藏层”动作，打开显示-隐藏层对话框。选中层amuse，单击显示按钮，设置该层可见。浮动面板上出现了第一个动作，该动作触发事件是onMouseOver(鼠标移上)。还是选中“音乐和娱乐”所在单元格，同样打开显示-隐藏层对话框。选中层amuse，单击隐藏按钮，设置本动作的功能是隐藏该层对象。浮动面板上出现了第二个动作，修改该动作触发事件为onMouseout(鼠标移出)。编辑层对象35行为与时间轴动画设计36选中层对象，在对应的浮动面板中，设置层的显示项为Hidden，即层对象初始的可见性为隐藏为层添加动作选中amuse层对象，然后在行为面板中，为这个层对象添加两个显示-隐藏层动作。第一个动作是使amuse可见，触发事件是onMouseOver。然后再添加一个使amuse层隐藏的显示-隐藏层动作，触发事件设为onMouseOut。选中层对象，在对应的浮动面板中，设置层的显示项为Hidden37添加其它站点列表添加其它站点列表38保存文件，浏览显示最终效果。保存文件，浏览显示最终效果。39四、检查表单DreamweaverMX的内置行为中提供了一个“检查表单”的行为，目的是在用户提交数据前检查数据的合法性。四、检查表单DreamweaverMX的内置行为中提供了一40实例6你填对了吗？第一部分：我的注册表-----基本表单制作实例6你填对了吗？第一部分：我的注册表-----基本表41第二部分：创建“检查表单”行为对表单数据进行合法性检查添加动作选中网页中的提交按钮，添加一个检查表单动作第二部分：42行为与时间轴动画设计43行为与时间轴动画设计44设置username域检查设置username域检查45设置truename域检查设置truename域检查46设置year域检查设置year域检查47设置month域检查设置month域检查48设置day域检查设置day域检查49设置intro域检查设置intro域检查50设置password域检查设置password域检查51存盘预览当直接单击提交按钮时：存盘预览52当故意将出生年月填错：当故意将出生年月填错：537．3时间轴动画设计一、时间轴面板在DreamweaverMX中提供了图形化操作来定义动画，这种操作是在时间轴面板中定义时间轴。使用动态HTML来改变层的属性，或者随时间来改变关键帧中图象的属性。7．3时间轴动画设计一、时间轴面板54①②③④⑤⑥⑧⑦⑨⑩⑾⒀⑿①②③④⑤⑥⑧⑦⑨⑩⑾⒀⑿55时间轴下拉列表框：时间轴下拉列表框指定当前在时间轴面板中显示文档的哪个时间轴。在当前文档中定义的所有时间轴都会在这个下拉列表中列出。行为通道：应该在时间轴中特定帧处执行的行为通道。播放栏：显示当前在文档窗口中显示时间轴的哪一帧。动画条：显示每个对象的动画的持续时间。倒带：将播放栏移至时间轴中的第一帧。后退：将播放栏向左移动一帧。当前帧：指明当前播放的帧数。时间轴下拉列表框：时间轴下拉列表框指定当前在时间轴面板中显示56播放：将播放栏向右移动一帧。单击“播放”并按住鼠标可向前播放时间轴。动画通道：显示用于制作层和图象动画的动画条。每秒帧数（fps）指示每秒钟动画播放的帧数。⑾自动播放：选中此项，当前页在载入浏览器时即自动播放时间轴。⑿关键帧：动画条中已经为对象指定属性（如位置）的帧。DreamweaverMX会计算关键帧的中间值。小圆标记表示关键帧。⒀循环：选中此项，当前页在载入浏览器时可以自动循环播放时间轴。播放：将播放栏向右移动一帧。单击“播放”并按住鼠标可向前播放57二、创建层动画时间轴主要用于创建和定义以层对象为基础的网页动画，其的作用和功能特色为：它突破了GIF、Flash动画等网页动画等网页动画只能在对象内部展现动画内容的局限，使得设计者可以在整个网页范围内来建立动画效果。通过时间轴工具和行为工具的结合使用，可以在网页中建立带有交互能力的动画对象。DreamweaverMX中通过时间轴工具生成的动画是由JavaScript语句来建。DreamweaverMX将自动生成动画的源代码，而不需要网页编辑人员手动编辑，使得网页编辑工作大大简化。二、创建层动画时间轴主要用于创建和定义以层对象为基础的网页58实例7动画文字新建网页文件实例7动画文字新建网页文件59插入层对象插入层对象60插入文本内容插入文本内容61打开时间轴浮动面板打开时间轴浮动面板62添加动画对象方法一：用鼠标拖拽层对象，将其拖拽到时间轴浮动面板中；方法二：选中层对象，用鼠标右键单击层对象，在弹出菜单中选择“添加对象”；方法三：选中层对象，在时间轴浮动面板的第一帧的位置单击鼠标右键，在弹出菜单中选择“添加对象”。添加动画对象63行为与时间轴动画设计64调整动画长度调整动画长度65设置动画起点设置动画起点66添加关键帧、设置关键帧位置添加关键帧、设置关键帧位置67行为与时间轴动画设计68设置播放方式设置播放方式69预览动画效果预览动画效果70添加第二个动画对层对象添加第二个动画，在原来的时间轴动画后面添加一个默认长度为15帧的动画对象。设置层对象属性将当前帧设为46帧（即刚才添加的动画的第一帧），在浮动面板中，将层对象的显示设置为Visible(可见)。添加第二个动画71行为与时间轴动画设计72在53帧处添加一个关键帧，并且在属性浮动面板中设置网页中的层对象在此关键帧处的可见性（显示）为Hidden（隐藏）。在53帧处添加一个关键帧，并且在属性浮动面板中设置网页中的层73添加动作用鼠标点中时间轴浮动面板上标记为B栏处的第60帧的位置。然后在行为浮动面板上添加一个让时间轴转到某一帧的动作。添加动作74行为与时间轴动画设计75行为与时间轴动画设计76预览修改文件存盘，预栏动画效果。预览修改77实例8网页小天使打开网页文件：打开实例7动画文字网页文件实例8网页小天使打开网页文件：打开实例7动画文字网页文78添加时间轴在时间轴浮动面板上单击鼠标右键，在弹出的快捷菜单中，选择“添加时间轴”，向网页添加一个新时间轴对象。添加时间轴79添加层对象添加层对象80添加图片添加图片81创建时间轴动画创建时间轴动画82预览动画效果预览动画效果83调整动画调整动画84录制动画路径删除建立好的小天使的时间轴动画。在时间轴浮动面板中选中Timeline2中小天使的整个时间线动画对象，然后单击鼠标右键，在弹出的快捷菜单中，选择删除，删除该动画对象。让小天使从网页的右边出来，将小天使的层对象，拖动到网页的右边隐藏起来。然后，在时间线浮动面板上，将当前帧设置为46帧，然后单击鼠标右键，在弹出的快捷菜单中，选择“录制层路径”。录制动画路径85行为与时间轴动画设计86用鼠标拖拽小天使所在的层对象在网页上移动，DreamweaverMX会自动记录下层对象运动的轨迹，作为动画的路径。用鼠标拖拽小天使所在的层对象在网页上移动，Dreamweav87最终效果最终效果88实例9图象动画图象动画是指可以切换显示不同的动画效果。制作这种效果，一般先在页面内插入一个图象，然后为时间轴添加一个对象；在动画条中添加关键帧，在关键帧处改变图象的源，即可实现图像的动画。新建文件向页面中插入一副图像用鼠标拖动页面上的图像，将其放到时间轴面板中的第帧上。实例9图象动画图象动画是指可以切换显示不同的动画效果89行为与时间轴动画设计90将15帧拉到60帧处，并在每10帧增加一个关键帧，并在每个关键帧处重新在属性面板源文件栏处选择新图片文件。将15帧拉到60帧处，并在每10帧增加一个关键帧，并在每个关91选择“自动播放”和“循环”选项，浏览效果。选择“自动播放”和“循环”选项，浏览效果。92实10滚动动画实10滚动动画93新建文件插入层层Layer1宽600px，高45px，在属性面板上，将其属性“溢出”的值设为“Hidden”，即当层中的内容超过边界时就隐藏。并设层背景为粉色。插入子层在Layer1中插入一子层Layer2，高度与Layer1同，“溢出”栏选择“visible”，然后将光标放入到层Layer2中，录入文本“北京电大”，设置文字样式。新建文件94行为与时间轴动画设计95调整位置将层Layer2放到层外（被隐藏）。若Layer2宽度为140px，则其左边距设置为-140px。调整位置96添加动画对象用鼠标拖拽层Layer2对象，将其拖拽到时间轴浮动面板中。在结束关键帧上，将层Layer2对象拖拽到层Layer1右面，即设置层Layer2“左”边位置为600px。并选定“自动播放”和“循环”选项。添加动画对象97设定暂停播放选中层Layer2，展开行为面板并打开面板菜单，选中命令“时间轴→停止时间轴”，打开对话框，选择“TimeLine1”。触发事件更改为“onMouseOver”，即当鼠标指针移动到层上时就停止播放。设定暂停播放98设定恢复播放选中层Layer2，展开行为面板并打开面板菜单，选中命令“时间轴→播放时间轴”，打开对话框，选择“TimeLine1”。触发事件更改为“onMouseOut”，即当鼠标指针移出层时就继续播放时间轴。保存页面，浏览效果设定恢复播放99第七章行为和时间轴

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

内容简介：行为和时间轴是DreamweaverMX为增强101学习目标：熟练掌握创建行为和时间轴的基本方法；

掌握常用行为和事件的应用，以及常用时间轴动画的设计；了解利用行为和时间轴定义所对应的JavaScript函数及其调用。学习目标：102JavaScript脚本的应用改善了网页的交互性能和显示效果，但是程序代码的编写和调式限制了它的广泛应用。为了简化页面上JavaScript脚本的开发过程并提高工作效率，DreamweaverMX提供了行为功能。行为是DreamweaverMX预置的JavaScript程序库。使用行为，使得网页制作人员不用编程就能够实现一些程序动作。

JavaScript脚本的应用改善了网页的交互性能和显示效果1037．1行为的事件和动作在DreamweaverMX中设计行为是通过行为面板来实现的.打开行为面板，在行为面板中按下“增加行为”按钮，就展开行为面板菜单

7．1行为的事件和动作在DreamweaverMX104经常用到的几个动作主要是：播放声音、弹出信息、交换图象、打开浏览器窗口、显示一隐藏层等。常用的事件主要有以下几种：onLoad：当页面图片被载入后，onLoad事件被触发；onClick：当在页面上单击鼠标时，onClick事件被触发；onMouseOver：当鼠标被移入页面元素的上，onMouseOver事件被触发；onMouseOut：当鼠标移出页面元素时，onMouseOut事件被触发。

经常用到的几个动作主要是：播放声音、弹出信息、交换图象、打开105实例1弹出信息

新建网页窗口

添加弹出信息动作实例1弹出信息新建网页窗口

106添加第二个弹出信息动作添加第二个弹出信息动作107输入文本信息输入文本信息1087．2行为应用实例

一、

设置状态栏文字

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

7．2行为应用实例一、设置状态栏文字109行为与时间轴动画设计110在消息栏中输入文本

在消息栏中输入文本111事件列选择OnLoad，动作列显示的是“显示状态条文本”，表示当文挡载入时浏览器状态栏中显示定义的文本

按F12键在浏览器中浏览效果事件列选择OnLoad，动作列显示的是“显示状态条文本”，表112行为与时间轴动画设计113实例3打开新浏览器窗口新建一个网页实例3打开新浏览器窗口新建一个网页114打开上个实例的网页打开上个实例的网页115添加打开浏览器窗口设置DoublclickMe!!!文字颜色为绿色、加下划线、设置连接“#”在行为面板添加“打开浏览器窗口”行为动作，打开对话框：添加打开浏览器窗口116触发事件设置为onDblClick，即当鼠标双击文本的时候，弹出新的浏览器窗口。触发事件设置为onDblClick，即当鼠标双击文本的时候，117行为与时间轴动画设计118三、制作弹出式菜单菜单的好处在于可以把很多暂时不需要的命令隐藏起来，只有当鼠标点击菜单条时，才能以下拉菜单的形式显示这些隐藏的命令。DreamweaverMX中提供的“显示弹出菜单”和“隐藏弹出菜单”就能够设计这样的菜单效果。三、制作弹出式菜单菜单的好处在于可以把很多暂时不需要的命令隐119实例4弹出式菜单(一)新建一个网页在页面上输入网页标题文字和说明文字，并插入一个1×4的表格，表格中输入站点类别信息：实例4弹出式菜单(一)新建一个网页120行为与时间轴动画设计121选中单元格中文本“音乐和娱乐”，在属性检查器中将连接地址设定为“#”，并选中该文字链接；在行为面板中，打开“显示弹出式菜单”对话框；选中单元格中文本“音乐和娱乐”，在属性检查器中将连接地址设定122设定菜单项目设定菜单项目123外观选项卡设置如下：外观选项卡设置如下：124切换到“高级”页，设定弹出式菜单无边框，其他项目为默认值。无边框切换到“高级”页，设定弹出式菜单无边框，其他项目为默认值。无125切换到位置页，设定“菜单位置”为第二项，即“低于且位于触发器的左边缘”；下面的“X”、“Y”栏用于指定菜单相对于文字链接左上角的位置，这里设置如图；然后选中“在发生onMouseOut事件时隐藏菜单”选项切换到位置页，设定“菜单位置”为第二项，即“低于且位于触发器126此时控制面板窗口同时增加了两项行为：按同样步骤分别为文字“网络媒体”、“学校资源”和“软件资源”创建出弹出菜单。此时控制面板窗口同时增加了两项行为：127保存文件，在浏览器中浏览弹出菜单的效果。保存文件，在浏览器中浏览弹出菜单的效果。128实例5弹出式菜单（二）新建网页文件在页面上输入网页标题文字和说明文字，并插入一个1×4的表格，表格中输入站点类别信息：实例5弹出式菜单（二）新建网页文件129行为与时间轴动画设计130添加层对象：先在网页中添加一个层对象要为网络导航的每个类别加上相应的站点列表，为了实现想要得到的弹出菜单的效果，我们采用层对象来排布网站列表。添加表格为了整齐地排列站点列表，在层中插入一个5×1的表格。添加层对象：先在网页中添加一个层对象131行为与时间轴动画设计132编辑站点列表和表格属性编辑站点列表和表格属性133编辑层对象把层对象移动到站点类别的表格中对应的单元格的下方，保持层对象和上面的表格有一定的重叠部分。为层取名为“amuse”。添加动作首先选中“音乐和娱乐”所在单元格，在行为浮动面板上，单击添加按钮，选择“显示-隐藏层”动作，打开显示-隐藏层对话框。选中层amuse，单击显示按钮，设置该层可见。浮动面板上出现了第一个动作，该动作触发事件是onMouseOver(鼠标移上)。还是选中“音乐和娱乐”所在单元格，同样打开显示-隐藏层对话框。选中层amuse，单击隐藏按钮，设置本动作的功能是隐藏该层对象。浮动面板上出现了第二个动作，修改该动作触发事件为onMouseout(鼠标移出)。编辑层对象134行为与时间轴动画设计135选中层对象，在对应的浮动面板中，设置层的显示项为Hidden，即层对象初始的可见性为隐藏为层添加动作选中amuse层对象，然后在行为面板中，为这个层对象添加两个显示-隐藏层动作。第一个动作是使amuse可见，触发事件是onMouseOver。然后再添加一个使amuse层隐藏的显示-隐藏层动作，触发事件设为onMouseOut。选中层对象，在对应的浮动面板中，设置层的显示项为Hidden136添加其它站点列表添加其它站点列表137保存文件，浏览显示最终效果。保存文件，浏览显示最终效果。138四、检查表单DreamweaverMX的内置行为中提供了一个“检查表单”的行为，目的是在用户提交数据前检查数据的合法性。四、检查表单DreamweaverMX的内置行为中提供了一139实例6你填对了吗？第一部分：我的注册表-----基本表单制作实例6你填对了吗？第一部分：我的注册表-----基本表140第二部分：创建“检查表单”行为对表单数据进行合法性检查添加动作选中网页中的提交按钮，添加一个检查表单动作第二部分：141行为与时间轴动画设计142行为与时间轴动画设计143设置username域检查设置username域检查144设置truename域检查设置truename域检查145设置year域检查设置year域检查146设置month域检查设置month域检查147设置day域检查设置day域检查148设置intro域检查设置intro域检查149设置password域检查设置password域检查150存盘预览当直接单击提交按钮时：存盘预览151当故意将出生年月填错：当故意将出生年月填错：1527．3时间轴动画设计一、时间轴面板在DreamweaverMX中提供了图形化操作来定义动画，这种操作是在时间轴面板中定义时间轴。使用动态HTML来改变层的属性，或者随时间来改变关键帧中图象的属性。7．3时间轴动画设计一、时间轴面板153①②③④⑤⑥⑧⑦⑨⑩⑾⒀⑿①②③④⑤⑥⑧⑦⑨⑩⑾⒀⑿154时间轴下拉列表框：时间轴下拉列表框指定当前在时间轴面板中显示文档的哪个时间轴。在当前文档中定义的所有时间轴都会在这个下拉列表中列出。行为通道：应该在时间轴中特定帧处执行的行为通道。播放栏：显示当前在文档窗口中显示时间轴的哪一帧。动画条：显示每个对象的动画的持续时间。倒带：将播放栏移至时间轴中的第一帧。后退：将播放栏向左移动一帧。当前帧：指明当前播放的帧数。时间轴下拉列表框：时间轴下拉列表框指定当前在时间轴面板中显示155播放：将播放栏向右移动一帧。单击“播放”并按住鼠标可向前播放时间轴。动画通道：显示用于制作层和图象动画的动画条。每秒帧数（fps）指示每秒钟动画播放的帧数。⑾自动播放：选中此项，当前页在载入浏览器时即自动播放时间轴。⑿关键帧：动画条中已经为对象指定属性（如位置）的帧。DreamweaverMX会计算关键帧的中间值。小圆标记表示关键帧。⒀循环：选中此项，当前页在载入浏览器时可以自动循环播放时间轴。播放：将播放栏向右移动一帧。单击“播放”并按住鼠标可向前播放156二、创建层动画时间轴主要用于创建和定义以层对象为基础的网页动画，其的作用和功能特色为：它突破了GIF、Flash动画等网页动画等网页动画只能在对象内部展现动画内容的局限，使得设计者可以在整个网页范围内来建立动画效果。通过时间轴工具和行为工具的结合使用，可以在网页中建立带有交互能力的动画对象。DreamweaverMX中通过时间轴工具生成的动画是由JavaScript语句来建。DreamweaverMX将自动生成动画的源代码，而不需要网页编辑人员手动编辑，使得网页编辑工作大大简化。二、创建层动画时间轴主要用于创建和定义以层对象为基础的网页157实例7动画文字新建网页文件实例7动画文字新建网页文件158插入层对象插入层对象159插入文本内容插入文本内容160打开时间轴浮动面板打开时间轴浮动面板161添加动画对象方法一：用鼠标拖拽层对象，将其拖拽到时间轴浮动面板中；方法二：选中层对象，用鼠标右键单击层对象，在弹出菜单中选择“添加对象”；方法三：选中层对象，在时间轴浮动面板的第一帧的位置单击鼠标右键，在弹出菜单中选择“添加对象”。添加动画对象162行为与时间轴动画设计163调整动画长度调整动画长度164设置动画起点设置动画起点165添加关键帧、设置关键帧位置添加关键帧、设置关键帧位置166行为与时间轴动画设计167设置播放方式设置播放方式168预览动画效果预览动画效果169添加第二个动画对层对象添加第二个动画，在原来的时间轴动画后面添加一个默认长度为15帧的动画对象。设置层对象属性将当前帧设为46帧（即刚才添加的动画的第一帧），在浮动面板中，将层对象的显示设置为Visible(可见)。添加第二个动画170行为与时间轴动画设计171在53帧处添加一个关键帧，并且在属性浮动面板中设置网页中的层对象在此关键帧处的可见性（显示）为Hidden（隐藏）。在53帧处添加一个关键帧，并且在属性浮动面板中设置网页中的层172添加动作用鼠标点中时间轴浮动面板上标记为B栏处的第60帧的位置。然后在行为浮动面板上添加一个让时间轴转到某一帧的动作。添加动作173行为与时间轴动画设计174行为与时间轴动画设计175预览修改文件存盘，预栏动画效果。预览修改176实例8网页小天使打开网页文件：打开实例7动画文字网页文件实例8网页小天使打开网页文件：打开实例7动画文字网页文177添加时间轴在时间轴浮动面板上单击鼠标右键，在弹出的快捷菜单中，选择“添加时间轴”，向网页添加一个新时间轴对象。添加时间轴178添加层对象添加层对象179添加图片添加