四

四、建立 Layer

作 者 : 阿文

　　 Layer 的概念在 HTML4.0 中被引入，它使页面元素在浏览器窗口中得以精确定位。要注意的是 Dreamweaver 建立 Layer 时，不一定意味着就是使用了 < Layer> 标签。现在有两种 Layer 标准： CSS Layers 和 Netscape Layers。前者使用 < DIV> 和 < SPAN> 标签，这是万维网联合会（W3C）所定义的。 Netscape Layers 使用 Netscape 定义的 < LAYER> 和 < ILAYER> 标签。

　　 IE 4.0 和 Navigator 4.0 以上版本都支持 < DIV> 和 < SPAN> 标签建立 Layer。但只有 Navigator 浏览器本身支持 < LAYER> 和 < ILYAER> 标签。

　　 1、 Layer 的建立和设置

点击 Object 面板的 Layer 图标，鼠标变成中间有一个小方形的十字形状，用它在页面上任意画一个矩形。页面左上方随之出现一个小的黄色的 操作图标，点击它即选择了这个矩形。拖动矩形边框可任意改变它的位置。

　　在 Layer 中插入元素，可以在 Layer 内点击鼠标，和在页面中的操作相同。 layer 可以包含文本、图像、插件，乃至其他的 layer ——也即任何你可以放置在 HTML < body> 中的元素。

Properties 面板显示关于这个 Layer 的信息。

　　 Layer ID：定义标识名，这是唯一的，你可以给它定义一个容易记忆的名字。 L 和 T 指定 Layer 与页面上端和顶端的距离。 W 和 H 指定 Layer 的宽度和高度。 Z-Index 决定 Layers 之间 的索引号，索引号大的 Layer 显示在索引号小的 Layer 的上面。Vis：定义 Layer 的初始显示方式，有 Default、 Inherit、 Visible 和 Hidden 四种显示方式。Bg Image 和 Bg Color 分别设置 Layer 的背景颜色和背景图像。

　　 Tag： Dreamweaver 把 < DIV>、 < SPAN>、 < LAYER>、 < ILAYER> 全都当作有效的 Layer 对象，可选择其中之一（默认为 DIV）。 Overflow （仅对 CSS 标准有效），决定假如 Layer 的内容超出 Layer 定义的大小，该 Layer 在页面中的显示方式，有 Visible、 Hidden、 Scroll和 Auto 四种方式可供选择。 Clip 决定 Layer 中可见部分的大小，输入数值以定义可见部分与 Layer 边界（而不是页面）之间的距离。

　　仅仅当在 Tag 选择 Netscape 标准时， Properties 面板才会显示出 A/B 选项，指定当前 Layer 与某一特定 Layer 的关系， Above（在上）或 Below（在下），当对此项进行设置以后， Z-Index 项不起作用。也就是说，两者只能择其一。

　　 Layer 允许嵌套和重叠，如果要防止 Layer 相互之间的交迭，可选择主菜单 View/ Prevent Layer Overlaps。

　　 2、层的管理

选择主菜单 Windows/ Layer （或按 F11 键）打开 Layer 管理器。当前编辑的页面上所有的 Layer 都在管理器中被列出。

　　管理器中的小眼睛表示 Layer 是否可见， Name 为 Layer 的标识名， Z 表示 Layer 的索引号。任意单击管理器中的某一 Layer，即选中该 Layer，按 Delete 键可以删除它。按住 Shift 键可同时选择多个 Layer，双击 Name 项可为之更改标识名。单击 Layer 左边的空白部分，让小眼睛闭上，则意味着该层在页面中不可见。

Layers 之间的上下及从属关系可通过 Layer 管理器任意调整。如图所示，用鼠标选中 Layer1 将其拖曳到 Layer3 的上面。这一步完成之后，注意到 Layer1 和在其上的 Layer4 的索引号都为之更改了。

　　按住 Ctrl 键把 Layer2 拖曳到 Layer1 上面，放开鼠标，这时 Layer1 和 Layer2 之间就有了从属关系，也就是说， Layer1 是 Layer2 父一级的 Layer。你可以单独对它们进行任何操作。但是当你移动 Layer1 时， Layer2 会跟着作出相应的位置改变。

　　 3、 利用 Layers 设计表格

　　 Layer 无疑是 DHTML 的第一步，假如你确定主页的访问者使用的是支持 Layer 特性的浏览器，那么我们就可以开始 DHTML 的行程。

不过我们都知道早期的IE 和 Navigator 版本并不支持 Layer， Dreamweaver 为这一部分用户增添了一个十分贴心的设计，即把 Layer 转换成表格。 在 Layer 里进行操作的优点是要比在表格的单元格中处理元素容易得多了，因此即使你不想使用 Layer，你也可以先利用它来设计你满意的页面，最后才转换成表格。

选择主菜单 Modify/ Layout/ Reposition Content Using Layers，在对话框中选择 Prevent Layer Overlaps 和Show Layer Palette，禁止 Layer 与 Layer 之间重叠，并显示 Layer 管理器。此时可以按照个人主观愿望来安排各个 Layer 的位置，注意现在没有办法把一层 Layer 移动到另一层 Layer 上面去了。

　　然后选择主菜单 Modify/ Layout/ Convert Layers to Tables 。 Most Accurate 选项表示为每一个 Layer 建立一个单元格，选中 Smallest Collapse Empty Cell 可以建立最少的空行和空列， Use Transparent GIFs 使表格的最后一行填充 Transparent Gif 图形，这可以使转化后的表格在任何浏览器中看起来都有一样的效果， Center On Page 是令转换后的表格位于页面的中间。选择完毕，按 OK 键。我们就可以看到 Layer 转换成表格后的效果了。