网页设计 第9章 Dreamweaver的表格和网页版面设计[精选].ppt

第 9 章 Dreamweaver的表格和网页版面设计 本章知识技能要点： 表格在网页中的作用 表格的创建与编辑 利用表格对页面进行布局 利用布局试图对页面进行布局 Dreamweaver中框架的创建方法 超链接框架目标的指定 框架和框架页的基本操作 9.1 网页中的表格 表格是现代网页制作的一个重要组成部分。表格之所以重要是因为它不仅仅可以有传统意义上的用法，更重要的是时可以用于实现网页的精确排版和定位。 在开始制作表格之前，首先对表格的各部分的名称做一个说明。 9.1 网页中的表格 9.1.1在网页中插入表格 单击“插入”工具栏“常用”类别中的“表格”按钮 。或者选择“插入”菜单下的“表格”命令，弹出“表格对话框”。 在表格对话框中，“表格大小”栏：设置表格的外观，如行数、列数、单元格边距（填充）、单元格间距等等。“页眉”栏：设置表格的表头位置。“辅助功能”栏：设置表格标题等。 设置完成之后，点击“确定”。 9.1 网页中的表格 9.1.3 导入外部数据 选择“文件”菜单→“导入”→“表格式数据”命令，或者选择“插入”菜单→“表格对象”→“导入表格式数据”命令，弹出“导入表格式数据”对话框，指定要导入的数据文件、定界符及其他选项。 9.1 网页中的表格 9.1.4 表格的编辑与修改： 9.1.4.1 选择单元格 选择某一个单元格：单击单元格，然后单击文档窗口左下角标签选择器中的td标签；或者按住Ctrl键单击该单元格；或者单击单元格，然后选择“编辑”→“全选”命令。 选择一个矩形单元格块：从一个单元格拖动到另一个单元格，或者单击一个单元格，然后按住Shift键单击另一个单元格。 选择不相邻的多个单元格：按住Ctrl键，然后单击要选择的每一个单元格。 9.1 网页中的表格 9.1.4.2 选择行和列 将指针指向行的左边缘，当指针变成选择箭头时单击可以选择此行，上下拖动则可选择多行。 将指针指向列的上边缘，当指针变成选择箭头时单击可以选择此列，左右拖动则可以选择多列。此外，要选择一列，也可以在该列中单击，然后单击列标题菜单箭头，选择弹出菜单中的“选择列”命令。 9.1.4.3 选择整个表格 单击任意单元格，然后在文档窗口左下角的标签选择器中单击table标签。 单击表格的左上角、表格的顶边缘或底边缘的任意位置或者行或列的边框。 单击任意单元格，然后选择“修改”→“表格”→“选择表格”命令。 单击任意单元格，单击表格标题菜单，然后选择“选择表格”命令。 9.1 网页中的表格 9.1.4.4 添加、删除行或列 1.添加行 当插入点位于表格的最后一个单元格中时，按Tab键会自动在表格的最后另外添加一行。 选择“修改”菜单→“表格”→“插入行”命令，此时将在插入点所在行的上面添加一行。 如果要插入多行，可将插入点放置在与要插入的行相邻的行中，然后选择“修改”→“表格”→“插入行或列”命令，弹出“插入行或列”对话框，如图9-6。在“插入”选项组中单击“行”单选按钮，然后再指定要插入的行数和位置。 9.1 网页中的表格 2.添加列 在表格中添加一列：将插入点放置在要插入列右面一列中，然后选择“修改”菜单→“表格”→“插入列”命令，或者将插入点放置在与要插入列相邻的列中，然后单击列标题菜单的箭头按钮，在弹出菜单中选择“左侧插入列”或“右侧插入列”命令。 同时在表格中插入多列：将插入点放置在与要插入的列相邻的列中，然后选择“修改”→“表格”→“插入行或列”命令，弹出“插入行或列”对话框，在“插入”选项组中单击“列”单选按钮，然后根据需要进行设置。 3.删除行或列 在要删除的行或列中的任意单元格中单击，然后选择“修改”菜单→“表格”→“删除行”或“删除列”命令。 选择完整的一行或一列，然后按Delete键或选择“编辑”→“清除”命令。 9.1 网页中的表格 9.1.4.5 调整表格大小和外观 调整表格宽度或高度：选择表格，拖动选择框右边或底边的控制点。 同时调整表格的高度和宽度：选择表格拖动选择框右下角的控制点。 若要精确指定表格大小：选定表格，在属性检查器的“宽”和“高”文本框输入数值，在其后的下拉列表框选择值的单位。 在表格的属性检查器中可以设置表格的背景颜色、背景图像、边框颜色等等属性。 9.1 网页中的表格 9.1.4.6 调整行高和列宽和外观 使用拖动方式：改变一行的高度或一列的宽度：沿该行的下边框或该列的右边框移动指针，当指针变成一个行边框选择器后，向下（上）或向左（右）拖动。 使用属性检查器：选择所需的行或列后，在行属性检查器中的“高”或“宽”文本框中输入行高值或列宽值，然后按下Tab键或Enter键应用该值。 在表格的属性检查器中可以设置行或列的背景颜色、背景图