Dreamweaver4神童教程之十

Dreamweaver4神童教程——排版
摘自赛迪网（小雷）

　　网页排版，在网页制作中具备举足轻重的作用，前面我们谈到的表格、框架、图层定位和制作技术，严格说来，也是排版技术的分支。从前面我们也看到，要制作一个有效而复杂的版面，无论是用表格，还是用框架，甚至用图层，都需要进行繁琐的参数配置和定义，那么有没有一种比较简单方便的排版方式呢？

　　答案是肯定的。 Dreamweaver 4.0 较以往版本，多了一个 Layout 版面制作技术，使用这一技术，快速方便地完成一个复杂版面的设计，不再是个梦想！

　　Layout 将普通的排版操作，用"绘画"的形式进行诠释，需要什么样的版面？手绘一个就行了，您甚至无需去碰属性面板一下！

一．Layout 基础：

Window/Objects，打开的常用对象面板的下部分有些不同，如图一：

图一

Layout 栏中：
Draw Layout Cell：绘制版面单元格。
Draw Layout Table：绘制版面表格。
提示：还记得表格制作中单元格和表格的关系吧？ Layout 中单元格和表格的关系是相同的。

View 栏中：
Standard View：标准视图。
Layout View：排版视图。
提示：要使用 Layout 功能，首先得从标准视图模式转换到排版视图模式，否则 Layout 中的工具没法使用。

二．Layout 应用：

　　现在我们来排制一个如图二的复杂版面（详情请见 Resource.zip 文档中的 13.htm ）。

图二

1.首先进行分析：图二由一个一行两列的大表格构成，1 区占了左列，右列由其他嵌套表格一起构成；嵌套表格中，2 区，3 区，4 5 6 7 区一起构建成最大的嵌套表格；4 5 6 7 又是个四行一列的嵌套表格。

提示：这里我们说到的是表格，但排版跟表格还是不同的，其中一个最明显的地方就在于表格能够配置边界是否可见，而版面就没有这一功能了。记着，版面只是组织一个网页的构架，表格版面设计，利用的只是表格这个工具而已，版面本身不是表格！

2.转换到 Layout 视图，然后用版面表格绘制工具绘制一个大表格。如图三：

图三

提示：在每个版面表格的左上角都有一个绿色的"Layout Table"标签，在标准视图中他代表的是表格；表格的宽度在顶部标示出来；宽度数字右边有个向下的小箭头，按下后将弹出一个菜单，如图四：

图四

Make Column AutoStretch：列自动伸缩，也就是表格能够按照屏幕比例来自动调整宽度，犹如将宽度定义为百分数。

Add Spacer image：增加透明图片。假如启用此功能，则会弹出一个窗口让您将透明图片保存到文档夹中，记着将他保存到相应的图片目录中哟。

提示：增加透明图片有什么意义呢？透明图片的主要作用在于撑住表格。撑住表格？也许您又要问为何要撑住表格了。有许多网页，采用左导航栏，右内容页面的版面，左边导航栏分成若干行，每行放相应的导航内容；点击左边的导航内容，周详的页面信息则在右边区域显示。整个版面显得干净易读，也许您认为一切都做好了。但当您在右边窗口输入一些内容，犹其是有大量内容时，您会痛苦地发现，版面乱完了！由于右边窗口内容的增多，左边本来排列得整整齐齐的导航栏由于右边窗口被撑高，造成左边的单元格行间距加大，这时我们就需要在导航栏的最下面再起一行，并在这行中添加一个透明图片，以便撑住上面的任何单元格。假如右边窗口被撑高，导航栏中被撑高的只是透明图片格，其他单元格仍然保持原来的高度。既然是透明的图片，即使被撑高了，在浏览器上我们也看不出来，这就是透明图片"撑住"的妙用。

Remove All Spacer Images：移去任何透明图片。

Clear cell Heights：清除单元格高度。

Make Cell Width Consistent：保持单元格宽度，也就是让单元格始终保持其设定的宽度，不随着浏览器的大小变化而自动伸缩。

提示：表格中灰色区域是空白区域，能够在其间添加其他表格;但不能输入文本，因为版面表格只能接受版面的"区"的概念，对于具体的网页内容却无能为力。要输入文本等具体内容，需在单元格中输入。

3.用版面单元格工具，在大表格中画出左边一个单元格。如图五：

图五

提示：图中的白色区域是单元格区域，能够输入任意网页元素。
4.在右边用版面表格工具绘制一个表格，结果如图六：

图六

5.用版面单元格工具绘制上下两个单元格，如图七：

图七

6.在空白区域用版面表格工具绘制一个表格，如图八：

图八

7.在表格中绘制四个单元格，完成后如图九：

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有