《网页设计与制作》教案-第22讲 网页特效-时间轴.docx

第 22 讲 网页特效-时间轴1.1 教学目标：u 知识目标1. 理解时间轴面板及关键帧的概念2. 掌握如何在页面中创建时间轴动画3. 掌握时间轴复杂曲线运动的制作u 技能目标能运用时间轴的制作页面动态效果u 品质目标培养学生认真细致、勇于创新的精神1.2 教学重点：1. 掌握如何在页面中创建时间轴动画2. 掌握时间轴复杂曲线运动的制作31.3 教学难点掌握时间轴复杂曲线运动的制作1.4 教学方法：讲练结合，任务驱动、分子任务操练1.5 课时安排：2 课时1.6 教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识1.7 教学过程：一、激趣导入，揭示课题前面我们学习的都是如何制作一个静态的网页，但是我们从网上看到的很多网页都有各种各 样的动态效果，那么是不是我们也能制作出像他们一样的漂亮的网页来呢，没错，不用怀疑， 你也可以，接下来我们就来学习如何自己利用 dreamweaver 自带的时间轴来实现多种动态页面效果二、层与时间轴在 DreamweaverCS6 中层配合时间轴的运用，能够在网页中创建不需要使用任何ActiveX 控件、插件或 JavaApplet（但需要 JavaScript）的动画效果。

时间轴使用动态 HTML（即 DHTML） 来更改AP 元素和图像在一段时间内的属性，整个时间轴由许多帧构成，这些帧在页面中的连续播放构成时间轴动画动态 HTML 是 HTML 与一种脚本语言的组合，可以使用该脚本语言更改 HTML 元素的样式或定位属性若要查看由时间轴生成的 JavaScript 代码，单击“代码视图” ，时间轴代码位于MM_initTimelines()函数中，注意该函数在文档的文件头部分的脚本标签中当编辑包含时间轴的文档时，不能移动、重命名或移除时间所引用的任何内容1、时间轴面板时间轴面板显示了 AP 元素和图像的属性如何随时间更改单击菜单栏中的“窗口/时间轴”（ 或按下快捷键Alt+F9）命令，打开时间轴面板，如图所示2、该面板各参数意义关键帧：小圆标签表示关键帧，用来定义动画条中已经为对象指定属性（如位置）的帧DreamweaverCS6 会自动计算相邻关键帧之间对象发生的动作行为通道：显示时间轴上对应时间内特定帧处执行的行为，使用浅蓝色方块表示存在的行为时间轴菜单：在该下拉列表中指定当前时间轴如果文档中包含有多个时间轴，它们将被列举在该下拉列表中动画通道：显示层和图像的动画条。

动画条：显示每个对象的动画持续时间在一个动画通道行上可以包含不同对象的多个动画条，不同的动画条无法控制同一帧中的同一个对象自动播放：当前页面在浏览器中加载时，时间轴自动开始播放它将一个行为附加到当前页面的 body 标签中，该行为即可在当前页面加载时执行“播放时间轴”动作循环：当前页面在浏览器中加载时，时间轴无限期地循环当动画播放到最后一帧会自动跳转到指向的帧（即行为通道中行为标签指定的帧）三、创建时间轴动画时间轴用于表示网页活动期间发生的各种状态，在时间轴上不同的时间点放置不同的内容，从而实现页面元素的动画效果单击菜单栏中的“插入记录/布局对象/AP Div”命令，绘制层 AP Div，然后在 AP Div 中插入文字或图片选择文档中的AP Div，按下鼠标左键，并将其拖动到时间轴面板中，DreamweaverCS6 自动生成 15 帧动画选择第 15 帧，再选中 AP Div，按住鼠标左键向任意方向拖动改变原始位置在时间轴面板上选中“自动播放”和“循环”复选框，按下 F12 键浏览网页，就可以预览到沿直线运动的文字效果若要使动画播放时间更长，在时间轴面板选择结束帧标签向右 拖动动画中的所有关键帧都会随之移动，保持它们的相对保持不变。

若要阻止其他关键帧 的移动，按住“Ctrl”再拖动结束帧标签，其他关键帧在动画中的位置保持不变若要修改时间轴动画某帧的位置，选择该帧单击鼠标右键，在弹出的菜单中选择“增加 关键帧”命令（或）按住Ctrl 键单击左键增加一个关键，选中该帧后拉动APDiv 调整位置， 从而改变APDiv 的运动轨迹如果期望延长动画播放时间，选中结束帧标签向后拖动，动画中的所有关键帧都会随之 移动，并保持它们之间的相对性不变若要阻止其他关键帧的移动，按住“ Ctrl”再拖动某一帧关键帧（或最后一帧），其他关键帧在动画中的相对位置保持不变若要创建更复杂的路径动画，更为有效的方法是记录拖动AP 元素时经过的路径，而不是创建各个关键帧选中AP Div 单击鼠标右键，在弹出的菜单中选择“记录路径”命令，按下鼠标左键在设计窗口绘制运动路径，在时间轴面板自动生成系列帧如图所示可以把多个 AP Div 拖入不同的动画通道制作多层AP Div 动画特效1.8 归纳总结：本讲介绍了时间轴面板及关键帧的概念如何在页面中创建时间轴动画时间轴复杂曲线运动的制作1.9 课后作业题：1. 什么是时间轴、关键帧？2. 什么是动画通道？3. 什么是动画条？。