网页设计与制作 项目教学 王君学 孙海伦 金哲第10章教案 项目10 时间轴──制作航行动画.pptVIP

项目十 时间轴──制作航行动画 任务一 使用层制作蓝天大海背景 【操作步骤】 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”中，然后在菜单栏中选择【插入】／【布局对象】／【层】命令，在层中插入一个嵌套层