网页设计与制作第3章表格的使用.ppt

《网页设计与制作第3章表格的使用.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作第3章表格的使用.ppt（41页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作第网页设计与制作第3章章表格的使用表格的使用第第3章章 表格的使用表格的使用v3.1 创建表格创建表格v3.2 编辑表格编辑表格v3.3 布局视图模式布局视图模式v3.4 用表格布局网页用表格布局网页3.1 创建表格创建表格 表格在网页中是一种用途广泛的工具。它表格在网页中是一种用途广泛的工具。它可以有序地排列数据，更重要的是可以精确定可以有序地排列数据，更重要的是可以精确定位文本、图像及其他网页元素。表格是由行和位文本、图像及其他网页元素。表格是由行和列组成列组成.3.1 创建表格创建表格单元格：由行和列相交所产生的区域。单元格：由行和列相交所产生的区域。单元格填充：单元格中的

2、内容与单元格边框之间单元格填充：单元格中的内容与单元格边框之间的距离。的距离。单元格间距：单元格与单元格之间的空间大小。单元格间距：单元格与单元格之间的空间大小。3.1 创建表格创建表格v3.1.1 建立表格建立表格1.建立表格的方法有以下几种，可任建立表格的方法有以下几种，可任选选一种。一种。将光将光标标定位，定位，单击单击【常用常用】工具工具栏栏中的中的【表格表格】按按钮钮;将将【常用常用】工具工具栏栏中的中的【表格表格】按按钮钮拖到拖到页页面相面相应应的位置。的位置。将光将光标标定位，定位，选择选择主菜主菜单单【插入插入】/【表格表格】命令。命令。3.1 创建表格创建表格v3.1.2 在

3、表格中添加内容在表格中添加内容v表格建立好后，就可以向表格中添加内容了。例如文本、图表格建立好后，就可以向表格中添加内容了。例如文本、图像、表格等网页元素。文本可直接输入，随着文本的增多，像、表格等网页元素。文本可直接输入，随着文本的增多，表格会自动增高。表格会自动增高。v在单元格中插入图像同文档插入图像方法相同，如果单元格在单元格中插入图像同文档插入图像方法相同，如果单元格的尺寸小于图像的尺寸，则图像插入后，单元格会自动增高的尺寸小于图像的尺寸，则图像插入后，单元格会自动增高或增宽。或增宽。v如果在表格的单元格继续插入表格，就构成了嵌套表格，内如果在表格的单元格继续插入表格，就构成了嵌套表格

4、，内嵌表格可以将一个单元格分成许多行和列。内嵌表格越多，嵌表格可以将一个单元格分成许多行和列。内嵌表格越多，浏览器所花费的下载时间越长，因此一般内嵌的表格最多不浏览器所花费的下载时间越长，因此一般内嵌的表格最多不超过超过3 层。层。3.2 编辑表格编辑表格 表格建立好，就可以对它进行编辑。编辑表格建立好，就可以对它进行编辑。编辑表格要先选择表格对象。表格对象的选择包括表格要先选择表格对象。表格对象的选择包括选择行、选择列、选择单元格、选择整个表格。选择行、选择列、选择单元格、选择整个表格。3.2 编辑表格编辑表格3.2.1 选择表格对象选择表格对象3.2.2 设置表格属性设置表格属性3.2.3

5、 设置行、列与单元格属性设置行、列与单元格属性3.2.4 增加、删除行或列增加、删除行或列3.2.5 表格的快速格式化表格的快速格式化3.2.6 创建细线表格创建细线表格3.2.7 表格的其他操作表格的其他操作3.2.1 选择表格对象选择表格对象1选择整个表格选择整个表格有多种方法，这里介绍两种:v单击表格的边框线，选定表格v将光标移到要选择的表格内，单击状态栏的“”标签。2选择行选择行v将鼠标指针置于表格行最左侧，会变为指向右侧的粗黑箭头，单击即选中此行。选中后上下拖动鼠标，可选中多行。v将光标移到要选择的行中，然后单击状态栏的“”标签，可选择此行。3.2.1 选择表格对象选择表格对象3选择

6、列选择列 将鼠标指针置于表格列最上方，会变为指向下侧的粗黑箭头，单击即选中此行。选中后左右拖动鼠标，可选中多列。3.2.1 选择表格对象选择表格对象4选择单元格选择单元格v只要在想选择的单元格内单击，即选择了该单元格。状态栏上的标签处于选中的状态，3.2.1 选择表格对象选择表格对象5选择不相邻的单元格、行或列选择不相邻的单元格、行或列v按住Ctrl键，依次单击，可选中不相邻的单元格、行或列。v在已选择的连续单元格、行或列中按住Ctrl键，然后单击不需选中的单元格、行或列。3.2.1 选择表格对象选择表格对象3.2.2 设置表格属性设置表格属性v【表格的【表格的ID】：如果要在网页中使用】：如

7、果要在网页中使用JavaScript语言来控制表格，就需语言来控制表格，就需 要为表格的取名。要为表格的取名。v【行和列】：设置表格的行数和列数，这两个值必须给定。重新设置行和【行和列】：设置表格的行数和列数，这两个值必须给定。重新设置行和列，可以增加或减少表格行数或列数。列，可以增加或减少表格行数或列数。v【宽和高】：设定表格的宽度和高度。单位可以是像素或百分比。表格的【宽和高】：设定表格的宽度和高度。单位可以是像素或百分比。表格的宽度值必须给定。而高度值可以不设定，由实际内容来决定表格的高度。宽度值必须给定。而高度值可以不设定，由实际内容来决定表格的高度。通过设置表格的宽度和高度可以改变表

8、格的大小。当然也可以拖动边框线通过设置表格的宽度和高度可以改变表格的大小。当然也可以拖动边框线来改变表格的大小，但这种方法不准确。来改变表格的大小，但这种方法不准确。v【填充】：设定单元格内容与边距之间的距离。对应表格的属性【填充】：设定单元格内容与边距之间的距离。对应表格的属性“cellpadding”。v【间距】：单元格与单元格之间的距离。对应表格的属性【间距】：单元格与单元格之间的距离。对应表格的属性“cellspacing”。v若不指定填充和间距的值，则多数浏览器按填充为若不指定填充和间距的值，则多数浏览器按填充为1、间距为、间距为2来显示表格。来显示表格。3.2.2 设置表格属性设置

9、表格属性v【对齐】：设定表格的对齐方式，有【对齐】：设定表格的对齐方式，有4 个选项：【默认】、个选项：【默认】、【居中对齐】、【左对齐】、【右对齐】。选择【默认】选【居中对齐】、【左对齐】、【右对齐】。选择【默认】选项，则按左对齐显示。项，则按左对齐显示。v【边框】：设定表格边框的宽度，单位为像素。绝大多数浏【边框】：设定表格边框的宽度，单位为像素。绝大多数浏览器以三维线条显示表格，若设值为览器以三维线条显示表格，若设值为0，表示没有边框。可，表示没有边框。可以在编辑状态下选择【查看】以在编辑状态下选择【查看】/【可视化助理】【可视化助理】/【表格边框【表格边框】命令，显示表格的虚线框。【背

10、景颜色】：设置表格的背】命令，显示表格的虚线框。【背景颜色】：设置表格的背景颜色。景颜色。v【背景图像】：设置表格的背景图像。【背景图像】：设置表格的背景图像。v【边框颜色】：设置表格的边框颜色。【边框颜色】：设置表格的边框颜色。v和按钮：清除行高和列宽。和按钮：清除行高和列宽。v 和按钮：和按钮：根椐当前值，把列宽转换为像素值和百分比。根椐当前值，把列宽转换为像素值和百分比。v和按钮：根椐当前值，把行高转换为像素值和百分比。和按钮：根椐当前值，把行高转换为像素值和百分比。3.2.3 设置行、列与单元格属性设置行、列与单元格属性 选定表格的行、列或单元格，【属性】面选定表格的行、列或单元格，【

11、属性】面板显示的参数基本是相同。如图板显示的参数基本是相同。如图3-5所示。通所示。通过【属性】面板可以重新设置所选对象。过【属性】面板可以重新设置所选对象。3.2.4 增加、删除行或列 增加、删除表格的行数或列数，除了可以通过【属性】面板重新定义表增加、删除表格的行数或列数，除了可以通过【属性】面板重新定义表格的行数、列数这种方法外，还可以通过菜单命令来实现。步骤：格的行数、列数这种方法外，还可以通过菜单命令来实现。步骤：将光标定位于要插入新行（列）的单元格。将光标定位于要插入新行（列）的单元格。v要增加一行，选择菜单【修改】要增加一行，选择菜单【修改】/【表格】【表格】/【插入行】命令，或

12、单击右键，【插入行】命令，或单击右键，选择快捷菜单中的【表格】选择快捷菜单中的【表格】/【插入行】命令。则在光标所在单元格的上【插入行】命令。则在光标所在单元格的上面增加了一行。面增加了一行。v要增加一列，选择菜单【修改】要增加一列，选择菜单【修改】/【表格】【表格】/【插入列】命令，或单击右键，【插入列】命令，或单击右键，选择快捷菜单中的【表格】选择快捷菜单中的【表格】/【插入列】命令。则在光标所在单元格的左【插入列】命令。则在光标所在单元格的左侧增加了一列。侧增加了一列。v要增加多行或多列，选择菜单【修改】要增加多行或多列，选择菜单【修改】/【表格】【表格】/【插入行或列】命令，【插入行或

13、列】命令，弹出【插入行或列】对话框，如图弹出【插入行或列】对话框，如图3-7所示。进行选择设置，单击【确定所示。进行选择设置，单击【确定】按钮，可完成插入操作。】按钮，可完成插入操作。v删除行、列也是先将光标定位于要删除的行或列中，然后选择菜单【修删除行、列也是先将光标定位于要删除的行或列中，然后选择菜单【修改】改】/【删除行】或【删除列】命令；或单击右键，选择快捷菜单中的【删除行】或【删除列】命令；或单击右键，选择快捷菜单中的【表格】表格】/【删除行】或【删除列】命令，将行或列删除。【删除行】或【删除列】命令，将行或列删除。3.2.5 表格的快速格式化 除了可以通过【属性】面板对表格格式化外

14、，在除了可以通过【属性】面板对表格格式化外，在Dreamweaver系统中还提供了十几种表格模板来快系统中还提供了十几种表格模板来快速格式化表格。另外，这些模板也不是固定不变，速格式化表格。另外，这些模板也不是固定不变，可通过设置模板参数，调整表格外观。步骤：可通过设置模板参数，调整表格外观。步骤：v选定表格，选择菜单【命令】选定表格，选择菜单【命令】/【格式化表格【格式化表格】命】命令，弹出【格式化表格】对话框。如图令，弹出【格式化表格】对话框。如图3-8所示。所示。3.2.5 表格的快速格式化3.2.5 表格的快速格式化在列表框中选定一种格式。在列表框中选定一种格式。可以对选项进行设置：可

15、以对选项进行设置：v【行颜色】：包括【行颜色】：包括3个选项，用于定义表格中每一行的颜色。个选项，用于定义表格中每一行的颜色。v第一种：为表格中的行设置一种颜色。第一种：为表格中的行设置一种颜色。v第二种：为表格中的行设置另一种颜色。第二种：为表格中的行设置另一种颜色。v交错：两种行颜色交替出现的方式，共有【不要交错】、【每一行】、【每交错：两种行颜色交替出现的方式，共有【不要交错】、【每一行】、【每二行】、【每三行】、【每四行】二行】、【每三行】、【每四行】5个选项。个选项。v【第一行】：包括【第一行】：包括4个选项，用于设置表格顶部第一行的各项属性参数。个选项，用于设置表格顶部第一行的各项

16、属性参数。v对齐：其下拉列表中包括对齐：其下拉列表中包括4个选项：【无】、【左对齐】、【居中对齐】、【个选项：【无】、【左对齐】、【居中对齐】、【左对齐】。左对齐】。v文字样式：其下拉列表中包括文字样式：其下拉列表中包括4个选项：【常规】、【粗体】、【斜体】、【个选项：【常规】、【粗体】、【斜体】、【加粗斜体】。加粗斜体】。v背景色和文本颜色：设置第一行的背景色和文本颜色。背景色和文本颜色：设置第一行的背景色和文本颜色。v【最左列】：用于设置表格左侧第【最左列】：用于设置表格左侧第1列的各项属性参数。有列的各项属性参数。有2个选项：【对齐个选项：【对齐】、【文字样式】。设置方法同上。】、【文字

17、样式】。设置方法同上。v【边框】：用于设置表格的边框宽度，以像素为单位。【边框】：用于设置表格的边框宽度，以像素为单位。v【将所有属性套用至【将所有属性套用至TD标注而不是标注而不是TR标签】：在标签】：在HTML标签中，标签中，“表示表表示表格的行格的行”，“表示数据单元格表示数据单元格”。若要将上述设置用于。若要将上述设置用于而不是而不是，则，则勾选该选项。勾选该选项。v单击【确定】按钮，完成表格的格式化设置。单击【确定】按钮，完成表格的格式化设置。3.2.6 创建细线表格v若设置表格边框为若设置表格边框为“1”，则在浏览器中呈示的，则在浏览器中呈示的线条实际为线条实际为2像素，要制作细线

18、表格，可以使像素，要制作细线表格，可以使用用CSS样式表来定义，也可以运用表格的属样式表来定义，也可以运用表格的属性参数来进行设置。我们先介绍后一种方法，性参数来进行设置。我们先介绍后一种方法，具体步骤如下：具体步骤如下：v在在Dreamweaver中按中按Ctrl+Alt+T，弹出插入，弹出插入表格的对话框，参数设置如图表格的对话框，参数设置如图3-9所示。为固所示。为固定值：表格边框设为定值：表格边框设为“0”，间距设为，间距设为“1”。3.2.7 表格的其他操作v1.复制粘贴行复制粘贴行v2.排序排序v3.导入导出其他应用程序中的数据导入导出其他应用程序中的数据3.3 布局视图模式布局视

19、图模式 在编辑网页前应该首先对网页进行整体布局设置。合在编辑网页前应该首先对网页进行整体布局设置。合理的布局使网页看起来美观大方，并且便于网页元素的插入理的布局使网页看起来美观大方，并且便于网页元素的插入与编辑。表格是进行布局的强有力的工具。与编辑。表格是进行布局的强有力的工具。使用表格的标准使用表格的标准模式进行布局不太方便，因为最初创建表格是为了显示表格模式进行布局不太方便，因为最初创建表格是为了显示表格数据，而不是用于对数据，而不是用于对Web页进行布局。为了简化使用表格进页进行布局。为了简化使用表格进行页布局的过程，行页布局的过程，Dreamweaver MX 2004提供了布局视图。

20、提供了布局视图。在布局视图中，可以使用表格作为基础结构来设计我们的页在布局视图中，可以使用表格作为基础结构来设计我们的页面，避免了使用传统的方法创建时经常出现的一些问题。例面，避免了使用传统的方法创建时经常出现的一些问题。例如，在布局视图中我们可以在页上方便地绘制布局单元格，如，在布局视图中我们可以在页上方便地绘制布局单元格，然后将这些单元格移动到所需的位置。我们还可以方便地创然后将这些单元格移动到所需的位置。我们还可以方便地创建固定宽度的布局和自动伸展为整个浏览器窗口宽度的布局建固定宽度的布局和自动伸展为整个浏览器窗口宽度的布局等。等。3.3 布局视图模式布局视图模式 要使用布局模式，必须打

21、开要使用布局模式，必须打开Dreamweaver MX 2004的布局模式，方法是：的布局模式，方法是：v选择选择【查看查看】/【表格模式表格模式】/【布局模式布局模式】命令，或命令，或者单击工具栏上的者单击工具栏上的【常用常用】下拉列表，选择下拉列表，选择【布局布局】工具栏，如图工具栏，如图3-13所示。点击所示。点击【布局布局】按钮，切按钮，切换到表格的布局模式。换到表格的布局模式。【布局表格布局表格】按钮和按钮和【绘制绘制布局单元格布局单元格】按钮有效。按钮有效。3.3.1 绘制布局单元格和表格绘制布局单元格和表格 在布局模式中，可以在页面上直接绘制布局单在布局模式中，可以在页面上直接绘

22、制布局单元格和布局表格。当不在布局表格中绘制布局单元元格和布局表格。当不在布局表格中绘制布局单元格时，格时，Dreamweaver MX 2004会自动创建一个布会自动创建一个布局表格以容纳该单元格。布局单元格不能存在于布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。局表格之外。v1.绘制布局单元格的操作步骤如下绘制布局单元格的操作步骤如下;v2绘制布局表格操作步骤如下绘制布局表格操作步骤如下;3.3.1 绘制布局单元格和表格绘制布局单元格和表格 说明：说明：不能在现有内容旁边绘制布局表格。不能在现有内容旁边绘制布局表格。如果我们的页上已包含内容，则只能在现有如果我们的页上已包含内容

23、，则只能在现有内容的下方绘制新的布局表格。如果我们尝内容的下方绘制新的布局表格。如果我们尝试在现有内容之下绘制布局表格，就会出现试在现有内容之下绘制布局表格，就会出现禁止绘制鼠标指针，请重新调整文档窗口的禁止绘制鼠标指针，请重新调整文档窗口的大小以使现有内容底部和窗口底部之间产生大小以使现有内容底部和窗口底部之间产生更多的空白空间。更多的空白空间。3.3.1 绘制布局单元格和表格绘制布局单元格和表格v3绘制嵌套布局表格绘制嵌套布局表格 可以将一个布局表格绘制在另一个布局表格中，可以将一个布局表格绘制在另一个布局表格中，创建嵌套表格。对外部表格所进行的更改不会影响创建嵌套表格。对外部表格所进行的

24、更改不会影响嵌套表格中的单元格；例如，当更改外部表格中行嵌套表格中的单元格；例如，当更改外部表格中行或列的大小时，内部表格中单元格的大小不发生变或列的大小时，内部表格中单元格的大小不发生变化。化。v4将布局单元格靠齐到网格将布局单元格靠齐到网格 可以打开可以打开Dreamweaver MX 2004文档窗口中的文档窗口中的网格，将其用作绘制布局的可视化向导，让页面元网格，将其用作绘制布局的可视化向导，让页面元素在移动时自动靠齐到网格。还可以通过指定网格素在移动时自动靠齐到网格。还可以通过指定网格设置更改网格或控制靠齐行为。不管网格是否可见，设置更改网格或控制靠齐行为。不管网格是否可见，靠齐都将

25、发挥作用。靠齐都将发挥作用。3.3.2 向布局单元格中添加内容向布局单元格中添加内容 在布局模式中可以将文本、图像和其他内在布局模式中可以将文本、图像和其他内容添加到布局单元格中，就象在标准模式中一容添加到布局单元格中，就象在标准模式中一样。但在布局模式中不能向布局表格的空白样。但在布局模式中不能向布局表格的空白（灰色）区域插入内容，因此在添加内容之前，（灰色）区域插入内容，因此在添加内容之前，必须先创建布局单元格，当添加内容的宽度大必须先创建布局单元格，当添加内容的宽度大于布局单元格时，该单元格自动扩展于布局单元格时，该单元格自动扩展。3.3.3 调整布局表格和布局单元格调整布局表格和布局单

26、元格 为了调整页面布局，可以对布局单元格和嵌套布为了调整页面布局，可以对布局单元格和嵌套布局表格进行移动并调整它们的大小，（最外面的布局表格进行移动并调整它们的大小，（最外面的布局表格只能调整大小）。布局单元格不能重叠，对局表格只能调整大小）。布局单元格不能重叠，对单元格进行移动或调整大小之后，该单元格不能跨单元格进行移动或调整大小之后，该单元格不能跨越包含它的布局表格的边框。越包含它的布局表格的边框。v1调整布局单元格的大小调整布局单元格的大小具体步骤如下：具体步骤如下：v单击布局单元格的边框或者按住单击布局单元格的边框或者按住CTRL键并单击布键并单击布局单元格里的任何区域，在布局单元格的

27、边框上会局单元格里的任何区域，在布局单元格的边框上会出现控制点。出现控制点。v拖动控制点就可以改变布局单元格的大小。或通过拖动控制点就可以改变布局单元格的大小。或通过【属性】面板调整单元格的大小。【属性】面板调整单元格的大小。3.3.3 调整布局表格和布局单元格调整布局表格和布局单元格v2调整布局表格的大小调整布局表格的大小v当布局表格的大小不合适时，就需要调整布局表格的大小。当布局表格的大小不合适时，就需要调整布局表格的大小。具体步骤如下：具体步骤如下：v单击状态栏上的表格标签，选中表格。单击状态栏上的表格标签，选中表格。v通过【属性】面板调整表格的大小，或拖动控制点调整大小。通过【属性】面

28、板调整表格的大小，或拖动控制点调整大小。v3移动布局表格或布局单元格移动布局表格或布局单元格v布局表格或布局单元格不在正确的位置时，需要调整布局单布局表格或布局单元格不在正确的位置时，需要调整布局单元格或布局表格的位置。具体步骤如下：元格或布局表格的位置。具体步骤如下：v选定布局单元格。选定布局单元格。v拖动布局单元格到页面上所需的地方。或者使用键盘上的方拖动布局单元格到页面上所需的地方。或者使用键盘上的方向键，按一下方向键可以移动向键，按一下方向键可以移动1个像素的距离，如果同时按个像素的距离，如果同时按住住Shift键，一次可以移动键，一次可以移动10个像素的距离。个像素的距离。可以通过使

29、用【属性】面板来更改布局单元格或表格的可以通过使用【属性】面板来更改布局单元格或表格的多种属性，包括宽度和高度、背景颜色以及单元格内容的对多种属性，包括宽度和高度、背景颜色以及单元格内容的对齐方式。齐方式。设置布局表格，具体步骤如下：设置布局表格，具体步骤如下：v选定布局表格，【属性】面板显示布局表格的参数。如图选定布局表格，【属性】面板显示布局表格的参数。如图3-14所示。所示。v图图3-14【属性】面板【属性】面板v【宽】：可选择【固定】单选按钮，然后在文本框中输入以【宽】：可选择【固定】单选按钮，然后在文本框中输入以像素为单位的值，或者选择【自动伸展】单选按钮。如果选像素为单位的值，或者

30、选择【自动伸展】单选按钮。如果选择【自动伸展】，无论浏览器的窗口设置为多大，设计的布择【自动伸展】，无论浏览器的窗口设置为多大，设计的布局会充满浏览器的窗口。局会充满浏览器的窗口。v【高】：在文本框中输入以像素为单位的值。最小值为【高】：在文本框中输入以像素为单位的值。最小值为1。v【背景颜色】：通过调色板来选取背景色。【背景颜色】：通过调色板来选取背景色。v【填充】：设置单元格内容与边框之间的距离，单位为像素。【填充】：设置单元格内容与边框之间的距离，单位为像素。v【间距】：设置单元格与单元格之间的距离。单位为像素。【间距】：设置单元格与单元格之间的距离。单位为像素。3.3.4 设置布局表格

31、和布局单元格的格式设置布局表格和布局单元格的格式3.3.5 使用间隔图使用间隔图 v间隔图是透明图，在浏览器里看不见，但它可以用间隔图是透明图，在浏览器里看不见，但它可以用来控制自动伸展表的间隔，使用间隔图能维持页面来控制自动伸展表的间隔，使用间隔图能维持页面上设置的布局表格和布局单元格的宽度。上设置的布局表格和布局单元格的宽度。v在一列插入间隔图或设置一列自动伸展时会出现一在一列插入间隔图或设置一列自动伸展时会出现一个对话框，询问怎样建立间隔图文件。如果已经在个对话框，询问怎样建立间隔图文件。如果已经在Dreamweaver mx 2004 的站点参数中建立了间隔的站点参数中建立了间隔图的话

32、，该对话框就不会出现。图的话，该对话框就不会出现。v在某一列中建立间隔图的步骤如下：在某一列中建立间隔图的步骤如下：v选定一列，宽度设为自动伸展，将弹出【选择占位选定一列，宽度设为自动伸展，将弹出【选择占位图像】对话框，如图图像】对话框，如图3-15所示。选择【创建占位图所示。选择【创建占位图像文件】单选按钮，单击【确定】按钮。像文件】单选按钮，单击【确定】按钮。3.3.5 使用间隔图3.3.5 使用间隔图使用间隔图v弹出如图弹出如图3-16所示对话框，输入间隔图文件所示对话框，输入间隔图文件名。名。v图图3-16【保存间隔图像文件】对话框【保存间隔图像文件】对话框v单击【保存】按钮，间隔图就

33、创建好了。单击【保存】按钮，间隔图就创建好了。v要删除某一列的间隔图，可以在该列底部单要删除某一列的间隔图，可以在该列底部单击三角按钮，在弹出的菜单选择【删除间隔击三角按钮，在弹出的菜单选择【删除间隔图像】命令。如图图像】命令。如图3-17所示。所示。3.3.5 使用间隔图使用间隔图v图3-17【删除间隔图像】命令v要删除表格中所有的间隔图，可以选定表格，单击【属性】面板上的【删除所有间隔图像】按钮。3.4 用表格布局网页用表格布局网页 网页的布局应遵循的原则有对称平衡、异常平衡、网页的布局应遵循的原则有对称平衡、异常平衡、对比、凝视和空白等。在对比、凝视和空白等。在Dreamweaver 中

34、我们可中我们可以用表格、框架、层来布局网页，但表格是使用最以用表格、框架、层来布局网页，但表格是使用最广泛的一种。广泛的一种。v3.4.1 页网的布局的几种常见形式页网的布局的几种常见形式v1国字型结构布局：国字型结构布局：国字型结构布局也称同字型，是一些大型网站所国字型结构布局也称同字型，是一些大型网站所喜欢的类型，即最上面是网站的标题喜欢的类型，即最上面是网站的标题+横幅广告条横幅广告条+主菜单，下半部分分为主菜单，下半部分分为3个区域，左右分列一些两个区域，左右分列一些两小条内容，中间是主题内容，与左右一起罗列到底，小条内容，中间是主题内容，与左右一起罗列到底，最下面是网站的一些基本信息

35、、联系方式、版权声最下面是网站的一些基本信息、联系方式、版权声明等。这种布局的优点是能够充分利用版面，信息明等。这种布局的优点是能够充分利用版面，信息量大；缺点是页面拥挤，不够灵活。量大；缺点是页面拥挤，不够灵活。3.4 用表格布局网页用表格布局网页v2拐角型布局：拐角型布局：这种结构与上一种其实是很相近的，上面是标这种结构与上一种其实是很相近的，上面是标题题+广告横幅，下半部分左列是主菜单，右列是主广告横幅，下半部分左列是主菜单，右列是主要内容。或者左列是主要内容，右列是主菜单。下要内容。或者左列是主要内容，右列是主菜单。下面是一些网站的辅助信息。这种布局方式的优点是面是一些网站的辅助信息。

36、这种布局方式的优点是页面结构清晰，主次分明，初学者最容易上手；缺页面结构清晰，主次分明，初学者最容易上手；缺点是较为呆板，如果不注意细节色彩，很容易让人点是较为呆板，如果不注意细节色彩，很容易让人产生杂乱的感觉。产生杂乱的感觉。3.4 用表格布局网页用表格布局网页v3综合框架型：综合框架型：由上下框架、左右框架组合成的一种框架结构，类似于由上下框架、左右框架组合成的一种框架结构，类似于“拐角型拐角型”，只是采用了框架结构，适用于内容简单的企业网，只是采用了框架结构，适用于内容简单的企业网站。站。v4封面型：封面型：这种类型基本上是出现在一些网站的首页，大部分为一这种类型基本上是出现在一些网站的

37、首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个或者仅是一个“进入进入”的链接。这种类型大部分出现在企业网的链接。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。觉。3.4 用表格布局网页用表格布局网页v5Flash型：型：其实这与封面型结构是类似的，只是这种类型采其实这与封面型结构是类似的，只是这种类型采用了目前非常游行的用了目前非常游行的Flash，与封面型不同的是，与封面型不同的是，由于由于Flash强大的功能，页面所表

38、达的信息更丰富，强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。统的多媒体。v6变化型：变化型：上面几种类型的结合与变化。上面几种类型的结合与变化。3.4.2 一个完整的页面制作一个完整的页面制作 在学习了表格具体操作后，我们来用表格设计一在学习了表格具体操作后，我们来用表格设计一个完整的页面。一个完整的页面包括页眉、导航区、个完整的页面。一个完整的页面包括页眉、导航区、信息区、页脚。在信息区、页脚。在LOGO标志、图片都已处理好的标志、图片都已处理好的情况下，我们开始工作。情况下，我们开始工作。v1页眉的

39、制作页眉的制作v2信息区的制作信息区的制作v3页脚的制作页脚的制作v页脚的制作应与页眉相对应。页脚的制作应与页眉相对应。由上可知，使用表格来布局网页，要用到嵌套表格。最由上可知，使用表格来布局网页，要用到嵌套表格。最外层的表格以像素为单位，这样网页文档不会随浏览器分辨外层的表格以像素为单位，这样网页文档不会随浏览器分辨率的改变而发生变化。内层的表格宽度要使用百分比来制定率的改变而发生变化。内层的表格宽度要使用百分比来制定宽度，这样可以避免出错。因为如果还使用像素为内层的表宽度，这样可以避免出错。因为如果还使用像素为内层的表格的宽度单位，当其宽度比包含它的单元格宽度大时，那么格的宽度单位，当其宽度比包含它的单元格宽度大时，那么单元格的宽度就会增大，从而破坏了表格的布局。插入的嵌单元格的宽度就会增大，从而破坏了表格的布局。插入的嵌套表格可以区分不同的版块，使各个版块相互独立；设置单套表格可以区分不同的版块，使各个版块相互独立；设置单元格的背景色和背景图像可以使标题栏突出、醒目。网页有元格的背景色和背景图像可以使标题栏突出、醒目。网页有立方体感。层次分明。适当使用点、线、曲线，来改变表格立方体感。层次分明。适当使用点、线、曲线，来改变表格布局过于拘束的缺点。布局过于拘束的缺点。3.4.2 一个完整的页面制作一个完整的页面制作