网页设计教程-第9章.ppt

《网页设计教程-第9章.ppt》由会员分享，可在线阅读，更多相关《网页设计教程-第9章.ppt（65页珍藏版）》请在三一办公上搜索。

1、第9章 创建网页动画,（时间：2次课，4学时）,第9章 创建网页动画,教学提示：本章介绍【时间轴】面板以及使用时间轴的各种方法，让读者了解如何创建时间轴动画、如何为时间轴添加行为、如何应用插件实现时间轴的特殊效果和创建各种不同的层动画效果。教学目标：通过本章内容的学习，读者可以掌握设计网页的动态效果的一般方法。,第9章 创建网页动画,9.1 网页动画利器时间轴 9.2 将时间轴与行为结合起来9.3 用插件实现层动画效果9.4 精彩的网页过渡效果9.5 上 机 实 战,9.1 网页动画利器时间轴,9.1.1【时间轴】面板9.1.2 创建时间轴动画9.1.3 修改时间轴动画,9.1 网页动画利器时

2、间轴,时间轴也叫等时线，用于表示网页存活时间中发生的各种状态。通过时间轴上不同部位放置的不同内容，就可以实现网页元素的动态效果。利用时间轴构建动态网页最大的好处是，它是通过往文档中添加JavaScript代码来实现网页的动态效果，不需要任何ActiveX控件、任何插件和任何Java小程序，具有极好的兼容性。利用时间轴，可以创建各种类型的动态效果，例如，可以改变层的位置、大小、可见性、重叠顺序等。利用时间轴，还可以实现在页面载入后进行其他类型的动作，例如可以改变图像源文件，在特定时间上执行相应的行为等。,9.1.1【时间轴】面板,时间轴主要是通过【时间轴】面板构建的。用户可以选择【窗口】|【时间

3、轴】命令，如图9.1所示，或按Alt+F9组合键，即可以显示如图9.2所示的【时间轴】面板。从图9.2可以看出，【时间轴】面板主要由时间轴下拉列表框、行为通道、动画通道、动画条、控制按钮和控制选项等部分组成。下面介绍【时间轴】面板上的主要元素。【时间轴下拉列表框】主要用于控制哪条时间轴显示在【时间轴】面板上。在下拉列表中，可以选择不同的时间轴，可以在【时间轴】面板上显示不同的时间轴设置。在【行为通道】上，将显示为时间轴上相应时间中所附加的行为，浅蓝色的方块表示存在行为。在【帧数】这一行中，显示时间轴上不同时间对应的动画帧。【回放头】是位于帧数行上的红色方块，它表明当前的动画放映的位置，通过在【

4、时间轴】面板上拖动回放头，可以在文档窗口中看到相应时间上动画放映的状态。同时，当前回放头所在的帧位置会显示在【时间轴】面板上方的前进箭头按钮和后退箭头按钮之间的文本框中。,9.1.1【时间轴】面板,在【时间轴】面板上有33个【动画通道】，分别从1排列至33，表示可以在同一时间进行33路动画设置。一旦某个动画通道上存在动画，就会显示动画条。【动画条】表明某个对象在某段时间内的持续状态，动画条是真正的动画实体。其中一些空白圆圈表明关键帧。在一个动画通道上可以包含多个动画条，表示多个不同的对象。不同的动画条在同一帧内不能控制相同的对象。【关键帧】就是由用户为对象所指定的在某一确定时刻(帧)上的状态。

5、Dreamweaver会自动根据两个关键帧的位置计算对象在其间的动作。例如，要使对象直线运动，只需要定义开始和结束的位置，这两个位置就是关键帧，Dreamweaver会根据直线的开始和结束位置自动计算中间状态。在动画条上，关键帧以一个圆圈的形式表示。单击【返回】按钮，可以使回放头返回到动画的开始位置。单击【后退】按钮，可以将动画后退一帧，连续单击后退按钮，可以向后播放 动画。单击【播放】按钮，可以将动画播放一帧，连续单击播放按钮，可以播放动画。在Fps(每秒帧数)文本框中，可以设置动画播放的速度。用户可以直接输入每秒帧数的值。选中【自动播放】复选框，则当网页被载入后自动播放动画。如果取消选中该

6、复选框，则网页载入之后，动画并不播放，用户可以利用为对象附加行为的方法，提供播放动画的命令。选中【循环】复选框，则动画播放完毕后会自动重新播放，即动画将不断地循环播放，直至用户离开页面。取消选中该复选框，则动画只播放一次。,9.1.1【时间轴】面板,图9.1 打开【时间轴】面板,9.1.1【时间轴】面板,9.1.2 创建时间轴动画,要创建时间轴动画，简而言之，就是往动画通道上添加对象，构建动画条，然后构建动画条上的关键帧，并从文档窗口中设置对象在关键帧上的位置，从而完成动画的创作。1.创建基本动画利用时间轴，用户可以在网页上创建层的动画效果。要利用时间轴构建层的基本动画，其具体操作如下。(1)

7、将层移动到动画的起始位置，该操作实际上就是指定起始的关键帧。选中要制作动画的层。(2)选择【修改】|【时间轴】|【增加对象到时间轴】命令，即可在动画通道中添加一个对应该层的动画条。也可以直接将层拖动到【时间轴】面板上的相应位置来创建动画条。从动画条上，可以看到层名称。(3)拖动动画条上最右端的关键帧标记，可以改变动画条的长度，也即改变动画的播放时间。单击动画条最右端的关键帧标记，然后按住并拖动层面左上角的“#”手柄，将层面拖动到一个合适的位置，如图9.3所示。这时在页面中自动生成一条从起点到终点的直线，并显示在页面中，它表示这个层面的运动轨迹。这实际上也创建了动画结束位置的关键帧。,9.1.2

8、 创建时间轴动画,图9.3 为层拉出一条直线的轨迹,9.1.2 创建时间轴动画,(4)单击【播放】按钮可以在文档窗口中预览动画效果。根据需要，选中或取消相应的【自动播放】和【循环】复选框。单纯的直线式动画显得比较枯燥，在Dreamweaver 中还可以产生贝塞尔曲线的运动轨迹，这需要在【时间轴】面板中添加新的关键帧，关键帧是【时间轴】面板上的控制单元，在添加一个对象时，系统自动为对象设置了头和尾两个关键帧，通过改变关键帧可以改变动画的形态。要利用时间轴产生层的贝塞尔曲线的运动轨迹，其具体操作如下。(1)单击需要在动画条的中间位置添加关键帧的帧。(2)在动画条上的相应帧位置右击，在如图9.4所示

9、的快捷菜单中选择【增加关键帧】命令；也可以选择【修改】|【时间轴】|【增加关键帧】命令来添加关键帧。(3)选中关键帧标记，然后从文档窗口中拖动层，并将它移动到该帧对应的位置上。这时原来的直线将变成一条圆滑的贝塞尔曲线，如图9.5所示。(4)单击【播放】按钮可以在文档窗口中预览动画效果。可根据需要选中或取消相应的【自动播放】和【循环】复选框。,9.1.2 创建时间轴动画,图9.4 利用快捷菜单添加关键帧,9.1.2 创建时间轴动画,图9.5 为层产生贝塞尔曲线的运动轨迹,9.1.2 创建时间轴动画,2.录制层路径对于简单的直线路径，采用前面介绍的方法，可以很好地创建动画；然而如果动画路径较为复杂

10、，如曲线或圆形，则无法通过先设置关键帧，再拖动层到指定位置的方法来创建动画。Dreamweaver提供了可记录路径的方法，允许用户直接在文档窗口中拖动层，而Dreamweaver在后台记录拖动层的路径，然后将它应用到时间轴上，利用这种方法，可以很容易地创建各种移动方式的层动画。要使用【录制层路径】命令产生层复杂运动轨迹，具体操作如下。(1)在文档窗口中选择要创建层动画的层。将层移动到动画的起始位置。(2)在动画条上的相应帧位置右击，在如图9.4所示的快捷菜单中选择【录制层路径】命令。这时就可以开始录制层的移动路径。(3)在文档窗口中，按照需要的路径拖动层。(4)当希望动画停止时，可以释放鼠标，

11、停止移动层。这时就会产生如图9.6所示的一个复杂的运动轨迹。(5)单击【播放】按钮可以在文档窗口中预览动画效果。可根据需要选中或取消相应的【自动播放】和【循环】复选框。设计好动画之后，可以在【时间轴】面板中对时间轴进行各种控制，从而实现对动画的编辑和修改。利用时间轴，不仅可以改变层的位置，还可以改变层的某些属性，如大小和可见性等。利用时间轴，还可以改变图像的源文件，实现某些特殊效果。,9.1.2 创建时间轴动画,图9.6 为层产生复杂的运动轨迹,9.1.2 创建时间轴动画,3.设置动画的可见性为了设置层面的闪光效果，需要设置关键帧的可见性，这可以在【属性】面板中的【可见性】中设置，有3个选项：

12、分别是visible(可见)、hidden(隐藏)和inherit(继承)。要设置关键帧的可见性，具体操作如下。(1)从【时间轴】面板上，单击选中关键帧1，这时文档窗口中相应的对象也被选中。在【属性】面板中设置这个关键帧层的【可见性】属性为visible(可见)。(2)从【时间轴】面板上，单击选中关键帧15，这时文档窗口中相应的对象也被选中。在【属性】面板中设置这个关键帧层的【可见性】属性为hidden(隐藏)。(3)从【时间轴】面板上，单击选中关键帧30，这时文档窗口中相应的对象也被选中。在【属性】面板中设置这个关键帧层的【可见性】属性为visible(可见)。(4)从【时间轴】面板上，单击

13、选中关键帧45，这时文档窗口中相应的对象也被选中。在【属性】面板中设置这个关键帧层的【可见性】属性为inherit(继承)，则这个关键帧层的可见性将继承关键帧30的，也就是visible(可见)。设置完毕，保存文档后在浏览器中预览效果。如图9.7所示为页面中的层在可见状态时的示意图，而图9.8所示为层在隐藏状态时的示意图。,9.1.2 创建时间轴动画,图9.7 页面中的层可见,9.1.2 创建时间轴动画,图9.8 页面中的层隐藏,9.1.3 修改时间轴动画,1.改变动画时间要改变整个动画时间，其具体操作如下。(1)单击相应的动画条，可以选中一个动画条。(2)拖动动画条最右端的关键帧标记，将它左

14、右拖动，如图9.9所示，这时动画条长度会发生变化，同时上面所有的关键帧标记也按照比例移动相应的位置。如果希望保持所有中间位置的关键帧不动，可以按住Ctrl键，再拖动结束帧标记。要改变动画局部的播放时间，即改变关键帧之间的动画播放速度，其具体操作如下。(1)单击相应的动画条，可以选中一个动画条。(2)在动画条上左右拖动相应的关键帧标记。要改变动画起始时间，其具体操作如下。(1)单击相应的动画条，可以选中一个动画条。(2)将动画条在动画通道上左右拖动。2.改变动画对象要改变动画条对应的对象，其具体操作如下。(1)单击相应的动画条，可以选中一个动画条。右击，在快捷菜单中选择【改变对象】命令，这时会打

15、开如图9.10所示的对话框，提示用户选择新对象。(2)选择新对象，单击【确定】按钮确定操作，即可改变动画条对应的对象。,9.1.3 修改时间轴动画,图9.9 改变动画的整个时间,图9.10【更改对象】对话框,9.2 将时间轴与行为结合起来,9.2.1 为时间轴附加行为9.2.2 控制时间轴的行为,9.2 将时间轴与行为结合起来,若要为时间轴中某一帧触发行为(而不是让来访者的交互去触发行为)，则将行为放置在时间轴中即可。例如，用户可以在时间轴的第15帧处开始播放声音。在时间轴中只有一种事件可以触发动作：动画到达一个指定的帧编号时(如onFrame7事件)。行为不只是影响时间轴中的对象，它可以影响

16、页面上的任何对象。在浏览器中预览时间轴以查看该行为如何工作。用户不能在Dreamweaver中预览该行为。,9.2.1 为时间轴附加行为,利用【播放时间轴】和【停止时间轴】动作，可以让用户通过单击链接或相应的按钮来开始和停止时间轴。这些动作也可以在用户鼠标经过链接、图像或其他对象时自动开始或停止。要使用【播放时间轴】和【停止时间轴】动作，具体操作如下。(1)取消时间轴上的【自己播放】复选框，单击【时间轴】面板上行为通道中的帧。(2)如图9.11所示，选择【窗口】|【行为】命令，打开【行为】面板。单击【行为】面板上的“+”按钮，并从如图9.12所示的动作菜单中选择【播放时间轴】命令，这时会打开如

17、图9.13所示的对话框。(3)从对话框中的【播放时间轴】下拉列表中选择需要播放的时间轴为“Timeline1”。(4)单击【确定】按钮确定操作，查看默认事件是否是用户需要的事件。如果该事件不是用户所需的，可以从弹出的事件菜单中选择事件为“onclick”。(5)单击【行为】面板上的“+”按钮，并从如图9.12所示的动作菜单中选择【停止时间轴】命令，这时会打开如图9.14所示的对话框。,9.2.1 为时间轴附加行为,图9.11 打开【行为】面板 图9.12 选择【播放时间轴】命令,9.2.1 为时间轴附加行为,图9.13【播放时间轴】对话框,图9.14【停止时间轴】对话框,9.2.1 为时间轴附

18、加行为,(6)从对话框中的【停止时间轴】下拉列表中选择需要停止的时间轴为“Timeline1”。(7)单击【确定】按钮确定操作，查看默认事件是否是用户需要的事件。如果该事件不是用户所需的，可以从弹出的事件菜单中选择事件为“OnDbclick”。在对时间轴对象使用了【播放时间轴】和【停止时间轴】动作后，保存文档，然后在浏览器中预览效果。图9.15所示为单击层后动画开始沿着轨迹运动。如果再次双击这个层将停止时间轴的播放。,9.2.1 为时间轴附加行为,图9.15 单击层播放时间轴动画,9.2.2 控制时间轴的行为,利用【转到时间轴帧】动作，可以将使时间轴跳到某指定帧上。【时间轴】面板中的【循环】复

19、选框的作用就是在动画的最后一帧上添加【转到时间轴帧】动作，使其跳到第一帧并重新开始动画。要使用【转到时间轴帧】动作，其具体操作如下。(1)单击【时间轴】面板上行为通道中的第50帧。(2)选择【窗口】|【行为】命令，打开【行为】面板。(3)单击【行为】面板上的“+”按钮，并从如图9.12所示的动作菜单中选择【转到时间轴帧】命令，这时会打开如图9.16所示的对话框。(4)在【时间轴】下拉列表中，可以选择需要添加行为的一条时间轴。然后在【前往帧】文本框中，输入帧名为“40”。(5)如果希望【前往帧】和当前帧之间的时间轴部分产生循环，可以在【循环】文本框中输入循环的次数为“4”。(6)单击【确定】按钮

20、确定操作，查看默认事件是否是用户需要的事件OnFrame10。在对时间轴对象使用了【转到时间轴帧】动作后，保存文档后在浏览器中预览效果如图9.17所示。当打开这个网页后，动画层在运动到第50帧位置时，这时位置如图9.17(a)所示，然后转到第40帧的位置，这时位置如图9.17(b)所示，并重复4次。,9.2.2 控制时间轴的行为,图9.16【转到时间轴帧】对话框,9.2.2 控制时间轴的行为,(a)(b),图9.17 控制时间轴的播放,9.3 用插件实现层动画效果,9.3.1 让层漂浮在窗口的固定位置9.3.2 利用插件实现滑动的层,9.3 用插件实现层动画效果,插件可以用于拓展Dreamwe

21、aver的功能。在Dreaweaver中可以利用各种插件实现层的动画效果。比如：让层按照特殊的路径运动、让层漂浮在窗口的固定位置、制作精美的滚动看板、让层跟着鼠标运动、实现层的过渡效果等。这一节将介绍如何利用插件在Dreaweaver中实现几种层的动画效果。,9.3.1 让层漂浮在窗口的固定位置,在Dreamweaver中，可以使用Nirvana Floating Layer(漂浮在天堂的层)插件方便地制作漂浮在窗口固定位置的层。在任何情况下，该层都保持在窗口的固定位置。要使用Nirvana Floating Layer插件，其具体操作如下。(1)从网上下载Nirvana Floating L

22、ayer.mxp文件，获得该插件。(2)启动插件管理器，并安装Nirvana Floating Layer.mxp插件，如图9.18所示为在插件管理器中安装好的Nirvana Floating Layer.mxp插件。(3)此插件是一个命令插件，重新运行Dreamweaver 8，即可在【命令】菜单中看见Nirvana Floating Layer命令。如图9.19所示，选择【命令】|Nirvana Floating Layer命令。这时会出现如图9.20所示的对话框。,9.3.1 让层漂浮在窗口的固定位置,图9.18 安装Nirvana Floating Layer.mxp插件,9.3.1

23、让层漂浮在窗口的固定位置,图9.19 选择Nirvana Floating Layer命令,9.3.1 让层漂浮在窗口的固定位置,图9.20 Persistent Scrolling Layer对话框,9.3.1 让层漂浮在窗口的固定位置,(4)在Top Position(距离顶部位置)文本框中，输入需要层距离浏览器顶部占浏览器高度几分之一的分母数。比如，如果层位于距离浏览器顶部1/3处，则在文本框中输入“3”。(5)单击Yes Please(请插入)按钮确定使用这个插件。(6)在文档页面中拖动出现的层，确定层距离浏览器左边的位置。在层中添加内容。比如插入一张图像或是输入一些广告性的文本。在文

24、档中添加了Nirvana Floating Layer插件，并在该插件的【属性】面板中设置好插件的属性后，用户可以在浏览器中预览固定于滚动条的层的效果。在打开这个添加了Nirvana Floating Layer插件的网页时，用户可以观察到这个层很快就垂直漂浮到距离浏览器顶部1/3处的位置，如图9.21所示。不论浏览者拖动窗口的滚动条，还是改变浏览器的窗口大小，该层都保持在窗口的这个位置。图9.22所示为拖动滚动条后这个层的位置。,9.3.1 让层漂浮在窗口的固定位置,图9.21 打开页面时固定在滚动条的层,9.3.1 让层漂浮在窗口的固定位置,图9.22 拖动滚动条后固定在滚动条的层,9.3

25、.2 利用插件实现滑动的层,在Dreamweaver中可以使用Slide Layer(滑动层)插件方便地实现层在网页页面中的滑动效果。它比利用时间轴制作的滑动层动画更方便、更有趣。要使用Layer Slider(滑动层)插件，其具体操作如下。(1)从网上下载flevSlideDiv231.Mxp文件，获得该插件。(2)启动插件管理器，并安装flevSlideDiv231.Mxp插件，图9.23所示为在插件管理器中安装好的flevSlideDiv231.Mxp插件。(3)重新启动Dreamweaver 8，在文档窗口中，选中要附加行为的对象。(4)选择【窗口】|【行为】命令，打开【行为】面板。单

26、击【行为】面板中的“+”按钮，并从如图9.24所示的动作菜单中选择Flev00ware|Slide Layer(滑动层)命令。这时会出现如图9.25所示的对话框。,9.3.2 利用插件实现滑动的层,图9.23 安装flevSlideDiv231.Mxp插件,9.3.2 利用插件实现滑动的层,图9.24 选择Layer Slider命令 图9.25 Slider Layer对话框,9.3.2 利用插件实现滑动的层,(5)在Select layer(层的名称)下拉列表中，选择需要添加滑动效果的层为Layer5。(6)在Left(新的距离窗口左边位置)文本框中，输入层滑动终点距离浏览器窗口左边位置的

27、像素值为“400”。在Top(新的距离窗口顶部位置)文本框中，输入层滑动终点距离浏览器窗口顶部位置的像素值为“400”。在Constant speed(固定速度)选项组中输入3(Px)20(ms)，设置速度为3像素每20ms。(7)单击【确定】按钮确定操作。在文档页面中拖动这个层，确定层滑动初始的位置。为层添加Layer Slider(滑动层)插件，并在插件的【属性】面板中设置好插件的属性后，用户可以在浏览器中预览这个滑动层的效果。在打开这个添加了Slide Layer插件的页面时，单击图像后，用户可以观察到这个层慢慢地滑向浏览器的右下方，如图9.26所示。,9.3.2 利用插件实现滑动的层,

28、图9.26 滑动层效果,9.4 精彩的网页过渡效果,9.4.1 使用插件实现网页过渡9.4.2 插入元数据实现网页过渡,9.4 精彩的网页过渡效果,网页过渡是指当进入、离开网站或网页时，页面具有不同的刷新方法。添加此效果可以使网页更具动感。在这一节中我们将利用插件和插入元数据两种方法，来实现精彩的网页过渡效果。,9.4.1 使用插件实现网页过渡,在Dreamweaver中可以使用Page Transtions(网页过渡)插件方便地实现各种网页的过渡效果。比如：从页面四周收缩到一个点、从一个点扩展为整个页面、从上下收缩为一条横线、从一条横线上下扩展为整个页面、从左右收缩为一条竖线、从一条竖线左右

29、扩展为整个页面、从上收缩为一条横线、从下收缩为一条横线、从左收缩为一条竖线和从右收缩为一条竖线等效果。要使用Page Transtions插件，具体操作如下。(1)从网上下载Page Transtions.mxp文件，获得该插件。(2)启动插件管理器，并安装Page Transtions.mxp插件，图9.27所示为在插件管理器中安装好的Page Transtions.mxp插件。(3)此插件是一个命令插件，重新运行Dreamweaver 8，即可在【命令】菜单中看到Page Transtions命令。选择【命令】|Page Transtions命令，如图9.28所示，这时会出现如图9.29所

30、示的对话框。,9.4.1 使用插件实现网页过渡,图9.27 安装Page Transtions.mxp插件,9.4.1 使用插件实现网页过渡,图9.28 选择Page Transtions命令 图9.29 设置Page Transitions对话框,9.4.1 使用插件实现网页过渡,(4)选中Page Enter(网页页面进入)复选框，并在其后的下拉列表中选择载入页面时的过渡效果为Box In(方形收缩)。在后面的for下拉列表中，选择页面载入过渡效果的时间为“3”，单位为秒。(5)选中Page Exit(网页页面推出)复选框，并选中Same as above(同上面一样)单选按钮。为网页添加

31、了Page Transtions(网页过渡)插件，并在插件的【属性】面板中设置好插件的属性后，用户可以在浏览器中预览这个网页过渡的效果。可以按照下列步骤进行操作。在打开这个添加了Page Transtions(网页过渡)插件的网页后，用户可以观察到这个页面慢慢地过渡到另一个页面，如图9.30所示。,9.4.1 使用插件实现网页过渡,图9.30 网页过渡效果,9.4.2 插入元数据实现网页过渡,在Dreaweaver同样可以利用菜单命令来设置网页的过渡模式。要使用Meta(元数据)命令实现网页过渡，其具体操作如下。(1)选择【修改】|【页面属性】命令，如图9.31所示，这时会出现如图9.32所示

32、的对话框。(2)利用【背景颜色】颜色框为页面背景选择颜色。或者在【背景图像】文本框中，为页面背景选择背景图片。然后单击【确定】按钮确定。(3)选择【查看】|【文件头内容】命令，如图9.33所示，显示文档窗口的头部。然后，选择【插入】|HTML|【文件头标签】|Meta(元数据)命令，如图9.34所示，这时会出现如图9.35所示的对话框。(4)在【属性】下拉列表中，选择HTTP-equivalent(HTTP等价属性)选项。在【值】文本框中，输入“Page-Enter”(网页页面进入)，表示进入网页时有网页过渡效果。(5)在【内容】文本框中，输入“RevealTrans(Duration=n,T

33、ransition=3)”，“Duration”为“n”表示网页过渡效果的延续时间为 n 秒，“Transition”表示过渡效果方式，值为“3”时表示圆形展开。,9.4.2 插入元数据实现网页过渡,图9.31 选择【页面属性】命令 图9.32【页面属性】对话框,9.4.2 插入元数据实现网页过渡,图 9.33 选择【文件头内容】命令 图 9.34 插入Meta命令,9.4.2 插入元数据实现网页过渡,图9.35 设置META对话框,9.4.2 插入元数据实现网页过渡,(6)设置完毕后，单击【确定】按钮确定插入元数据。为网页插入Meta(元数据)后，用户可以在浏览器中预览这个网页过渡的效果。当

34、完成网页编辑存盘并再次打开该网页时，网页以如图9.36所示的圆形展开方式显示网页上的内容。在网页设计时，有25种网页过渡效果，用户可以尝试这些不同的网页过渡效果。,9.4.2 插入元数据实现网页过渡,图9.36 网页过渡效果,9.5 上 机 实 战,本节上机实战要求利用插件实现网页中层的过渡效果。1.实战目的通过该实战训练让读者学会利用插件实现网页中层的过渡效果。2.实战步骤在Dreamweaver中可以使用Layer transitions(层过渡)插件方便地实现层在网页页面中的滑动效果。要使用Layer transitions(层过渡)插件，其具体操作如下。(1)从网上下载layer_tr

35、ansitions.Mxp文件，获得该插件。(2)启动插件管理器，并安装layer_transitions.Mxp插件。(3)重新启动Dreamweaver 8，在文档窗口中，选中要附加行为的层。(4)选择【窗口】|【行为】命令，打开【行为】面板。单击【行为】面板中的“+”按钮，并从如图9.37所示的动作菜单中选择Layer transitions(层过渡)命令，这个命令有10个选项，分别代表10种过渡效果，这里选择Layer Box In。这时会出现如图9.38所示的对话框。,9.6 习 题,1 单项选择题 2 多项选择题 3 判断题 4 问答题,9.6 习 题_单项选择题,(1)下列选项中

36、，关于时间轴与层关系的说法正确的是。A只能改变层的位置 B只能改变层的大小C只能改变层的位置和可见度 D可以改变层的位置、大小和可见度(2)利用时间轴做动画效果，如果想要一个动作在页面载入5s启动，并且是15帧/s的效果，那么起始关键帧应该设置在时间链的。A第1帧 B第45帧C第60帧 D第5帧(3)Dreamweaver打开帧面板的快捷操作是。AF11 BShift+F2CCtrl+F11 DF4,9.6 习 题_多项选择题,(1)每个时间链开始都是包括 两个关键帧。A开始 B结束C关键帧 D主帧(2)帧分为 两部分？A帧头 B分帧文档C帧尾 D帧(3)在时间轴属性检测器中设置 来改变一个动画的长度。A选择起始关键帧并将它向右拖动到一个新的帧上B选择结束关键帧并将它向左拖动到一个新的帧上C选择结束关键帧来覆盖附加帧 D改变“Fps”中的帧速率,9.6 习 题_ 判断题,(1)时间轴中只能改变层的大小。()(2)在时间轴上可以创建复杂轨迹的动画。()(3)在Dreamweaver中只能创建一个时间轴。(),9.6 习 题_问答题,(1)Dreamweaver中的【时间轴】面板包括哪些部分？功能各是什么？(2)简述创建时间轴动画的步骤。(3)什么是网页过渡？(4)如何分别利用扩展插件和元数据实现动画的网页过渡？,Q&A?Thanks!,