网页设计与制作 教学课件 作者 王君学 第06章 使用表格布局页面.pptVIP

本章将介绍在Dreamweaver CS3中创建和设置表格的基本方法。 设置表格属性 设置单元格属性 * 第6章　使用表格布局页面 学习目标 理解表格的构成和作用。 掌握创建表格的方法。 掌握设置表格和单元格属性的方法。 掌握导入和导出表格的方法。 掌握对表格进行排序的方法。 掌握使用表格进行网页布局的方法。 6.1 认识表格 　　　表格是由行和列组成的，行和列又是由单元格组成的，所以，单元格是组成表格的最基本单位。单元格之间的间隔称为单元格间距；单元格内容与单元格边框之间的间隔称为单元格边距（或填充）。 6.1 认识表格 组织数据：这是表格最基本的作用，如成绩单、工资表、销售表等。 网页布局：这是表格组织数据作用的延伸，由简单地组织一些数据发展成组织网页元素，进行版面布局。 制作特殊效果：如制作细线边框、按钮等。若结合CSS样式，会制作出更多的效果。 6.2 创建表格 插入表格 选择表格 插入行或列 删除行或列 合并单元格 拆分单元格 复制或剪切 粘贴表格 移动表格内容 6.2.1 插入表格 通过以下任意一种方式打开【表格】对话框来插入表格。 选择【插入记录】/【表格】命令 在【插入】/【常用】工具栏中单击 （表格）按钮 在【插入】/【布局】工具栏中单击 （表格）按钮。 按Ctrl+Alt+T组合键 6.2.2 选择表格 一、选择整个表格 单击表格左上角或单击表格中任何一个单元格的边框线 将鼠标光标置于表格内，选择【修改】/【表格】/【选择表格】命令，或在鼠标右键快捷菜单中选择【表格】/【选择表格】命令。 将鼠标光标移到预选择的表格内，表格上端或下端弹出绿线的标志，单击绿线中的 按钮，从弹出的下拉菜单中选择【选择表格】命令，如图6-6所示。 将鼠标光标移到预选择的表格内，单击文档窗口左下角相应的“table”标签。 6.2.2 选择表格 二、选择表格的行或列 当鼠标光标位于欲选择的行首或列顶时，鼠标光标变成黑色箭头形状，这时单击鼠标左键，便可选择行或列。如果按住鼠标左键不放并移动黑色箭头，可以选择连续的行或列。 按住鼠标左键从左至右或从上至下拖曳，将选择相应的行或列。 将鼠标光标移到欲选择的行中，单击文档窗口左下角的“tr”标签选择行。 将鼠标光标移到表格内，单击欲选择列的绿线标志中的 按钮，从弹出的下拉菜单中选择【选择列】命令。 有时需要选择不相邻的多行或多列，可以通过下面的方法来实现。 按住Ctrl键，依次单击欲选择的行或列。 按住Ctrl键，在已选择的连续行或列中依次单击欲去除的行或列。 6.2.2 选择表格 三、选择单元格 (1) 选择单个单元格的方法有以下两种。 将鼠标光标置于单元格内，然后按住Ctrl键，单击单元格可以将其选择。 将鼠标光标置于单元格内，然后单击文档窗口左下角的td标签将其选择。 (2) 选择相邻单元格的方法有以下两种。 在开始的单元格中按住鼠标左键并拖曳到最后的单元格。 将鼠标光标置于开始的单元格内，然后按住Shift键不放，单击最后的单元格。 (3) 选择不相邻单元格的方法有以下两种。 按住Ctrl键，依次单击欲选择的单元格。 按住Ctrl键，在已选择的连续行或列中依次单击欲去除的行或列。 6.2.3 插入行或列 选择【修改】/【表格】/【插入行】命令，则在鼠标光标所在单元格的上面增加1行。同样，选择【修改】/【表格】/【插入列】命令，则在鼠标光标所在单元格的左侧增加1列。也可使用鼠标右键菜单命令进行操作。 6.2.3 插入行或列 选择【插入记录】/【表格对象】菜单中的【在上面插入行】、【在下面插入行】、【在左边插入列】、【在右边插入列】命令来插入行或列。 选择【修改】/【表格】/【插入行或列】命令，打开【插入行或列】对话框进行设置，如图6-10所示，加以确认后即可完成插入操作。也可在鼠标右键菜单中选择【表格】/【插入行或列】命令打开该对话框。 6.2.4 删除行或列 如果要删除行或列，首先需要将鼠标光标置于要删除的行或列中，或者将要删除的行或列选中，然后选择【修改】/【表格】菜单中的【删除行】或【删除列】命令，将行或列删除。最简捷的方法就是利用选择表格行或列的方法选定要删除的行或列，然后按键盘上的Delete键。也可使用鼠标右键菜单进行以上操作。 6.2.5 合并单元格 合并单元格是指将多个单元格合并为一个单元格。首先选择欲合并的单元格，然后可采取以下几种方法进行操作。 选择【修改】/【表格】/【合并单元格】命令。 单击鼠标右键，在弹出的快捷菜单中选择【表格】/【合并单元格】命令。 单击【属性】面板左下角的 按钮。 6.2.6 拆分单元格 拆分单元格是针对单个单元格而言的，可看成是合并单元格操作的逆操作。首先需要将鼠