中文版DreamweaverCS6网页制作实用教程第六章使用层与Spry布局网页

(2) 层效果
4. 设置对齐层
对齐层主要是对齐多个层。选中多个层后，选择【修改】|【排列顺序】命令，在子菜单中 选择对齐方式。如果选择【修改】|【排列顺序】|【设成高度相同】命令或【修改】|【排列顺 序】|【设成宽度相同】命令，将以最后一个选中的层的大小为标准，调整其他层的大小并对齐 层，如图 6-11 所示。
图 6-8 设置容器的文本
图 6-9 【设置容器的文本】对话框
3. 设置层可见性
在处理文档时，可以在【AP 元素】面板中手动设置层的可见性。以图 6-7 右图所示的 3 个层为例，单击【AP 元素】面板中的 按钮，如果显示为 图标，层为可见；当显示为 图 标，隐藏层的显示，如图 6-10 所示。
(1) 设置显示与隐藏层 图 6-10 设置层的可见性
-114-
(1) 输入层的叠堆顺序数值 图 6-7 调整层的顺序
(2) 层顺序修改效果
2. 设置层文本 在创建层的过程中，用户可以 章 使用层与 Spry 布局网页
【例 6-2】在 Dreamweaver CS6 中设置层文本。 (1) 选中要设置层文本的层，选择【窗口】|【行为】命令，打开【行为】面板。 (2) 单击【行为】面板上的 按钮，在弹出的菜单中选择【设置文本】|【设置容器的文本】 命令，如图 6-8 所示，打开【设置容器的文本】对话框。 (3) 在【设置容器的文本】对话框的【层】下拉列表中可以选择层的名称，如图 6-9 所示， 在【新建 HTML】文本框中可以输入文本内容，单击【确定】按钮即可设置层文本。
6 .2 层的基本操作
在 Dreamweaver 中选择【窗口】|【AP 元素】命令，打开【AP 元素】面板。在该面板中显 示了网页文档中所有插入的层，如图 6-3 所示，用户可以通过它管理网页文档中所有插入的层 元素。
-112-
第 6 章 使用层与 Spry 布局网页
6 .2.1 选择层
在 Dreamweaver CS6 中，用户可以参考以下几种方法选中网页中的层。 将鼠标光标移至层的边框位置，当光标显示为十字双向箭头 时，单击鼠标，即可选 中层，如图 6-4 所示。 将光标移至层中，选择<div>标签即可选中层。 单击【AP 元素】面板中 ID 列中的层名称，即可选择该层。
(1) 插入光标
(2) 插入层
图 6-2 插入嵌套层
除了使用上面所介绍的菜单命令插入层外，还可以在网页中绘制层。 【例 6-1】在 Dreamweaver CS6 中绘制层。 (1) 选择【窗口】|【插入】命令，打开【插入】面板，然后单击该面板中的【常用】按钮， 并在弹出的下拉列表中选中【布局】选项，打开【布局】插入面板。 (2) 在【布局】插入面板中单击【绘制 AP Div】命令，然后将鼠标光标移至网页文档，单 击并按住鼠标左键拖动即可绘制层。
6 .2.4 设置层
图 6-6 移动层
在 Dreamweaver 中，用户除了可以对层执行一些基本操作以外，还可以设置层在页面中的 状态，例如排列层、对齐层、隐藏层等。
1. 调整层顺序
层的顺序也就是层在堆叠时的显示顺序。要调整层的顺序，用户可以在【AP 元素】面板中 选中某个层，单击 Z 轴属性列，然后通过在 Z 轴属性列文本框中输入层的叠堆顺序数值(如图 6-7 所示)，设置层的堆叠显示顺序。
图 6-3 【AP 元素】面板
6 .2.2 调整层
图 6-4 选中层
在层中插入对象后，根据需求，对层的大小要进行适当的调整，使页面更加美观。 要调整层的大小，首先选中所需调整大小的层，将光标移至层边框上的小黑方框上，当光 标显示为垂直双向箭头时，拖动鼠标可以调整层的高度；当光标显示为水平双向箭头时，拖动 鼠标可以调整层的宽度；当光标显示为斜向双箭头时，拖动鼠标可以同时调整层的宽度和高度， 如图 6-5 所示。
调整宽度
图 6-5 调整层的大小
调整宽度和高度
上面是手动调整层大小的方法，还可以选中层，打开层的【属性】面板，在【宽】和【高】文本框中 输入数值，设置层的精确大小。
-113-
中文版 Dreamweaver CS6 网页制作实用教程
6 .2.3 移动层
在 Dreamweaver CS6 中，用户可以参考以下几种方法移动页面中的层。 选择要移动的层，拖动层的边框即可移动层，如图 6-6 所示。 选择要移动的层，按下方向键，可以一次移动 1 个像素位置。 选择要移动的层，按下 Shift+方向键，可以一次移动 10 个像素位置。
6 .1.1 创建普通层
在网页文档中插入层后，在【代码】视图中会自动插入 HTML 标签。层的常用标签有<Div> 和<Span>两种，默认是使用<Div>标签来插入层。要创建普通层，将光标移至要创建层的地方， 选择【插入】|【布局对象】| AP Div 命令，即可在所需位置插入层，如图 6-1 所示，插入的层 模式是以蓝色边框颜色显示的。
使用层与 Spry 布局网页
层(AP Div)用于网页元素的精确定位，层的使用非常广泛，可以定位页面上的任意位置， 在层中可以插入各种元素。Spry 相当于一个 JavaScript 框架库，使用它可以灵活创建各种丰富 的网页框架效果。
层的基本作用 层的基本操作 转换表格和层
6 .1 创建层
层(Ap Div)就像是包含文字或图像等元素的胶片，按顺序叠放在一起，组合成页面的最终 效果。层可以精确地定位页面上的元素，并且在层中可以加入文本、图像、表格、插件等元素， 还可以插入嵌套层。在 Dreamweaver 中运用层，为设计者提供了强大的网页控制能力。层不但 可以作为一种网页定位技术，也可以作为一种特效形式出现。熟练掌握层的使用方法，是网页 制作中最重要的环节之一。
中文版 Dreamweaver CS6 网页制作实用教程
(1) 插入光标
图 6-1 插入普通层
(2) 插入层
6 .1.2 创建嵌套层
层与表格一样，可以在层中插入嵌套层，方法类似创建嵌套框架。将光标移至创建的层中， 选择“插入”|“布局对象”| AP Div 命令，在该层中插入嵌套层，如图 6-2 所示。