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

21世纪计算机系列教程,网页设计实用教程 电子教案,退出,第7章 Dreamweaver MX时间轴,例子见： 第七章网校地址导航图.htm,学习目的：,时间轴面板 时间轴的应用 关键帧的应用 录制层路径 编辑时间轴动画 用时间轴改变层属性,本章概述：,本章任务是设计一个具有动态效果的网页， 表现在一个网校地址的导航图上。 设计动态地址导航图，利用到了时间轴的知识， 时间轴概念是Dreamweaver MX网页设计中的又一道特色菜， 利用它与层和行为面板结合，可以设计出许多具有精彩特技效果的网页来。 本章结合实例，对时间轴的概念及应用作了详细介绍。 通过本讲的学习，读者可具备制作具有动态效果网页的能力。,本小节将利用时间轴，来制作一个网校动态地址导航图，网页完成后的效果如图7-1所示。 网页中的动态地址导航图由一个动画卡通向导和一幅地图构成， 从起点站到目的地，沿途要经过一些站点，每经过一个站点时， 卡通向导要停留片刻，同时会弹出一段文字，看上去就像是向导在对每处停留地进行解说一样， 通过该网页，浏览者能对通往目的地的路径留下深刻的印象。 整个网校地址导航图的制作可分为素材准备、设计层、设计动画三个阶段，下面分别予以介绍。,图7-1 网校动态地址导航图,7.1 制作一个动态地址导航图,1. 网页设计素材准备,网校图片、动画向导图片、地图,图7-2网页设计素材,2. 设计层,图7-3,图7-4,2. 设计层-2,图7-5,图7-6,3. 设计动画,图7-7,提示：按（Ctrl+Alt+Shift+T ），可以将时间轴控制面板打开。,3. 设计动画-2,图7-7,图7-8,图7-9,3. 设计动画-3,图7-11,图7-10,3. 设计动画-4,图7-13,图7-12,3. 设计动画-5,图7-14,7.2 知识要点,上一小节，介绍了一个网校地址动态导航的网页的制作过程， 在设计过程中，可以看到，网页的动态效果完全依赖于Dreamweaver MX时间轴来实现。 本小节将对时间轴在网页设计中的一些知识要点进行介绍,时间轴是Dreamweaver MX软件优越于其他网页设计软件的一个重要表现， 用时间轴做动画可以满页飞，动画的实现主要是通过幕后JavaScript语句来完成的， 设计者在设计时不必懂得JavaScript，Dreamweaver MX会自动转化， 依赖时间轴设计的动画又是建立在图层基础上的， 可以说利用时间轴设计动画效果是图层的应用体现。,7.2.1 时间轴控制面板,时间轴选择框 回退 后退 前进 FPS：动画播放速度 自动播放：在浏览器中打开正确看到时间轴动画 循环播放：实现动画循环播放 行为通道： （Behavior）B标志 时间轴 动画通道:时间轴面板上的动画通道一共有（ 32）条。 播放头 动画条 关键帧 操作菜单,图7-15 时间轴控制面板,7.2.1 时间轴控制面板,图7-15 时间轴 控制面板,1. 关键帧的应用 本章第一节制作的动态效果网页中，图层在移动时，全部是直线运动， 第七章一只小鸟直线飞行-关键帧的应用.htm 如果要使用层的运动变为曲线，就需要利用到关键帧的知识。 第七章一只小鸟曲线飞行-关键帧的应用.htm,7.2.2 时间轴的基本应用,注意： 创建时间轴动画有几种方法： 1、拖动 2、修改 时间轴 添加对象到时间轴 3、单击时间轴面板按钮“” 添加对象,图7-16,图7-17,单击时间轴面板按钮“” 弹出菜单：增加关键帧（在第7帧）,图7-18,图7-19,2. 录制层路径 按照上一例的方法来创建较为复杂的运动，显然会花费许多时间。 Dreamweaver 提供了一种叫“录制层路径”的高效而简单的方法，可以让网页设计者快速完成复杂的动画设计。 例子见： 第七章一只飞翔的小鸟-录制层路径,修改 时间轴 录制层路径,图7-20,图7-21,图7-22 自动增加关键帧,3. 编辑时间轴动画 编辑时间轴动画主要有以下几项： 增加或缩短动画播放时间： 在时间轴控制面板中，通过拖动动画条的第1关键帧或最后一个关键帧，可以改变整个动画播放时间。 在拖动的过程中，所有的关键帧将自动按比例发生位移。 例如：这里将一动画条的关键帧由250帧，左移到230帧。 如图7-23所示是未改变时间长度时， 如图7-24所示是缩短时间长度后。 不想让各关键帧的位置随总长度的变化而变化，按【Ctrl】键即可， 这样只是被拖动的关键帧的长度发生了改变。 如图7-25所示，只是最后一帧的长度发生的改变。,图7-23,图7-24,图7-25,按（ Ctrl ）键，在拖动动画条的最后一个关键帧时，只有最后一帧的长度发生的改变。,编辑时间轴动画-2,改变动画的开始时间： 只要选中一个或多个动画条，向左或向右移动即可。按下【Shift】键可以同时选中多个动画条。 修改关键帧： 选取要修改的关键帧，左移或右移，可以改变关键帧发生的时间，而不会影响其他关键帧在时间轴上的位置。 添加或删除帧： 当动画设计完成后，需要调整动画局部的时间关系。 在时间轴面板要添加或删除帧的位置上，右击鼠标，在弹出的快捷菜单上选择“添加帧”或“移除帧”命令。 复制动画： 利用此功能，可以重复利用已经做好的动画。 操作的方法是先选取要复制的动画条，然后右击鼠标，在弹出的快捷菜单上选择“拷贝”命令，最后再在时间轴上要复制的位置右击鼠标，在弹出的快捷菜单上选择“粘贴”命令。,4. 用时间轴改变层的属性 使用时间轴可以改变层的属性，使层具有更加丰富的变化。其实， 层在运动过程中，其属性面板上的“宽”、“高”、“左”、“上”等属性值已自动发生改变， 此外层的大小，层的“z轴”次序也是可以改变的， 例子见： 第七章飞翔的鸟群变化-用时间轴改变层的属性,1、Layer1的背景图像 2、修改 时间轴 录制层路径,图7-26,图7-27,图7-28,本章通过制作一个网校地址导航图的网页为实例，引入了网页制作中时间轴的概念， 时间轴的应用主要涉及的知识有 时间轴动画的创建、 关键帧的应用、 录制层路径的应用、 时间轴动画的编辑等。,7.3 本章小结,7.4习题与操作题,习题 【选择题】 （1）按下（ ）键可以同时选中多个动画条。 A、【Shift】B、【Ctrl】 C、【Alt】 D、【Ctrl+Alt】 （2）按（ ），可以将时间轴控制面板打开。 A、【 Ctrl+Alt+Shift+T 】 B、双击 C、右击 D、拖动 （3）Dreamweaver MX的时间轴面板上的动画通道一共有（ ）条。 A、8 B、16 C、32 D、64 （4）按（ ）键，在拖动动画条的最后一个关键帧时，只有最后一帧的长度发生的改变。 A、【Shift】 B、【Ctrl】 C、【Alt】 D、【Ctrl+Alt】,【填空题】,（1）要在浏览器中正确看到时间轴动画，一定要选择时间轴面板的（ ）。 （2）选择时间轴面板的（ ）选项，可以实现动画循环播放。 （3）在时间轴控制面板中，通过拖动动画条的第1关键帧或最后一个关键帧，可以改变（ ）。 （4）选中一个或多个动画条，向左或向右移动可改变动画（ ）时间。 （5）层在运动过程中，其属性面板上的（ ）等属性值会自动发生改变。 （6）Dreamweaver MX提供的（ ）是一种高效而简单时间轴动画制作方法。,【简答题】,（1）时间轴面板有哪些功能选项？ （2）什么是关键帧？ （3）可以从哪些