第八章:层
8.1 理解层
层给网页设计者提供了对页面元素最精确的布局定位方式。使用层你不仅可以随心所欲地安排网页上各种元素的位置,而且可以使它们呈现层叠的效果--即一层置于另一层之上,同时可以在显示某层时隐藏另一层。甚至可以通过时间线的设置来让一个或几个层同时在屏幕上移动。
层里可以容纳文字、图象、表单、插件甚至另一个层--总之一句话,凡是在网页上容许出现的元素,都可以置于层中。
8.2 建立层
从Objects面板中点
按钮,或从菜单中选Insert> Layer (插入>层),这时鼠标会变成十字形,拖动鼠标就可插入一个层。如图1所示。

图1 层
然后对层可以通过其上的八个小控点进行拖动,放大缩小等。另外可以选择该层,在属性面板中对其进行设定,如图2所示。

图2 层属性面板
下面我们就介绍层的属性面板中各选项:
Layer ID 层的名字,可以随便起,以便于识别该层。
L和T 层相对于页面或当前层(嵌套时)的左边距和顶边距。
W和H 指层的宽和高。如果层中包含的元素的宽高超过了指定的层的宽高,那指定的W和H值会被忽略。
Z-Index 堆叠顺序号,表示层的前后编号。 号码大的层在下方。并且取值可正可负。 要改变Z-Index的大小,可以直接在属性面板中键入, 更简单的方法是按F11键调出层面板用鼠标直接拖动各层。
Vis 确定层的初始显示状态。用scripting 语言,就可以控制层的可见性以制造动态显示层内容的效果。几个选项的意思分别是:
Default 不特别指明层的可见性属性。
Inherit 继承父层的可见性属性。
Visible 层内容可见,无论父层可见与否。
Hidden 隐藏层内容,无论父层可见与否。
Bg Image 层的背景图,可点击后面的文件夹图标来选择图像文件。
Bg Color 层的背景色,不填就为透明。
Tag 确定层的类型是 CSS 层或 Netscape层。CSS 层是用 DIV及 SPAN 标签来定义的。 Microsoft Internet Explorer 4.0 和 Netscape Navigator 4.0都支持。
Overflow 如果层中的元素大小超出层的宽高,该项将决定显示的方式。
Visible 层根据元素的尺寸自动扩展。
Hidden 保持原有大小,元素超出范围的部分将不可见。
Scroll 给层加滚动条,无论层中元素大小是否超出层的宽高。
Auto 仅在层中元素大小超出层的宽高时才给层加滚动条。
Clip 设定层的可见面积,指定的数值代表的是与层边框之间的象素距离。
8.3 层面板的使用
层面板可以比喻成是你的整个页面中用到的层的地图。只需点菜单 Window > Layers (窗口>层)或者按一下 F11 键就可以调出层面板。各层的名称以列表形式出现;最先建立的层在列表最下方,最近建立的在列表上方(即倒序排列),用鼠标拖动可调整层的顺序。若是嵌套式的层(即层中插入层)亦会以嵌套方式列在父层中,点击旁边的方框就可以显现嵌套的层。如图3所示。

图3 层面板
最常见到的一些技巧:
1 防止重叠
在图12-3中第一行即为选项Prevent Overlaps(防止重叠)如果选中该项,你画的任意多个层都不会发生重叠的情况,这一点对将层转化为表格时是很有用的,否则重叠的层无法转化为表格。本章后面会讲到。
如果有意要制造叠加的效果,则不应选此项。
2 层的嵌套
所谓层的嵌套是指一个层建在另一个层内部。这样做的好处是你可以用嵌套方式来使所有的层形成一个集合。因为一个嵌套的层或者我们称之为子层可以随父层移动并且继承父层的可见或不可见性(visibility)。
如果发觉没办法在层中再插入子层时,就需修改一下层的参数。点菜单 Edit > Preferences(编辑>参数),选 Layers项,让 Nesting 项被选中。如图4所示。
图4 层参数对话框
建立嵌套层的方法如下:
方法一:首先在现有的层中点一下鼠标以设定插入点,然后点菜单Insert > Layer(插入>层)。
方法二:直接从控件面板上按住
按钮将其拖到现有的层中即可。
方法三:点菜单 Window > Layers(窗口>层)或按 F11 打开层面板。如图5所示。
图5 无嵌套的层面板列表
按下 Control 键并选择层layer2,拖动其到layer3层上。就可将layer2层已嵌套在layer3层之中了,如图6所示。
图6 有嵌套的层面板列表
12.4 层的操作
1 层的几种状态
层首先要激活才能在里边任意放各种控件。激活一个层其实就是在层中置一个插入点,只需在层中任一位置点一下鼠标,这时层的边框高高密度显示,且左上角有一手柄,点一下即选中该层,如图7所示。
未激活 |
激活 |
选中 |
2 调整层的大小
选中层,然后在属性面板中输入宽度和高度值。或直接用鼠标的在层的八个控点上拖动调整大小。如果层面板中 Prevent Overlaps(禁止重叠) 选项被选中,系统会禁止不同的层发生重叠的调整。
要调整多个层: 可选中两个或多个层,然后在属性面板中填入适当的高和宽值即可。
3 层的对齐
选中多个层,点菜单 Modify > Layers and Hotspots(修改>层和热区), 然后选择对齐选项。
4 移动层
无论是移动一个或多个层,先选中层,用鼠标拖住最后一个选中层的手柄随意移动。
5 改变层的深度
层的深度,用Z-Index属性来表示,可以直接在属性面板中键入,还可按F11键调出层面板用鼠标直接拖动各层。
6 改变层的可视性
利用层的可见性能作出一些网页特效,比如鼠标划过按钮,页面会出现一幅图片或一段说明文字,移开鼠标又会恢复原样。
方法一: 点菜单 Window > Layers (窗口>层)打开层面板。可看到
图标,利用它可以修改层的可视性。
睁开眼睛表示层为可见的;闭的眼睛图标表示层为不可见; 如果没有眼睛图标,表示层为继承性的即与父层属性相同,若并非嵌套层,那就是可见的,如图8所示。
图8 用层面板控制可见性
方法二:选中层后,在属性面板的Vis项中就可设定层的显示状态,各选项的含义参见本章前面的内容。
7 用层来设计表格
表格给我们比较灵活的定位方式,可还是不能完全随心所欲。层可以帮我们做复杂的页面设计,然后再将层转化成表格以适应低版本的浏览器 。反过来也可以将现有的表格转化为层做进一步优化。
(1) 将层转化为表格:
1 点菜单 Modify > Layout Mode > Convert Layers to Table(修改>布局模式>层转化为表格)。
2 随后出现的对话框:

图9 层转化为表格对话框
Most Accurate 最大精确度。
Smallest: (Collapse Empty Cells )指的是各个层的边缘,比如本想让两个层在同一水平线上,但实际画的会有些误差。如果选中该项,那么在设定误差值之内的层都会自动对齐。
Use Transparent GIFs 将用透明GIF图像来填充表格最后一行。这样做可以保证表格在所有的浏览器里看起来都没有变化。
Center on Page 表格在页面中央,否则为左对齐。
(2)将表格转化为层:
点菜单 Modify > Layout Mode> Convert Tables To Layers(修改>页面布局>表格转化为层)。
这样做的好处是:表格重新规划十分困难,而转化为层后,可以轻易地对层进行拖动调整各部分的位置。