新网页设计与制作项目实训教程 教学课件 严加琼 曾金发 项目8.pptVIP

项目8 使用表格布局网页 项目描述 表格是一种特殊的元素，不但可以用来设置各种数据，还可以作为页面布局元素来使用。在作为页面布局元素使用时，表格可以有助于用户有条理地组织网页中的各种对象。本项目运用表格知识制作“庐山风景欣赏”网页，其效果如图 。 项目描述 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.2 表格的基本操作 　　1.插入表 　　插入表格的具体操作步骤： ①将光标置于要插入表格的位置。 ②单击菜单“插入”→“表格”命令,弹出“表格”对话框。如图8-3所示。 8.2知识储备 ③设置表格大小为“5行3列”、“表格宽度”为100%，“边框粗细”为“3”像素，然后单击“确定”按钮。此时，在Dreamweaver CS5中显示了5行3列的表格，如图8-4所示。 ④在插入表格之后，就可以像在Word中一样输入表格内容了。 8.2知识储备 2.选择表格和表格元素 　　表格元素包括行、列和单元格三种，他们的选取方法各不相同。 (1)选择表格 　　要选择表格，可执行以下任意一种操作： ①将鼠标指针移到表格的左上角或表格的顶、底边缘边框上，当指针形状变成形状时单击。 ②在表格中的任意单元格内单击，然后单击文档窗口左下角标签选择器中的table标签。 ③单击表格中的任意单元格，然后选择菜单“修改”→“表格”→“选择表格”命令。 ④在表格上右击鼠标，从弹出的快捷菜单中选择“表格”→“选择表格”命令。 8.2知识储备 　　表格被选定后，表格的下边缘和右边缘会出现尺寸控点，如图8-5所示。 8.2知识储备 (2)选择表格元素 　　可以分别选择表格中的行、列、单元格，一次可以选择一行、一列、一个单元格，也可以同时选择多行、多列或多个单元格。 ① 选择行：将指针指向行的左边缘，当指针形状变为选择箭头（右指的箭头）时单击，可选择当前行；上下拖动指针可选择多行。 ② 选择列：将指针指向行的上边缘，当指针形状变为选择箭头（下指的箭头）时单击，可选择当前列；左右拖动指针可选择多列。 8.2知识储备 ③ 选择单元格：在所需单元格中单击，然后单击文档窗口左下角标签选择器中的td标签。 ④ 选择连续的单元格区域：从一个单元格拖到另一个单元格，或者先单击一个单元格，然后按住shift键单击另一个单元格。两个单元格定义的直线或矩形区域中的所有单元格都将被选中。 ⑤ 选择不相邻的单元格：在按住Ctrl键的同时单击要选择的单元格、行或列。如果按住Ctrl键，单击尚未选中的单元格、行或列，则会将其选中。如果它已经被选中，再次单击则会将其从选择中删除。 8.2知识储备 8.2.3 设置表格及单元格的属性 　 1.设置表格属性 　　格式化表格的大部分操作都可以通过表格属性面板完成。选择表格后，属性面板上会显示当前表格的相关属性，如图8-6所示。 8.2知识储备 2.设置单元格、行或列属性 　　当选择单元格或者一行、一列时，属性面板中将对应显示单元格或者行、列的属性，在行、列、单元格的属性面板中可以分别设置行、列或单元格的宽、高、背景颜色以及单元格内容的对齐方式等属性，如图8-7所示。 8.2知识储备 8.2.4 调整表格的结构 　　1.调整表格和单元格的大小 　　当调整整个表格的大小时，表格中的所有单元格按比例更改大小。选中插入的表格，在出现三个控制点后，将鼠标移动到控制点上，鼠标形状变成双向箭头时，按鼠标左键并拖动即可改变表格的大小。 　　 8.2知识储备 　　将光标置于要设置大小的单元格中，用鼠标拖动列或行的边框来调整列宽或行高，如图8-8所示。 8.2知识储备 2.添加或删除行或列 　　在网页文档中添加行或列可以用以下方法： (1)将光标置于相应的单元格中，选择菜单“修改”→“表格”→“插入行”命令，即可插入一行。 (2)将光标置于相应的位置，选择菜单“修改”→“表格”→“插入列”命令，即可在相应的位置插入一列。 8.2知识储备 (3)将光标置于相应的位置，选择菜单“修改”→“表格”→“插入行或列”命令，弹出“插入行或列”对话框，在对话框中进行相应的设置，如图8-9所示。单击“确定”按钮，即可在相应位置插入行或列。 8.2知识储备 　　在网页文档中删除行或列可