利用表格设计和制作网

1、利用表格设计和制作网页在网页设计制作中，表格（Table）是一个重要的网页元素，主要用来在页面上布局数据和图像，使页面中的信息布局合理、简洁。另外，在网页设计制作中，表格还有一个重要作用，就是对网页进行排版。通过表格，可以实现很多用一般手段很难实现的排版效果，达到页面排版布局的完全控制。本章以示例网页示例为介绍网页表格的设计与制作的方法。通过本章的学习，读者应该掌握以下内容：利用DreamweaverMX 创建表格的方法编辑表格的方法设置表格属性的方法利用HTML编辑表格的方法使用表格和布局视图进行页面布局的方法表格网页实例我们在上网浏览时虽然没有看到多少表格，但许多网页设计的排版实际上都是采

2、用隐藏了边框的表格来实现的。表格化的页面在不同平台、不同分辨率的浏览器里都能显示出原有的布局和对齐。图4-1所示的是“天使部落”网页利用表格进行布局的页面效果。 图4-1 “天使部落”主页 Dreamweaver MX 提供了强大的制表功能，使得在制作网页的过程中插入表格的操作变得简便、快捷，并可以在表格中插入图片、文字、Flash 等各种元素。表格还可以转换成层，当作层来使用（层的知识在第9章学习）。对已经建立好的表格，可以很容易地修改表格的外观，改变表格中行、列的数量，对表格添加颜色，改变表格对齐方式等操作。下面以制作“天使部落”主页为例介绍创建表格、编辑表格、在表格中添加文字和图片、删除

3、表格等内容，并结合此例介绍设置表格和单元格的属性等方法。 4.2利用Dreamweaver 8编辑网页表格 创建表格表格主要由以下3个基本元素组成。行（Row）：表格在水平方向上的组成元素。列（Column）：表格在竖直方向上的组成元素。单元格（Cell）：表格中的最小的独立存放数据的区域。另外，还有以下几个概念需要掌握。边框(Border)：单元格四周的界线标志。表格间距(Cellspace)：定义内部表格线的宽度。表格间隙(Cellpad)：相邻的单元格之间的间隙。在Dreamweaver 8中，创建表格有以下4种方式。执行主菜单中的“插入”“表格”命令。按组合键Ctrl+Alt+T。单击

4、插入面板上“常用”选项卡中的“插入表格”按钮。单击插入面板上“表格”选项卡中的“插入表格”按钮。使用上述4种方式中任意一种方法都将打开如图4-2所示的“插入表格”对话框。图4-2 “插入表格”对话框对话框中各选项含义如下。行数：初次指定表格的总行数。列数：初次指定表格的总列数。单元格填充：指定单元格的大小，以像素为单位。单元格间距：指定单元格之间的距离，以像素为单位。宽度：指定表格的宽度，以百分比或像素为单位（百分比用于根据浏览器窗口的大小来自动调整表格的宽度）。边框：指定表格边界的宽度，以像素为单位（如果在浏览器窗口中不显示表格的边框，则定义为0）。具体操作是，在对话框中对各选项进行设置，创

5、建一个6行3列的表格，宽度设为100百分比或774像素，边框设为0，其他设置取默认值。新建表格如图4-3所示。图4-3 新建表格 表格的编辑1. 修改表格新建立的表格必须经过部分或全部修改后才能应用。修改表格主要包括调整表格的大小、合并单元格、拆分单元格等操作。（1）调整表格的大小可以用下列的操作之一来改变表格的大小。移动鼠标到表格的水平或垂直边框上，当鼠标变为双竖杠或双横杠时，上下或左右拖动鼠标，可以粗略地调整表格的大小。选中整个表格（双击表格边框），在表格边框右下方出现三个控制点，将鼠标移到控制点上，当鼠标指针变为双箭头形状时，拖动鼠标上下、左右或斜方向移动，也可以粗略地调整表格的大小。利

6、用表格“属性”面板，可以精确地设置表格的大小。选中整个表格，在表格“属性”面板中的“宽（W）”、“高（H）”文本框中输入数值，如图4-4所示，精确调整整个表格的大小。图4-4 利用“属性”面板调整表格的大小（2）调整行高、列宽调整一行或一列。将鼠标指针移到要改变行或列的单元边框上，当鼠标变为双竖杠或双横杠时，上下或左右拖动鼠标至合适的行高或列宽。利用表格“属性”面板设置。选中表格中的任一单元格，或选中所在行（列），然后在表格“属性”面板中的“宽（W）”、“高（H）”文本框中输入数值。如果文本框中为空白，则行高、列宽将由浏览器和根据单元格中的内容来自动调整。清除行高、列宽。若不能用拖动单元格边框

7、的方法来改变所需的行高、列宽，则可以清除行高、列宽，再重新进行设置。选中整个表格，执行主菜单中的“修改”“表格”“清除单元格高度”（或“清除单元格宽度”）命令，可以对所有单元格的高度、宽度进行压缩，直到内容最多的单元格与上下左右边框之间没有间隙为止。（3）合并单元格首先选中需要合并的单元格，然后利用下列的操作之一来合并单元格。执行主菜单中的“修改”“表格”“合并单元格”命令。右击选中的单元格，从弹出的快捷菜单中选择“表格”“合并单元格”命令。单击表格“属性”面板上的合并单元格按钮。按组合键Ctrl+Alt+M。利用上述4种方法之一可以将图43新建表格中的第1、2、6行的3表单元分别合并，将第1

8、列的3、4行的2个单元、第4行的2、3列的2个单元分别合并。合并后的效果如图45所示。图4-5 合并单元格后的表格（4）拆分单元格拆分单元格与合并单元格互为逆操作。拆分单元格就是将一个单元格拆分成需要的多个单元格。同样先选中需要拆分的单元格，然后进行以下之一的操作。执行主菜单中“修改”“表格”“拆分单元格”命令。右击选中的单元格，从弹出的快捷菜单中选择“表格”“拆分单元格”命令。单击表格“属性”面板上的拆分单元格按钮。按组合键Ctrl+Alt+S。上述几种操作都会打开“拆分单元格”对话框，如图46所示，选择是拆分成行还是列，并输入要拆分成的数量即可。图4-6 “拆分单元格”对话框（5）表格的嵌

9、套为了达到排版的效果，通常使用表格嵌套的方法。如在图41“天使部落“主页中的”理想篇”、“生活篇”、等内容就是通过表格嵌套实现的。具体操作方法是，将鼠标指针定位在所需位置，如在第3行2列单元格中，单击“常用”面板中的插入表格按钮，插入一个6行1列的表格。用同样的方法可以插入另外3个表格，如图47所示。图4-7 进行嵌套后的表格（6）表格的复制通过复制表格中的行、列或整个表格，可以达到充表格的目的。具体操作如下。选中一行（列）或多行（列），执行主菜单中的“编辑”“拷贝”命令，或用鼠标右击选中的行（列），从弹出的快捷菜单中选择“拷贝”命令，或按组合键Ctrl+V，然后移动鼠标到目的位置，执行主菜单

10、中的“编辑”“粘贴”命令，或直接按组合键Ctrl+V，可以扩充表格的行或列。若选中整个表格，再进行复制和粘贴，可以将表格扩充一倍。（7）删除表格将不需要的行或列删除。具体操作方法是，先选中需要删除的行或列，然后执行“修改”“表格”“删除行”或“删除列”命令（也可以执行右键快捷菜单中的“表格”“删除行：或“删除列”命令）。当然，删除整行或整列最快捷的方法是直接按Del键。需要说明的是，Dreamweaver MX可以对选中的一个或多个整行（列）执行删除操作，却不能直接删除整个表格，非要删除整个表格，可以先选中整个表格，再执行剪切操作。（8）增加或减少行、列跨度增加行或列的跨度，就是将相邻的单元格

11、进行合并，减少行或列的跨度，就是将相邻的单元格进行拆分。具体操作方法是，将鼠标指针定位在所需单元格中，若执行主菜单中“修改”“表格”“增加行宽”或“增加列宽”命令，则可以将给单元格相邻右侧或下侧的单元格进行合并；若执行主菜单中“修改”“表格”“减少行宽”或“减少列宽”命令，则可以将该单元格相邻右侧或下侧的单元格进行拆分。同样，利用鼠标右击单元格，从弹出的快捷菜单选择“表格”中的相应命令也可以实现这一功能。2在表格中输入文字和图像表格调整完毕，就可以在表格中输入相应的内容了。向表格中输入的内容主要是文字和图片两种形式。（1）在表格中输入文字参照“天使部落”主页（如图41所示）的文字内容，在图47

12、所示的表格内按要求输入文字，并通过表格“属性”面板对文字的字号、字体、对齐方式、颜色等进行调整（表格“属性”面板的内容将在节中学习）。调整后的表格如图4-8所示。图4-8 输入文字后的表格 （2）在表格中插入图像参照“天使部落”主页（如图4-1所示）的图像内容，在图4-8所示的表格内按要求插入图像( 说明，有些图像是利用层来实现插入的，有关层的内容将在第9章学习)。具体操作日下。 选中需要插入图像的单元格，执行主菜单“插入” “图像”命令或单击“常用”面板中的“图像”按钮，打开“选择图像源”对话框，打开存放图像的文件夹（可以事先将所需要并喜爱的图像保存或复制到该文件夹中，如站点中的images

13、 文件夹），选中所需图像（可以从右侧的“图像预览”中看到图像），如图4-9 所示，单击“确定”按钮，图像即插入到相应的单元格中，通过鼠标适当调整图像在单元格中的大小及位置，调整后的表格如图4-10所示。图4-9 “选择图像源”对话框图4-10 插入图像后的表格 设置表格属性在节中多次提到表格“属性”，下面介绍在表格“属性”面板中几种常见的设置方法。1.表格整体属性设置选中整个表格，表格“属性”面板如图4-11所示，可以对表格的整体属性进行设置。其中各参数的含义如下。图4-11 表格“属性”面板表格名字（表格Id）：给表格对象命名，在脚本编程中可以使用。行和列：当前表格行和列的数值，可以修改这两

14、项的数值来增加或减少行数或列数。宽和高：设置表格的宽度和高度。可以选择使用百分比或像素值。使用“属性”面板上两个按钮（清除列宽）和（清除行高）可以清除原来的宽度和高度设置；使用“属性”面板上的四个按钮（将表格宽度转为像素）、（将表格高度转换为像素）、（将表格宽度转换为百分比）、（将表格高度转化为百分比），可以将表格宽度和高度在像素和百分比之间进行转换。填充：表格周围和其他元素之间的间距。间距：单元格之间的间距。对齐：表格在网页中的对齐方式，有默认、左对齐、居中对齐和右对齐4种选择。边框：表格边框的宽度，若设为0，则在浏览网页时看不到表格边框。背景颜色：设置表格的背景颜色，通过颜色拾取器按钮来选

15、择颜色。边框颜色：设置表格边框颜色。背景图像：设置表格整体的背景图像，通过浏览文件按钮搜索背景图像的位置。2.行、列和单元格属性设置选中行、列或单元格后，表格“属性”面板的设置与整个表格的设置基本一致的，只不过是应用范围上不同而已。“属性”面板分为上、两个区域，上面是单元格中的文字属性，可以设置文字的格式、字体、颜色、字形、对齐方式、超链接等；下面是行、列和单元格的属性设置。在“属性”面板的左下方有一个示例图形，可以看出当前选择的是行、列还是单元格，如图4-12所示选择的是单元格。图4-12 表格的行、列和单元格“属性”面板其中个参数的含义如下。水平：设置单元格内容在单元格内的水平对齐方式，有

16、默认、左对齐、居中对齐和齐4种选择。垂直：设置单元格内存单元格内的垂直对齐方式，有默认、顶端、中间、底部和基线4种选择。宽和高：设置单元格的宽度和高度的数值。只需对某一个单元格的列宽和行高设置数值，其他单元格就会自动做相应的调整。不换行：设置单元格内无抽象行功能。标题：将单元格中的文字内容作为表格标题，粗体显示。背景：设置行、列或单元格背景图像。由于一个单元格可以使用表格、行、列和单元格等多种背景设置，所以有一定的优先顺序。背景图像的优先顺序为：单元格、行列、表格。背景颜色、边框：用于对选中的行、列或单元格设置其背景及边框的颜色。合并、拆分按钮：在“属性”面板的左下方有两个工具按钮（合并）和（

17、拆分，只对单元格有效），用于对选中的行、列或单元格进行合并或拆分操作。424表格的排序在表格的应用中，常要对表格中的一组数据进行排序。在Dreamweaver MX中可以实现按数字的排序和按字母的排序，具体操作方法如下。（1）单击表格中的任一单元格，执行主菜单元中的“命令”“排序表格”命令，打开如图4-13所示的“排序表格”对话框。图4-13 “排序表格”对话框（2）在“排序按：”下拉列表框中选择要排序的列（第一关键字），在“顺序：”下拉列表框中选择“按字母顺序”还是“按数字顺序”排序，在其后的下拉列表框中选择“升序”还是“降序”方式。（3）在“再按：”下拉列表框中选择要进行次级排序的列（第一

18、关键字）。在排序中如果遇到单元格中有相同的内容，则按“排序按：”中指定的列优先进行排序。如果不需要进一步进行排序，可以不对此项排序进行设置。（4）在“选项：”设置区域中有4个复选取框。 排序包含第一行：如果选中该复选框，则在排序时将第一行包含水量在内。如果第一行是表头，则显然在排序时不应将第一行包含在内，即不要选中该复选框。对THEAD行（如果存在）进行排序：如果选中该复选框，则表头也参与排序。对TFOOT行（如果存在）进行排序：如果选中该复选框，则表尾也参与排序。排队序和行保留TR属性。也就是行的格式会随着该行广西一起被移动。否则表格排序后，改变顺序的只是行的文本。（5）单击“确定”按钮完成

19、设置。注意：不能对有合并单元格的表格内容进行排序操作。表格的格式化DreamweaverMX为表格提供了17种表格格式模板,可以从中选择一种方案快速应用到用户设计的表格中。具体操作方法如下。选择一个表格,然后执行主菜单中的命令格式化表格命令,打开如图4-14所示的格式化表格对话框。从中选择一种模板方案,再对各选项进一步自定义设置,然后应用于自己所设计的表格中。对话框中各选工页的含义如下。行颜色：用于指定应用于行的颜色,以及颜色交替的频率。第一行：:用于指定表格第一行(可能包含标题)的对齐方式和文本样式及颜色。图4-14 “格式化”对话框最左列：用于指定表格最左列(可能包含标题)的对齐方式和文本

20、样式。表格：用于设置表格边框宽度的数值(以像素为单位)。将所有属性套用至TD标注而不是TR标签复选框:用于指定将设计应用于表格单元格(ID标签)而不是表格行(TR标签)。在默认情况下,格式化表格对话框中指定的格式设置应用于整个行而不是单个单元格。在将同一种格式应用于行中的所有单元格时,将格式应用于TR标签会产生更简明易懂的HTML代码。但是,此选项允许将格式应用于单个单元格(前提是在编好编码的情况下)。注意:不能对有合并单元格的表格进行上述的格式化设置。4.3 利用HTML编辑网页表格利用HTML制作示例网页表格利用HTML同样可以制作网页表格。对于初学者直接使用HTML代码编制网页表格是件很

21、困难的事情,但是,可以通过Dreamweaver MX提供的文档面板来查看己经设计好的网页表格的HIML代码,以帮助用户学习和掌握HTML代码的编写规则及方法。例如,对于如图4-10所示的网页表格,通过执行主菜单中的查看切换视图命令,或单击文档面板上的显示代码视图按钮到来查看HTML代码,也可以单击吱档面板上的显示代码视图和设计视图按钮对照网页表格设计视图来查看HTML代码。具体的HTML代码如下。无标题文档 本站首页理想篇生活篇星座篇通讯篇会员注册 理想篇 星座篇 “理想”一个熟悉的词 “星座传说”一星座的由来 我一个“天使”的理想 星座与性格的关系。 实现理想的决定性因素 星座与爱情的关系

22、。 你的“理想”变了吗？ 星座悟语 “理想”并不是“妄想” 星座运程 生活篇 通讯篇 我的天使 我的邮箱 书山掠影 给我留言 轻轻河畔 介绍你自己 天使笑颜 联系其他天使 人间天使 “天使部落”的远景规划 版权所有 表格的基本构成通常在HTML 中创建一个普通的表格应包括以下标记。（1）TABLE。TABLE标记符用于定义整个表格，表格内的所有内容都因该位于和标记符之间。（2）TITLE。 TITLE标记符用于定义页面的标题，标题包含在和标记之间，在网页被浏览时，标题将显示在浏览器窗口的标题栏上。（3）CAPTION。如果表格需要标题，那么就应该使用CAPTION标记符将表格标题包括在和标记符

23、之间。在图4-10 所示网页表格中美有标题，如果是用了CAPTION标记符，它应该位于标记符之后。CAPTION标记符的格式如下。标题Align属性用于控制表格标题的显示位置，它通常有4种取值，见表4-1。表4-1align属性的取值名称作用top标题放在表格上部，为默认值bottom标题放在表格下部left标题放在表格上部的左侧right标题放在表格上部的右侧（4）TR。TR标记符用于定义表格的行，对于每一个表格行，都对应RT标记符。RT标记符的结束标记符可以省略。（5）TD和TH.表格行中的每个单元格都对应一个TD标记符或TH标记符，用于标记表格的内容，其中可以包括文字、图像或其他对象。D

24、T与TH标记符的功能和用法几乎完全相同（可以任意混合使用，但效果略有不同）。惟一不同之处是TD标记符表示普通表格数据,而TH标记符表示表格的行列标题数据(即表头)。TD和TH标记符的结束标记都可以省略，并且可以不包括任何内容（即表示为空单元格）。（6）META。当使用Dreamweaver MX创建一个空白的网页文档时，系统会自动在头部加上以下一行源代码。使用标记符定义的信息通常称为“元数据（meta data）”，它是头部信息的主要组成部分，主要用于表示一个文档的关键词、作者、版权、字符编码等。另外，它还可以传递一些信息，如网页的过期日期、刷新间隔等。标记符是一个单独的标记符，即不存在结束标

25、记符。主要有以下四个属性，见表42。表4-2 标记符的属性 名称作用name用于定义一个元数据属性的名称content用于定义无数据的属性值http-equiv用于记录HTTP的头部信息，HTTP服务器可以根据该信息来作出响应charset用于定义文档的字符编码注意：HTML并没有规定用户最多可以在头部加入多少个标记符，只要认为必要，用户可以添加任意数量的标记符。表格的编辑及属性设置1合并单元格（1）在和标记符内使用rowspan属性可以进行行合并，rowspan的取值表示垂直方向上合并的行数。实际上，单词rowspan的译义就是跨越的行数。（2）在和标记符内使用colspan属性可以进行列合

26、并，colspan的取值表示水平方向上合并的列数。实际上，单词colspan的译义就是跨越的列数。2边框与分隔线在TABLE标记符肌使用frame 、rules和 border 属性可以设置表格的边框和单元格分隔线。（1）fame属性用于控制表格边框最外层的4条框线，其取值见表4-3。表4-3 frame属性的取值名称作用名称作用Void无边框vsides仅有左侧框和右侧框above仅有顶框lhs仅有左侧框below仅有底框rhs仅有右侧框hsides仅有顶框和底框box包含全部四个边框（2）rules属性用于控制是否显示单元格之间的分隔线，其取值见表4-4。（3）border属性用于设置边框

27、的宽度，其值为像素值。本示例中设置border=”0”,则意味着frame=”viod”,rules=”none”。3.表格的对齐表格的对齐包括页面对齐和内容对齐。（1）表格的页面对齐。表格在页面中的对齐与其他页面内容一样，可以直接在TABLE标记符中使用align属性。另外，也可以用DIV标记符的align属性设置表格的对齐，方法是，将TABLE标记符包含在和之间。 如果不使用TABLE标记符的align属性设置表格的页面对齐，则跟在表格后的文本自动显示在表格下的一行。如果使用了TABLE标记符的align 属性设置表格页面对齐，并且使用的是left或right值，则跟在表格后的文本会位于表

28、格的左边和右边，从而形成文本与表格环绕的效果。（2）表格的内容对齐。表格单元格内容的对齐包括各数据项在水平方向和垂直方向上的对齐。设置水平对齐的方法是，在标记符、内使用align属性，其常见的取值见表4-5。名称作用名称作用center单元格内容中堆对齐right单元格内容右对齐left单元格内容左对齐，为默认值justify单元格内容两端对齐如果是在TR标记符中使用align属性，则可以控制整行内容的水平对齐；如果是在TD或TH标记符中使用align属性，则是控制单元格中内容的水平对齐。设置表格数据在垂直方向上对齐，应在TR、TD或TH标记符中使用valign属性。Valign属性的常用取值

29、见表4-6。名称作用top数据靠单元格顶部Bottom数据靠单元格底部middle数据在单元格的垂直方向上居中，为默认值与align属性类似，如果是在TR标记符中使用valign属性，则可以控制整行内容的垂直对齐；如果是在TD或TH标记符中使用valign属性，则是控制相应单元格中内容的垂直对齐。4.控制表格和单元格的大小由于表格能将网页划分为任意大小的矩形区域，所以表格在网页中更多地是用作排版工具。如果要分割页面区域，经常要做的就是设置表格和单元格的大小。可以使用标记符的width和height属性设置表格和单元格的大小，这两个属性是取值可以是像素值，也可以是百分比，但一般都使用绝对的像素值

30、。5.设置表格和单元格的背景与设置整个页面的背景类似，表格或单元格也可以设置背景颜色或图案。设置方法为：在TABLE或TD标记符内使用bgcolor属性设置背景颜色；使用background属性设置背景图案。6.控制单元格空白在TABLE标记符中使用cellspacing属性可以控制单元格之间的空白，使用cellpadding属性可以控制表格分割线和数据之间的距离，这两个属性之间的取值通常采用像素值。4.4表格的应用技巧441利用表格制作水平线与垂直线在对网页布局排版时，有时候会需要一条细线作为分隔线，用一些线型的图像可以完成这项功能，但既费事又占据存储空间。其实，这个小总是用表格就能很好的实

31、现，只需对表格属性、单元格属性及其源代码稍作个性即可。细线分隔线具体的制作过程如下：（1）插入一个一行一列的表格。（2）在表格“属性”面板中，按照图4-15所示来设置表格的属性，即行、列数设为1；宽高为200像素（根据实际需要来设轩其值）；高不高或为0；填充、间距高为0；边框高为0。图4-15 设置表格属性（3）按图4-16所求设置单元格的属性，即高设为1；宽不高或为0；背景颜色高为黑色（妈为细线的颜色，也可以高置为其他颜色）。图4-16 设置单元格的属性（4）查看源代码，如图4-17所示，将标记符中的” ”(半个空格位)彻底删除,就可以得到一条水平细线.同样的,如果在图4-15所示的

32、表格属性设置中改成高为某个像素什,宽为0;将图4-16所求的单元格属性设置必为1,高为0;把如图4-17所示的源代码中的 彻底删除,则可得到一条垂直细线。图4-17 去掉表格中的空格代码注意:这种细线效果其实就是一个高为”1pix”的表格.在Dreamweaver MX中没有插入元素的单元格中都自动填充半个空格(其代码为“ ”),只要去掉这半个空格,设置的单元格高(宽)度才起作用.利用表格进行页面布局网页中的表格除了具备传统表格存放和规划数据的功能外,还可以用来定位网页元素,也就是说要用于网页元素的排版.如在图4-10所示的网页上,就是使用了表格来进行网页排版的,但由于使用普通

33、表格进行排版操作有些不方便, DreamweaverMX 为此提供了一种新的网页排版视图布局视图（Layout View），在这种视图模式下，用户可以通过绘制布局表格和布局单元格，从而可以像在一张白纸上用笔来规划网页的布局，并可在布局单元格中插入文本和图像，通过移动布局表格和布局单元格的位置来精确地定位网页上的文本和图像。1.切换视图Dreamweaver MX为设计制作表格提供了两种视图：标准视图和面局视图，前面介绍的表格创建及编辑过程都是在标准视图下进行的。要切换到布局视图，可以执行主菜单中的“查看”“表格视图”“布局视图”命令，也可以单击“插入”面板上的“布局”选项卡，再单击“布局视图”

34、按钮，按钮处于被按下状态，如图4-18所示。图4-18 “布局视图”面板首先按下“布局”按钮，切换到布局视图模式后，设计窗口将弹出如图4-19所示的“布局视图入门”对话框，提供布局视图下相关功能的操作说明，单击“确定”按钮，当前网页文档即处于布局视图模式下。图4-19 “布局视图模式”对话框2. 绘制布局表格在布局视图模式中，就可以在网页中、文档上绘制布局表格和布局单元格了，并可以在其中插入文本和图像，然后通过移动布局表格和布局单元格来定位文本和图像。要在网页文档中绘制布局表格和布局单元格，具体的操作方法如下。（1）新建一个网页文档（基本HTML页）。（2）单击“插入”面板“布局”选项卡，再单

35、击“布局视图”按钮，切换至布局视图。（3）单击“布局”面板中的“绘制布局表格”按钮，将鼠标指针移至网页窗口左上角，鼠标指针变成+形状，按住鼠标左键拖动，就可以在网页文档窗口内画出一个布局表格，其边框呈现绿色，并在表格顶端显示出刻度值，如图4-20所示。图4-20 绘制布局表格（4）单击“布局”面板中“绘制布局单元格”按钮，然后在已绘制好的布局表格内按住鼠标左键拖动，就可以绘制出布局单元格了，其边框呈天蓝色。（5）重复步骤（4），可以继续绘制布局单元格，如果按住Ctrl键，就可以边疆在布局表格内绘制多个布局单元格。注意：单元格彼此之间不能重叠。（6）在布局表格内还可以再绘制布局表格。（7）在布局

36、单元格中插入文本和图像，如图4-21所示。当不在布局表格中绘制布局单元格时，Dreamweaver MX会自动创建一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。当Dreamweaver MX自动创建布局表格时，该表格最初显示为填满整个设计视图，即使更改网页文档窗口的大小也是如此。这种全窗口默认布局表格使用户可以在设计视图中的任意位置绘制布局单元格。用户可以将该表格设置为特定的大小，方法是用鼠标拖动布局表格边框的控制点来高速表格的大小。可以在网页文档布局的空白区域中创建布局表格，也可以在现有布局单元格和表格的周围或嵌套在现有布局表格中创建布局表格。表格不能互相重叠，但一个表格可以

37、完全饮食在另一个表格当中，即创建嵌套表格。对外部表格所进行的更改不会影响嵌套表格中的单元格。例如，当更改外部表格中行或列的大小时，内部表格中单元格的大小不发生变化。可以插入多级嵌套表格，嵌套布局表格的大小不能超过包含它的表格。注意：如果网页文档上已经包含有内容（文本或图像），则只能在现有内容的下方绘制新布局表格。如果想在现有内容之下绘制布局表格但是出现禁止绘制鼠标指针，请重新调整文档窗口的大小以合现有内容底部和窗口底部之间产生更多的空白空间。不能在布局单元格中创建布局表格。只能在现有布局表格的空白区域中或在现有单元格周围创建嵌套布局表格。图4-21 输入文本和图像的布局单元格3.编辑和设置布局表格在绘制完布局表格和布局单元格后，还经常需要对它们进行调整，以适应文本和图像等内容的输入。（1）选中布局表格或单元格 要对布局表格或布局单元格进行操作，首先须选中它。具体操作方法是：将鼠标移至布局表格