前面已经介绍了用表格实现排版布局的基本方法，但对于很多直接的页面设计人员来说，在表格中将他们的设计转化为实际页面是一件非常枯燥、充满制约的工作，因为他们需要重新面对空白页面将他们的设计稿转换为实际页面，一些设计师也抱怨表格禁锢了他们的想象力，也听到一些制作人员抱怨表格缺乏灵活性，缺乏准确性。其实Dreamweaver4中已经有了好几个专为设计师准备的工具，而这些工具也许并未被大多数人利用起来，利用好它们可以方便的满足设计师的工作习惯，本篇就给大家介绍这几个专为设计师的习惯而准备的工具，希望不要浪费了这些虽然隐蔽但却非常有效的工具和工作方法。

一、设定精确的工作环境。

对于设计师来说，精确的元素定位是首要的条件，在Dreamweaver中有多个有助于精确定位的功能，利用这些工具我们可以在灵活性与精确性之间运用自如。

1、 网格（Grid）：网格对设计师来说不会陌生，各种图像处理和制作软件都有此项功能，这是页面元素精确定位的基础，通过设定一定数值的网格，可以使页面元素有规则的排列。选择「查看＞网格＞编辑网格」，可以设定自己需要的网格大小,也可以改变网格显示为点状显示，还可以设定将层吸附到网格。

2、 标尺（Rule）：标尺是设计师良好的参考工具。它在页面的上方和左方显示，单位可以是象素，英寸或厘米。通常我们用它作为页面元素定位的参考坐标，默认的原点在页面的左上角，我们可以拖动网格原点到页面的任何位置，如图：

若要将原点还原到原来的位置，选择「查看＞标尺＞重设原点」即可。

3、 页面边空：默认状态下，页面内容和页面边框之间空着10个象素左右的距离，我们需要在页面属性中设定这个间距为0。点击右键选择页面属性，将其中的left和top值修改为0。

二、描摹图像。设定好以上的工作环境后，就可以开始我们的工作了。通常设计师都是在图像处理软件里做好他们的设计稿，在Dreamweaver中设计师不需从一张白纸继续他们的工作。利用Dreamweaver中的描摹图像功能，我们可以在设计稿的基础上开始页面制作，这个图片只是一个制作过程中的参考，并不会在最终的页面中出现。

1、 使用描摹图像。选择View>Tracing Image>Load载入描摹图像，选择你希望载入作为描摹图像的设计稿，程序会自动打开页面属性面版，在这里你可以设定这个描摹图像的透明度。

2、 控制描摹图像显示。选择View>Tracing Image>Show可以在显示和隐藏描摹图之间切换。

3、 改变描摹图像的位置。有时我们需要对描摹图像位置进行细微的调整，可以通过View>Tracing Image>Adjust Position命令设置描摹图像与原点的偏移值。
描摹图像的功能不仅仅是对整个页面使用描摹图，我们也可以对单独的一个页面局部使用，例如对一个表格使用一张单独的描摹图，首先我们将一个小的描摹图载入当前页面，然后选定需要使用描摹图的一个局部，例如一个表格，然后执行View>Tracing Image>Align With Selection即可将描摹图像的原点对齐到表格的左上角。

将描摹图定好位置后，我们就可以照着描摹图来安排我们的页面元素。

三、使用设计视图（Layout View）进行设计。在Dreamweaver的旧版本中，我们除了利用表格进行页面布局，利用描摹图像进行辅助外，也可以直接用层进行布局，最后再将层转换为表格来满足各种浏览器，但这种方法一直不太便利，而且也不太严谨，在Dreamweaver4中，新增了一个功能：Layout View，此功能可以使我们的页面转换到一个设计视图中，并利用新的布局单元随意的布置页面元素。

在这个新的设计视图中，我们可以随意的绘制布局单元或布局表格，在这些单元中再按照我们的需要插入相应的页面元素, 而这些布局单元在插入后还可以随意移动，当所有元素都放置在合适的位置后，我们可以切换回标准视图，所有的内容都各自组合在不同的表格中。

（一）两种布局方式开始工作。在设计视图中进行工作有两种方式，一种是从布局单元开始，另一种是从布局表格开始，他们的工作方式稍有不同，下面我来分别介绍。

1、 从布局单元开始。
1）绘制布局单元。当我们打开设计视图时，可以直接在上面绘制布局单元，当我们绘制了第一个布局单元时，Dreamweaver会将整个当前文档空间作为一个布局表格，并在页面的左上角显示Layout Table标签。

2）修改布局单元。蓝色高亮显示的就是布局单元，此布局单元可以随意移动，并可以通过鼠标拖动控制手柄来随意改变大小，也可以先选中布局单元，再在属性面板直接输入相应的数值来改变大小和位置。

3）移动布局单元。将鼠标放置在布局单元的边线上方，可以拖动布局单元到新的位置。

4）添加内容。布局单元放置好位置后，我们就可以在中间放置我们各种页面元素。此时我们可以切换到标准视图看一下，我们发现Dreamweaver自动将布局单元转换为相应大小的一个表格。

2、 从布局表格开始。在上面这种方法中，我们看到Dreamweaver将整个文档作为一个大的容器，各个布局单元分别放置在合适的位置。而最终转换到标准视图时，这些布局单元都是一个大表格中的单元格。这样并不利于页面浏览时的速度，我们还可以通过另一个途径来实现这个目的，这就是从布局表格开始，逐步细化到布局单元。

1） 绘制布局表格。我们可以根据页面内容将页面分为从上到下不同的多个布局表格，而且只能是从上到下平行排列的多个布局表格，不能从左往右排列。

2） 插入布局单元。布局表格放好后，就可以在每个布局表格中分别放置各自的布局单元格。最后的效果如图：

3） 嵌套布局表格。在设计视图中我们也可以方便的插入嵌套布局表格。首先我们需要明白，嵌套表格只能存在于未放置布局单元的布局表格空间中，从页面上来看，当插入一个布局表格时，Dreamweaver会以一种浅灰色表示布局表格的范围，而当插入一个布局单元时，这部分布局表格的空间会变为白色。明白了这一点就可以方便的绘制了，用布局表格工具在已有的灰色布局表格区域拖动，即可绘制出另一个嵌套的布局表格。在这个嵌套的布局表格中同样可以继续绘制布局单元，当我们切换到标准视图时就会发现这个区域是两层互相嵌套的表格。

4） 取消嵌套表格。有时我们绘制了一些嵌套布局表格并插入了许多内容后，想取消这种嵌套关系，而将他们变为同一个布局表格中的内容。这需要先选中内部的嵌套表格，打开属性面版，点击 （Remove Nesting）取消嵌套关系，但原有的内容并不会丢失，而是在原位转换为上一个布局表格中的一部分。

3、 设计视图进阶应用。介绍完布局视图中的基本使用方法后，我们再来看看布局视图令一个重要的用途，既设计可扩展的页面结构，也就是可以随着浏览器分辨率自动改变大小的结构。

1） 改变布局表格为可伸缩。选中布局表格后打开属性面版，在Width（宽度）一项里选择Autostretch（自动伸展），Dreamweaver会有三种选择方法来继续下一步的操作，你可以选择新建一个空白图片、或选择已有的一个图片、或不使用空白图片来生成伸缩性布局表格，这个空白图片将在当前布局表格的下方新增一行，以此固定最左方的单元宽度为固定值，而右方的单元将来会自动扩展到浏览器边缘。此时使用了透明图片固定的一列会如下图标示出来；

2） 改变布局单元为可扩展。在布局表格的上方显示了每列布局单元格的宽度，我们可以点击其中一列的数值从弹出菜单中选择Make Column Autostretch将此列转换为自动扩展的，Dreamweaver会以一段波浪线表示此列，如下图；

3） 创建可伸缩页面。上面两种做法掌握后我们就可以来制作可伸缩的页面了。通常我们会将需要固定宽度的表格列先设定好相应的固定值，然后将剩余不需特定数值的表格列设定为可扩展值。我们看下面两种情况：

此表格为左右结构，左边的列设定为固定宽度值，右边的列设定为可扩展值。

此表格为左中右结构，左边和右边为固定宽度列，中部列为可扩展宽度列。这两种表格都实现了自动适应浏览器分辨率。

4） 编辑可扩展单元。

对已经转换为可扩展的单元，我们还可以再将它转换为固定宽度，也可以将所有的支撑表格宽度的透明图片取消，这两个命令可以从单元格上方的下拉菜单里找到。有时由于我们来回的修改布局表格，会使得一些单元的宽度值与实际值不同，这是会在单元的标示位置出现两个数值，如图；

我们可以点击此处从弹出菜单里选择Make Cell Widths Consistent，使得此单元的宽度值统一。

4、 交互在两种视图中工作。上面我们介绍了在设计视图中进行页面布局的步骤和方法，但需要注意的是，设计视图中有许多的元素属性并不能直接设定和修改，此时我们可以转换到标准视图中按常规方式设定这些属性值，再随时切换回设计视图，两种情况非常兼容，并不会出现任何不适应的变化。

到这里我们介绍了设计视图中的基本工作方法，之所有在前面已介绍的表格布局方法之外再给大家这种方法，只是为了给广大的设计师提供另一个工作的界面和方式，不可否认，这两种工作方式各有优缺点，至于具体使用那种方式，完全可以根据自己的习惯来决定。但是多条道路多个选择，相信多掌握一种方法可以给你更多更好的选择，也相信一定会有一种方法能适合你。朋友们有什么问题，可以到http://www.blueidea.com/提出讨论。

技巧提示：

1、 快速改变视图辅助参数。我们经常需要开关网格显示、开关标尺显示、开关描摹图像显示，此时不需要总从下拉菜单执行这几条命令，在工作窗口的最上方有一个 快速开关常见视图操作的按钮，在这里可以改变常用的视图辅助参数。

2、 快速居中对齐布局表格。在设计视图中，我们创建的布局表格默认都是距页面左边的，这常和我们需要的居中放置不符，我们通常都的切换到标准视图来改变这个设置。其实我们可以选定这个布局表格，打开属性面版点击 ，或者按Ctrl+T打开快速标签编辑窗口，直接输入Align=”center”，则此布局表格自动居中布置。

3、 连续绘制多个布局单元。有时我们需要不停的点击Object面板上的布局单元按钮，绘制多个布局单元，这样很繁琐。其实我们可以按住Ctrl健，就可以连续的绘制多个布局单元。