网页制作基础教程 第2版 作者 邓振杰 第9章.pptVIP

第9章 利用图层技术制作网页 本章学习目标 ● 认识图层。 ● 图层的基本操作。 ● 图层与表格的操作。 ● 利用图层制作动画。 本章导航 9.1 认识图层 层是网页中用来放置文本、图像、动画、表单、插件等网页元素的载体。没有层的网页像一个平面，即由x轴和y轴组合成的二维空间，而层所确定的区域是在z轴上，它摆脱了二维平面的束缚，形成了一个三维空间结构，如图所示。 层不仅可以有特殊的位置，也可以有丰富的内容。层可以包含文字、图像、表单、插件，层中甚至可以包含另一个层。 由于层可以具有特殊的位置和内容，因此，在网页制作中也可以用层来进行页面布局，从而实现页面元素的精确定位。 9.2 图层的基本操作9.2.1 创建图层 当在文档中放置层时，Dreamweaver CS3将在代码中插入该层的HTML标签。可以选择利用Dreamweaver将div标签或span标签应用于层中。默认情况下，Dreamweaver会使用div标签创建层。 div和span标签之间的区别在于浏览器不支持层在div标签之前和之后放置额外的换行符。 Dreamweaver提供了几种不同的方法来创建层，下面介绍几种常用的方法。 1．利用工具创建图层 2．通过菜单创建图层 3．拖曳法创建图层 9.2.2 激活图层 要把对象放入图层中，首先要激活图层。未被选中的图层如图所示 把鼠标放至层内任意位置单击，即可激活层。此时，光标在层中闪烁，被激活的层的边界突出显示（由灰色变成蓝色），选择手柄也同时显示出来，如图所示。 9.2.3 选中图层 1．选中一个图层 要选中一个图层，有5种方法。 2．选择多个图层 方法一：按住Shift键，然后在每个要选中的图层中单击鼠标，即可选中多个图层。 方法二：按住Shift键，然后在图层面板中单击两个或多个图层的名称，即可选中多个图层，如图所示。 选中多个图层的情形，如图所示，其中最右边的图层是最后选中的图层。从图中可以看到，最后被选中的图层，其边框上的控制点是实心的，而之前选中的图层的控制点是空心的。 9.2.4 调节图层大小 1．调整单个图层的大小 调整单个图层大小的方法如下。 （1）拖曳图层边框的控制点来改变其大小。 ① 选择图层。 ② 上下（左右、斜方向）拖曳层边框的控制点到合适的位置，释放鼠标，就可以改变层的大小，如图所示。 （2）利用属性面板精确调整图层的大小。 ① 选择要调整的图层，打开属性面板，如图所示。 （3）利用键盘来调整图层的大小。 ① 选择要调整的图层。 ② 按Ctrl+方向键，每次调整一个像素单位。 ③ 按Ctrl+Shift+方向键，每次调整一个网格单位。 2．调整多个图层的大小 （1）利用菜单调整多个图层的大小。 ① 在设计视图中按Shift键选择多个图层。 ② 单击“修改”→“排列顺序”→“设成宽度相同”或“修改”→“排列顺序”→“设成高度相同”，如图所示。 （2）利用属性面板精确调整多个图层的大小。 ① 选择要调整的图层，打开其属性面板。 ② 在属性面板的多个层“高”和“宽”文本框中修改所有选中的层的宽度值和高度值，如图所示。 9.2.5 移动图层 图层移动时，首先应该选中它，然后可以按以下方法进行操作。 1．拖曳层 拖曳层边框左上角的方形手柄到适合的位置，如图所示，然后释放鼠标即可。 2．利用属性面板 在属性面板的“左”或“上”文本框中输入新的水平或垂直的坐标值，如图所示。 9.2.6 对齐图层 先选中多个要对齐的层，单击“修改”→“排列顺序”→“左对齐”（右对齐、上对齐、对齐下缘），如图9-11所示。 9.2.7 图层与网格的对齐 要显示网格线，选择“查看”→“网格设置”→“显示网格”命令即可，如图所示。 设置网格和吸附的值的步骤如下。 （1）选择“查看”→“网格设置”→“网格设置”命令，打开“网格设置”对话框，如图所示。 （2）在对话框中，用户可以根据需要进行选项设置。 （3）单击“确定”按钮完成设置。 9.3.1 层属性面板的应用 用户可以在属性面板中查看和设置层的各种属性。选择一个层，单击“窗口”→“属性”，打开层属性面板，如图所示 9.3.2 层控制面板的应用 1．改变图层的可见性 当处理文档时，可以使用“AP元素”控制面板手动显示和隐藏层，以查看页如何在不同的条件下显示。 （1）若要更改层可见性，请执行以下操作。 ① 单击“窗口”→“AP Div”菜单命令，打开“AP元素”面板。 ② 单击一个层的眼睛图标以更改其可见性。 （2）若要同时更改所有层的可见性，请执行以下操作。 ① 单击“窗口”→“AP Div”，打开“AP元素”面板。 ② 单击位于列顶部的标头