《网页设计实用教程》第07章

《《网页设计实用教程》第07章》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、21世纪计算机系列教程网页设计实用教程电子教案退出第7章DreamweaverMX时间轴例子见：第七章网校地址导航图.htm学习目的：时间轴面板时间轴的应用关键帧的应用录制层路径编辑时间轴动画用时间轴改变层属性本章概述：本章任务是设计一个具有动态效果的网页，表现在一个网校地址的导航图上。设计动态地址导航图，利用到了时间轴的知识，时间轴概念是DreamweaverMX网页设计中的又一道特色菜，利用它与层和行为面板结合，可以设计出许多具有精彩特技效果的网页来。本章结合实例，对时间轴的概念及应用作了详细介

2、绍。通过本讲的学习，读者可具备制作具有动态效果网页的能力。本小节将利用时间轴，来制作一个网校动态地址导航图，网页完成后的效果如图7-1所示。网页中的动态地址导航图由一个动画卡通向导和一幅地图构成，从起点站到目的地，沿途要经过一些站点，每经过一个站点时，卡通向导要停留片刻，同时会弹出一段文字，看上去就像是向导在对每处停留地进行解说一样，通过该网页，浏览者能对通往目的地的路径留下深刻的印象。整个网校地址导航图的制作可分为素材准备、设计层、设计动画三个阶段，下面分别予以介绍。图7-1网校动态地址导航图7.

3、1制作一个动态地址导航图1.网页设计素材准备网校图片、动画向导图片、地图图7-2网页设计素材2.设计层图7-3图7-42.设计层-2图7-5图7-63.设计动画图7-7提示：按（Ctrl+Alt+Shift+T），可以将时间轴控制面板打开。3.设计动画-2图7-7图7-8图7-93.设计动画-3图7-11图7-103.设计动画-4图7-13图7-123.设计动画-5图7-147.2知识要点上一小节，介绍了一个网校地址动态导航的网页的制作过程，在设计过程中，可以看到，网页的动态效果完全依赖于Dream

4、weaverMX时间轴来实现。本小节将对时间轴在网页设计中的一些知识要点进行介绍时间轴是DreamweaverMX软件优越于其他网页设计软件的一个重要表现，用时间轴做动画可以满页飞，动画的实现主要是通过幕后JavaScript语句来完成的，设计者在设计时不必懂得JavaScript，DreamweaverMX会自动转化，依赖时间轴设计的动画又是建立在图层基础上的，可以说利用时间轴设计动画效果是图层的应用体现。7.2.1时间轴控制面板时间轴选择框回退后退前进FPS：动画播放速度自动播放：在浏览器中打开

5、正确看到时间轴动画循环播放：实现动画循环播放行为通道：（Behavior）B标志时间轴动画通道:时间轴面板上的动画通道一共有（32）条。播放头动画条关键帧操作菜单图7-15时间轴控制面板关键帧动画条播放头时间轴选择框回退后退前进帧数自动播放行为通道循环播放动画通道时间轴操作菜单7.2.1时间轴控制面板图7-15时间轴控制面板1.关键帧的应用本章第一节制作的动态效果网页中，图层在移动时，全部是直线运动，第七章一只小鸟直线飞行-关键帧的应用.htm如果要使用层的运动变为曲线，就需要利用到关键帧的知识。第

6、七章一只小鸟曲线飞行-关键帧的应用.htm7.2.2时间轴的基本应用注意：创建时间轴动画有几种方法：1、拖动2、修改时间轴添加对象到时间轴3、单击时间轴面板按钮“”添加对象图7-16图7-17单击时间轴面板按钮“”弹出菜单：增加关键帧（在第7帧）图7-18图7-192.录制层路径按照上一例的方法来创建较为复杂的运动，显然会花费许多时间。Dreamweaver提供了一种叫“录制层路径”的高效而简单的方法，可以让网页设计者快速完成复杂的动画设计。例子见：第七章一只飞翔的小鸟-录制层路径修改时

7、间轴录制层路径图7-20图7-21图7-22自动增加关键帧3.编辑时间轴动画编辑时间轴动画主要有以下几项：增加或缩短动画播放时间：在时间轴控制面板中，通过拖动动画条的第1关键帧或最后一个关键帧，可以改变整个动画播放时间。在拖动的过程中，所有的关键帧将自动按比例发生位移。例如：这里将一动画条的关键帧由250帧，左移到230帧。如图7-23所示是未改变时间长度时，如图7-24所示是缩短时间长度后。不想让各关键帧的位置随总长度的变化而变化，按【Ctrl】键即可，这样只是被拖动的关键帧的长度发生了改变。如

8、图7-25所示，只是最后一帧的长度发生的改变。图7-23图7-24图7-25按（Ctrl）键，在拖动动画条的最后一个关键帧时，只有最后一帧的长度发生的改变。编辑时间轴动画-2改变动画的开始时间：只要选中一个或多个动画条，向左或向右移动即可。按下【Shift】键可以同时选中多个动画条。修改关键帧：选取要修改的关键帧，左移或右移，可以改变关键帧发生的时间，而不会影响其他关键帧在时间轴上的位置。添加或删除帧：当动画设计完成后，需要调整动画局部的时间关系。在时间轴面板要添加或