Dreamweaver ,CS3网页设计案例教程 教学配套课件 王春红 王瑾瑜主编 模块五 使用表格.pdfVIP

模块五 使用表格及布局表格 任务一 认识表格 任务二 使用编辑表格 任务三 表格的其他操作 任务四 使用布局单元格和表格 学材小结 任务一 认识表格 子任务1 熟悉网页中的表格 • 表格可以实现网页的精确排版和定位。它是网页制作的一个重要组成 部分 任务一 认识表格 子任务1 熟悉网页中的表格 • 如WORD 中所讲述的表格一样，一张表格横向叫行，纵向叫列。行列 交叉部分就叫做单元格。单元格是网页布局的最小单位。有时为了布 局的需要，我们可以在单元格内再插入新的表格，有时可能需要在表 格中反复插入新的表格，以实现更复杂的布局。单元格中的内容和边 框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格 的边缘叫做边框 任务一 认识表格 子任务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 任务一 认识表格 子任务2 认识表格的视图模式 • Dreamweaver执行【查看】→【表格模式】下拉菜单打开三种查看和 操作表格的模式：“标准” 模式、“布局” 模式和“扩展表格”模式。“标准” 模式下，表格显示为行和列的网格；“布局” 模式允许您在将表格用作 基础结构的同时在页面上绘制方框、调整方框的大小以及移动方框；“ 扩展表格”模式临时向文档中的所有表格添加单元格边距和间距，并且 增加表格的边框以使编辑操作更加容易,利用这种模式，您可以选择表 格中的项目或者精确地放置插入点。 任务二 使用编辑表格 子任务1 插入表格 • 执行【插入记录】→【表格】命令 • 快捷键Ctrl+Alt+T • 单击工具栏【布局】或【常用】面板上的【表格】按钮，如图5-3所示 。 • 插入表格按钮 任务二 使用编辑表格 子任务2 选择编辑表格 • 选择整个表格 • 选择表格元素（行、列、单元格） • 设置表格“属性” • 行、列的添加和删除 • 合并和拆分单元格 任务二 使用编辑表格 子任务2 选择编辑表格 • 设置表格“属性” • 表格ID：在其右边的下拉列表中，设置表格ID，一般不可输入 • 行：在文本框中，设置表格的行数 • 列：在文本框中，设置表格的列数 • 宽：在文本框中，设置表格的宽度，有“%”和“像素”两种单位可以选择 • 填充：在文本框中，设置单元格内部和对象的距离 • 间距：在文本框中，设置单元格之间的距离 • 对齐：在其右边的下拉列表中设置表格的4种对齐方式 • 边框：在文本框中输入相应数值，设置表格的边框宽度 • 背景颜色：在其右边的拾色器中可以选择表格背景颜色 • 边框颜色：在其右边的拾色器中可以选择表格边框颜色 • 背景图像：在其右边的“浏览文件”按钮中可以选择背景图像 任务二 使用编辑表格 子任务