七、网页的排版

　　表格的使用

　　表格是网页的一个非常重要元素，因为HTML本身并没有提供更多的排版手段，我们往往就要借助表格实现网页的精细排版。可以说表格的是网页制作中最为重要的一个技巧，表格运用得好坏，直接反映了了网页设计师的水平。

　　点击对象面板的 ，看到如下的对话框：

　　① 行数：表格的行数；列数：表格的列数；

　　② 宽度：表格的宽度，单位可以是Pixels（像数）或Percent（百分比）。按像素定义的表格大小是固定的，而按百分比定义的表格，会按照浏览器的大小而变化。后面会继续深入讲解两种定义方法的区别；

　　③ 边框：表格线的宽度；

　　④ 单元间距：单元格间距；单元格填充：单元格边距。所谓的单元格，就是表格里面的每一小格。

　　按照如图的设置后，就得到下面这个表格：

　　在表格线上点一下，可以全选整个表格，此时可在属性面板看到：

　　① 行，列：表格的行和列；

　　② 宽，高：表格的宽和高，通常情况下，我们都不会定义表格的高度；

　　③ 间距，填充：单元格间距和单元格边距；边框：表格线的宽度；

　　④ 对齐：表格的对齐方式，可以将表格靠左（Left）、置中（Center）、靠右（Right）

　　⑤ ：消除行的高度设置；
　　　 ：消除列的宽度设置；
　　　 ：将表格宽度的设置由百分比转换为像素；
　　　 ：将表格宽度的设置由像素转换为百分比；
　　　 ：将表格高度的设置由百分比转换为像素；
　　　 ：将表格高度的设置由像素转换为百分比；

　　⑥ 背景颜色：设置表格的背景颜色；

　　⑦ 边框颜色：设置表格线的颜色；

　　⑧ 背景图像：设置表格的背景图，如果设置了背景图，背景颜色就失效了；点击后面的公文包按钮选择背景图；

　　如果我们把光标移到其中一个单元格，此时看到的属性面板又有所不同：

　　① ：合并单元格（之前要先选择相应的需要合并单元格）；
　　　 ：拆分单元格，拆分为多行或多列；

　　② 水平：单元格内部的水平对齐方式，作用与 类似；
　　　 垂直：单元格内部的纵向对齐方式；

　　③ 宽，高：单元格的宽度与高度；

　　④ 背景：单元格背景图；

　　⑤ 背景颜色：单元格背景颜色；

　　⑥ 边框：单元格边框颜色。

　　以上是一个3×2的表格，表格宽度为350个像素，每个单元格的宽度为33%，即占表格的三分之一，其中单元格1和单元格4 已经合并；单元格填充、单元格间距、边框都为10；表格的底色为灰色，单元格5的边框颜色为红色，单元格6的背景色为绿色；

　　在上面的例子，我们将边框设置为0，在编辑状态下，看到的表格是：

　　宽度为0的边框线，在编辑状态下会以虚线表示，而实际的浏览效果为：

　　可见，宽度为0的边框就不会在浏览器显示。其实所谓的利用表格进行排版，就是使用边框为0的表格，将页面划分为多个区域，从而达到定位排版的效果。另外，表格与表格是可以嵌套的，例如在上面表格中，在单元格2里再插入一个表格宽度为100%，边框为0的表格，并分别为单元格①②③设置不同的背景色，在编辑状态下可以看到：

　　而实际的浏览效果为：

　　表格的嵌套在网页制作中被经常使用到，尤其是在新浪、搜狐、网易等门户网站中，为了使大量的信息整齐地展示在浏览者面前，表格的嵌套就使用得最为频繁。下图是腾龙远程教育网的首页在编辑状态下的情况，可以看到，页面密密麻麻地布满了表格线：

　　层的使用

　　如果你觉得用表格对页面元素进行定位太难掌握，不妨尝试利用层（Layer）这个好东西。点击属性面板的 按钮，光标会成为一个十字，在编辑窗口上拖动，就可以创建出一个层，我们可以在层上输入绝大部分的网页元素，例如图片、文字等。层的好处是可以放置在页面的任何位置，如下图：

　　选择一个层后，对应的属性面板如下：

　　① 层编号：层的名称，用于识别不同的层；

　　② 左，右：层的位置，L是距离页面左边界的距离，T是距离页面上边界的距离；
　　　 宽，高：层的宽和高；

　　③ Z轴：层的Z轴顺序；

　　④ 背景图像：层的背景图；

　　⑤ 显示：层的显示状态，其中的Hidden是将层隐藏，处于不可见状态；

　　⑥ 背景颜色：层的背景颜色；

　　⑦ 标签：层使用的代码方式，一般使用默认的DIV即可；

　　⑧ 溢出：如果层里面的文字太多，或图片太大，层的大小不足以全部显示的时候，可以选择：
　　　 visible：超出的部分照样显示；
　　　 hidden：超出的部分隐藏；
　　　 scrool：不管有否超出，都显示滚动条；
　　　 auto：有超出时才出现滚动条；

　　例如我们选择auto，那么以上例子中的层，在浏览时会显示为：

　　层的优点很明显，但缺点也同样明显，例如难以制作一个适应不同分辨率的网页；当一个页面使用了多个层后，页面的复杂程度增加而导致编辑起来非常烦琐；编辑状态与浏览状态的实际效果有相当明显的差别等。通常人们是采用利用Layer进行排版，然后将层转换为表格的做法（“修改”>“转换”>“层到表格”），具体操作在此就不多加叙述，大家可以自己尝试一下。

　　新增的排版功能

　　前面之所以以将图层与表格互换的功能一笔带过，是因为在DW MX中，推出了一个新的Layout排版功能，能够更加直接方便地对页面布局进行编排。在上面的“插入”中选择的“布局”标签，有四个按钮：

　　标准视图：默认状态下的视图；

　　布局视图：转入排版视图，就是这次要介绍的功能；

　　按下“布局视图”按钮后，右边的两个按钮就可以使用了（如果是在“标准视图”的情况下，这两项是不可用的。）；

　　 绘制布局表格：象画图一样在页面里面排版表格；

　　 绘制布局单元格：在表格中画单元格。

　　现在我们尝试利用以上的工具绘制一个新页面： 新建一个页面，点“布局视图”按钮，进入布局视图，点 在页面上画出表格，再点 ，在表格中画出单元格，其中表格会以绿色框表示，单元格会以蓝色表示，未确定的单元格会以灰色表示，如下图：

　　在这里，每一个表格，单元格的大小都可以随意的调整。绘制好后，点回到“标准视图”，你会发现，刚才画的“布局表格”已经全部转化为表格了。如下图：

　　另外，在布局视图上的表格上有一个数字，表示的是表格的宽度，单击数字，可以看到以下菜单：

　　列设置为自动伸展：列自动伸缩，就是表格可以按照屏幕比例来自动调整宽度，相当于将表格的宽度定义为百分比。

　　添加间隔图像：增加/移去透明图片。透明图片的作用就是撑住表格的宽度。

　　清除单元格高度：清除单元格高度。

　　以下，就是“腾龙远程教育网”利用“布局视图”功能进行页面排版的情景，与标准视图相比，就直观得多了。