网页制作-行为与时间轴及其应用.ppt

《网页制作-行为与时间轴及其应用.ppt》由会员分享，可在线阅读，更多相关《网页制作-行为与时间轴及其应用.ppt（41页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第9章章 行为与时间轴及其应用行为与时间轴及其应用 9.1 行为的概述行为的概述 9.1.1 行为面板及其使用方法行为面板及其使用方法 9.1.2 添加和修改行为添加和修改行为 9.1.3 行为的简单应用行为的简单应用9.2 Dreamweaver 8 内置的动作和事件内置的动作和事件9.4 用时间轴改变图像和层的属性用时间轴改变图像和层的属性 9.4.1 用时间轴控制层的可见性用时间轴控制层的可见性 9.4.2 用时间轴控制图像替换用时间轴控制图像替换 9.4.3 用时间轴改变层的叠放次序用时间轴改变层的叠放次序 9.4.4 多条时间轴的管理多条时间轴的管理9.5 行为和时间轴的应用实例行

2、为和时间轴的应用实例9.3 时间轴的概述时间轴的概述 9.3.1 使用时间轴面板使用时间轴面板 9.3.2 创建时间轴动画创建时间轴动画 9.3.3 生成和编辑动画路径生成和编辑动画路径 9.3.4 在时间轴中加入行为在时间轴中加入行为9.1 行为的概述行为的概述 行为行为以某种方式完成的动作，在网页设计以某种方式完成的动作，在网页设计中通过行为可以实现浏览者与计算机的人机交互。中通过行为可以实现浏览者与计算机的人机交互。事件：是完成某一动作的具体方式；事件：是完成某一动作的具体方式；动作：指在浏览网页时可完成的一些特殊功能；动作：指在浏览网页时可完成的一些特殊功能；在浏览带有行为的交互网页时

3、，当某一事件被响在浏览带有行为的交互网页时，当某一事件被响应后便会触发执行相对应的动作。应后便会触发执行相对应的动作。一个事件可以触发多个动作一个事件可以触发多个动作指定动作触发的先后次序指定动作触发的先后次序对象对象行为行为附加附加 在网页中为页面对象添加和修改行为，可使用在网页中为页面对象添加和修改行为，可使用【行行为为】面板。选择面板。选择【窗口窗口】|【行为行为】命令，或按命令，或按Shift+F4快捷键，也可以单击状态栏中的按钮，便可打开快捷键，也可以单击状态栏中的按钮，便可打开【行为行为】面板。面板。9.1.1 行为面板及其使用方法行为面板及其使用方法 事件列表事件列表显示设置事件

4、显示设置事件显示所有事件显示所有事件添加行为添加行为删除行为删除行为行为先后次行为先后次序调整按钮序调整按钮动作列表动作列表 利用利用【行为行为】面板可在网面板可在网页中添加、修改行为。给网页对页中添加、修改行为。给网页对象添加行为的步骤如下。象添加行为的步骤如下。9.1.2 添加和修改行为添加和修改行为 （1）选中网页中的一个对象，选中网页中的一个对象，该对象可以是图像、文本或层。该对象可以是图像、文本或层。（2）选择选择【窗口窗口】|【行为行为】命命令，打开令，打开【行为行为】面板。面板。（3）单击单击【行为行为】面板上的按面板上的按钮，屏幕显示钮，屏幕显示【动作动作】（Action）菜单

5、。根据需要选择）菜单。根据需要选择其中一种动作，并在对话框中设其中一种动作，并在对话框中设置该动作的参数。置该动作的参数。（4）选择选择【显示事件显示事件】命令，命令，并在并在【显示事件显示事件】级联菜单中选级联菜单中选择一种合适的浏览器。择一种合适的浏览器。（5）在在【事件事件】（Event）菜单中显菜单中显示当前动作的默认事件，单击该事件后，示当前动作的默认事件，单击该事件后，【行为行为】面板的当前事件中会出现一个面板的当前事件中会出现一个下拉三角形按钮，单击该下拉三角形按下拉三角形按钮，单击该下拉三角形按钮，屏幕显示钮，屏幕显示【事件事件】级联菜单级联菜单,可从该可从该菜单选项中选择一种

6、事件来代替默认事菜单选项中选择一种事件来代替默认事件。件。网页中一个对象附加了行为后，网页中一个对象附加了行为后，可以根据需要利用可以根据需要利用【行为行为】面板修改触面板修改触发动作的事件，添加、删除及修改动作发动作的事件，添加、删除及修改动作的参数。的参数。9.1.3 行为的简单应用行为的简单应用 例例1 设计制作一个符合下列要求的网页文件。设计制作一个符合下列要求的网页文件。（1）在网页中创建在网页中创建2个层，在层个层，在层Layer1中插入图片中插入图片1，在层在层Layer2插入图片插入图片2。（2）隐藏层隐藏层Layer2。（3）在浏览该页面时，只显示层在浏览该页面时，只显示层L

7、ayer1的图片的图片1。当鼠当鼠标指向该图片时，显示图片标指向该图片时，显示图片2；移开鼠标时，隐藏图片移开鼠标时，隐藏图片2。layer1 layer2插入层插入层layer1和和layer2，并在层中插入相应的图片；，并在层中插入相应的图片；打开【层】面板，选中层打开【层】面板，选中层Layer2，该层的属性设置为不可见。该层的属性设置为不可见。按快捷键按快捷键Shift+F4，打开打开【行为】面板【行为】面板。选中层选中层Layer1，单单击行为添加按钮，选择击行为添加按钮，选择【显示【显示-隐藏层】动作隐藏层】动作，在弹出的【显示，在弹出的【显示-隐藏层】对话框中隐藏层】对话框中选中

8、层选中层Layer2，并单击并单击【显示】【显示】按钮设置显示按钮设置显示该层。单击【确定】按钮，【显示该层。单击【确定】按钮，【显示-隐藏层】的动作被添加到【隐藏层】的动作被添加到【行为】面板中。行为】面板中。选中该行为，并单击事件列表中下三角形按钮，在菜单中选选中该行为，并单击事件列表中下三角形按钮，在菜单中选择事件【择事件【onMouseOver】，】，其意义为其意义为“鼠标指向对象鼠标指向对象”，表，表示当鼠标指在层示当鼠标指在层Layer1上时，显示层上时，显示层Layer2。此时层此时层Layer2中图像中图像2被显示。被显示。给层给层Layer 1添加【显示添加【显示-隐藏层】的

9、动作。在弹出的【显示隐藏层】的动作。在弹出的【显示-隐藏层】对话框中选中层隐藏层】对话框中选中层Layer2，并单击并单击【隐藏】按钮【隐藏】按钮设置设置隐藏该层。选择事件【隐藏该层。选择事件【onMouseOut】，】，其意义为其意义为“鼠标移去鼠标移去”，表示当鼠标从层，表示当鼠标从层Layer1上移去时，隐藏层上移去时，隐藏层Layer2。layer1例例2 双击层双击层1，改变状态栏中显示的文字。，改变状态栏中显示的文字。例例3 拖动层。拖动层。选中整个选中整个 Dreamweaver 8中自带了很多动作，使用它们可以在中自带了很多动作，使用它们可以在网页中设计出各种效果。在本节中列出

10、的动作是网页中设计出各种效果。在本节中列出的动作是Netscape 6.0、Internet Explorer 6.0及以上版本支持的动作。在及以上版本支持的动作。在【行为行为】面板的面板的【动作动作】菜单中各项的意义如下所述。菜单中各项的意义如下所述。9.2 Dreamweaver 8 内置的动作和事件内置的动作和事件1【交换图像交换图像】：2【弹出信息弹出信息】：3【恢复交换图像恢复交换图像】:通过改变通过改变IMG标记的标记的SRC属性，改变图像。属性，改变图像。利用该动作可创建活动按钮或其他图像效果。利用该动作可创建活动按钮或其他图像效果。可以很方便地在网页上显示带指定信息的可以很方便

11、地在网页上显示带指定信息的JavaScript对话框。对话框。用于将在用于将在Swap Image动作中设置的后一张动作中设置的后一张图片，恢复为前一张图片。此动作会自动图片，恢复为前一张图片。此动作会自动添加在链接了添加在链接了Swap Image动作的对象中。动作的对象中。4【打开浏览器窗口打开浏览器窗口】：在触发该行为时打开一个新的浏在触发该行为时打开一个新的浏览器窗口，并在新窗口中打开览器窗口，并在新窗口中打开URL地址指定的网页。还可地址指定的网页。还可设置新窗口的尺寸，是否显示导航条、滚动条等属性。设置新窗口的尺寸，是否显示导航条、滚动条等属性。5【拖动层拖动层】：允许用户用该动作

12、完成拖动层的操作。允许用户用该动作完成拖动层的操作。6【控制控制Shockwave或或 Flash】：利用该动作可控制利用该动作可控制Shockwave或或Flash动画的动画的【播放播放】、【停止停止】、【倒带倒带】或指定或指定【前往帧前往帧】等操作。等操作。7【播放声音播放声音】：在网页中加入音乐。在网页中加入音乐。8【改变属性改变属性】：通过设定的动作触发行为，动态改变对通过设定的动作触发行为，动态改变对象属性值。象属性值。9【时间轴时间轴】级联菜单中有以下级联菜单中有以下3个命令。个命令。【播放时间轴播放时间轴】：可以启动播放时间轴动画。可以启动播放时间轴动画。【停止时间轴停止时间轴】

13、：可以停止播放时间轴动画。可以停止播放时间轴动画。【转到时间轴帧转到时间轴帧】：此动作可以转到时间轴动画的某个此动作可以转到时间轴动画的某个指定的帧，然后开始播放时间轴动画。在时间轴面板的行为指定的帧，然后开始播放时间轴动画。在时间轴面板的行为通道中设置此动作及时间轴动画的某部分循环播放的次数。通道中设置此动作及时间轴动画的某部分循环播放的次数。10【显示隐藏层显示隐藏层】：显示、隐藏一个或多个层的可见性，显示、隐藏一个或多个层的可见性，这个动作在与浏览者交互信息时是非常有用的。这个动作在与浏览者交互信息时是非常有用的。11【显示弹出式菜单显示弹出式菜单】：该行为用来创建或编辑该行为用来创建或

14、编辑Dreamweaver弹出式菜单，或者打开并修改已插入弹出式菜单，或者打开并修改已插入Dreamweaver文档的文档的Fireworks弹出式菜单。弹出式菜单。加上虚链接加上虚链接（“#”）或（或（“javascript:;”）12【检查插件检查插件】：利用该动作可根据访问者是否安装利用该动作可根据访问者是否安装需要的插件，而发送不同的页面。例如，可检测访问者需要的插件，而发送不同的页面。例如，可检测访问者的计算机中是否安装了的计算机中是否安装了Flash播放器，对已安装播放器，对已安装Flash播播放器的用户发送包含放器的用户发送包含Flash的网页；的网页；对没有安装对没有安装Fla

15、sh播播放器的用户发送一个可以下载放器的用户发送一个可以下载Flash播放器的网址。播放器的网址。13【检查浏览器检查浏览器】：利用该动作可根据访问者所使用利用该动作可根据访问者所使用的浏览器版本，发送不同的页面。的浏览器版本，发送不同的页面。14【检查表单检查表单】：检查指定的文本框中的内容，以确检查指定的文本框中的内容，以确保浏览者输入的数据格式正确无误。保浏览者输入的数据格式正确无误。15【设置导航条图像设置导航条图像】：将图片转换成导航条图像或将图片转换成导航条图像或改变导航条中的图像显示，也可更新、编辑导航条的图改变导航条中的图像显示，也可更新、编辑导航条的图像。像。16【设置文本设

16、置文本】：级联菜单中有以下级联菜单中有以下4个命令。个命令。【设置设置层文本层文本】：用指定内容替换某个页面上的层中的内容：用指定内容替换某个页面上的层中的内容及格式，但不改变原来层的属性（如背景颜色、背景图片等）。及格式，但不改变原来层的属性（如背景颜色、背景图片等）。【设置框架文本设置框架文本】：动态设置框架文本，以特定的内容替动态设置框架文本，以特定的内容替换框架格式和内容。换框架格式和内容。【设置文本域文字设置文本域文字】：可以用指定的内容取代文本框中内容。可以用指定的内容取代文本框中内容。【设置状态条文本设置状态条文本】：可在浏览器左下角的状态栏中显示可在浏览器左下角的状态栏中显示文

17、本信息。文本信息。17【调用调用JavaScript】：执行输入的执行输入的JavaScript代码。代码。18【跳转菜单跳转菜单】：设计者通过选择设计者通过选择【插入插入】【表单对象表单对象】【跳转菜单跳转菜单】命令，可在网页上创建一个跳转菜单。若要修命令，可在网页上创建一个跳转菜单。若要修改这个跳转菜单，可在改这个跳转菜单，可在【行为行为】面板中双击面板中双击【跳转菜单跳转菜单】动作，动作，在在【跳转菜单跳转菜单】对话框中修改跳转菜单的各项参数。对话框中修改跳转菜单的各项参数。19【跳转菜单开始跳转菜单开始】：可以给跳转菜单添加不同的事件。可以给跳转菜单添加不同的事件。20【转到转到 UR

18、L】：这个动作用于在当前窗口或指定的框架这个动作用于在当前窗口或指定的框架中打开一个新的页面。中打开一个新的页面。21【隐藏弹出式菜单隐藏弹出式菜单】：可给弹出式菜单添加事件使其隐藏。可给弹出式菜单添加事件使其隐藏。22【预先载入图像预先载入图像】：此动作可以在浏览器的缓冲存储器中此动作可以在浏览器的缓冲存储器中载入不立即在载入不立即在Web Web 页面上显示的图片，以便在下载较大的图片页面上显示的图片，以便在下载较大的图片文件时可以避免浏览者长时间等待。它主要用于时间轴、行为文件时可以避免浏览者长时间等待。它主要用于时间轴、行为或或JavaScript变换图片变换图片等。等。动作是执行某个

19、特定任务的一段动作是执行某个特定任务的一段JavaScript的程序，事件的程序，事件则是指明了执行动作的方法。在则是指明了执行动作的方法。在【行为行为】面板面板中单击按钮，选择中单击按钮，选择【显示事件显示事件】命令，在命令，在【显示事件显示事件】的级联菜单中选定能浏览网的级联菜单中选定能浏览网页的浏览器版本。选定不同的浏览器版本，事件列表中的事件选页的浏览器版本。选定不同的浏览器版本，事件列表中的事件选项也不同，之前所示的项也不同，之前所示的【事件事件】菜单菜单中各事件选项的意义如下。中各事件选项的意义如下。onAbort：onAfterUpdate：onBeforeUpdate：onBl

20、ur：onFocus：onBounce：onChange：在装载一幅图片时，单击浏览器的在装载一幅图片时，单击浏览器的【停止停止】按钮，按钮，可触发该事件。可触发该事件。当页面中的数据元素完成了数据源更新后，当页面中的数据元素完成了数据源更新后，触发该事件。触发该事件。当页面中的数据元素被修改时，触发该事件。当页面中的数据元素被修改时，触发该事件。取消选中对象时，触发该事件。取消选中对象时，触发该事件。选中指定对象时，触发该事件。选中指定对象时，触发该事件。当编辑框中的内容到达其边界时，将触发该事件。当编辑框中的内容到达其边界时，将触发该事件。改变页面中数值时，将触发该事件。例如，当用改变页面

21、中数值时，将触发该事件。例如，当用户在菜单中选择了一个项目，或者修改了文本区户在菜单中选择了一个项目，或者修改了文本区中的数值，然后在页面任意位置单击均可触发该中的数值，然后在页面任意位置单击均可触发该事件。事件。onClick：onDblClick：onError：onFinish：onHelp：onKeyDown：onKeyPress：onKeyUp：onLoad：单击选定对象（如超链接、图片、图片映单击选定对象（如超链接、图片、图片映像、按钮），将触发该事件。像、按钮），将触发该事件。双击选定对象，将触发该事件。双击选定对象，将触发该事件。在页面或图片发生装载错误时，将触发该事件。在页面

22、或图片发生装载错误时，将触发该事件。当选取框内容已经完成了一个循环后，将触发该当选取框内容已经完成了一个循环后，将触发该事件。事件。当用户单击浏览器的当用户单击浏览器的【帮助帮助】按钮或从菜单按钮或从菜单中选择中选择【帮助帮助】时，将触发该事件。时，将触发该事件。当用户按下任何键时，将触发该事件。当用户按下任何键时，将触发该事件。当用户按下并释放任何键时，触发该事件。当用户按下并释放任何键时，触发该事件。它它相当于相当于onKeyDown与与onKeyUp事件的联合。事件的联合。按下任意键后释放该键时，触发该事件。按下任意键后释放该键时，触发该事件。当图片或页面完成装载后，将触发该事件。当图片

23、或页面完成装载后，将触发该事件。onMouseDown：当浏览者单击鼠标按键（不释放鼠标按键）当浏览者单击鼠标按键（不释放鼠标按键）时，将触发该事件。时，将触发该事件。：当鼠标指针在对象上移动时，触发该事件。当鼠标指针在对象上移动时，触发该事件。：当鼠标指针离开对象边界时，将触发该事件。当鼠标指针离开对象边界时，将触发该事件。：当鼠标首次移动指向特定对象时，将触发该当鼠标首次移动指向特定对象时，将触发该 事件。事件。：当鼠标按键被释放时，将触发该事件。当鼠标按键被释放时，将触发该事件。onMove：onReadyStateChange：onReset：onMouseMoveonMouseOut

24、onMouseOveronMouseUp当指定对象的状态改变时，将触发该当指定对象的状态改变时，将触发该事件。事件。当表单被复位到其缺省值时，将触发该事件。当表单被复位到其缺省值时，将触发该事件。移动窗口、框架或对象时，将触发该事件。移动窗口、框架或对象时，将触发该事件。onRowEnter：onScroll：onSelect：onStart：onResize：onRowExit：onUnload：onSubmit：当用户调整浏览器窗口或框架的尺寸时，当用户调整浏览器窗口或框架的尺寸时，将触发该事件。将触发该事件。当捆绑数据源的当前记录指针改变时，将当捆绑数据源的当前记录指针改变时，将 触发该

25、事件。触发该事件。当捆绑数据源的当前记录指针将要改变时当捆绑数据源的当前记录指针将要改变时,触发该事件。触发该事件。当用户拖动上、下滚动条时，触发该事件。当用户拖动上、下滚动条时，触发该事件。在文本区域选定文本时，触发该事件。在文本区域选定文本时，触发该事件。当编辑框中的内容开始循环时，触发该事件。当编辑框中的内容开始循环时，触发该事件。提交表单时，触发该事件。提交表单时，触发该事件。离开页面时，触发该事件。离开页面时，触发该事件。用用Dreamweaver 8的时间轴技术实现动画效果较为的时间轴技术实现动画效果较为方便，只需在不同的时间内改变某个对象的位置、尺寸、方便，只需在不同的时间内改变

26、某个对象的位置、尺寸、可见性等属性，便能实现动画效果。时间轴动画的单位可见性等属性，便能实现动画效果。时间轴动画的单位是是帧帧，每一帧是动画的一幅瞬间图每一帧是动画的一幅瞬间图。9.3 时间轴的概述时间轴的概述 时间轴动画是在特定的时间内、在指定的动画运动轨迹时间轴动画是在特定的时间内、在指定的动画运动轨迹上，显示一系列有关联特性的静态图像的组合。上，显示一系列有关联特性的静态图像的组合。9.3.1 使用时间轴面板使用时间轴面板 时间轴动画是通过时间轴动画是通过【时间轴时间轴】面板来制作完成的。在面板来制作完成的。在【时间轴时间轴】面板中的每一列代表一帧，帧的显示速度是由面板中的每一列代表一帧

27、，帧的显示速度是由帧频率（帧频率（fps）决定的。决定的。帧：帧：动画的基本单位，就是一个画面。动画的基本单位，就是一个画面。关键帧：关键帧：在动画中一些关键的画面，可以影响整个动画的。在动画中一些关键的画面，可以影响整个动画的。很多画面按照时间先后顺序连起来就是动画很多画面按照时间先后顺序连起来就是动画时间轴：时间轴：用于排列画面顺序的。时间轴由通道组成，每一用于排列画面顺序的。时间轴由通道组成，每一个通道里面放一个要运动的物体；个通道里面放一个要运动的物体；关键帧关键帧用圆点表示；用圆点表示；播播放头放头指向当前动画所在帧。指向当前动画所在帧。【时间轴时间轴】面板最上面一行是面板最上面一行

28、是标题栏标题栏，下面是，下面是控制栏控制栏，在控制，在控制栏中可设置时间轴动画的各项参数。标有大写字母栏中可设置时间轴动画的各项参数。标有大写字母B的是的是行为行为通道通道，在行为通道中带有行为标记的帧附加了行为。面板中间，在行为通道中带有行为标记的帧附加了行为。面板中间是是时间标尺时间标尺，标尺上有个红色小块是，标尺上有个红色小块是当前帧标记当前帧标记，表明了当前，表明了当前帧的状况。下面是帧的状况。下面是动画条动画条。在一个。在一个Web 页面上可设置描述多个页面上可设置描述多个对象运动的动画条。对象运动的动画条。例如：例如：15fps表示表示15帧的动画在帧的动画在1秒钟内显秒钟内显示完

29、。示完。行为通道行为通道关键帧关键帧动画通道动画通道【时间轴列表时间轴列表】：是时间轴选择列表，在同一个文档中可以设置多个是时间轴选择列表，在同一个文档中可以设置多个时间轴，当用户创建多个时间轴时，利用该下拉列表可时间轴，当用户创建多个时间轴时，利用该下拉列表可选择当前时间轴。选择当前时间轴。【播放控制选项播放控制选项】：它的它的3个按钮的功能分别是切换到第一帧、切换到个按钮的功能分别是切换到第一帧、切换到当前帧的上一帧、切换到当前帧的下一帧，文本框中是当前帧的上一帧、切换到当前帧的下一帧，文本框中是当前帧的序号。若输入某个帧序号值，便可切换到该帧。当前帧的序号。若输入某个帧序号值，便可切换到

30、该帧。单击、这单击、这2个按钮并按住鼠标左键不放，可预览动画效个按钮并按住鼠标左键不放，可预览动画效果。果。【播放速度设置播放速度设置】：在在Fps文本框中设置每秒要播放的速度，默认值为文本框中设置每秒要播放的速度，默认值为15fps。该数值越小，播放速度越慢。动画的帧频率等于帧该数值越小，播放速度越慢。动画的帧频率等于帧总数（即长度）除以动画所持续的时间。总数（即长度）除以动画所持续的时间。公式为：公式为：帧总数帧总数=持续秒数持续秒数帧频率。帧频率。动画的长度就是指定的时间轴从起点到终点所有的帧动画的长度就是指定的时间轴从起点到终点所有的帧数。可以随意调整以上数。可以随意调整以上3个参数，

31、设置希望得到的动画效果。个参数，设置希望得到的动画效果。【自动播放自动播放】复选框：复选框：若选中该复选框，表示网页打开若选中该复选框，表示网页打开后，时间轴动画自动开始播放。后，时间轴动画自动开始播放。【循环循环】复选框：复选框：选中该复选框，表示网页打开后，循选中该复选框，表示网页打开后，循环播放时间轴动画。系统自动在动画的最后一帧后面插入环播放时间轴动画。系统自动在动画的最后一帧后面插入【转到时间轴帧转到时间轴帧】的行为，设计者可以在的行为，设计者可以在【行为行为】面板中面板中双击该行为后，可加以修改。双击该行为后，可加以修改。时间轴能移动的主要对象是层，如果希望移动文本或时间轴能移动的

32、主要对象是层，如果希望移动文本或图像之类的对象，可以将它们先放置在层中，然后再设置图像之类的对象，可以将它们先放置在层中，然后再设置为时间轴动画。为时间轴动画。时间轴一般可通过控制层来实现图片、文本或其他对时间轴一般可通过控制层来实现图片、文本或其他对象活动。将图片或文本插入层中，通过时间轴控制层的变象活动。将图片或文本插入层中，通过时间轴控制层的变化，就能制作出图片、文本或其他对象的动画效果。化，就能制作出图片、文本或其他对象的动画效果。9.3.2 创建时间轴动画创建时间轴动画 在在Dreamweaver8中制作简单的时间轴动画时，设计者中制作简单的时间轴动画时，设计者只需定义起始位置和结束

33、位置的两个关键帧的属性，两个关只需定义起始位置和结束位置的两个关键帧的属性，两个关键帧之间其他帧的属性由键帧之间其他帧的属性由Dreamweaver 8自动设置。自动设置。设计者可用鼠标拖曳第一个或最后一个关键帧来改变动设计者可用鼠标拖曳第一个或最后一个关键帧来改变动画条的长度，或直接拖曳动画条改变动画开始或结束的时间。画条的长度，或直接拖曳动画条改变动画开始或结束的时间。例例 制作一个使图片文件制作一个使图片文件angle.jpg从屏幕直线移动的动画。从屏幕直线移动的动画。选择【窗口】选择【窗口】|【时间轴】命令，或按【时间轴】命令，或按Alt+F9，打开【时打开【时间轴】面板。间轴】面板。

34、插入层，在层中插入图像文件插入层，在层中插入图像文件。选中该层，选中该层，并将其拖动并将其拖动到【时间轴到【时间轴】面板中去。】面板中去。在【时间轴在【时间轴】面板中形】面板中形成一段成一段15帧帧的动画条。的动画条。选中时间轴上方的【自动播放】和【循环】复选框，此时在选中时间轴上方的【自动播放】和【循环】复选框，此时在动画条最后一帧的后一帧上附加了返回第一帧的动画条最后一帧的后一帧上附加了返回第一帧的行为行为。Dreamweaver8允许设计者对动画的直线路径进行修允许设计者对动画的直线路径进行修改，利用插入关键帧的方法来实现复杂的动画路径。改，利用插入关键帧的方法来实现复杂的动画路径。在设

35、置了时间轴动画的基本状态之后，可利用在设置了时间轴动画的基本状态之后，可利用【时间时间轴轴】面板面板增加、减少动画的帧，增加、减少动画的关键帧，增加、减少动画的帧，增加、减少动画的关键帧，修改对象运动的轨迹，改变动画的开始时间等。修改对象运动的轨迹，改变动画的开始时间等。9.3.3 生成和编辑动画路径生成和编辑动画路径（1）通过拖曳动画条结束帧标记，可以增加动画的帧，用通过拖曳动画条结束帧标记，可以增加动画的帧，用同样的方法可以减少动画的帧。同样的方法可以减少动画的帧。（2）分别选中分别选中【时间轴时间轴】面板中的某帧，单击面板中的某帧，单击右键右键，选择，选择快捷菜单中的快捷菜单中的【增加关

36、键帧增加关键帧】命令，或单击命令，或单击【时间轴时间轴】面板面板的右侧的右侧按钮，选择按钮，选择【增加关键帧增加关键帧】命令，在动画条中的某帧命令，在动画条中的某帧处增加关键帧；或按住处增加关键帧；或按住Ctrl单击时间轴某处。单击时间轴某处。（3）如果在当前动画条上已经插入了关键帧，在增加或减少动如果在当前动画条上已经插入了关键帧，在增加或减少动 画的帧时不希望调整其他关键帧的位置，可在拖动结束帧画的帧时不希望调整其他关键帧的位置，可在拖动结束帧 标记时标记时按住按住Ctrl键键，此时动画条中，此时动画条中关键帧的位置不变关键帧的位置不变。（4）通过通过拖动关键帧拖动关键帧标记可调整该关键帧

37、在画面上出现的时间。标记可调整该关键帧在画面上出现的时间。（5）通过通过直接向左、右拖曳动画条直接向左、右拖曳动画条，可调整动画的开始、结束，可调整动画的开始、结束 的时间。的时间。（6）要移动整个层对象和运动轨迹。单击动画条上任意非要移动整个层对象和运动轨迹。单击动画条上任意非关键帧处，选中整个动画条，关键帧处，选中整个动画条，单击层控制柄拖动该对象单击层控制柄拖动该对象，移，移动整个动画对象和其运动的轨迹。动整个动画对象和其运动的轨迹。（7）要在网页中增加动画对象，实际上就是在要在网页中增加动画对象，实际上就是在【时间轴时间轴】面板中增加动画条，可单击面板中增加动画条，可单击右键右键，在快

38、捷菜单中选择，在快捷菜单中选择【增加增加时间轴时间轴】命令，也可以选择命令，也可以选择【修改修改】|【时间轴时间轴】|【增加对象增加对象到时间轴到时间轴】命令，还可以选中某个层对象后，命令，还可以选中某个层对象后，直接将其拖至直接将其拖至【时间轴时间轴】面板中。面板中。（8）利用插入的关键帧可将动画直线运动的轨迹改为曲线运利用插入的关键帧可将动画直线运动的轨迹改为曲线运动。分别选中动。分别选中【时间轴时间轴】面板中的动画条的面板中的动画条的某一关键帧某一关键帧，然后，然后拖曳拖曳层控制柄，改变层对象的运动轨迹。层控制柄，改变层对象的运动轨迹。图像将沿新轨迹上下图像将沿新轨迹上下运动，在层对象的

39、运动轨迹拐角处就是关键帧所处的位置。运动，在层对象的运动轨迹拐角处就是关键帧所处的位置。【添加对象添加对象】或或【移除对象移除对象】命令命令，可从，可从【时间轴时间轴】面板中增加面板中增加或删除对象，即增加或删除该对象所对应的动画条；或删除对象，即增加或删除该对象所对应的动画条；【添加行为添加行为】或或【移除行为移除行为】命令命令，可增加或删除行为；，可增加或删除行为；【增加关键帧增加关键帧】或或【移除关键帧移除关键帧】命令命令,可增加或删除关键帧；可增加或删除关键帧；【增加时间轴增加时间轴】、【移除时间轴移除时间轴】、【重命名时间轴重命名时间轴】命令命令，可，可对时间轴完成增加、删除或改名的

40、操作。对时间轴完成增加、删除或改名的操作。（9）选中对象后，选中对象后，右击右击【时间轴时间轴】面板面板，然后从，然后从弹出的弹出的快捷菜单快捷菜单中选择下述命令，可完成相应的操作：中选择下述命令，可完成相应的操作：（10）从上述可以看出，用时间轴技术制作的动画操作比较从上述可以看出，用时间轴技术制作的动画操作比较简单，设计者不必设置每一帧的属性，而只要设置关键的简单，设计者不必设置每一帧的属性，而只要设置关键的几个帧即可确定对象运动的轨迹。关键帧之间的帧被称为几个帧即可确定对象运动的轨迹。关键帧之间的帧被称为中间帧（或普通帧），中间帧（或普通帧），它们的状态由系统自动产生。它们的状态由系统自

41、动产生。注意：注意：时间轴动画不是所谓的时间轴动画不是所谓的GIF动画，而是真正用动画，而是真正用Java Script代码编写的动画。代码编写的动画。用关键帧编辑不很复杂的动画运动路径是个较好的方用关键帧编辑不很复杂的动画运动路径是个较好的方法。但是，对于编辑较复杂的动画运动路径，却并不容易。法。但是，对于编辑较复杂的动画运动路径，却并不容易。Dreamweaver 8还提供了一种可生成复杂路径的动画的还提供了一种可生成复杂路径的动画的简单的方法。设计者可单击简单的方法。设计者可单击【时间轴时间轴】面板右上角的面板右上角的快捷菜快捷菜单单按钮，在快捷菜单中选择按钮，在快捷菜单中选择【录制层路

42、径录制层路径】命令，单击层控命令，单击层控制柄拖动该对象，就可记录层对象的较为复杂的运动轨迹。制柄拖动该对象，就可记录层对象的较为复杂的运动轨迹。9.4 用时间轴改变图像和层的属性用时间轴改变图像和层的属性 用时间轴除可以控制层的位置变化以外，还可以替用时间轴除可以控制层的位置变化以外，还可以替换图片，改变层的可见性、层的叠放次序和层的大小等换图片，改变层的可见性、层的叠放次序和层的大小等属性。动画对象的这些属性变化，主要是通过在不同的属性。动画对象的这些属性变化，主要是通过在不同的关键帧上设置对象的不同属性来实现的。关键帧上设置对象的不同属性来实现的。9.4.1 用时间轴控制层的可见性用时间

43、轴控制层的可见性 动画在播放过程中，可在时间轴的关键帧上设置层动画在播放过程中，可在时间轴的关键帧上设置层的显示属性来改变层的可见性，或者在关键帧处添加隐的显示属性来改变层的可见性，或者在关键帧处添加隐藏或显示层的行为，从而在浏览网页时，使动画对象产藏或显示层的行为，从而在浏览网页时，使动画对象产生时隐时现的效果。生时隐时现的效果。用时间轴控制层的可见性用时间轴控制层的可见性 在浏览网页时，经常可以看到网页中有些图片像幻灯在浏览网页时，经常可以看到网页中有些图片像幻灯片一样，随着时间的推移不断地在变化。下面通过应用实片一样，随着时间的推移不断地在变化。下面通过应用实例来介绍用时间轴控制图片轮流

44、替换的方法。例来介绍用时间轴控制图片轮流替换的方法。9.4.2 用时间轴控制图片替换用时间轴控制图片替换例例 制作一制作一Web 页面，页面上的五幅图片轮流显示，每隔页面，页面上的五幅图片轮流显示，每隔2/3s显示其中一幅图片。（若每秒播放显示其中一幅图片。（若每秒播放15帧）帧）选中图片，将其拖入【时间轴】面板，将时间轴动画条选中图片，将其拖入【时间轴】面板，将时间轴动画条增加至增加至50帧，并在帧，并在10、20、30、40帧处设置关键帧。帧处设置关键帧。分别选中第分别选中第10、20、30、40帧，在【属性】面板的帧，在【属性】面板的【源【源文件】文本框文件】文本框中，输入该关键帧处替换

45、图片的中，输入该关键帧处替换图片的路径和文件路径和文件名名。9.4.3 用时间轴改变层的叠放次序用时间轴改变层的叠放次序 用时间轴控制图片替换，制作出图片在页面上的轮流显示用时间轴控制图片替换，制作出图片在页面上的轮流显示的效果。利用时间轴改变层的叠放次序也能设计出类似的页的效果。利用时间轴改变层的叠放次序也能设计出类似的页面效果。面效果。9.4.4 多条时间轴的管理多条时间轴的管理 如果在同一个如果在同一个Web 页面中的动画过多或动画类型不同，页面中的动画过多或动画类型不同，可用多个时间轴分别控制多个不同的动画。可用多个时间轴分别控制多个不同的动画。添加、删除和重命名时间轴的操作步骤如下。

46、添加、删除和重命名时间轴的操作步骤如下。(1)选择选择【窗口窗口】|【其他其他】|【时间轴时间轴】命令，或按命令，或按Alt+F9快快捷键，打开捷键，打开【时间轴时间轴】面板。面板。(2)单击单击【时间轴时间轴】面板右上角的按钮，打开时间轴的快捷菜面板右上角的按钮，打开时间轴的快捷菜单，在快捷菜单中选择以下命令分别完成不同的任务：单，在快捷菜单中选择以下命令分别完成不同的任务：【添加时间轴添加时间轴】命令：可添加时间轴，然后在新的时间轴中命令：可添加时间轴，然后在新的时间轴中添加管理动画的动画条。添加管理动画的动画条。【移除时间轴移除时间轴】命令：可删除当前选中的时间轴。命令：可删除当前选中的时间轴。【重命名时间轴重命名时间轴】命令：在命令：在【重命名时间轴重命名时间轴】对话框中对当对话框中对当时间轴重命名。时间轴重命名。9.5 行为和时间轴的应用实例行为和时间轴的应用实例ThanksThanks to be continued&