第13章使用表格轻松排列和布局网页元素题材.ppt

教学内容：表格是网页设计制作时不可缺少的重要元素。无论用于排列数据还是在页面上对文本进行排版，表格都表现出了强大的功能。它以简洁明了和高效快捷的方式，将数据、文本、图像、表单等元素有序的显示在页面上，从而设计出版式漂亮的网页。表格最基本的作用就是让复杂的数据变得更有条理，让人容易看懂，在设计页面时，往往要利用表格来布局定位网页元素。通过对本章的学习，应掌握插入表格、设置表格属性、编辑表格的方法；能够利用表格布局网页。; 教学重点 插入表格和表格元素 选择表格元素 表格的基本操作 排序及整理表格内容 利用表格排列数据 创建细线表格;13.1插入表格和表格元素;13.1.1插入表格 在Dreamweaver中插入表格非常简单，具体操作步骤如下。;13.1.2设置表格属性 直接插入的表格有时并不能让人满意，在Dreamweaver中，通过设置表格或单元格的属性，可以很方便地修改表格的外观。;13.1.3添加内容到单元格 插入表格后，就可以直接向表格中添加内容了，将光标置于表格的单元格中，分别输入相应的文字。;13.2 选择表格元素;13.2.1选取表格 选择整个表格有以下几种方法。 单击表格线的任意位置。 将光标置于表格内的任意位置，选择菜单中的【修改】|【表格】|【选择表格】命令。 将光标放置到表格的左上角，按住鼠标左键不放，拖曳鼠标指针到表格的右下角，将整个表格中的单元格选中，单击鼠标右键，在弹出的菜单中选择【表格】|【选择表格】选项。 将光标放置在表格的任意位置，单击文档窗口左下角的table标签，选中表格后，选项控柄就出现在表格的四周， ;13.2.2选取行或列 选择表格的行或列有以下两种方法。 当鼠标指针位于要选择行首或列顶时，鼠标指针形状变成了 箭头或 箭头时，单击鼠标左键即可以选中行或列。 将光标置于要选择的行首或列顶，按住鼠标左键不放从左至右拖曳或者从上至下拖曳，即可选中行或者列。;13.2.3选取单元格 选择一个单元格有以下几种方法。 选取单个单元格的方法是在要选择的单元格中单击鼠标左键，并拖曳鼠标至单元格末尾。 按住Ctrl键，然后单击单元格可以将其选中。 将光标放置在单元格中，单击文档窗口左下角的td标签。 ;13.3表格的基本操作;13.3.1调整表格和单元格的大小 调整表格的高度和宽度时，表格中所有单元格将按比例相应改变大小。;13.3.2添加或删除行或列 在已创建的表格内增加行、列，要先将光标放置在要插入行、列的单元格中，然后通过以下方法增加。;13.3.3拆分单元格 拆分单元格有以下几种方法。 将光标放置在要拆分的单元格中，选择菜单中的【修改】|【表格】|【拆分单元格】命令，打开【拆分单元格】对话框，在对话框中进行相应的设置，单击【确定】按钮，即可拆分单元格。 将光标放置在要拆分的单元格中，单击鼠标右键，在弹出的菜单中选择【表格】|【拆分单元格】选项，打开【拆分单元格】对话框，也可以拆分单元格。 将光标放置在需要拆分的单元格中，在【属性】面板中单击【拆分单元格为行或列】 按钮，打开【拆分单元格】对话框，也可以拆分单元格。 ;13.3.4合并单元格 合并单元格有以下几种方法。 选中要合并的单元格，选择菜单中的【修改】|【表格】|【合并单元格】命令，即可将选中的单元格合并。 选中合并的单元格，单击鼠标右键，在弹出的菜单中选择【表格】|【合并单元格】选项，即可合并单元格。 选中合并的单元格，在【属性】面板中单击【合并所选单元格，使用跨度】 按钮，即可将选中的单元格合并。 ;13.4排序及整理表格内容;13.4.1导入表格式数据 在Dreamweaver中，可以将其他应用软件制作完成后的表格数据导入到网页中，导入的数据要具有制表符、逗号、分号、引号或者其他定界符。具体操作步骤如下。;13.4.2排序表格 如果想要使输入的表格数据有一定的规律性，在Dreamweaver中可以对其进行排序，具体操作步骤如下。;13.5实战;实战1——创建细线表格 本例将讲述如何制作细线表格，从而使网页更加美观精细。具体操作步骤如下。;实战2——利用表格排列数据 本利用表格排列数据的具体操作步骤如下。