在制作网页时,除了可以使用表格对页面元素进行定位外,还可以使用层以像素为单位精确定位页面元素,并且可以将其放置在页面中的任意位置。
一、创建层
在Dreamweaver 8中,用户可以根据不同的需要创建普通层和嵌套层。
1.创建普通层
创建普通层的操作步骤如下:
(1)将鼠标指针定位在要创建普通层的位置。
(2)单击插入栏的布局类别栏中的“绘制层”按钮,然后将鼠标指针移动到工作区中,当其变为形状时,拖动鼠标即可创建一个普通层。
注意:默认情况下,对于所创建的每一个层,都有一个层锚记显示在工作区的左上部,如果层锚记不可见,可以选择查看→可视化助理→不可见元素命令显示;如果仍不可见,可以选择编辑→首选参数命令或按Shift+U键,在弹出的首选参数对话框中选择分类选项区中的“不可见元素”选项,然后选中层锚记复选框,单击确定按钮将其显示。
2.创建嵌套层
在层中再创建层就形成了嵌套层,其中嵌套的层称为父层,被嵌套的层称为子层。创建嵌套层的操作步骤如下:
(1)单击插入栏的布局类别栏中的“绘制层”按钮。
(2)在已有层中拖动鼠标即可创建嵌套层,其嵌套关系可以通过层面板识别。
注意:如果在首选参数对话框中关闭了层的嵌套功能,则在层中将不能创建嵌套层,此时,用户可以通过按住Alt键并拖动鼠标的方法在已有层中嵌套一个层。
二、层的基本操作
层的基本操作包括激活层、选择层、移动层、缩放层、排列层、对齐层、删除层、重命名层、显示和隐藏层等,下面分别进行介绍。
1.激活层
如果要把文本、图像等页面元素插入到层中,首先需要将层激活,方法为在层中的任意位置单击鼠标左键,此时鼠标指针将会在该层中闪烁,表明该层已被激活,处于可编辑状态。
2.选择层
用户可以执行下列操作之一来选择层:
(1)单击层锚记。
(2)单击层的选择手柄。
(3)在层面板中单击层的名称。
(4)单击层的边框。
(5)在状态栏中单击层代码标记。
在Dreamweaver 8中,被选择的层上将出现控制点。
3.移动层
当使用层定位页面元素时,如果移动层,层中的页面元素也将随之移动,这是层的一大特点。用户可以执行下列操作之一移动层:
(1)拖动层的边框。
(2)单击层的选择手柄。
(3)选择层,然后按键盘上的方向键,可以一次移动一个像素;若需移动一个网格单位,则在按住Shift键的同时按一次方向键。
(4)选择层,在属性面板的左或上文本框中输入新的水平或垂直坐标值。
4.缩放层
用户可以执行下列操作之一缩放层:
(1)选择层,然后拖动其周围的控制点。
(2)选择层,然后在按住Ctrl键的同时按键盘上的方向键,可以一次移动一个像素;若需移动一个网格单位,则在按住Shift键的同时按一次方向键。
(3)选择层,在属性面板的宽或高文本框中输入层的宽度和高度值。
5.排列层
在Dreamweaver 8中,层按照创建的先后顺序进行排列,即后创建的层在上面,先创建的层在下面。为了排版需要,有时需要对层的顺序进行重新排列,操作步骤如下:
(1)选中需要重排顺序的层。
(2)选择修改→排列顺序命令下的子菜单命令,调整层的排列顺序。
注意:在对齐层时将以最后被选定的层作为基准。
6.对齐层
使用层的对齐命令可以对齐两个或多个层,操作步骤如下:
(1)选中要进行对齐的两个或多个层。
(2)选择修改→排列顺序命令下的子菜单命令,调整层的对齐方式。
7.删除层
层的删除操作很简单,只需选择要删除的层,然后按Delete键即可。将层删除后,它所包含的页面元素也将被删除。
8.重命名
Dreamweaver 8自动为创建的层命名,其默认名为Layer1,Layer2,……如果要重命名层,可以通过层面板进行修改,操作步骤如下:
(1)在层面板中双击层的名称,使其处于可编辑状态。
(2)输入层的新名称。
(3)在空白位置单击鼠标,确认层的新名称。
9.显示和隐藏层
层的显示和隐藏是由层面板中的“显示/隐藏”图标来控制的,单击该图标可以显示或隐藏当前层。当图标呈现状态时,表示显示当前层;当图标呈现状态时,表示隐藏当前层。
三、设置层的属性
用户可以通过层面板设置层的各种属性。
对其中参数说明如下:
(1)层编号:用于指定层的名称,以便在层面板和JavaScript代码中标识该层。
(2)左:用于指定层相对于页面或父层左边界的位置。
(3)上:用于指定层相对于页面或父层上边界的位置。
(4)宽:用于指定层的宽度。
(5)高:用于指定层的高度。
(6)Z轴:用于指定层的Z轴,即堆叠顺序。
(7)可见性:用于指定层最初是否可见。
(8)背景图像:用于为层设置背景图像。
(9)背景颜色:用于为层设置背景颜色。
(10)类:用于为层设置一种样式。
(11)溢出:用于控制当层的内容超过层的指定大小时如何在浏览器中显示层。
(12)剪辑:用于定义层的可见区域。
四、层与表格的相互转换
在Dreamweaver 8中,层与表格有着十分密切的关系,它们在不同的情况下发挥着各自的作用,在有些时候,需要在层与表格之间相互转换,以便于更精确地定位网页元素。
1.将层转换为表格
由于层的标准在不同的浏览器中有着不同的定义,所以在显示时也会产生不同的视觉效果,为了保证页面能够在任何浏览器中正常显示,通常需要将页面中的层转换为表格,操作步骤如下:
(1)选中需要转换为表格的层。
(2)选择修改→转换→层到表格命令,弹出对转换层为表格话框。
对其中参数说明如下:
1)最精确:选中该单选按钮,则以最精确的方式为每个层创建一个单元格,并附加一些单元格来保持相邻层之间的距离。
2)最小:合并空白单元:设置当相邻层之间的距离小于指定的像素宽度时是否忽略层之间的距离。
3)使用透明:选中该复选框,则用透明的GIF图像填充表格的最后一行,以确保表格在所有浏览器中以相同的列宽显示。
4)置于页面中央:设置是否将转换后的表格在页面中居中对齐。
5)防止层重叠:设置在对层进行移动、排列等操作时是否允许层重叠。
6)显示层面板:设置在转换完毕后是否显示层面板。
7)显示网络:设置在转换完毕后是否显示网格。
8)靠起到网络:设置转换后的结果是否精确地对齐到网格。
(3)设置参数完毕后,单击确定按钮将层转换为表格。
2.将表格转换为层
将表格转换为层的操作步骤如下:
(1)选中需要转换为层的表格。
(2)选择修改→转换→表格到层命令,在弹出的转换表格为层对话框中设置参数,这里采用默认设置。
(3)单击确定按钮将表格转换为层。