网页制作项目8

项目8使用表格布局网页项目描述

知识储备

实践向导

能力拓展

退出项目小结

项目描述

表格是一种特殊的元素，不但可以用来设置各种数据，还可以作为页面布局元素来使用。在作为页面布局元素使用时，表格可以有助于用户有条理地组织网页中的各种对象。本项目运用表格知识制作“庐山风景欣赏”网页，其效果如图。项目描述

图8-1“庐山风景欣赏”页面效果图返回8.2知识储备8.2.1认识表格8.2.2表格的基本操作8.2.3设置表格及单元格的属性8.2.4调整表格的结构8.2.5填加表格数据8.2.6导入外部表格数据文件8.2.7嵌套表格8.2知识储备

8.2.1认识表格

1.表格的组成元素一张表格横向叫行，纵向叫列，行列交叉部分就叫单元格，如图8-2所示。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫边框。图8-2表格的基本组成部分8.2知识储备

8.2.2表格的基本操作

1.插入表插入表格的具体操作步骤：①将光标置于要插入表格的位置。②单击菜单“插入”→“表格”命令,弹出“表格”对话框。如图8-3所示。图8-3表格对话框8.2知识储备③设置表格大小为“5行3列”、“表格宽度”为100%，“边框粗细”为“3”像素，然后单击“确定”按钮。此时，在DreamweaverCS5中显示了5行3列的表格，如图8-4所示。④在插入表格之后，就可以像在Word中一样输入表格内容了。图8-4插入表格8.2知识储备2.选择表格和表格元素表格元素包括行、列和单元格三种，他们的选取方法各不相同。(1)选择表格要选择表格，可执行以下任意一种操作：①将鼠标指针移到表格的左上角或表格的顶、底边缘边框上，当指针形状变成形状时单击。②在表格中的任意单元格内单击，然后单击文档窗口左下角标签选择器中的<table>标签。③单击表格中的任意单元格，然后选择菜单“修改”→“表格”→“选择表格”命令。④在表格上右击鼠标，从弹出的快捷菜单中选择“表格”→“选择表格”命令。8.2知识储备表格被选定后，表格的下边缘和右边缘会出现尺寸控点，如图8-5所示。图8-5表格的选定状态8.2知识储备(2)选择表格元素可以分别选择表格中的行、列、单元格，一次可以选择一行、一列、一个单元格，也可以同时选择多行、多列或多个单元格。①选择行：将指针指向行的左边缘，当指针形状变为选择箭头（右指的箭头）时单击，可选择当前行；上下拖动指针可选择多行。②选择列：将指针指向行的上边缘，当指针形状变为选择箭头（下指的箭头）时单击，可选择当前列；左右拖动指针可选择多列。8.2知识储备③选择单元格：在所需单元格中单击，然后单击文档窗口左下角标签选择器中的<td>标签。④选择连续的单元格区域：从一个单元格拖到另一个单元格，或者先单击一个单元格，然后按住shift键单击另一个单元格。两个单元格定义的直线或矩形区域中的所有单元格都将被选中。⑤选择不相邻的单元格：在按住Ctrl键的同时单击要选择的单元格、行或列。如果按住Ctrl键，单击尚未选中的单元格、行或列，则会将其选中。如果它已经被选中，再次单击则会将其从选择中删除。8.2知识储备8.2.3设置表格及单元格的属性

1.设置表格属性格式化表格的大部分操作都可以通过表格属性面板完成。选择表格后，属性面板上会显示当前表格的相关属性，如图8-6所示。图8-6表格属性面板8.2知识储备2.设置单元格、行或列属性当选择单元格或者一行、一列时，属性面板中将对应显示单元格或者行、列的属性，在行、列、单元格的属性面板中可以分别设置行、列或单元格的宽、高、背景颜色以及单元格内容的对齐方式等属性，如图8-7所示。图8-7单元格属性面板8.2知识储备8.2.4调整表格的结构

1.调整表格和单元格的大小当调整整个表格的大小时，表格中的所有单元格按比例更改大小。选中插入的表格，在出现三个控制点后，将鼠标移动到控制点上，鼠标形状变成双向箭头时，按鼠标左键并拖动即可改变表格的大小。

8.2知识储备将光标置于要设置大小的单元格中，用鼠标拖动列或行的边框来调整列宽或行高，如图8-8所示。图8-8调整单元格行高8.2知识储备2.添加或删除行或列在网页文档中添加行或列可以用以下方法：(1)将光标置于相应的单元格中，选择菜单“修改”→“表格”→“插入行”命令，即可插入一行。(2)将光标置于相应的位置，选择菜单“修改”→“表格”→“插入列”命令，即可在相应的位置插入一列。8.2知识储备(3)将光标置于相应的位置，选择菜单“修改”→“表格”→“插入行或列”命令，弹出“插入行或列”对话框，在对话框中进行相应的设置，如图8-9所示。单击“确定”按钮，即可在相应位置插入行或列。图8-9插入行或列对话框8.2知识储备

在网页文档中删除行或列可以用以下方法：(1)将光标置于要删除行的任意一个单元格，选择菜单“修改”→“表格”→“删除行”命令就可以删除当前行。(2)将光标置于要删除列中的任意一个单元格，选择菜单“修改”→“表格”→“删除列”命令就可以删除当前列。(3)选中要删除的行或列，选择菜单“编辑”→“清除”命令，即可删除行或列。(4)选中要删除的行或列，按Delete键或按BackSpace键也可以删除行或列。8.2知识储备3.拆分单元格在使用表格的过程中，有时需要拆分单元格以达到所需的效果。拆分单元格就是将选中的表格单元格拆分为多行或多列，有以下方法：(1)将光标置于要拆分的单元格中，选择菜单“修改”→“表格”→“拆分单元格”命令，弹出“拆分单元格”对话框，如图8-10所示。设置完成后，单击“确定”按钮。图8-10拆分单元格对话框8.2知识储备(2)将光标置于要的拆分的单元格中，单击鼠标右键，在弹出菜单中选择“表格”→“拆分单元格”命令，弹出“拆分单元格”对话框，然后进行相应的设置。(3)单击“属性”面板中的“拆分单元格”按钮，弹出“拆分单元格”对话框，然后进行相应的设置。8.2知识储备

4.合并单元格合并单元格就是将选中单元格的内容合并到一个单元格，合并单元格有以下方法：(1)选中要合并的单元格，然后选择菜单“修改”→“表格”→“合并单元格”命令，将多个单元格合并成一个，如图8-11所示。图8-11合并单元格8.2知识储备(2)选中要合并的单元格，在“属性”面板中单击“合并单元格”按钮，即可合并单元格。(3)选中要合并的单元格，单击鼠标右键，在弹出菜单中选择“表格”→“合并单元格”，可合并单元格。8.2知识储备5.剪切、复制和粘贴表格剪切、复制和粘贴表格步骤如下：①选择要剪切的表格，选择菜单“编辑”→“剪切”或菜单“编辑”→“拷贝”命令。②光标置于要粘贴表格的位置，选择菜单“编辑”→“粘贴”命令，即可复制或者移动表格。8.2知识储备

8.2.5添加表格数据表格中的每一个单元格都相当于一个独立的小文档，在要添加内容的单元格中单击，即可在其中输入文字、插入图像或者其他网页元素。在单元格中添加和编辑数据的方法与在普通文档中相同。编辑完一个单元格的数据后，用户可执行以下任意操作移动插入点，以便编辑下一个单元格。在表格中跳转的方法如下：

(1)跳转至下一个单元格：按Tab键。

(2)跳转至上一个单元格：按Shift+Tab组合键。

(3)向上、向下、向左、向右移动插入点：按上、下、左、右箭头键。

(4)在表格下方添加一行：在表格的最后一个单元格中按Tab键。8.2知识储备8.2.6导入外部表格数据文件如果在其他应用程序（如写字板）中创建了以分隔文本的格式保存的表格式数据文件（其中的项以制表符、逗号、冒号、分号或其他分隔符隔开），可以直接将其导入到DreamweaverCS5中。导入的表格数据文件在网页中显示为表格的格式。8.2知识储备要导入数据文件，可选择“文件”→“导入”→“表格式数据”命令或选择“插入”→“表格对象”→“导入表格式数据”命令，打开如图8-12所示的“导入表格式数据”对话框，进行相关设置后单击“确定”按钮，即可将所选文件中的数据以格式的形式导入到DreamweaverCS5文档中。图8-12“导入表格式数据”对话框8.2知识储备8.2.7嵌套表格嵌套表格是在一个表格的单元格中插入另一个表格，用户可以像对其他任何表格一样对嵌套表格进行格式设置，但是宽度受其所在单元格的宽度限制。嵌套表格的具体步骤如下：①选择要嵌套表格的单元格，在“插入”面板的“常用”分类中单击“表格”按钮，如图8-13所示。8.2知识储备②在“表格”对话框中设置要嵌套的表格，然后单击“确定”按钮。即可在单元格中插入嵌套表格。图8-13“插入”面板返回8.3实践向导任务8-1制作”庐山风景欣赏”网页，效果如图8-1所示。具体操作步骤如下：（1）启动DreamweaverCS5,单击菜单“文件”→“新建”命令，打开“新建文档”对话框，选择“空白页”→“HTML”→“<无>”选项，单击“确定”按钮，创建一个网页文档，并保存文件。8.3实践向导（2）单击菜单“插入”→“表格”命令，弹出“表格”对话框，插入一个4行3列的表格，设置表格宽度为870像素，边框粗细为0像素，单击“确定”按钮。然后在“属性”面板中设置其对齐方式为“居中对齐”

。（3）将光标置于表格中，选中第一行，合并单元格。（4）在第一行单元格内输入文本，设置单元格高为71像素，文本格式为“标题1”，水平居中对齐，背景颜色为“#FFCC33”。8.3实践向导（5）鼠标置于第二行第一列单元格内，设置单元格水平居中对齐，宽为290像素，高位205像素，背景颜色为”#FFCC99”。（6）设置完单元格属性后，在单元格内插入图像和输入文本。（7）重复步骤（5）（6），在第二行和第三行的单元格内插入图片和文本。（7）将光标置于表格第四行中，合并单元格，设置高度为100像素，背景颜色为“#FFCCFF”，输入文本。8.3实践向导（8）选择“文件”→“保存全部”命令，保存所有文件。按【F12】预览，效果如图所示。返回8.4能力拓展