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个像素，表格就会自动地附着到已经存在的表格和单元格旁。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。