任务十四网页特效—时间轴 - 幻灯片1.pptVIP

项目五 美化网页 技能目标 时间轴在页面中的创新运用。 了解对象加载到时间轴的载体运用。 知识目标 理解时间轴面板及关键帧的概念。 掌握如何在页面中创建时间轴动画。 掌握时间轴复杂曲线运动的制作。 5.4.1 使用时间轴制作页面特效 5.4.2 问题探究—层与时间轴 工作任务 利用时间轴，可以方便地更改AP元素的位置、大小、可见性和堆叠顺序。本任务利用时间轴直接改变图像和图层的属性，不借助外部的控件和插件，用户也能自如地运用时间轴为页面增添令人眼花缭乱的动态效果。 工作流程 在现有页面中创建时间轴动画，实现图片在页面中的飘浮。 在页面的指定位置通过时间轴实现图片的切换效果。 层与时间轴 在DreamweaverCS3中层配合时间轴的运用，能够在网页中创建不需要使用任何ActiveX控件、插件或JavaApplet（但需要JavaScript）的动画效果。时间轴使用动态HTML（即DHTML）来更改AP元素和图像在一段时间内的属性，整个时间轴由许多帧构成，这些帧在页面中的连续播放构成时间轴动画。动态HTML是HTML与一种脚本语言的组合，可以使用该脚本语言更改HTML元素的样式或定位属性。 层与时间轴 若要查看由时间轴生成的JavaScript代码，单击“代码视图”，时间轴代码位于MM_initTimelines()函数中，注意该函数在文档的文件头部分的脚本标签中。当编辑包含时间轴的文档时，不能移动、重命名或移除时间所引用的任何内容。 1、时间轴面板 时间轴面板显示了AP元素和图像的属性如何随时间更改。单击菜单栏中的“窗口/时间轴”（ 或按下快捷键Alt+F9）命令，打开时间轴面板，如图所示。 该面板各参数意义如下： 关键帧：小圆标签表示关键帧，用来定义动画条中已经为对象指定属性（如位置）的帧。DreamweaverCS3会自动计算相邻关键帧之间对象发生的动作。 行为通道：显示时间轴上对应时间内特定帧处执行的行为，使用浅蓝色方块表示存在的行为。 时间轴菜单：在该下拉列表中指定当前时间轴。如果文档中包含有多个时间轴，它们将被列举在该下拉列表中。 动画通道：显示层和图像的动画条。 动画条：显示每个对象的动画持续时间。在一个动画通道行上可以包含不同对象的多个动画条，不同的动画条无法控制同一帧中的同一个对象。 自动播放：当前页面在浏览器中加载时，时间轴自动开始播放。它将一个行为附加到当前页面的body标签中，该行为即可在当前页面加载时执行“播放时间轴”动作。 循环：当前页面在浏览器中加载时，时间轴无限期地循环。当动画播放到最后一帧会自动跳转到指向的帧（即行为通道中行为标签指定的帧）。 2、创建时间轴动画 时间轴用于表示网页活动期间发生的各种状态，在时间轴上不同的时间点放置不同的内容，从而实现页面元素的动画效果。 单击菜单栏中的“插入记录/布局对象/AP Div”命令，绘制层AP Div，然后在AP Div中插入文字或图片。 选择文档中的AP Div，按下鼠标左键，并将其拖动到时间轴面板中，DreamweaverCS3自动生成15帧动画。选择第15帧，再选中AP Div，按住鼠标左键向任意方向拖动改变原始位置。如图所示。 在时间轴面板上选中“自动播放”和“循环”复选框，按下F12键浏览网页，就可以预览到沿直线运动的文字效果。若要使动画播放时间更长，在时间轴面板选择结束帧标签向右拖动。动画中的所有关键帧都会随之移动，保持它们的相对保持不变。若要阻止其他关键帧的移动，按住“Ctrl”再拖动结束帧标签，其他关键帧在动画中的位置保持不变。 若要修改时间轴动画某帧的位置，选择该帧单击鼠标右键，在弹出的菜单中选择“增加关键帧”命令（或）按住Ctrl键单击左键增加一个关键，选中该帧后拉动APDiv调整位置，从而改变APDiv的运动轨迹。如图所示。 如果期望延长动画播放时间，选中结束帧标签向后拖动，动画中的所有关键帧都会随之移动，并保持它们之间的相对性不变。若要阻止其他关键帧的移动，按住“Ctrl”再拖动某一帧关键帧（或最后一帧），其他关键帧在动画中的相对位置保持不变。 若要创建更复杂的路径动画，更为有效的方法是记录拖动AP元素时经过的路径，而不是创建各个关键帧。选中AP Div单击鼠标右键，在弹出的菜单中选择“记录路径”命令，按下鼠标左键在设计窗口绘制运动路径，在时间轴面板自动生成系列帧。如图所示。可以把多个AP Div拖入不同的动画通道制作多层AP Div动画特效。 * * Dreamweaver CS3 项目教程 任务十四 网页特效