• 1. 主讲:网页设计与制作——Dreamweaver 8
  • 2. 项目十 使用时间轴制作动画任务一 使用层设置公园背景和标题任务二 使用时间轴设置运动效果项目十: 使用时间轴制作动画网页设计与制作Dreamweaver 8任务一小 结任务二实 训
  • 3. 任务一 使用层设置公园背景和标题 本任务将首先使用层布局页面中的公园地图及标题等内容。关于层的基本知识在项目九已作详细介绍,经过本任务的学习,读者可以进一步巩固其具体应用。Dreamweaver 8网页设计与制作项目十: 使用时间轴制作动画 关于本任务的基本操作过程是: (1)创建一个层“MapLayer”,宽度设置为“800px”,高度设置为“480px”,背景图像设置为“images/map.gif”。 使用层设置公园背景和标题操作动画任务一小 结任务二实 训
  • 4. (2)在层“MapLayer”中插入一个嵌套层“TitleLayer”并进行属性设置。 Dreamweaver 8网页设计与制作项目十: 使用时间轴制作动画任务一 使用层设置公园背景和标题 (3)设置CSS样式并输入文本“公园导游图”。任务一小 结任务二实 训
  • 5. 时间轴是与层密切相关的一项功能,它可以在Dreamweaver中实现动画的效果。通过时间轴,可以让层的位置、尺寸、可视性和重叠次序随着时间的变化而改变,从而创建出具有Flash效果的动画。本任务主要是利用时间轴制作人沿着公园道路前进的效果。 通过本任务的学习,需要掌握的内容有: 1、了解【时间轴】面板并掌握其使用方法 Dreamweaver 8网页设计与制作项目十: 使用时间轴制作动画任务二 使用时间轴设置运动效果使用时间轴设置运动效果操作动画任务一小 结任务二实 训
  • 6. 2、添加对象到时间轴 在主菜单中选择【窗口】/【时间轴】命令打开【时间轴】面板,然后选定对象,并在主菜单中选择【修改】/【时间轴】/【添加对象到时间轴】命令将对象添加到【时间轴】面板或者将对象直接拖曳到【时间轴】面板。 Dreamweaver 8网页设计与制作项目十: 使用时间轴制作动画任务二 使用时间轴设置运动效果 3、快速创建一个复杂路径的时间轴动画的方法 如果需要创建具有复杂运动路径的动画,可以使用录制层路径功能。首先在主菜单中选择【修改】/【时间轴】/【录制层路径】命令,然后在文档中拖动层来录制路径,最后在动画要停止的地方释放鼠标左键, 这时将自动在【时间轴】面板中添加对象,并且较为合理地创建了一定数目的关键帧。也可以根据实际情况对各关键帧的位置适当进行调整使其更为合理。 任务一小 结任务二实 训
  • 7. 4、改变时间轴动画播放时间的方法 在【时间轴】面板中拖动最后一个关键帧可以改变整个动画的播放时间,往右拖动是延长播放时间,往左拖动是缩短播放时间。 5、设置时间轴动画为自动循环播放的方法 在【时间轴】面板中勾选【自动播放】和【循环】两个复选框,可使时间轴动画在页面打开时能够自动循环播放。Dreamweaver 8网页设计与制作项目十: 使用时间轴制作动画任务二 使用时间轴设置运动效果任务一小 结任务二实 训
  • 8. 实训 制作飞机飞行动画 本项目着重介绍了利用层和时间轴制作动画的基本方法。实训将使用层和时间轴制作如图所示的飞机飞行动画,以进一步巩固时间轴的应用。Dreamweaver 8网页设计与制作项目十: 使用时间轴制作动画实训结果文件见“项目结果”文件夹中的“shixun.htm”。【实训目的】 进一步认识时间轴的作用。 进一步巩固手动创建时间轴动画的基本方法。 进一步巩固利用时间轴改变图像与层属性的方法。 任务一小 结任务二实 训
  • 9. 实训 制作飞机飞行动画Dreamweaver 8网页设计与制作项目十: 使用时间轴制作动画任务一小 结任务二实 训
  • 10. 小结 本项目通过公园导游图动画介绍了时间轴的一些基本功能和方法,同时也让读者对层这个概念有了更进一步的了解。时间轴和层就像一对钥匙和锁,只有将它们配成对,才能打开网页动画的大门。 Dreamweaver 8网页设计与制作项目十: 使用时间轴制作动画任务一小 结任务二实 训