第3章 使用表格布局排版网页

3.1.1 表格的基本概念
表格基础是随着添加正文或图像而扩展的。表 格由行、列和单元格3部分组成。行贯穿表格的左右 ；列则是上下方向的；单元格是行和列交汇的部分 ，是输入信息的地方。单元格会自动扩展到输入信 息相适应的尺寸 。
行 列 单元格
3.1.2小案例——插入表格
在Dreamweaver中插入表格非常简单 。
按住Shift键不放并单击多个单元格中的第一个 和最后一个，可以选择多个相邻的单元格。 按住Ctrl键不放并单击多个单元格，可以选择多 个相邻或不相邻的单元格。
3.4 表格的基本操作
创建表格后，可以根据需要调整表格的高度 和宽度，添加或删除行或列，拆分或合并单元格 等。
3.4.1 小案例——调整表格高度和宽度
3.4.3小案例——拆分单元格
在使用表格的过程中，有时需要拆分单元格以 达到自己所需的效果。拆分单元格就是将选中的单 元格拆分为多行或多列。
3.4.4 合并单元格
合并单元格就是将选中的单元格合并为一个单元 格，合并单元格有以下几种方法。 选中要合并的单元格，选择菜单中的【修改】| 【表格】|【合并单元格】命令，即可将多个单元格合 并成一个单元格。 选中要合并的单元格，在【属性】面板中单击【 合并所选单元格，使用跨度】按钮 ，即可合并单元格 。 选中要合并的单元格，单击鼠标右键，在弹出的 菜单中选择【表格】|【合并单元格】命令，即可合并 单元格。
3.2 设置表格属性
直接插入的表格有时并不能让人满意，在 Dreamweaver中，通过设置表格或单元格的属性 ，可以很方便地修改表格的外观 。
3.2.1小 设置表格属性
设置表格的属性，可以通过表格的【属性】面 板进行。选择表格，在【属性】面板中将显示表格 的属性 。
3.2.2 设置单元格属性
教学时间：本章共分_______课时 教学方法
案例教学 多媒体教学 理论面授
教学素材
课程范例文件：sample\第3章\ 练习文件：exercise\第3章\
3.1 插入表格
在Dreamweaver 中，表格可以用于制作简单 的图表，还可以用于安排网页文档的整体布局， 起着非常重要的作用。利用表格设计页面布局， 可以不受分辨率的限制 。
调整表格的高度和宽度时，表格中所有单元格 将按比例相应改变大小 。选中表格，此时会出 现3个控制点，将鼠标指针分别放在3个不同的控 制点上 ，按住鼠标左键拖动即可改变表格的高度和 宽度 。
3.4.2 小案例—添加或删除行或列
将光标置于要插入行的位置，选择菜单中的【 修改】|【表格】|【插入行】命令，即可插入一行。 将光标置于要插入列的位置，选择菜单中的【 修改】|【表格】|【插入列】命令，即可插入一列。 将光标置于要插入行或列的位置，选择菜单中 的【修改】|【表格】|【插入行或列】命令，弹出【 插入行或列】对话框，在对话框中进行相应的设置 ，单击【确定】按钮，即可插入行或列。
3.3.2 选取行或列
选择表格的行或列有以下几种方法。 当鼠标指针位于要选择行首或列顶时，鼠标指 针形状变成了 箭头或 箭头时，单击鼠标左键即可以 选中行或列。 将光标置于要选择的行首或列顶，按住鼠标左 键不放从左至右拖曳或者从上至下拖曳，即可选中 行或者列。
3.3.3 选取单元格
选择表格中的单个或多个单元格的方法有以下 多种。 按住鼠标左键并拖曳，可以选择一个单元格或 多个单元格。 按住Ctrl键，单击选择的单元格，即可选中单元 格。 将光标放置在表格的任意单元格中，单击窗口 左下角的<td>标签，即可选中一个单元格。 在已经选择的相邻单元格中，按住Ctrl键单击不 想选择的单元格，将其去除，可以选择不相邻的多 个单元格。
将光标置于单元格中，该单元格就处于选中状 态，此时属性面板中显示出所有允许设置的单元格 属性的选项 。
3.3 选择表格元素
要想在文档中对一个元素进行编辑，那么首先 要选择它；同样，要想对表格进行编辑，首先也要 选中它。选择表格操作可以分为选中整个表格、选 中单元格等几种情况，下面分别进行介绍。
3.3.1 选取表格
3.6 综合案例
本章主要讲述了表格的基本概念、创建表格和表 格的编辑等，下面将通过本章所讲述的知识创建实例 。掌握表格的使用技巧就可以设计出很多富有创意、 风格独特的网页 。
综合案例1—创建细线表格
表格无疑是网页制作中最为重要的一个对象，因 为通常网页都是依靠表格来排列数据的，它直接决定 了网页是否美观、内容组织是否清晰。合理地利用表 格可以方便地美化页面。本例将讲述如何制作细线表 格，从而使网页更加美观精细。
删除行或列有以下几种方法。 将光标置于要删除行的位置，选择菜单中的【修 改】|【表格】|【删除行】命令，即可删除行。 将光标置于要删除列的位置，选择菜单中的【修 改】|【表格】|【删除列】命令，即可删除列。 选中要删除的行或列，选择菜单中的【编辑】| 【清除】命令，即可删除行或列。 将光标置于要删除行或列的位置，单击鼠标右键 ，在弹出的菜单中选择【表格】|【删除行】命令或选 择【表格】|【删除列】命令，也可以删除行或列。 将光标置于要删除行或列的位置，可以在【属性 】面板中的【行】或【列】。
• 学习目标
• • • • • 掌握表格的插入 掌握表格属性的设置 掌握选择表格的方法 掌握编辑表格和单元格 掌握利用表格排列布局网页
教学目标和基本要求
___________________________________ ___________________________________ ___________________________________
选择整个表格有以下几种方法。 单击表格线的任意位置。 将光标置于表格内的任意位置，选择菜单中的 【修改】|【表格】|【选择表格】命令。 将光标放置到表格的左上角，按住鼠标左键不 放，拖曳鼠标指针到表格的右下角，将整个表格中 的单元格选中，单击鼠标右键，在弹出的菜单中选 择【表格】|【选择表格】选项。 将光标放置在表格的任意位置，单击文档窗口 左下角的<table>标签，选中表格后，选项控柄就出 现在表格的四周。
综合案例2—创建圆角表格
制作网页时常常有一些技巧，如在表格的 Nhomakorabea周加 上圆角，这样可以避免直接使用表格的直角而显得过 于呆板 。
本章小结
表格可是Dreamweaver中最重要的排列数据工 具。众所周知，任何结构的产生，都需要对其进行 排列，网页自然也不会例外，而排列时使用的工具 就是“表格”了。 本章主要讲述了表格的插入、表格属性的设置 、选择表格的方法、表格和单元格的编辑方法、利 用表格排列布局网页。
第3章使用表格布局排版网 页
教学内容：表格是网页不可缺少的重要元素。 无论用于排列数据还是在页面上对文本进行排 版，表格都表现出了强大的功能。它以简洁明 了和高效快捷的方式，将数据、文本、图像和 表单等元素有序地显示在页面上，从而呈现出 版式漂亮的网页。表格最基本的作用就是让复 杂的数据变得更有条理，让人容易看懂，在设 计页面时，往往要利用表格来排版网页元素。 通过对本章的学习，应掌握插入表格、设置表 格属性和编辑表格的方法，能够利用表格排列 网页数据。
3.5 排序及整理表格内容
Dreamweaver CS6提供了导入表格式数据和表格 排序功能，使用这两个功能可以整理表格内的数据 。
3.5.1小案例——导入表格式数据
在导入表格式数据前，首先要将表格数据文件转 换成.txt（文本文件）格式，并且该文件中的数据要带 有分隔符，如逗号、分号、冒号等。导入到 Dreamweaver中的数据不会出现分隔符，且会自动生 成表格 。
3.5.2小案例—排序表格
Dreamweaver CS6还提供了表格的排序功能，使 表格中的内容按一定的顺序进行排列。在 Dreamweaver 中，可以对一列的内容进行简单排序， 也可以对两列的内容进行更为复杂的排序。不能对包 含有Colspan或Rowspan属性的表格进行排序，也就 是说，不能对那些包含有合并单元格的表格进行排序 。