项目八 层和时间轴──制作海底探秘网页-PPT.ppt

网页设计与制作老虎工作室 2012年12月项目八 层和时间轴──制作海底探秘网页任务一 使用层布局页面 任务二 使用时间轴制作动画 实训 制作“演员表”网页 层是分配有绝对位置的HTML页面元素，它 和Div标签使用同一个HTML标识“”，但这 并不意味着层和Div标签是完全相同的，它们之 间既有区别又有联系时间轴是Dreamweaver 8 实现动画的关键功能，但它需要与层相结合才能 发挥这一作用本项目以创建海底探秘网页为例 ，介绍使用层布局网页以及使用层和时间轴创建 动画的基本方法在项目中，首先使用层布局整 个页面，然后制作时间轴动画 任务一 使用层布局页面 （一）创建层 （二）设置层 （一） 创建层需要掌握的内容主要有：1、层概念的理解2、创建层3、【层】面板4、选定层5、缩放层6、移动层 7、对齐层层是一种能够随意定位的页面元素， 如同浮动在页面里的透明层，可以将层放 置在页面的任何位置由于层中可以放置 包含文本、图像或多媒体对象等内容，很 多网页设计者会使用层定位一些特殊的网 页内容1、层概念的理解可以通过以下途径来创建层1）在主菜单中选择【插入】／【布局对象】／ 【层】命令。

2）将【插入】／【布局】面板上的 （绘制层 ）按钮拖曳到文档窗口松开鼠标3）在【插入】／【布局】面板中单击 （绘制 层）按钮，在文档窗口中按住鼠标左键并拖曳可绘出一 个自定义大小的层如果按住Ctrl键不放，按住鼠标左 键拖曳可在文档窗口中连续绘制多个层 2、创建层在【层】面板中可以实现以下操作1）双击层的名称，可以对层进行重命名2）单击层后面的数字可以修改层的z轴顺序，数 字大的将位于上层3）勾选【防止重叠】复选框可以禁止层重叠4）在层的名称前面有一个眼睛图标，单击眼睛图 标可显示或隐藏层5）单击层名称可以选定层，按住Shift键不放，依 次单击层可以选中多个层3、【层】面板选定层还有以下几种方法： （1）在【层】面板中单击层的名称选定层 （2）单击文档中的 图标来选定层如果没有显示该 图标，可以在【首选参数】对话框的【不可见元素】分 类中勾选【层锚记】复选框 （3）将光标置于层内，然后在文档窗口底部标签条中选 择“”标签 （4）单击层的边框线来选定层 （5）如果要选定两个以上的层，只要按住Shift键，然后 逐个单击层手柄或在【层】面板中逐个单击层的名称即 可。

4、选定层可以根据需要调整层的大小，其方法有： （1）使用鼠标直接拖曳； （2）在【属性】面板的【宽】和【高】文本框中输入精确 数值； （3）还可以将所有选择层的宽度和高度变为最后选择的层 的宽度和高度当选择多个层时，最后选择的层四周的控 制点将以实心显示，其他的层四周的控制点将以空心显示 5、缩放层层具有很强的灵活性，可以随意移动到页面中的任何 位置移动层的方法有很多：（1）可以使用鼠标进行拖曳；（2）也可以先选中层然后按键盘上的方向键进行移动 （每按1次方向键移动1个像素，如果按住Shift键1次移动10 个像素）；（3）还可以在【属性】面板的【左】和【上】文本框 中输入数值进行精确定位6、移动层如果需要对多个层进行对齐操作，直接用鼠标拖 动层可能不太精确，通常需要使用对齐层的功能来实 现方法是：首先选择需要对齐的层，然后在主菜单 的【修改】／【排列顺序】中选择【左对齐】、【右 对齐】【对齐上缘】或【对齐下缘】命令，即可将所 有选择的层以最后选择的层为标准进行对齐操作7、对齐层（二） 设置层需要掌握的内容主要有：1、层【属性】面板2、层与Div标签 选中层，在其【属性】面板中可以设置相关参数。

1、层【属性】面板层与Div标签既有区别又有联系，它们的共同点是在源 代码中都使用HTML标签“…”进行标识，不同 的是，在插入层时，层同时被赋予了CSS样式，通过【属性 】面板还可以修改这些CSS样式，而插入Div标签时，需要 再单独创建CSS样式对它进行控制，而且也不能通过【属性 】面板设置其CSS样式另外，Div标签是相对定位，层是绝对定位，这就意味 着Div标签不能重叠，而层可以重叠但在实践中，层和 Div标签可以相互转换转换的方法是，在【CSS规则定义 】对话框的【定位】分类中，将【类型】选项设置为“绝对 ”，即表示层，否则即为Div标签，这是层与Div标签转换的 关键因素2、层与Div标签任务二 使用时间轴制作动画 需要掌握的内容主要有：1、【时间轴】面板 2、增加对象到时间轴3、帧和关键帧4、控制动画播放 5、添加或删除帧 6、用时间轴改变图像与层的属性 7、录制层路径时间轴是与层密切相关的一项功能，它可以在 Dreamweaver中实现动画的效果时间轴可以使层的位置 、尺寸、可视性和重叠次序以及层中对象的属性，随着时 间的变化而改变，从而创建出具有Flash效果的动画。

在主菜单中选择【窗口】／【时间轴】命令打开【时 间轴】面板1、【时间轴】面板（1）在主菜单中选择【修改】／【时间轴】／【增 加对象到时间轴】命令将层添加到【时间轴】面板；（2）也可以将层直接拖曳到【时间轴】面板3）单击【时间轴】面板右上角的 按钮，在弹出 的菜单中选择【添加对象】选项此时，一个动画条出现在时间轴的第1个通道中，层 的名字也出现在动画条中2、增加对象到时间轴动画的基本单位叫做帧，将很多帧按照时间先后顺序 连接起来就形成了动画，而时间轴用来排列帧在动画中 有些帧非常关键，可以影响整个动画，这样的帧叫做关键 帧关键帧的概念来源于传统的卡通片制作在早期，熟 练的动画师设计卡通片中的关键画面，也即所谓的关键帧 ，然后由一般的动画师设计中间帧在三维计算机动画中，中间帧的生成由计算机来完成 所有影响画面图像的参数都可成为关键帧的参数，如位 置、旋转角、纹理的参数等关键帧技术是计算机动画中 最基本并且运用最广泛的方法3、帧和关键帧在【时间轴】面板中拖动第1个关键帧或者最后一个 关键帧，可以改变整个动画的播放时间，往右拖动是增长 ，往左拖动是缩短在拖动过程中动画里的所有关键帧都将按比例发生位 移，而彼此之间的位置不发生变化。

如果不想让各关键帧 随着总长度的变化而变化，只要在拖动最后一个关键帧时 按住Ctrl键即可4、控制动画播放 可以根据需要在时间轴中添加或删除帧，方法是将 播放头移至预添加帧的位置，在菜单栏中选择【修改】 ／【时间轴】／【添加帧】或【删除帧】命令将在播放 头右侧添加或删除1帧如果选定整个动画条，在菜单栏中选择【修改】／ 【时间轴】／【增加关键帧】命令，将在当前播放头位 置添加关键帧选定某关键帧，在菜单栏中选择【修改】／【时间 轴】／【删除关键帧】命令可将当前关键帧删除5、添加或删除帧通过时间轴可以改变层的位置，从而产生动画的 效果另外，还可以利用时间轴来改变图像源文件及 层的可见性、大小和重叠次序要改变层的大小，可 以拖动层的大小调整手柄或在【属性】面板的【宽】 和【高】选项的文本框内输入新的值要改变层的重叠次序，可以在【Z轴】选项的文 本框内输入新的值或用【层】面板来改变当前层的重 叠次序将这些功能综合利用就可以制作出时隐时现 的动画效果6、用时间轴改变图像与层的属性如果需要创建具有复杂运动路径的动画，一个一个地 创建关键帧会花费许多时间还有一种更加高效而简单的 方法可创建复杂运动轨迹的动画，这就是录制层路径功能 。

首先在菜单栏中选择【修改】／【时间轴】／【录制 层路径】命令，然后在文档中拖动层来录制路径，最后在 动画要停止的地方释放鼠标左键，Dreamweaver 8将自动 在【时间轴】面板中添加对象，并且较为合理地创建一定 数目的关键帧这时也可以根据实际情况对各关键帧的位置适当进行 调整使其更为合理7、录制层路径实训 制作“演员表”网页本项目主要介绍了使用层和时间轴制 作动画的基本方法，本实训将让读者进一 步巩固所学的基本知识要求：把素材文件复制到站点根文件 夹下，然后根据操作提示创建动画网页 制作“送孟浩然之广陵”网页 制作“送孟浩然之广陵”网页 项目小结 本项目通过海底探秘网页介绍了使用层布局网页以及使 用层和时间轴制作动画的基本方法，同时也让读者对层这个 概念有了更进一步的了解下面将应该注意的问题进行简要 总结，以供读者参考• 充分理解层与Div标签的区别与联系，它们使用同一个 HTML标签，但它们决不是一个概念Div标签是相对定位 ，层是绝对定位Div标签在插入时必须创建相应的CSS样 式进行控制，但层在插入时立即产生相应的CSS样式Div 标签无法通过【属性】面板设置其CSS属性，层可以通过【 属性】面板设置层自身的一些属性。

Div标签的功能主要是 与CSS相结合布局网页，层的主要功能是制作一些特殊效果 和时间轴动画，很少有设计者使用层来布局网页•在制作时间轴动画的过程中，当需要改变图像源文件时，最好 将图像放在层当中，不要单独改变图像源文件切换图像源文件会减慢 动画速度，因为新图像必须要重新下载如果图像将被放在层里面，那 么在动画运行之前所有的图像将被一次下载完，不会有明显的停顿或者 丢失图像现象•如果动画看上去不是很连贯且图像在位置间有跳动时，可以通 过拉长动画条使运动效果更平滑拉长动画条时将在运动的起点与终点 间创建更多的数据点，同时也使得对象移动得更慢•在较高版本的浏览器中不一定支持较早版本Dreamweaver制作 的时间轴动画，毕竟Dreamweaver较高版本中也取消了这一功能，同时 Dreamweaver同一家族中的Flash软件制作的动画更专业更优美，有兴趣 的读者可以去学习和研究。