当前位置:
文档之家› 中文版DreamweaverCS6网页制作实用教程第六章使用层与Spry布局网页
中文版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 所示。