应用图层定位网页元素

12.5.5　应用图层定位网页元素

Dreamweaver 中的“图层”是一个相对独立于网页的区域，它不受网页排版的束缚，可放置在网页中的任何位置。图层中可包含文本、图像、插件甚至其他的图层，凡是出现在 HTML文档中的任何元素都可以放置在图层中。图层还可以精确地定位元素的位置并控制对象的排列顺序。在 Dreamweaver 8中，还可以在表格和图层中进行相互间的转化，以便于用户更好地规划网页。另外，还可以利用图层制作动画，这里不详细介绍。

1.创建图层

通过拖动的方式，可以创建一个图层，然后再调整它的大小，或者使用数字精确地定义图层的大小。下面介绍两种创建图层的方法。

利用“插入”面板插入图层的操作方法：

在“插入”面板的“布局”选项卡中单击“绘制层”按钮；在文档窗口中用鼠标拖出一个矩形框，如图12-74所示。

创建图层之后，在文档窗口中出现图层标记，如果没有显示图层标记，可执行菜单【编辑】→【首选参数…】命令，在弹出的对话框中选择“不可见元素”，勾选“层锚记”复选框。选择菜单【查看】→【可视化助理】→【不可见元素】命令，可以切换图层标记的显示与隐藏状态。需要一次性添加多个图层时，可单击“绘制层”按钮，按住 Ctrl功能键，连续地在网页内拖动鼠标。图层创建之后，图层的左上角外侧有一个选择手柄，可以用它在网页的范围内移动图层。

利用菜单插入图层的操作方法：

将插入点置于文档编辑窗口中，选择菜单【插入】→【布局对象】→【层】命令，将自动在插入点插入一个图层，它默认大小是 200　像素宽和 115　像素高。

图12-74　插入图层

2.调整图层

创建图层之后，用户可通过多种方式选择、激活图层，然后可对它的大小、尺寸、在网页内的位置以及与其他图层的对齐方式等进行调整。

（1）激活与选择图层

要想往图层内添加信息，必须要先激活它，方法很简单，只需要单击图层中的任意位置。此时光标将停留在被激活的图层内，图层的边框呈高亮显示，用户可以在图层内添加网页元素。

需要选择图层时，可按下列方法之一进行操作：

●单击文档窗口的图层标记，使图层的边框上出现黑色的小方块手柄。

●单击图层的选择手柄。

●单击图层的边框。

需要一次性地选择多个图层时，可在按住 Shift 功能键的同时，依次单击多个图层，如图12-75所示。

图12-75　选择图层

（2）调整图层尺寸

使用鼠标改变图层尺寸的操作方法：

① 在文档窗口中选择需要调整的图层。

② 当鼠标指针移动到图层周围出现的方块点时，将转换成水平、垂直或斜向的“双箭头”形状，拖动鼠标至合适的位置后释放鼠标即可，如图12-76所示。

图12-76　使用鼠标调整图层的大小

使用属性面板调整图层尺寸的操作方法：

① 选中图层，按“Ctrl+F3”组合键，打开“属性”面板，如图 12-77　所示。② 在“宽”、“高”文本框中输入以像素为单位的数值。

③ 按回车键确认。

图12-77　图层的属性面板

用户如果选择多个图层后，再通过属性面板改变它的尺寸，将使所选的图层具有相同的宽度、高度。类似地，选择菜单【修改】→【排列顺序】→【设成宽度相同】命令后，所选的图层将具有相同的宽度。选择【修改】→【排列顺序】→【设成高度相同】命令后，所选的图层将具有相同的高度，如图 12-78　所示。

图12-78　排列顺序子菜单

（3）改变图层位置

选择图层之后，使用鼠标拖动便可改变图层在文档窗口的位置。配合光标移动键的使用，可以像素为单位移动图层，前者适合于快速地改变图层的位置，后者适合于精确定位图层的位置。

选择网页内的一个或多个图层之后，直接拖动鼠标至合适位置后释放鼠标可快速地改变图层的位置。需要精确地改变图层的位置，可以使用下面的方法：

使用键盘改变图层位置的操作方法：

① 选择需要调整位置的图层。

② 每按一次光标移动键，则所选的图层将沿箭头指示的方向移动 1　个像素的距离。

③ 按住“Shift”功能键，每按一次光标移动键，所选的图层将沿箭头指示的方向移动 10个像素的距离。

使用属性面板改变图层位置的操作方法：

① 选择文档窗口中需要调整位置的图层。按“Ctrl+F3”组合键，打开“属性”面板。

② 在“左”、“上”文本框中输入以像素为单位的数值。“左”、“上”文本框中的数值表示图层相对于文档窗口最左边和最顶部的距离。

③ 按回车键确认。

※ 提示：

若希望图层超出屏幕的左侧或顶部的位置时，可在图层属性面板的左、上文本框中输入一个负值。

如果文档中存在多个图层，在改变图层的位置时，可能出现图层重叠的现象，为了防止该现象，可以选择菜单【修改】→【排列顺序】命令，然后选择菜单中的“防止层重叠”命令，如图 12-79　所示。

图12-79　选择防止层重叠

（4）对齐图层

在进行图层对齐时，需要确定基准图层，其他图层都是通过基准图层来进行对齐的。一次性地选择多个图层之后，Dreamweaver 8总是将最后选择的图层作为基准图层。如果多个图层相互重叠，还可以改变图层的排列顺序。

要对齐图层，一次性地选择文档窗口的多个图层。选择菜单【修改】→【对齐】命令，再打开“对齐”子菜单执行一项对齐命令，如图 12-80　所示。

图12-80　对齐图层菜单

（5）嵌套图层

嵌套图层就是在图层内添加新的图层。可以通过“层”面板来查看包括嵌套图层在内的所有图层。选择【窗口】→【层】命令，打开“层”面板，在名称列表内出现当前网页所选图层的名称，图层的名称将按照添加的顺序依次排列，最先添加的图层位于名称列表的底部，最近添加的图层位于名称列表的顶部。

特定图层的可见性通过眼睛图标在面板的第一列显示，选择眼睛图标可以使用户在 3种不同的可见性状态之间进行转换。

●眼睛图标闭上——显示图层被隐藏。

●眼睛图标睁开——显示图层是可见的。

●没有眼睛图标显示——图层可见性属性被设置为默认的。

用户在面板中当前图层的名称上双击，该名称就会高亮显示，可以输入新的图层名称。

在嵌套图层的左侧会出现一个“+”或“－”标志符号，若出现“+”号表示只显示父图层而不显示对应的子图层，单击“+”号可以显示子图层；单击“－”号将隐藏所有的子图层。Layer1　是嵌套图层，在 Layer1　内嵌套着 Layer2。

Dreamweaver 8提供了3种添加嵌套图层的方法：

●光标定位到父图层中，选择菜单【插入】→【布局对象】→【层】命令。

●单击“插入”面板的“布局”选项卡上的“绘制层”按钮，按住“Alt”键在父图层内拖动鼠标创建图层。

●直接拖动“插入”面板的“布局”选项卡上的“绘制层”按钮至父图层内。

3.在图层中添加网页元素

下面以在图层中加入图像为例，介绍在图层中添加元素。

在图层中添加网页元素的操作方法：

（1）在文档窗口中创建一个图层，并将鼠标定位在图层中；

（2）选择菜单【插入】→【图像】命令，或者单击“插入”面板的“常用”选项卡中的“图像”按钮，将打开“选择图像源文件”对话框；

（3）在对话框中选择要插入的图像，单击【确定】按钮；此时选中的图像将插入至图层内，如图12-81所示。用户如果要调整图像在文档中的位置，直接拖动图层，调整图层的位置即可。

图12-81　在图层中插入图像

在图层中插入其他元素的方法与插入图像的方法基本一致。首先在图层内定位光标，然后通过插入菜单选择要插入的对象。用户也可从插入面板中确定插入的网页元素，或者直接将元素拖动到图层内。

4.转换图层与表格

图层拥有较高的灵活性，这对于网页排版是非常方便的，但同时也存在弊端，低版本的浏览器对图层并不支持，Dreamweaver 8提供了将图层转换为表格的功能。

将图层转换为表格的操作方法：

① 在当前文档中选择要转换为表格的图层。

② 选择菜单【修改】→【转换】→【层到表格…】命令，打开“转换层为表格”对话框，如图12-82　所示。

图12-82　转换层为表格

③ 在对话框中对各选项进行设置。其中各选项的功能如下：

●选中“最精确”单选按钮，表示图层与单元格一一对应。如果图层内未填充任何内容，那么将形成空白单元格。

●选中“最小：合并空白单元”单选按钮，表示将图层转换为表格的单元格时对齐排列。如果图层之间错开的距离小于指定像素值，原来图层中的内容将自动对齐，这项功能是将表格内用于填充图层间距的空白单元格减少到最低程度，从而使表格更加整洁。

●选中“使用透明 GIFs”复选框，将使用透明的 GIF 图像填充表格的最后一行，以保持表格在浏览器窗口的显示一致，但不能通过拖动表格的列改变表格的大小。取消选中“使用透明 GIFs”复选框，生成的表格将不包含透明的 GIF 图像。

●选中“置于页面中央”复选框，将使生成的表格在页面居中排列，否则生成的表格将采用默认的左对齐方式。

●选中“防止层重叠”复选框，在生成、移动或调整图层尺寸大小时可不与其他图层相重叠。

●选中“显示层面板”复选框，用于显示“层”面板。

●选中“显示网格”复选框，可以显示网格帮助图层定位。

●选中“靠齐到网格”复选框，可以将转换的表格靠近网格单元格。

④ 单击【确定】按钮，完成图层到表格的转换。