Dreamweaver ,CS3网页设计案例教程 王春红 王瑾瑜主编 模块五 使用表格新.pptVIP

模块五 使用表格及布局表格 任务四 使用布局单元格和表格 任务一 认识表格 任务二 使用编辑表格? 任务三 表格的其他操作 学材小结 任务一 认识表格?? 表格可以实现网页的精确排版和定位。它是网页制作的一个重要组成部分 子任务1 熟悉网页中的表格? 任务一 认识表格?? 如WORD中所讲述的表格一样，一张表格横向叫行，纵向叫列。行列交叉部分就叫做单元格。单元格是网页布局的最小单位。有时为了布局的需要，我们可以在单元格内再插入新的表格，有时可能需要在表格中反复插入新的表格，以实现更复杂的布局。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框 子任务1 熟悉网页中的表格? 任务一 认识表格?? 子任务1 熟悉网页中的表格? 代码视图中如果要定义一个表格，就要使用TABLE /TABLE标签，表格的每一行使用TR /TR 标签，表格中的内容要用TD /TD标签。表列实际上是存在于表的行中。建立5-2的表格需要产生如下的HTML代码： TABLE BORDER=1 TRTD1/TDTD2/TDTD3/TD/TR TRTD4/TDTD5/TDTD6/TD/TR TRTD7/TDTD8/TDTD9/TD/TR /TABLE 任务一 认识表格?? Dreamweaver执行【查看】→【表格模式】下拉菜单打开三种查看和操作表格的模式：“标准” 模式、“布局” 模式和“扩展表格”模式。“标准”模式下，表格显示为行和列的网格；“布局” 模式允许您在将表格用作基础结构的同时在页面上绘制方框、调整方框的大小以及移动方框；“扩展表格”模式临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易,利用这种模式，您可以选择表格中的项目或者精确地放置插入点。 子任务2 认识表格的视图模式 任务二 使用编辑表格? 执行【插入记录】→【表格】命令 快捷键Ctrl+Alt+T 单击工具栏【布局】或【常用】面板上的【表格】按钮，如图5-3所示。 插入表格按钮 子任务1 插入表格?? 任务二 使用编辑表格? 选择整个表格 选择表格元素（行、列、单元格） 设置表格“属性” 行、列的添加和删除 合并和拆分单元格 子任务2 选择编辑表格 任务二 使用编辑表格? 设置表格“属性” 表格ID：在其右边的下拉列表中，设置表格ID，一般不可输入 行：在文本框中，设置表格的行数 列：在文本框中，设置表格的列数 宽：在文本框中，设置表格的宽度，有“%”和“像素”两种单位可以选择 填充：在文本框中，设置单元格内部和对象的距离 间距：在文本框中，设置单元格之间的距离 对齐：在其右边的下拉列表中设置表格的4种对齐方式 边框：在文本框中输入相应数值，设置表格的边框宽度 背景颜色：在其右边的拾色器中可以选择表格背景颜色 边框颜色：在其右边的拾色器中可以选择表格边框颜色 背景图像：在其右边的“浏览文件”按钮中可以选择背景图像 子任务2 选择编辑表格 任务二 使用编辑表格? 选择整个表格 把光标悬放到表格的上边框外缘或者下边框外缘（光标呈现表格光标），如图5-9所示；或者把光标悬放在表格的右边框上或者下边框上再或者单元格内边框的任何地方（光标标呈现平行线光标），如图5-10所示。单击鼠标左键即可选中此表格。 子任务2 选择编辑表格 任务二 使用编辑表格? 行、列的添加和删除 在需要添加行或列的位置单击鼠标左键，可以选择菜单【修改】→【表格】→【插入行】或者【插入列】，即可在此单元格上面添加一行或者左面添加一列。 选择菜单【修改】→【表格】→ 【插入行或列】在出现的对话框框中输入要添加的行数或列数。各属性参数含义如下： 插入行：选择此项将插入行 插入列：选择此项将插入列 行数（列数）：在文本框中，设置插入行或列的数值 位置： 所选之上（所选之前）：在当前所选位置上面（前面）进行插入操作 所选之下（所选之后）：在当前所选位置下面（后面）进行插入操作 子任务1 选择编辑表格 任务二 使用编辑表格? 选择表格元素（行、列、单元格） 将光标定位于行的左边缘或列的最上端，当光标变成黑色箭头时单击即可。如图5-11所示。 图5-11通过箭头选择行或列 在单元格内单击，按住鼠标左键，然后按照如图5-12所示箭头方向，平行拖动或者向下拖动可以选择多行或者多列。 图5-12通过拖动鼠标选择行或列 按住CTRL键，鼠标左键分别单击欲选择的多行或者多列，这种方法可以比较灵活的选择多行或者多列。 子任务2 选择编辑表格 任务二 使用编辑表格? 合并和拆分单元格 合并单元格的操作是拆