8.4.1 创建和使用表格

1. 插入表格

选择“插入”菜单中的“表格”或者单击“常用”工具栏中的 “表格”按钮，均可以弹出“表格”对话框，如图8-19 所示。在该对话框中可以设置表格的行数、列数、表格宽度、单元格间距、单元格边距和边框粗细等选项。

图 8-19 插入表格

2. 在表格中输入内容

表格创建完成后，可以向表格中添加内容，在表格中添加的 内容可以包括文本、图像或数据等，如图 8-20 所示。

图 8-20 在表格中添加内容

3. 设置表格及单元格属性

1）设置表格属性

选择所在表格的<table>标签选中整个表格，然后修改属性面板中相应表格的属性，如图 8-21 所示。

图 8-21 表格属性查看器

2）设置单元格属性 将鼠标定位在要设置属性的单元格内，修改属性面板相应单元格的属性，如图 8-22 所示。

图 8-22 单元格属性查看器

4. 编辑和调整表格结构

1）选择整个表格和调整表格的大小

选择表格的方法比较多，比较简单的方法是：单击文档窗口左下角的标签选择器 <table>标签，或者单击表格外边框上的任何位置。被选择的表格周围出现控制手柄。选择表格后，拖曳表格边框上的控制手柄，可以改变表格的大小。

2）选择和删除行或列

将光标置于行的左边缘或列的顶端，出现黑色的选择箭头时单击；或在单元格内单击，然后拖曳鼠标，可选择多行或多列。如果要删除行或列，则只需在选择后按 Delete 键即可。

3）合并和拆分单元格

合并单元格：同时选中需要合并的单元格，单击属性查看器上的“合并单元格”按钮。

拆分单元格：选中需要拆分的单元格，单击属性查看器上的“拆分单元格”按钮，然后在弹 出的对话框中填入要拆分的行列数。

4）嵌套表格

嵌套表格就是在表格内套表格。可以像设置其他表格一样设置嵌套表格，但其宽度受所在单元格的宽度限制。

在表格单元格内嵌套表格的操作方法是：先把光标定位在要嵌套表格的单元格中，单击“插入”栏的“常用”类别中的“表格”按钮，在弹出的“表格”对话框中设置表格参数，单击“确定”按钮，即可在选定的单元格中插入表格。

5）设置表格或单元格的背景颜色

选择要设置颜色的表格或者单元格，在属性查看器 中单击“背景颜色”选项旁边的颜色块按钮，在弹出的拾 色器中选取一种颜色，作为背景色，如图 8-23 所示。

图 8-23 设置表格或单元格背景颜色

5. 使用表格定位页面元素

表格是一个容器元素，表格布局技术是指把页面区 域分成若干个单元格，通过单元格来控制各种页面元素 （文本、图像等）在页面上的定位和排版。采用表格进行 页面布局，方法简洁明了、浏览器兼容性高，与CSS 结合在一起，能够满足绝大多数网页设计的需求。

8.4.2 创建和使用框架

1. 什么是框架

在浏览网页的时候，常常会遇到这样一种导航结构：单击页面左侧的超链接，链接的目标出现在右侧；或者单击上侧的链接，链接的目标出现在下侧。这就是框架技术中最常用的导航窗口。

框架页面就是把浏览器窗口划分为若干个子窗口，这些子窗口称为框架。一个框架显示一个网页文件，但整个框架集却存在于同一个浏览器窗口中。框架页面可以把不同类别的信息显示在不同的框架中，有利于分类管理和控制。

图 8-24 是一个左右结构的框架。事实上这样一个结构是 由三个网页文件组成的。首先外部的框架集是一个文件，图中 用index.htm命名。框架中左边命名为L，指向的是网页A.htm。 右边命名为 R，指向的是一个网页B.htm。

图 8-24 框架页面逻辑结构

2. 创建框架集

单击“插入”工具栏中的“布局”→“框架”，选择一种框架结构，如“左侧框架”，如图 8-25 所示。创建的左侧框架如图 8-26 所示。

图 8-25 创建框架集

图 8-26 框架页面

单击框架之间的边框，选择框架集。选择“文件”→“框架集另存为”，在弹出的对话框中填写框架集名字为 index.html，单击“保存”。

设计要在框架中显示的网页见表 8-3。

表 8-3 设计要在框架中显示的网页

3. 为每个框架设定源文件

（1） 按住Shift+Alt，鼠标单击所在区域，选中该框架，在属性查看器中设置该框架的源文件，如图 8-27 所示。

图 8-27 框架属性查看器

（2） 依次设置左边的框架源文件为left.html，右边的框架源文件为 main.html。

（3） 将文件全部保存。

在浏览器中浏览index.html，即可看到利用框架设计的框架页面，如图 8-28 所示。

图 8-28 框架页面实例

4. 用链接控制框架的显示内容

如果希望单击框架左侧的一项时，右侧主框架的内容跟着更新，就要通过创建链接来控制框架的显示内容。使用属性查看器的“目标”下拉列表框，可以指定在哪个框架中打开被链接的文件。具体操作步骤如下：

（1） 选择左侧框架中的导航文本“第一章”。

（2） 在属性查看器中设置该文本的链接为chap01.html。

（3） 从“目标”下拉列表框中选择目标框架mainFram 来显示以上被链接的文件。

（4） 仿照上述步骤，依次创建“第二章”、“第三章”的链接。

（5） 保存所有文件，在浏览器中浏览index.html，单击左侧导航链接，即可看到右侧主框架中 的内容随之更新，如图8-29 所示。

图 8-29 在主窗口中载入页面