网页布局，“层”来帮忙 打造随意的网页布局

使用“表格”来进行网页布局，可能你都不会陌生，但是提起“层”，想必你不一定知道，其实它也是非常好的网页布局工具，使用起来既方便又灵活，绝对是网页制作的一把利器。

1 层就好像是一个容器，里面可以放很多“东西”，比如图像、文字、表格、动画。
2 这个标志变蓝表示层被选中。
3 层的移动非常简单，只要选中手柄并拖拉即可。

1 跟我一起先做预备动作，包括准备图片和建目录。图说：(1) 在硬盘中新建一个文件目录，起名为“maomao”。(2) 把一些猫咪的图片拷贝进来。

2 打开Dreamweaver，来开始我们的工作。图说：(1) 点击“Site”菜单中的“New Site”命令，新建一个站点。

3 把这个站点指向“maomao”这个目录。图说：(1) 给站点取名叫“猫咪世界”。(2) 点击这个图标，弹出目录查找窗口。(3) 找到刚刚建好的目录，按一下[打开]。 再按一下[保存]。(4) 最后按一下[ok]即可。

4 接着我们要新建一个HTML文件。图说：(1) 在这里按一下鼠标右键，选择“New File”命令。(2) 将“untitled.htm”改成“maomao.htm”，并双击“maomao.htm”打开它。

5 来看看怎么给文件添加层。图说：(1) 按下键盘上的“Ctrl”键+“F2”键，打开Object面板。(2) 按一下[Draw Layer]（添加层）图标。(3) 在操作区中拖动鼠标。

小技巧：按一下“添加层”图标后，鼠标会变成“＋”字，这就表示我们可以添加新层了。

6 在层中添加一张猫咪的图片。图说：(1) 按一下[Insert Image]（插入图片）。(2) 在对话框中选择一张图片，这里我们选“1.JPG”。(3) 按一下[select]。

7 移动这个层到你想要的位置。图说：(1) 将鼠标放到层的边框上，当鼠标变成十字箭头状时点击，表示这个层被选中了。(2) 按住层的手柄并将它移动到你想要的位置。

8 多用几张猫猫的图片来丰富这个网页。图说：重复5、6、7步骤来添加其他猫猫的照片。

注意：为了使页面布局活泼些，我们可以随意放置层，比如让两个层重叠摆放，这可是层所特有的功能。

9 再给我们的猫猫配上些文字说明，这些文字也都可以放到层中。图说：(1) 按一下[Draw Layer]图标。(2) 在层1的上方拖动鼠标，添加新层。(3) 在层中写上些文字“瞧这一家子”。

10 用同样的方法为另外两张图片配上文字。图说：(1) 重复第9步骤。(2) 拖拉层四周的“小黑块”以调整层的大小。

小技巧：大段文字的显示可以通过对层的调整来完成。

11 这个网页叫什么呢？给它起个好名字吧。图说：(1) 按一下[Draw Layer]图标。(2) 在操作区拖动鼠标，再添加一个新层。(3) 在层中为这个网页起个名字就叫“亲亲猫咪”怎么样。

12 来让这个标题醒目些。图说：(1) 按住键盘上的“Ctrl”键+“F3”键打开属性面板。(2) 选中“亲亲猫咪”这几个字，并在属性面板上做如图设置。(3) 漂亮的“亲亲猫咪”就出现了。

13 光秃秃的文字多不好看，还是加个底色吧。图说：(1) 点中手柄。 (2) 将属性面板中的“bg color”设置为嫩粉色。(3) 现在可以按“F12”键预览效果了。

注意：在浏览器中我们是看不到层的，因为它们是透明的。

结语：层的使用灵活多变，功能也非常强大，熟练地掌握了它，你的网页制作功力定会更上一层楼。