（全新）dreamweaver第九章 使用布局模式设计网页.docVIP

前面我们介绍了用表格进行网页布局定位的方法，它是通过直接设定表格的参数来实现的，对于简单的情况，这种方法还可以胜任，如果布局很复杂，用手工直接设定表格就会变成一件极其繁琐的工作，甚至变成“不可能完成任务”。　　因此Dreamweaver 为用户提供了方便的手段创建和控制网页页面的布局，而本质仍然是通过表格来实现的。　　为了简化使用表格来创建页面布局的过程，Dreamweaver提供了布局视图。在布局视图下，用户可以使用表格作为潜在的结构来设计自己的网页布局，并且可以避免原来使用表格带来的缺陷。例如可以在网页上轻松地画出单元格，然后定制和移动这些单元格到需要的任何地方。创建的布局可以有固定的宽度或者可以占满整个浏览器窗口。　　要使用布局视图，必须首先从切换Dreamweaver的标准视图模式切换到布局视图模式。　　首先观察Dreamweaver的“插入”面板中的“布局”页。　　在默认情况下，文档窗口是以标准模式显示的，也就是在Dreamweaver的以前版本中见到的样子。当按下按钮后，就切换到了布局视图模式。如果选择菜单命令“查看→表格模式→布局模式”也可以达到相同目的。　　要切换回标准模式，只要单击按钮就可以了。　　进入布局视图模式之后，和两个按钮就会由灰色的禁止状态变为有效状态。它们都是用于创建布局的。按钮用于创建布局表格，按钮用于创建布局单元格。　　使用布局视图来进行网页的划分和定位的关键就是在页面中创建表格以及表格中的单元格，因此布局表格和布局单元格这两个概念十分重要。　　如果已经在Dreamweaver的标准视图中创建了表格，然后切换到布局视图，那么刚才创建的表格将会变成空白的布局单元格。如果这些单元格不符合要求，那么在创建新的布局单元格之前，必须把这些空白单元格删除。　　9.1　理解布局表格的基本原理　　当切换到了布局视图模式之后，就可以在网页中添加布局表格和布局单元格了，但用户不必先创建布局表格，然后在里面创建布局单元格。例如，用户可以在网页的顶部绘制一个单独的单元格作为菜单条，在页面右边绘制一个单元格作为子菜单，在它的旁边绘制一个单元格作为页面的内容显示区。创建了布局单元格之后，会自动创建布局表格以容纳刚刚创建的布局单元格。　　在页面中创建了第一个布局表格后，就不能在它的外面再创建布局表格和布局单元格了。在一个布局表格之中可以创建多个布局单元格，还可以在布局表格中再创建多个布局表格来取得更好的页面效果。但是，不能在布局单元格中创建布局表格。需要注意的是，在一个布局表格中，无论是创建布局单元格还是布局表格，都不能相互重叠。　　在布局视图模式下，布局表格的下方会出现一条绿色的指示条，它会显示表格中每一列的宽度。如果要关闭它，就可以使用菜单命令“查看→可视化助理→隐藏所有”。　　在布局视图模式下，可以在页面中绘制布局单元格和表格。如果是先创建布局单元格，则会自动创建一个布局表格作为它的容器，布局单元格总是存在于布局表格中。　　默认情况下，由Dreamweaver自动创建的布局表格的宽度和文档窗口的宽度相同，可以调整它的大小，也可以使它能够自动实现大小放缩。　　绘制布局单元格　　具体的操作步骤如下。　　（1）在布局视图模式下，在“插入”面板的“布局”页中单击绘制布局单元格按钮，这样光标就会变成十字的形状（＋）。　　（2）将光标移到想要绘制单元格的初始位置，然后拖动鼠标来创建这个布局单元格。要创建多个单元格，不必每次都点击绘制布局单元格按钮，只需在绘制的过程中按住〖Ctrl〗键即可。　　这样单元格就会以蓝色的轮廓、白色的背景显示在页面上。蓝色是布局单元格的默认轮廓线颜色，可以通过设置改为其他的颜色。在单元格的外面会产生一个灰色背景的矩形区域，这就是Dreamweaver自动生成的布局表格。每个单元格的尺寸都会在布局表格的列的底部区域显示出来。　　网页页面布局中所有的单元格都可以不采用同样的尺寸或者宽度，例如可以将单元格调整为相同的行高，但是有不同的宽度。　　绘制布局表格　　具体的操作步骤如下。　　（1）在布局视图模式下，在“插入”面板的“布局”页中单击绘制布局表格按钮，这样光标就会变成十字的形状（＋）。　　（2）将光标移到想要绘制的表格的初始位置，然后拖动鼠标来创建这个布局表格。　　如果这是网页中的第一个表格，它将自动被放置在页面的左上方。要创建多个表格，不必每次都单击绘制布局表格按钮，只需在绘制的过程中按住“Ctrl”键即可。　　这样表格就会以绿色的轮廓显示在页面上。绿色是布局表格的默认轮廓线颜色，可以通过设置改为其他的颜色。每个表格的尺寸都会在列的底部区域显示出来。　　表格不可以相互重叠。页面布局可以分成多个列和行，并且不会发生重叠的情况。　　用户可以在