网页设计与制作 第2版 项目教学 作者 王君学 古淑强 项目八 层和时间轴──制作海底探秘网页-.pptVIP

网页设计与制作 项目八 层和时间轴──制作海底探秘网页 层是分配有绝对位置的HTML页面元素，它和Div标签使用同一个HTML标识“div”，但这并不意味着层和Div标签是完全相同的，它们之间既有区别又有联系。时间轴是Dreamweaver 8实现动画的关键功能，但它需要与层相结合才能发挥这一作用。本项目以创建海底探秘网页为例，介绍使用层布局网页以及使用层和时间轴创建动画的基本方法。在项目中，首先使用层布局整个页面，然后制作时间轴动画。 任务一 使用层布局页面 （一） 创建层 需要掌握的内容主要有： 1、层概念的理解 2、创建层 3、【层】面板 4、选定层 5、缩放层 6、移动层 7、对齐层 1、层概念的理解 层是一种能够随意定位的页面元素，如同浮动在页面里的透明层，可以将层放置在页面的任何位置。由于层中可以放置包含文本、图像或多媒体对象等内容，很多网页设计者会使用层定位一些特殊的网页内容。 2、创建层 可以通过以下途径来创建层。 （1）在主菜单中选择【插入】／【布局对象】／【层】命令。 （2）将【插入】／【布局】面板上的 （绘制层）按钮拖曳到文档窗口松开鼠标。 （3）在【插入】／【布局】面板中单击 （绘制层）按钮，在文档窗口中按住鼠标左键并拖曳可绘出一个自定义大小的层。如果按住Ctrl键不放，按住鼠标左键拖曳可在文档窗口中连续绘制多个层。 3、【层】面板 在【层】面板中可以实现以下操作。 （1）双击层的名称，可以对层进行重命名。 （2）单击层后面的数字可以修改层的z轴顺序，数字大的将位于上层。 （3）勾选【防止重叠】复选框可以禁止层重叠。 （4）在层的名称前面有一个眼睛图标，单击眼睛图标可显示或隐藏层。 （5）单击层名称可以选定层，按住Shift键不放，依次单击层可以选中多个层。 4、选定层 选定层还有以下几种方法： （1）在【层】面板中单击层的名称选定层。 （2）单击文档中的 图标来选定层。如果没有显示该图标，可以在【首选参数】对话框的【不可见元素】分类中勾选【层锚记】复选框。 （3）将光标置于层内，然后在文档窗口底部标签条中选择“div”标签。 （4）单击层的边框线来选定层。 （5）如果要选定两个以上的层，只要按住Shift键，然后逐个单击层手柄或在【层】面板中逐个单击层的名称即可。 5、缩放层 可以根据需要调整层的大小，其方法有： （1）使用鼠标直接拖曳； （2）在【属性】面板的【宽】和【高】文本框中输入精确数值； （3）还可以将所有选择层的宽度和高度变为最后选择的层的宽度和高度。当选择多个层时，最后选择的层四周的控制点将以实心显示，其他的层四周的控制点将以空心显示。 6、移动层 层具有很强的灵活性，可以随意移动到页面中的任何位置。移动层的方法有很多： （1）可以使用鼠标进行拖曳； （2）也可以先选中层然后按键盘上的方向键进行移动（每按1次方向键移动1个像素，如果按住Shift键1次移动10个像素）； （3）还可以在【属性】面板的【左】和【上】文本框中输入数值进行精确定位。 7、对齐层 如果需要对多个层进行对齐操作，直接用鼠标拖动层可能不太精确，通常需要使用对齐层的功能来实现。方法是：首先选择需要对齐的层，然后在主菜单的【修改】／【排列顺序】中选择【左对齐】、【右对齐】【对齐上缘】或【对齐下缘】命令，即可将所有选择的层以最后选择的层为标准进行对齐操作。 （二） 设置层 需要掌握的内容主要有： 1、层【属性】面板 2、层与Div标签 1、层【属性】面板 选中层，在其【属性】面板中可以设置相关参数。 2、层与Div标签 层与Div标签既有区别又有联系，它们的共同点是在源代码中都使用HTML标签“div…/div”进行标识，不同的是，在插入层时，层同时被赋予了CSS样式，通过【属性】面板还可以修改这些CSS样式，而插入Div标签时，需要再单独创建CSS样式对它进行控制，而且也不能通过【属性】面板设置其CSS样式。 另外，Div标签是相对定位，层是绝对定位，这就意味着Div标签不能重叠，而层可以重叠。但在实践中，层和Div标签可以相互转换。转换的方法是，在【CSS规则定义】对话框的【定位】分