《Dreamweaver 网页设计》第6章 表格的应用

Dreamweaver网页设计 第6章表格的应用

Dreamweaver 网页设计 第6章 表格的应用

【学习概述】 表格是控制网页页面布局最有力的工具。 使用表格可以对列表数据进行布局,布局 网页文本、图像、媒体等。 Dreamweaver 提供了3种方式来查看和操作表格:标准视 图、扩展视图、布局视图。本章重点是: 表格的基本操作和布局视图下表格的操作

【学习概述】 表格是控制网页页面布局最有力的工具。 使用表格可以对列表数据进行布局，布局 网页文本、图像、媒体等。Dreamweaver 提供了3种方式来查看和操作表格：标准视 图、扩展视图、布局视图。本章重点是： 表格的基本操作和布局视图下表格的操作

6.1【课堂讲解】表格基础 61.1表格和单元格 1.表格 表锅里其在格击显爹若数以行交香和冬(个同组 表格由三个基本部件组成:行、列、单元格。具有宽度、高度、间距、 边框等属性 2.单元格 表格由一个或多个单元格构成,单元格是指表格内的每个小格子。 61.2表格结构 如图6-1所示的表格。 其各参数值如下: 行:2。 单元格 列:3 单元格数目:6。 宽度:400。 表格宽度 高度:200 间距:10 图61表格结构 边框:5

6.1 【课堂讲解】表格基础 6.1.1 表格和单元格 1. 表格 表格是用于在网页上显示表格式数据以及对文本和图形进行布局的强有 力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。 表格由三个基本部件组成：行、列、单元格。具有宽度、高度、间距、 边框等属性。 2. 单元格 表格由一个或多个单元格构成，单元格是指表格内的每个小格子。 6.1.2 表格结构 如图6-1所示的表格。 其各参数值如下： 行：2。 列：3。 单元格数目：6。 宽度：400。 高度：200。 间距：10。 边框：5。 图 6-1 表格结构

62.1插入表格 插入表格步骤如下 (1)新建文档“ bg. htm",执行【插入】->【表格】命令或在“插入” 栏的的“常用”类别中,单击“表格”按钮,如图6-3所示。显示 “表格”对话框,如图6-4所示。 插入「常用布局|表单文本ⅢML|应用程序|Fash元素|收藏夹 回晶国国易,,崮,回 行数:1:2 表格宽度:700像素 图6-3“表格”按钮 边框相细:1像索 单元格边距: 单元格间距 甲目= 对齐标题:默认N 帮助 确定匚取消 图6-4“表格”对话框

6.2.1 插入表格 插入表格步骤如下： （1）新建文档“bg.html”，执行【插入】->【表格】命令或在“插入” 栏的的“常用”类别中，单击“表格”按钮，如图6-3所示。显示 “表格”对话框，如图6-4所示。 图 6-3 “表格”按钮 图 6-4 “表格”对话框

2)设置“表格”对话框选项如下: 行数:表格的行数目,本例为“1”。 列数:表格的列数目,本例为“2”。 表格宽度:以像素为单位或按以窗口宽度的百分比来指定表格的宽度, 本例为“700象素。 边框粗细:表格边框的宽度。 单元格边距:单元格边框和单元格内容之间的像素数 单元格间距:相邻的表格单元格之间的像素数。 “页眉”选项组中一共4个标题选项:无、左侧、顶部、两者。 无:对表格不启用列或行标题。 左侧:将表格的第一列作为标题列,以便为表格中的每一行输入一个标 顶部:将表格的第一行作为标题行,以便为表格中的每一列输入一个标 两者:在表格中输入列标题和行标题。 标题:显示在表格外的表格标题 对齐标题:表格标题相对于表格的位置。 摘要:表格的说明信息。 设置完毕后,单击“确定”按钮,完成创建表格操作。效果如图6-5所示:

（2）设置“表格”对话框选项如下： 行数：表格的行数目，本例为“1”。 列数：表格的列数目，本例为“2”。 表格宽度：以像素为单位或按以窗口宽度的百分比来指定表格的宽度， 本例为“700”象素。 边框粗细：表格边框的宽度。 单元格边距：单元格边框和单元格内容之间的像素数。 单元格间距：相邻的表格单元格之间的像素数。 “页眉”选项组中一共4个标题选项：无、左侧、顶部、两者。 无：对表格不启用列或行标题。 左侧：将表格的第一列作为标题列，以便为表格中的每一行输入一个标 题。 顶部：将表格的第一行作为标题行，以便为表格中的每一列输入一个标 题。 两者：在表格中输入列标题和行标题。 标题：显示在表格外的表格标题。 对齐标题：表格标题相对于表格的位置。 摘要：表格的说明信息。 设置完毕后，单击“确定”按钮，完成创建表格操作。效果如图6-5所示：

图6-5创建表格 6.2.2导入表格式数据 Dreamweaver可以将在Word、Exce等应用程序中创建并以分 隔文本的格式保存的表格式数据导入到 Dreamweaver文档中并 自动设置为表格的格式。假设有如下格式的文本文件(文件名为 “ z. txt”),文本内容如图6-6所示。 zu. txt-记事本 回回 文件)编辑巴)格式)查看α)帮助⑩ 姓名,性别,学历,专业 男,研宄生,计算机 小龙,舅 李四 生,国贸 图6-6“ zw. txt文本内容

图 6-5 创建表格 6.2.2 导入表格式数据 Dreamweaver 可以将在 Word、Excel等应用程序中创建并以分 隔文本的格式保存的表格式数据导入到Dreamweaver 文档中并 自动设置为表格的格式。假设有如下格式的文本文件（文件名为 “zw.txt”），文本内容如图6-6所示。 图 6-6 “zw.txt”文本内容

要导入以上格式的文本文件操作步骤如下 (1)执行【文件】->【导入表格式数据】命令或执行【插入】->【表格 对象】亠>【导入表格式数据】命令,显示“导入表格式数据”对话框, 如图6-7所示 导入表格式数据 数据文件 浏览 匚确定一 定界符:rab 取消 表格宽度:⊙匹配内容 帮助 O设置为:□门百分比 单元格边距: 格式化首行:[无格式] 单元格间距: 边框:1 图6-7“导入表格式数据”对话框

要导入以上格式的文本文件操作步骤如下： （1）执行【文件】->【导入表格式数据】命令或执行【插入】->【表格 对象】->【导入表格式数据】命令，显示“导入表格式数据”对话框， 如图6-7所示。 图 6-7 “导入表格式数据”对话框

(2)设置“导入表格式数据”对话框选项如下 数据文件:要导入的文件的名称。单击“浏览”按钮选择 个文件,本例为“Zwt”。 定界符:导入的文件中所使用的分隔符,本例选择“逗号” 表格宽度:将创建的表格的宽度。 若选择“匹配内容”项:使每个列足够宽以适应该列中最长 的文本字符串 若选择“设置为”项:可以以像素为单位指定固定的表格宽 度,或按占浏览器窗口宽度的百分比指定表格宽度。 单元格边距:单元格内容和单元格边框之间的像素数。 单元格间距:确定相邻的表格单元格之间的像素数 格式化首行:确定应用于表格首行的格式设置。有四个格式 设置选项:无格式、粗体、斜体或加粗斜体,本例选择 “加粗斜体” 边框:表格边框的宽度

（2）设置“导入表格式数据”对话框选项如下： 数据文件：要导入的文件的名称。单击“浏览”按钮选择一 个文件，本例为“zw.txt”。 定界符：导入的文件中所使用的分隔符，本例选择“逗号”。 表格宽度：将创建的表格的宽度。 若选择“匹配内容”项：使每个列足够宽以适应该列中最长 的文本字符串。 若选择“设置为”项：可以以像素为单位指定固定的表格宽 度，或按占浏览器窗口宽度的百分比指定表格宽度。 单元格边距：单元格内容和单元格边框之间的像素数。 单元格间距：确定相邻的表格单元格之间的像素数。 格式化首行：确定应用于表格首行的格式设置。有四个格式 设置选项：无格式、粗体、斜体或加粗斜体，本例选择 “加粗斜体”。 边框：表格边框的宽度

设置各选项后如图6-8所示。 导入表格式数据 数据文件: and Settings/xiaoxing桌面/图[浏览 确定 定界符:逗点 匚取消 帮助 表格宽度:⊙匹配内容 O设置为:□一百分比 单元格边距:□格式化首行:加相斜体 单元格间距 边框:1 图6-8设置“导入表格式数据”对话框选 项 3)单击“确定”按钮。文档中效果如图6-9所示。 姓名性别学历专业 小邢男研究生计算机 声女本科会计 小龙男博士通信 李四男研究生国贸 图6-9“导入表格式数据”后文档中效果

设置各选项后如图6-8所示。 图 6-8 设置“导入表格式数据”对话框选 项 （3）单击“确定”按钮。文档中效果如图6-9所示。 图 6-9 “导入表格式数据”后文档中效果

6.2.3创建嵌套表格 嵌套表格是指在另一个表格的单元格中又有表格。可以像对仼何其他表 格一样对嵌套表格进行格式设置。读者注意,嵌套表格宽度受它所在 单元格的宽度的限制。实际上,上例中“导入表格式数据”就是把数 据嵌套到一个表格的单元格中 创建嵌套表格步骤如下 (1)单击现有表格中的一个单元格,定位光标,本例为表格的第一个单 元格 (2)执行【插入】->【表格】命令或在“插入”工具栏的“常用”类别 中,单击“表格”按钮,显示“表格”对话框,设置各个选项如图6 0所示 表格宽度:B0百分比 边框租细:0像素 单元格间距:0出 图6-10表格”对话框 两 甫助功能 对齐标题:默认y 摘要:

6.2.3 创建嵌套表格 嵌套表格是指在另一个表格的单元格中又有表格。可以像对任何其他表 格一样对嵌套表格进行格式设置。读者注意，嵌套表格宽度受它所在 单元格的宽度的限制。实际上，上例中“导入表格式数据”就是把数 据嵌套到一个表格的单元格中。 创建嵌套表格步骤如下： （1）单击现有表格中的一个单元格，定位光标，本例为表格的第一个单 元格。 （2）执行【插入】->【表格】命令或在“插入”工具栏的“常用”类别 中，单击“表格”按钮，显示“表格”对话框，设置各个选项如图6- 10所示。 图 6-10“表格”对话框