dreamweaver第九章 使用布局模式设计网页

前面我们介绍了用表格进行网页布局定位的方法，它是通过直接设定表格的参数来实现的，对于简单的情况，这种方法还可以胜任，如果布局很复杂，用手工直接设定表格就会变成一件极其繁琐的工作，甚至变成“不可能完成任务”。

因此Dreamweaver 为用户提供了方便的手段创建和控制网页页面的布局，而本质仍然是通过表格来实现的。

为了简化使用表格来创建页面布局的过程，Dreamweaver提供了布局视图。在布局视图下，用户可以使用表格作为潜在的结构来设计自己的网页布局，并且可以避免原来使用表格带来的缺陷。例如可以在网页上轻松地画出单元格，然后定制和移动这些单元格到需要的任何地方。创建的布局可以有固定的宽度或者可以占满整个浏览器窗口。

要使用布局视图，必须首先从切换Dreamweaver的标准视图模式切换到布局视图模式。 首先观察Dreamweaver的“插入”面板中的“布局”页。

在默认情况下，文档窗口是以标准模式显示的，也就是在Dreamweaver的以前版本中见到的样子。当按下按钮后，就切换到了布局视图模式。如果选择菜单命令“查看→表格模式→布局模式”也可以达到相同目的。

要切换回标准模式，只要单击按钮就可以了。

进入布局视图模式之后，和两个按钮就会由灰色的禁止状态变为有效状态。它们都是用于创建布局的。按钮用于创建布局表格，按钮用于创建布局单元格。

使用布局视图来进行网页的划分和定位的关键就是在页面中创建表格以及表格中的单元格，因此布局表格和布局单元格这两个概念十分重要。

如果已经在Dreamweaver的标准视图中创建了表格，然后切换到布局视图，那么刚才创建的表格将会变成空白的布局单元格。如果这些单元格不符合要求，那么在创建新的布局单元格之前，必须把这些空白单元格删除。

9.1 理解布局表格的基本原理

当切换到了布局视图模式之后，就可以在网页中添加布局表格和布局单元格了，但用户不必先创建布局表格，然后在里面创建布局单元格。例如，用户可以在网页的顶部绘制一个单独的单元格作为菜单条，在页面右边绘制一个单元格作为子菜单，在它的旁边绘制一个单元格作为页面的内容显示区。创建了布局单元格之后，会自动创建布局表格以容纳刚刚创建的布局单元格。

在页面中创建了第一个布局表格后，就不能在它的外面再创建布局表格和布局单元格了。在一个布局表格之中可以创建多个布局单元格，还可以在布局表格中再创建多个布局表格来取得更好的页面效果。但是，不能在布局单元格中创建布局表格。需要注意的是，在一个布局表格中，无论是创建布局单元格还是布局表格，都不能相互重叠。

在布局视图模式下，布局表格的下方会出现一条绿色的指示条，它会显示表格中每一列的宽度。如果要关闭它，就可以使用菜单命令“查看→可视化助理→隐藏所有”。

在布局视图模式下，可以在页面中绘制布局单元格和表格。如果是先创建布局单元格，则会自动创建一个布局表格作为它的容器，布局单元格总是存在于布局表格中。

默认情况下，由Dreamweaver自动创建的布局表格的宽度和文档窗口的宽度相同，可以调整它的大小，也可以使它能够自动实现大小放缩。

绘制布局单元格

具体的操作步骤如下。

（1）在布局视图模式下，在“插入”面板的“布局”页中单击绘制布局单元格按钮

，这

样光标就会变成十字的形状（＋）。

（2）将光标移到想要绘制单元格的初始位置，然后拖动鼠标来创建这个布局单元格。要创建多个单元格，不必每次都点击绘制布局单元格按钮，只需在绘制的过程中按住〖Ctrl〗键即可。

这样单元格就会以蓝色的轮廓、白色的背景显示在页面上。蓝色是布局单元格的默认轮廓线颜色，可以通过设置改为其他的颜色。在单元格的外面会产生一个灰色背景的矩形区域，这就是Dreamweaver自动生成的布局表格。每个单元格的尺寸都会在布局表格的列的底部区域显示出来。

网页页面布局中所有的单元格都可以不采用同样的尺寸或者宽度，例如可以将单元格调整为相同的行高，但是有不同的宽度。

绘制布局表格

具体的操作步骤如下。

（1）在布局视图模式下，在“插入”面板的“布局”页中单击绘制布局表格按钮，这样光标就会变成十字的形状（＋）。

（2）将光标移到想要绘制的表格的初始位置，然后拖动鼠标来创建这个布局表格。 如果这是网页中的第一个表格，它将自动被放置在页面的左上方。要创建多个表格，不必每次都单击绘制布局表格按钮，只需在绘制的过程中按住“Ctrl”键即可。 这样表格就会以绿色的轮廓显示在页面上。绿色是布局表格的默认轮廓线颜色，可以通过设置改为其他的颜色。每个表格的尺寸都会在列的底部区域显示出来。

表格不可以相互重叠。页面布局可以分成多个列和行，并且不会发生重叠的情况。 用户可以在页面布局上的空白区域中绘制一个布局表格，或者在一个已经存在的布局表格中绘制作为嵌套的布局表格，也可以围绕已经存在的布局单元格和表格绘制新的表格。 如果页面中已经包含了内容，那么布局表格只可以在内容的下方绘制。

为布局单元格添加内容

在布局视图中，可以在布局单元格中添加各种内容，例如文本、图片以及其他多媒体对象。加入的方法和在Dreamweaver标准视图中添加内容一样。单击选择要添加内容的单元格，然后就可以在其中添加内容了。 内容只能在布局单元格中添加，所以必须先创建布局单元格。页面中灰色的部分是不可以添加任何内容的，除非在这些区域中插入了布局单元格。 当在单元格中添加了大于单元格面积的内容后，它会自动扩大以放置插入的内容。当单元格变大之后，它旁边的单元格也会受到影响。

在布局中的每个单元格和表格都可以被移动或者重新设置大小，这样就可以方便地调整页面的布局了。

重新设置单元格的大小

具体的操作步骤如下。

（1）单击单元格的边框或者是按下“Ctrl”键，然后单击单元格的任何地方，这样单元格会出现把柄。

（2）拖动这些把柄中的任何一个就可以调整单元格的大小。

当新绘制的单元格的边框与旁边的单元格的边框的间距小于8个像素时，会自动地附着到已经存在的单元格旁。布局单元格不能相互重叠，单元格的大小至少要能容纳其中的内容。

移动单元格

具体的操作步骤如下。 （1）单击单元格的边框。

（2）拖动这个单元格到页面上所需放置的地方，也可以使用键盘上的箭头按钮来调整单元格的位置，而且每次移动1个像素，当同时按住“Shift”键时每次可移动10个像素。

调整表格大小

具体的操作步骤如下。 （1）单击表格左上角的

按钮，这时在表格的四周会出现把柄。

（2）拖动这些把柄中的任何一个来调整选择的表格的大小。

如果两个边框的间距小于8个像素，表格就会自动地附着到已经存在的表格和单元格旁。

移动一个布局表格 具体的操作步骤如下。 （1）单击表格左上角的

按钮，这时在表格的四周会出现把柄。

（2）拖动这个表格到页面上所需放置的地方，也可以使用键盘上的箭头键来调整表格的位置，而且每次移动1个像素，当同时按住“Shift”键时每次可移动10个像素。 最外面的布局表格不能移动。

在布局视图中可以有两种设定宽度的方式：固定宽度和自动伸展。在列底部区域显示了宽度数值。固定宽度是一个指定的十进制数值，例如300（像素）。自动伸展设置了宽度可以根据窗口的宽度而自动调整。使用了自动伸展命令，布局将总是能够填满浏览器窗口。 例如，假设布局中在页面左边有一个菜单条，它的标题在顶部，它的主要内容在页面的右边，则可以设置左边的列为固定的宽度，指定右边的主要内容区域是自动伸展。当浏览器窗口宽度不同，中间地图的位置也在变化，这说明地图所在的列宽度不是固定的，而是自动拉伸的。

设置自动伸展宽度

设置自动伸展宽度有两种方法。

（1）单击要设为自动伸展宽度的列底部的数字（也就是显示了该列宽度的数值），然后在出现的（允许自动伸展命令）菜单（以后我们把这个菜单称为该列的底部菜单）中选择“列设置为自动伸展”。

（2）选择该列，然后在属性面板中选择自动伸展选项。

当设置了一个列为自动伸展宽度后，Dreamweaver会自动将其余所有列设为固定宽度，并且会在固定宽度的列中插入空白图片，从而控制布局。 在一个布局表格中，最多只有一个列可以被设置为自动伸展宽度。如果一个布局表格的某一列已经被设为自动伸展，这时又将另一列设为自动伸展列，那么原来的自动伸展列将自动变为固定宽度列。

设置固定宽度列

对于刚刚创建的布局表格和布局单元格而言，表格中的列都是根据初始条件设置的宽度，例如用鼠标拖拽出的宽度。在HTML文件中设置了宽度，但没有加空白图片，那么在浏览器中显示的时候，就会根据实际情况显示，很可能不是设置的宽度。这时在该列的底部，可以看到在宽度数值两边是绿色单线。如果使用了空白图片，就可以使得该列的宽度在显示

时不发生改变。

对于已经被设为自动伸展的列来说，在该列的底部菜单中选择“列设置为固定宽度”命令，就可以把该列转换为固定宽度的列。这时在该列的底部，可以看到在宽度数值两边是绿色双线。

9.2 使用布局表格制作页面

在本节中，我们首先使用Fireworks软件制作必要的图形，然后输出为图片文件，并在Dreamweaver使用者图片文件，构成一个简单的网页。

设计页面图形

由于本课程的重点是学习Dreamweaver，而不是Fireworks，因此这里仅仅使用Fireworks的一些最基本的功能，进行一下非常简单的设计工作。如果有兴趣的读者可以参考相关的资料和书籍，以便更深入地掌握Fireworks的工作。

例外，需要指出的是，如果读者对fireworks不熟悉，也可以使用Photoshop等其他的图形图像软件，只要能达到目的就可以了。

在这里，我们设计的内容包括了三个部分，分别针对页面的顶部和底部的内容。在页面的顶部，左侧是一个图形标志，右侧是一个横条，里面可以放置一些图形或者文字内容，在页面的底部，则是一个圆角矩形，将来作为底部单元格背景，然后可以用文字来显示版权信息等内容。

分割以及输出图形

Fireworks软件是一个专门以网页设计为目标的图形图像设计软件，因此它由一些非常方便的辅助功能。

例如，在上面设计好了一个图形以后，我们需要把它输出为三个独立的图片文件，以放置在网页的不同位置上。Fireworks提供了非常方便的图像分割和输出功能，通过使用“切片”工具，可以对图像进行分割，然后可以输出为三个独立的文件。

9.3 图像背景化

首先来完成页面顶部的设计

（1）打开“布局”按钮下的菜单列表，选择“常用”命令，回到常用的图标属性栏中。 （2）然后将文本光标置入到第一个单元格中，单击“插入”栏内的“图像”按钮。在弹出的对话框中选择相对应的图像。

（3）然后继续在旁边的单元格内插入图像，使两个图片对应地放置到单元格的位置上。 （4）接下来处理底部的单元格，这里要注意，如果仍然像上面的方法，直接把图形插入到底部的单元格中，那么就无法在上面输入文字了，因为这个图片是作为单元格中的内容存在的，因此这里就需要用到“图像背景化”的操作了，也将就是说，要把这个图片变成单元格的背景，而不是单元格中的内容。

一种方法是直接把图片以单元格背景的方式插入网页，将文本光标置入，接着打开属性面板。单击“背景”选框后面的“单元格背景URL”按钮。在弹出的“选择图像源文件”对话框中为该单元格选择相对应的图像。

另一种方法是，先向插入普通图片那样，在单元格中插入图片，这样可以先使设计师确认页面效果无误，然后再把图像的地址复制表格单元格的背景框中，然后把图片删除。

完成单元格背景图像的选择后，此时光标仍然停留在单元格内，可以直接到该单元格内输入相关的文字信息。例如在这里可以输入一些版权信息相关的文字内容。

制作正文区域

在制作好页面的底部以后，页面中间的部分还空着，中间部分的左侧将来会放置一个导航条，而右侧部分则放置正文内容。

这里先来制作正文区域，这里同样用到了“图形背景化”的操作，但是与制作页面底部的操作还有所不同。

正文区域和底部的区别在于，底部单元格的高度是固定的，而正文区域的高度应该是可变的，因为将来我们需要在正文区域放置内容，而事先我们并不能确定会放置多少文正内容，可能会比较长，也可能会比较短，因此我们应该使这个区域可以自动地适应高度的变化，这就利用背景图像的一个特性——“平铺”。

为了和整体页面的风格一致，这里仍然使用圆角矩形来制作一个正文区域。有了前面的经验，这里制作起来应该就不困难了。先在Fireowrks中，制作一个圆角矩形，然后从上到下切分为三个部分，然后在网页中，正文内容部分插入一个表格，这个表格从上到下分为三个单元格，上下两个单元格中分别放置图形中对应的部分就可以了，而中间的部分，有两种处理方法。

一种方法是直接把这个单元格的背景设置为和上下一致的蓝色，这样是很方便的处理方法。这种方法的缺点是，只能把背景色设置为某种单一的颜色，如果希望以某种图形作为背景，比如一些浅颜色的条纹作为背景就不行了。

因此，如果需要以图形作为背景，就要先设计好这个图形，并保证这个图形平铺起来仍然没有“接缝”，就可以就是把中间的图形现在Fireworks中设计好，然后以背景的方式引入到单元格中，既会产生能够适应表格高度变化的图形背景了。

9.4 制作导航栏

现在，这个页面已经基本做好了，需要完成的就是中间左侧的导航条了。制作导航条的工作也可以在Fireowks中完成，这里就不再赘述了，设计好以后，每一个按钮独立输出为一个图片文件。

然后把这些独立的按钮图片插入到页面的适当位置就可以了。

要是导航条真正起到导航的作用，就需要为这些按钮设置链接，这样才能形成一个真正的网站。因此，可以把这个页面先令存为几个文件，每个文件作为一个栏目的页面，分别输入正文内容，然后为按钮设置链接。

到这里，我们就在很短的时间里，制作一个网站，尽管这个网站非常简单，但是里面用到的一些技术大家可以用到各个网站中去。

本文来源：https://www.bwwdw.com/article/wq4w.html