网页制作CH9—图层技术

创建嵌套层通常有两种方法： 创建嵌套层通常有两种方法： （1）直接创建嵌套层 ） 先创建一个层为父层，后在父层内创建的层成为子 先创建一个层为父层， 在图层面板中也可以看出层2是层 的子层。 是层1的子层 层，在图层面板中也可以看出层 是层 的子层。 （2）将已有的多个层变为嵌套层 ） 打开图层面板， 打开图层面板，在层列表中将需要作为子层的层选 按住Ctrl键将该层拖动到父层上， 释放鼠标即可 。 键将该层拖动到父层上， 中 ， 按住 键将该层拖动到父层上 释放鼠标即可。
9.3 图层的管理
9.3.1 图层的命名
命名图层可以执行以下操作之一： 命名图层可以执行以下操作之一： 选择图层， 在其属性面板的“ 层编号” （ 1 ） 选择图层 ， 在其属性面板的 “ 层编号 ” 文本框 中输入图层名称。 中输入图层名称。 选择“窗口” 其它” 命令， （2）选择“窗口”|“其它”|“层”命令，打开图 层面板。双击要命名图层的“名称” 层面板。双击要命名图层的“名称”栏，使之处于 可编辑状态，输入图层名称。 可编辑状态，输入图层名称。
创建完层之后，在页面中会出现一个层的标志， 创建完层之后，在页面中会出现一个层的标志， 并且有一个矩形的层出现。 并且有一个矩形的层出现。 单击层标志，其属性面板显示如图所示， 单击层标志 ， 其属性面板显示如图所示 ， 在属性面 板上可以设定层的属性。 板上可以设定层的属性。
2．创建嵌套图层 ．
图层嵌套指的是在一个图层的内部创建另一个图层， 图层嵌套指的是在一个图层的内部创建另一个图层， 可以用嵌套的方法将多个图层组合在一起。 可以用嵌套的方法将多个图层组合在一起。使用嵌套 层的目的通常是为了将多个图层组成群组，这样一来， 层的目的通常是为了将多个图层组成群组，这样一来， 只要移动父层，其中的子层也会一起移动， 只要移动父层，其中的子层也会一起移动，而且子层 还会继承父层的显示隐藏状态， 还会继承父层的显示隐藏状态，其可见性与父层保持 一致。这在制作动态网页是十分有用。 一致。这在制作动态网页是十分有用。
9.2.7 对齐图层
在文档窗口中有多个图层，可以选择这些图层， 在文档窗口中有多个图层，可以选择这些图层，然 后使用图层对齐命令使被选择的多个图层与最后被选 择的图层边框对齐。 择的图层边框对齐。 对齐多个层的方法如下： 对齐多个层的方法如下： 在文档窗口中选中需要对齐的图层，执行“修 对齐” 命令， 选择下列对齐方式中的一种： 改 ” | “ 对齐 ” 命令 ， 选择下列对齐方式中的一种 ： 左对齐、右对齐、对齐上缘、对齐下缘、 左对齐、 右对齐、 对齐上缘 、对齐下缘、 设成宽度相 设成高度相同。 同、设成高度相同。 注意：在对齐图层时， 注意：在对齐图层时，没有选择的子图层会因为其父图 层的移动而移动。 层的移动而移动。
第9章 利用图层技术制作网页
通过本章学习，应该掌握以下内容： 通过本章学习，应该掌握以下内容： 1. 2. 3. 4. 认识图层 图层的基本操作 图层的管理 图层与表格的相互转换
9.1 认识图层
图层又称层， MX中最有价值的 图层又称层 ， 是 Dreamweaver MX 中最有价值的 对象之一，它是由层叠式表发展过来的， 对象之一，它是由层叠式表发展过来的，它提供了一 种对网页对象进行有效控制的手段，层可以包含文本、 种对网页对象进行有效控制的手段，层可以包含文本、 图像、表单、插件，甚至层内还可以包含其它层。即 图像、表单、插件，甚至层内还可以包含其它层。 在HTML文档的正文部分可以放置的元素都可以放入层 HTML文档的正文部分可以放置的元素都可以放入层 由于层可以放置在网页的任何位置， 内。由于层可以放置在网页的任何位置，从而能有效 地控制网页中的对象。 地控制网页中的对象。
9.2.8 吸附图层到网格
如果启用吸附功能， 如果启用吸附功能 ， 在移动和调整图层的大小 该图层被自动定位到最近的网格位置。 时 ， 该图层被自动定位到最近的网格位置 。 不论 网格是否可见，吸附功能都起作用。 网格是否可见，吸附功能都起作用。
1．显示网格 ．
要显示网格线，可选择“查看” “网格” “ 要显示网格线，可选择“查看”|“网格”|“显 示网格”菜单命令。 示网格”菜单命令。
释放鼠标，则该层被复制。 释放鼠标，则该层被复制。 先选择一个层，执行“编辑” 复制”命令， （2）先选择一个层，执行“编辑”|“复制”命令 ， 取消被选层， 执行“ 编辑” 粘贴” 命令， 取消被选层 ， 执行 “ 编辑 ” | “ 粘贴 ” 命令 ， 则该层 被复制。 被复制。
9.2.6 调整图层的大小层的可见性 ．
若要更改单个层的可见性，可执行以下操作之一： 若要更改单个层的可见性，可执行以下操作之一： 打开图层面板， （1）打开图层面板，单击图层面板中一个层的眼睛 图标以更改其可见性。眼睛睁开表示该层是可见的。 图标以更改其可见性。眼睛睁开表示该层是可见的。 眼睛闭合表示该层是不可见的。 眼睛闭合表示该层是不可见的。 选择图层，在其属性面板的“显示” （2）选择图层，在其属性面板的“显示”栏中设置 图层的可见性。 图层的可见性。
2．吸附图层到网格 ．
要吸附图层到网格，可选择“查看”|“网 靠齐到网格”菜单命令。 格”|“靠齐到网格”菜单命令。
3．改变网格和吸附设置 ．
设置网格和吸附设置的步骤如下： 设置网格和吸附设置的步骤如下： 选择“查看” 网格” 网格设置”命令， （ 1 ） 选择 “ 查看 ” | “ 网格 ” | “ 网格设置 ” 命令 ， 打开“网格设置”对话框。 打开“网格设置”对话框。 在对话框中，用户可以根据需要进行选项设置。 （ 2 ） 在对话框中 ， 用户可以根据需要进行选项设置 。 （3）单击“确定”按钮完成设置。 单击“确定”按钮完成设置。
9.2.3 激活图层
如果需要在图层中插入对象，必须激活图层。 如果需要在图层中插入对象 ， 必须激活图层。把 鼠标指针移动到层内任何地方单击，即可激活该层。 鼠标指针移动到层内任何地方单击， 即可激活该层。 此时，插入点位于图层内， 被激活图层的边界突出显 此时 ，插入点位于图层内， 示，选中手柄也同时显示出来。 选中手柄也同时显示出来。 注意：激活图层的操作不同于选择图层。 注意：激活图层的操作不同于选择图层。
选择层后，层的四周出现8个调控点， 选择层后， 层的四周出现8个调控点， 且层的标志 反色显示 。
2．选择多个图层 ．
如果要同时选择多个层， 可以按住Shift Shift键 如果要同时选择多个层 ， 可以按住 Shift 键 ， 再执 行上述操作之一。 行上述操作之一。 注意：当选择了多个图层后， 注意：当选择了多个图层后，最后选择的图层标记高亮 显示，同时调控点显示为黑色， 显示 ，同时调控点显示为黑色 ， 其他图层的调控点显 示为白色。 示为白色。
9.2.2 选择图层 1．选择一个图层 ．
选择图层的目的是便于层的对齐、重定位和缩放， 选择图层的目的是便于层的对齐、重定位和缩放， 还可以为图层添加背景图像和背景颜色。在 Dreamweaver MX中要选择一个层，可使用如下方法 中要选择一个层， 中要选择一个层 之一： 之一： （1）用鼠标单击层标志 ） 。 （2）用鼠标单击层的任意边框线。 ）用鼠标单击层的任意边框线。 命令， （3）选择“窗口”|“其它”|“层”命令，打开图层面 ）选择“窗口” “其它” “ 单击该面板中需要选择的层的名称。 板，单击该面板中需要选择的层的名称。
9.2.4 移动图层
在文档中要移动一个图层，可以执行以下操作之一： 在文档中要移动一个图层，可以执行以下操作之一： 先选择层， （ 1 ） 先选择层 ， 然后在该层的选择手柄上按住鼠标左 键并拖动鼠标，则可移动。 键并拖动鼠标，则可移动。 将鼠标指针移动到需要移动层的边框位置， （ 2 ） 将鼠标指针移动到需要移动层的边框位置 ， 当鼠 标指针形状为四个箭头时，按住鼠标左键并拖动鼠标， 标指针形状为四个箭头时， 按住鼠标左键并拖动鼠标 ， 则可移动层。 则可移动层。 在属性面板中直接设置“ 的数值， （ 3 ） 在属性面板中直接设置 “ 左 ” 、 “ 上 ” 的数值 ， 也可以移动层。 也可以移动层。 利用键盘， 每按一次方向键， （ 4 ） 利用键盘 ， 每按一次方向键 ， 则移动一个像素单 若按Shift 键的同时按一次方向键， Shift键的同时按一次方向键 位 ； 若按 Shift 键的同时按一次方向键 ， 则移动一个 网格单位。 网格单位。
层是在制作网页中经常用到的对象， 层是在制作网页中经常用到的对象 ， 元素的定位 就是一个简单的应用。 就是一个简单的应用。用表格来对网页进行排版非常 方便，但有时需要在文字上放一些图片之类的元素， 方便，但有时需要在文字上放一些图片之类的元素， 表格就不能胜任了，这时就可以利用图层来排版。 表格就不能胜任了，这时就可以利用图层来排版。 图层可以重叠地放置，制作出层叠的效果。也可 图层可以重叠地放置，制作出层叠的效果。 以控制层的显示或隐藏，实现交互技术。 以控制层的显示或隐藏，实现交互技术。配合时间显 的使用，还可以同时移动一个或多个图层，轻松制作 的使用，还可以同时移动一个或多个图层， 出动态效果。 出动态效果。
2．调整多个图层的大小 ．
在文档中要调整多个图层的大小， 在文档中要调整多个图层的大小 ， 可执行如下操作 之一： 之一： 键选择多个图层， （ 1） 在设计视图中按 ） 在设计视图中按Shift键选择多个图层 ， 单击 键选择多个图层 “修改”|“对齐”|“设成宽度相同”或“修 改”|“对齐”|“设成高度相同” 。 “对齐” “设成高度相同” （2）选择要调整的图层， 打开其属性面板。 在属性 ）选择要调整的图层，打开其属性面板。 面板的多个层“ 面板的多个层 “ 高 ” 和 “ 宽 ” 文本框中修改所有 选中的层的宽度值和高度值。 选中的层的宽度值和高度值。
要调整一个图层的大小，可执行如下操作之一： 要调整一个图层的大小，可执行如下操作之一： 拖曳法：选择层，拖曳图层的调控点。 （1）拖曳法：选择层，拖曳图层的调控点。上/下调控 点只能调整层的高度， 点只能调整层的高度 ， 左 / 右调控点只能调整层的宽 度，四角的调控点能同时调整层的高度和宽度。 （2） 四角的调控点能同时调整层的高度和宽度。 在层属性面板中设置“ 的数值。 在层属性面板中设置“宽”和“高”的数值。 利用键盘来调整图层的大小 （ 3 ） 利用键盘来调整图层的大 小 ： 选择要调整的图 方向键， 每次调整一个像素单位。 层 ， 按 Ctrl+ 方向键 ， 每次调整一个像素单位 。 按 Ctrl+Shift+方向键，每次调整一个网格单位。 Ctrl+Shift+方向键，每次调整一个网格单位。 方向键