项目十 时间轴──制作航行动画 （课件）-高二《网页设计与制作》同步教学（人民邮电版）

项目十 时间轴──制作航行动画 使用层制作蓝天大海背景 任务一 使用时间轴制作运动效果 任务二 任务一 使用层制作蓝天大海背景 【操作步骤】 1.首先在Dreamweaver 8中定义一个本地静态站点，然后将“项目素材”文件夹中的内容复制到站点根文件夹下。 2.在网站根文件夹下面新建一个网页文档并保存为“index.htm”。 3.在菜单栏中选择【插入】／【布局对象】／【层】命令，在文档中插入一个层，如图所示。 4.在层【属性】面板中，将层编号修改为“seaLayer”，设置左边距和上边距均为“0px”，宽度为“1024px”，高度为“819px”，背景图像为“images/sea.jpg”，如图所示。 5.将鼠标光标置于层“seaLayer”中，然后在菜单栏中选择【插入】／【布局对象】／【层】命令，在文档中插入一个嵌套层“TitleLayer”，属性设置如图所示。 6.在【CSS样式】面板中，双击样式名称“sailLayer”，打开【#SailLayer的CSS规则定义】对话框，设置字体为“黑体”，大小为“36像素”，粗细为“粗体”，颜色为“#FF0000”，如图所示。 7.在层中输入文本“海上航行”，如图所示。至此，页面中的大海背景图和标题已经设置完毕。 【操作步骤】 1.将鼠标光标置于层“seaLayer”中，然后在菜单栏中选择【插入】／【布局对象】／【层】命令，在层中插入一个嵌套层“sailLayer”，其属性设置如图所示。 2.在层中插入图像“images/sail_2.gif”，在【属性】面板中设置图像名称为“sail”，替换文本为“帆船”，如图所示。 任务二 使用时间轴制作运动效果 3.在菜单栏中选择【窗口】／【时间轴】命令，打开【时间轴】面板，然后在【层】面板中选定层“SealLayer”。 4.在菜单栏中选择【修改】／【时间轴】／【增加对象到时间轴】命令，将层添加到【时间轴】面板，也可以将层直接拖曳到【时间轴】面板，如图所示。 5.在【时间轴】面板中拖动最后一个关键帧到第65帧处，以延长整个动画的播放时间，如图所示。 6.将播放头移到第25帧处，然后在菜单栏中选择【修改】／【时间轴】／【增加关键帧】命令或者单击鼠标右键在快捷菜单中选择【增加关键帧】命令，增加一个关键帧。 7.按照同样的方法在第45帧处也增加一个关键帧，如图所示。 8.在【时间轴】面板中拖动最后一个关键帧到第95帧处，再次延长整个动画的播放时间。 9.按住Ctrl键，在【时间轴】面板中拖动最后一个关键帧到第125帧处，再延长整个动画的播放时间，如图所示。 10.在【时间轴】面板中单击第30帧处的关键帧，然后将其左移至第15帧处，如图所示。 11.确认播放头位于第15帧的关键帧处，然后在【属性】面板中，设置左边和上边的边距值分别为“90px”和“324px”，如图所示。 12.在第25帧处增加一个关键帧，然后在【属性】面板中，设置左边和上边的边距值分别为“150px”和“324px”，如图所示。 13.在第35帧处增加一个关键帧，然后在【属性】面板中，设置左边和上边的边距值分别为“250px”和“324px”，如图所示 。 14.在第45帧处增加一个关键帧，然后在【属性】面板中，设置左边和上边的边距值分别为“350px”和“274px”，如图所示。 15.在第55帧处增加一个关键帧，然后在【属性】面板中，设置左边和上边的边距值分别为“450px”和“274px”，如图所示。 16.将播放头移至第65帧关键帧处，然后在【属性】面板中，设置左边和上边的边距值分别为“850px”和“214px”，如图所示 。 17.仍然将播放头置于第65帧关键帧处，然后选择层“seaLayer”中的图像“images/sail_2.gif”，并在菜单栏中选择【修改】／【时间轴】／【增加对象到时间轴】命令，将图像添加到【时间轴】面板，如图所示。 18.选中刚添加的动画条，并向左拖动到时间轴的起始处，如图所示。 19.在时间轴中拖动动画条“sail”右侧的关键帧到125帧处，然后在第65帧处增加一个关键帧，如图所示。 20.确认动画条“sail”第65帧处的关键帧仍然处于被选中状态，然后在【属性】面板中将图像的源文件修改为“images/sail_1.gif”，此时页面中的图像由向右航行的帆船转为向左航行的帆船，如图所示。 21.在动画条“seaLayer”第75帧处增加一个关键帧，然后在【属性】面板中，设置左边和上边的边距值分别为“620px”和“200px”，如图所示。 22.在动画条“seaLayer”第85帧处增加一个关键帧，然后在【属性】面板中，设置左边和上边的边距值分别为“700px”和“354px”，如图所示。 23.在动画条“s