1.2 进阶——认识网页排版大师Dreamweaver CS6

首先说明一下什么是排版。排版设计亦称版面编排。所谓编排，即在有限的版面空间里，将版面构成要素——文字、图片图形、线条线框和颜色色块诸因素，根据特定内容的需要进行组合排列，并运用造型要素及形式原理，把构思与计划以视觉形式表达。其实排版在我们的日常生活中无处不在，比如你每天看的报纸、杂志、各种广告、印刷宣传品等。不管在什么样的载体上，排版始终是图片和文字的一种排列方式，如图1-22所示。

而网页排版也是如此，在浏览器的显示窗口中，把网页中的文字、图片、Flash动画、表单元素等按照一定的规范来进行排列，让整个网页显示得整齐、美观、识别性好，这就是排版技术在网页中的应用。在当前的网页排版领域里，Dreamweaver被公认为最好的网页排版软件之一，无愧于“网页排版大师”的称号。

从网页设计出现开始，网页排版的核心技术就是表格，但是在最近一段时间，“DIV+样式表”的排版技术被大量应用，相信在不久的将来，网页的排版技术将会由表格逐渐过渡到“DIV+样式表”的排版方式。下面把表格排版和“DIV+样式表”排版这两种方式和技巧给大家做一个介绍。

1.2.1 实际制作前对页面布局的分析

在实际进行网页布局之前，应该对网页效果图进行分析，来得到大致的表格或DIV结构，不管使用的是表格技术还是样式表，分析的方法是类似的，下面通过一个具体的实例来给大家说明一下使用不同技术分析页面的方法。如图1-23所示是一个网页的效果图，我们可以根据这个效果图来分析这个页面在制作时的布局方式。

1．使用表格技术布局的分析

我们可以按照“从上到下，从左到右，从外到内”的顺序来分析和制作网页中的表格结构。

“从上到下”指的是观察表格的整体结构，看最外部的表格上下的并列关系，分析有几个表格并列，同时每个表格拆分成多少行。仔细观察效果图，你能发现从上到下一共有3个表格并列，最上面的表格是一个2行1列的表格，用来放置顶部的图片和导航文字；中间的表格是一个1行1列的表格，用来放置中间的所有内容；最下方也是一个1行1列的表格，用来放置版权信息。

“从左到右”指的是观察整个表格的整体结构，看最外部的表格能够拆分成多少列。通过观察效果图，你能发现中间的大表格应该拆分成3列，最左边的一列用来放置黄色区域的内容，最右边的一列用来放置红色X区域的内容，最中间的一列不放置内容，专门用来作为左右之间的间隔区域。

因为中间的表格拆分成3列，所以不能和上面的内容制作成一个表格，这也就是为什么从上到下观察的时候要分成3个表格的原因。

“从外到内”指的是制作内部的嵌套表格，对于内部的嵌套表格来说，同样可以使用“从上到下，从左到右，从外到内”的方法进行分析。通过观察效果图，可以发现左边的黄色区域应该嵌套一个3行3列的表格来制作内容，右边的红色X区域也同样嵌套一个3行3列的表格。

对于表格的排版来说，没有一个绝对的标准，只要能够在合理的情况下使用最少的表格来实现网页的排版效果即可。大家可以通过反复的实践来积累表格排版的经验。

2．使用Web标准化布局技术的分析

使用Web标准化技术来布局，分析的顺序和表格完全一样，只是把表格换成Web标准化布局技术所经常使用的DIV标签。DIV标签在Web标准化布局中是用来制作页面结构的标签，类似于传统布局技术中的表格。

“从上到下”指的是观察整个网页拆分成多少行，基本上可以把每一行做成一个DIV。仔细观察效果图，你能发现从上到下一共有4行，这样就有4个DIV，第1个DIV用来放置顶部的图片，第2个DIV用来放置导航文字，第3个DIV用来放置中间的所有内容，最下方的DIV用来放置版权信息。

“从左到右”指的是观察整个网页结构，看最终内容部分分成多少列。通过观察效果图，你能发现中间的内容区域是分成两列，这样应该有两个DIV，通过使用浮动技术，这两个DIV应该是并列的关系，可以在前面的内容区域中增加一个DIV。左边的区域左浮动，右边的区域右浮动，通过宽度的设置，可以留出中间的空隙。

“从外到内”指的是DIV的嵌套，如果这个例子在浏览器中居中显示，那么可以在所有DIV标签外增加一个新的DIV标签，用来包括所有的内容，从而使整个页面居中。对于Web标准化布局的排版来说，在（X）HTML标签的选择上也不一定全是DIV，而是要根据实际的需要，按标签的语意来进行选择，DIV标签更多地是用来制作页面结构。

1.2.2 表格排版概述

可以说从网页设计出现开始，表格就作为网页排版中最为重要的一种工具一直被广大网页设计者使用着。由于多年的技术发展和经验积累，使表格布局在网页设计中成为最成熟的一种排版技术。它有很多的优点，例如网页设计师可以直接使用图像编辑器设计网页效果、图、切片，然后由图像编辑器全自动生成表格布局的页面，或者是直接使用Dreamweaver这种网页布局软件，可视化地进行表格布局。这些工具的使用都很简单，学习周期短、制作速度快，而且设计的页面效果都很漂亮。如果你是一位富有艺术感的读者，相信设计出来的页面必定很吸引眼球。传统表格布局的快速与便捷提高了网页设计师对于页面创意的激情，相信很多初学者都听说过“不会写代码也能做网页”，表格布局就这样被神话了。如图1-24所示，整个页面使用了表格来排版布局。

但是表格最大的缺点就是忽视了代码的理性分析，这也是为什么现在Web标准会大行其道的原因。因为表格本身并不是用来进行排版布局的工具，表格能够使繁复的数据分门别类，让人一目了然地清楚数据内在的整体情况，它比许多文字说明都要简明、有用得多。在财会领域有这么一句口头禅，“表格在手，一清二楚”。表格能让不同工种和岗位的员工将工作更有序、更高效地完成，并将明显降低管理成本，如图1-25所示。

最初的网页没有今天这么复杂，仅显示文本或几个简单的图像，网页文档从上而下自然流动分布，不需要考虑版式设计问题。后来随着网页内容的丰富，图像、声音、动画等多媒体不断充斥网页，网页内容不断膨胀，同时用户对于网页视觉提出了更高要求，于是如何把传统印刷中的版式技术转移到网页设计中就成为了一个比较紧迫的需求。由于表格不仅可以控制单元格的宽度和高度，还可以嵌套，多列表格可以把文本分栏显示，于是就有人试着在表格中放置其他网页内容，如图像、动画等，以打破比较固定的网页版式。而网页表格对无边框表格的支持为表格布局奠定了基础，用表格实现页面布局慢慢就成为了一种设计习惯。现在网上的大多数页面都是使用表格来完成布局的，即使在CSS不断普及的情况下，这种状况也很难在短时间内得以改观。表格布局是不标准的，用W3C制定的规范来说，表格的目的是用来显示数据的，而不是用来完成布局，错把表格当布局技术的原因是缘于当时Web技术的缺乏和对标准需求的乏力。

1.2.3 表格排版的核心技术

网页是如何使用表格来进行排版布局的呢？我们可以把网页想象成一个大表格，当你需要在网页中的某一个位置放置文字或者图片的时候，就可以在相应的位置拆分一个单元格，放置你需要的内容。当然这只是希望大家能够理解表格在网页中是如何工作的，在实际的表格排版中，肯定不会只有一个表格，而是使用多个表格。

在实际的表格排版中，多个表格又是如何工作的呢？一般来说，表格的应用方式有两种：并列和嵌套。

1．表格并列

如图1-26所示，是两个表格的并列，并列并不是指左边一个表格，右边一个表格，而是指表格的上下排列，这是因为表格的标签“table”在（X）HTML中是一个块级别元素。

上下排列的表格之间并不需要按回车键或者添加换行，直接在一个表格的后面继续插入一个新的表格，这个新的表格就会自动向下排列，而且两个表格之间没有距离。

2．表格嵌套

如图1-27所示是多个表格的嵌套，顾名思义，表格嵌套就是指在一个表格内嵌套另外一个表格。

表格嵌套实际上就是使用了多个表格，每个表格都可以设置不同的属性，从而能够实现复杂的网页排版效果。在实际的表格排版中，总是把表格并列和表格嵌套结合起来使用。