第四篇、页面设计篇

蓝色经典 梦觉

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

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

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

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

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

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

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

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

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

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

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

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

总目录 | 第一页 | 第二页 | 第三页