第18讲有关表格的基础知识.docVIP

PAGE  PAGE 6 第十四讲 有关表格的基础知识 在上一讲中，我们学习了有关层的操作技术，同时学习了使用标尺、网格和跟踪图像设计页面布局的方法。在本讲中，我们将开始学习使用表格进行页面布局。通过本讲的学习，我们希望达到下面的学习目标： ◆ 了解HTML中的表格格式设置优先级； ◆ 学会创建和选择表格元素； ◆ 了解导入和导出表格式数据； ◆ 学会使用“扩展表格”模式； ◆ 掌握设置表格和单元格的格式的方法。 14.1 使用表格布局页面 表格是用于在页面上显示表格式数据以及对文本和图形进行布局的强有力的工具。很多设计人员使用表格来对 Web 页进行布局。Macromedia Dreamweaver MX 2004 提供了两种查看和操作表格的方式：在“标准”模式中，表格显示为行和列的网格，而“布局”模式允许用户在将表格用作基础结构的同时在页面上绘制、调整方框的大小以及移动方框。 表格由一行或多行组成；每行又由一个或多个单元格组成。虽然 HTML 代码中通常不明确指定列，但 Dreamweaver 允许用户操作列、行和单元格。当选定了表格或表格中有插入点时，Dreamweaver 会显示表格宽度和每个表格列的列宽。宽度旁边是表格标题菜单与列标题菜单的箭头。使用菜单可以快速访问一些与表格相关的常用命令。用户可以根据需要打开或关闭宽度和菜单。 14.1.1 HTML 中的表格格式设置优先级 当在“设计”视图中对表格进行格式设置时，用户可以设置整个表格或表格中所选行、列或单元格的属性。如果将整个表格的某个属性（例如背景颜色或对齐）设置为一个值，而将单个单元格的属性设置为另一个值，则单元格格式设置优先于行格式设置，行格式设置又优先于表格格式设置。表格格式设置的优先顺序如下： 1. 单元格 2. 行 3. 表格 例如，如果将单个单元格的背景颜色设置为蓝色，第一行的颜色设为绿色，然后将整个表格的背景颜色设置为黄色，则蓝色单元格不会变为黄色或绿色，因为单元格格式设置优先于表格和行格式设置。绿色的行不会是黄色的，因为行的格式设置优先于表格的格式设置。 当设置列的属性时，Dreamweaver 更改对应于该列中每个单元格的 td 标签的属性。 如果用户未看到表的宽度或列的宽度，说明没有在 HTML 代码中指定该表或列的宽度。如果出现两个数字，说明“设计”视图中显示的可视宽度与 HTML 代码中指定的宽度不一致。当拖动表格的右下角来调整表格的大小，或将内容添加到比设置宽度大的单元格时会发生这种情况。例如，如果用户将某列的宽度设置为 200 像素，而添加的内容将宽度延长为 250 像素，则该列将显示两个数字：“200”（代码中指定的宽度）和“(250)”（位于括号中的数值，表示该列呈现在屏幕上的可视宽度）。 用户可以在一个设置了列宽的表格中，插入一个比该列列宽宽的图片。插入了图片的单元格的列宽就有二个数值。括号外的数值表示代码中指定的宽度。位于括号中的数值，表示该列呈现在屏幕上的可视宽度。图片的宽度与括号内的数值一致。 14.1.2 创建和选择表格元素 使用“插入”栏或“插入”菜单来创建一个新表格。如果要插入表格，则依照下列步骤操作： 1. 先在“文档”窗口的“设计”视图中，将插入点放在需要表格出现的位置； 2. 然后可以选择“插入”“表格”或者在“插入”栏的“常用”或“布局”类别中，单击“表格”按钮。打开了 “插入表格”对话框； 3. 设置“插入表格”对话框选项： ? ◇“行数”与“列数”确定表格具有的行/列的数目； ? ◇“表格宽度”以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽 度； ? ◇“边框粗细”以像素为单位指定表格边框的宽度。如果没有明确指定边框粗 细的值，则大多数浏览器按边框粗细设置为 1 显示表格。若要确保浏览器不 显示表格边框，请将边框粗细设置为 0。若要在边框粗细设置为 0 时查看单 元格和表格边框，请选择“查看”“可视化助理”“表格边框”； ? ◇“单元格边距”确定单元格边框和单元格内容之间的像素数； ? ◇“单元格间距”确定相邻的表格单元格之间的像素数。如果没有明确指定单 元格间距和单元格边距的值，则大多数浏览器按单元格边距设置为 1，单元 格间距设置为 2 显示表格。若要确保浏览器不显示表格中的边距和间距，请 将“单元格边距”和“单元格间距”设置为 0； ? ◇在“页眉”部分选择一个页眉选项： a)“无”对表不启用列或行标题；