《网页设计与制作》课程教学课件（PPT讲稿）网页表格的处理

第4章 网页表格的处理 通过本章学习，应该掌握以下内容： 1.利用FrontPage2002创建表格的四种方法 2.编辑表格的方法 3.设置表格的属性的方法 4.用表格设计页面布局 5.利用HTML和Dreamweaver MX创建表格 的方法

通过本章学习，应该掌握以下内容： 1. 利用FrontPage 2002创建表格的四种方法 2. 编辑表格的方法 3. 设置表格的属性的方法 4. 用表格设计页面布局 5. 利用HTML和Dreamweaver MX创建表格 的方法 第4章 网页表格的处理

4.1利用FrontPage创建并编辑表格 4.1.1创建表格 表格以行和列的形式来组织信息，具有容量大、结构严谨和效果直 观等多个优点，是网页中不可缺少的记录或总结工具，比如个人简历 产品信息、业务报表甚至家庭理财都能用到表格。 FrontPage2002提供了强大的制表功能，使得在制作网页的过程 中插入表格的操作显得简便、快捷。 在FrontPage2002中，创建表格有以下4种方法。 1.使用菜单命令创建表格 如果用户希望准确地设置要创建的表格的行、列数，可以通过执行 菜单命令创建所需的表格。使用这种方法，可以同时设置表格所有的 属性，如行和列的数目、边框宽度等。 ①选择“表格”1“插入”1“表格”命令，打开图4.1所示的“插入 表格”对话框； ②输入行数、列数，设置表格的对齐方式、边框的粗细、单元格 边距和间距，单击“确定”按钮，即可得到相应的表格

4.1 利用FrontPage 创建并编辑表格 4.1.1 创建表格 表格以行和列的形式来组织信息，具有容量大、结构严谨和效果直 观等多个优点，是网页中不可缺少的记录或总结工具，比如个人简历、 产品信息、业务报表甚至家庭理财都能用到表格。 FrontPage 2002提供了强大的制表功能，使得在制作网页的过程 中插入表格的操作显得简便、快捷。 在FrontPage 2002中，创建表格有以下4种方法。 1．使用菜单命令创建表格 如果用户希望准确地设置要创建的表格的行、列数，可以通过执行 菜单命令创建所需的表格。使用这种方法，可以同时设置表格所有的 属性，如行和列的数目、边框宽度等。 ① 选择“表格”| “插入”| “表格”命令，打开图4.1所示的“插入 表格”对话框； ② 输入行数、列数，设置表格的对齐方式、边框的粗细、单元格 边距和间距，单击“确定”按钮，即可得到相应的表格

2.使用命令按钮创建表格 在编辑网页时，使用“常用”工具栏中的“插入表格”按钮， 可以快速地在网页中插入一个表格。插入表格时用户可以自由选择 表格所包含的行数和列数. 3,绘制表格 利用前面两种方法可以建立“n乘m”单元数的表格，单元格大小 会自动平均分配。如果需要的表格比较简单，则可以手动绘制表格。 手动绘制表格的操作步骤如下： ①选择“视图”工具栏”“表格”命令，打开表格对话框 ②单击“手绘表格”按钮，在编辑区按下鼠标左键并拖动，即可 划出表格边框，再在边框内添加线条即可画出需要的表格。 如果有画错的线条可以用表格中的“擦除”工具擦除。 4,将文本转换成为表格 如果有现成的文本，可以把文本转换成为表格

2．使用命令按钮创建表格 在编辑网页时，使用“常用”工具栏中的“插入表格”按钮， 可以快速地在网页中插入一个表格。插入表格时用户可以自由选择 表格所包含的行数和列数. 3．绘制表格 利用前面两种方法可以建立“n乘m”单元数的表格，单元格大小 会自动平均分配。如果需要的表格比较简单，则可以手动绘制表格。 手动绘制表格的操作步骤如下： ① 选择“视图”|“工具栏”|“表格”命令，打开表格对话框； ② 单击“手绘表格”按钮，在编辑区按下鼠标左键并拖动，即可 划出表格边框，再在边框内添加线条即可画出需要的表格。 如果有画错的线条可以用表格中的“擦除”工具擦除。 4．将文本转换成为表格 如果有现成的文本，可以把文本转换成为表格

4.1.2表格的编辑 1.修改表格 应用菜单或命令按钮创建后的表格，有些是需要经过修改才能 应用的。修改表格主要包括修改表格的大小、合并单元格、拆分单 元格等操作。 (1)修改表格大小 在FrontPage2002中，修改表格的大小有以下两种方法。 ◆ 通过鼠标拖拽法可以粗略地调整表格的大小。 ◆ 通过“表格属性”对话框可以精确地调整表格的大小。 （2)合并单元格 在FrontPage2002中合并单元格的方法有以下三种： ◆先选择要合并的单元格，然后执行“表格”合并单元格”命令即 可。 ◆ 选择要合并的单元格，在选中的单元格中单击鼠标右键，从弹出的 快捷菜单中选择“合并单元格”命令。 ◆选择要合并的单元格，单击“表格”工具栏上的“合并单元格”按 钮

4.1.2 表格的编辑 1．修改表格 应用菜单或命令按钮创建后的表格，有些是需要经过修改才能 应用的。修改表格主要包括修改表格的大小、合并单元格、拆分单 元格等操作。 （1）修改表格大小 在FrontPage 2002中，修改表格的大小有以下两种方法。  通过鼠标拖拽法可以粗略地调整表格的大小。  通过“表格属性”对话框可以精确地调整表格的大小。 （2）合并单元格 在FrontPage 2002中合并单元格的方法有以下三种：  先选择要合并的单元格，然后执行“表格”|“合并单元格”命令即 可。  选择要合并的单元格，在选中的单元格中单击鼠标右键，从弹出的 快捷菜单中选择“合并单元格”命令。  选择要合并的单元格，单击“表格”工具栏上的“合并单元格”按 钮

(3)拆分单元格 拆分单元格与合并单元格是两个逆操作。拆分单元格就是将 个单元格拆分为多个单元格。在FrontPage2002中拆分单元格的 方法有以下几种。 ◆ 将光标放在要拆分的单元格内，执行“表格”拆分单元格”命 令，弹出“拆分单元格”对话框，如图4.9所示。在该对话框中选 择“拆分为列”或“拆分为行”，单击“确定”按钮。 ◆ 将光标放在要拆分的单元格内，单击鼠标右键，从弹出的快捷菜 单中选择“拆分单元格”命令。 将光标放在要拆分的单元格内，单击“表格”工具栏上的“拆分 单元格”按钮

（3）拆分单元格 拆分单元格与合并单元格是两个逆操作。拆分单元格就是将一 个单元格拆分为多个单元格。在FrontPage 2002中拆分单元格的 方法有以下几种。  将光标放在要拆分的单元格内，执行“表格”|“拆分单元格”命 令，弹出“拆分单元格”对话框，如图4.9所示。在该对话框中选 择“拆分为列”或“拆分为行” ，单击“确定”按钮。  将光标放在要拆分的单元格内，单击鼠标右键，从弹出的快捷菜 单中选择“拆分单元格”命令。  将光标放在要拆分的单元格内，单击“表格”工具栏上的“拆分 单元格”按钮

2.在表格中添加文字和图片 创建一个表格以后，就可以在表格中添加相应的内容了，在表格 中添加的内容有文字与图片两种形式。 (1)在表格中添加文字 在创建好的表格内按要求输入文字，调整文字的字号、字体、对 齐方式等。 (2)在表格中插入图片 ①选中要插入图片的单元格，选择“插入”」“图片”I“来自文件” (根据需要选择图片的来源)命令，打开“图片”对话框； ②在对话框中选择图片，选中图片文件之后，单击“插入”按钮， 则图片及插入到相应的单元格里。调整图片大小及位置。 3.删除表格 (1)删除单元格 在FrontPage2002中如果要删除某个单元格，可以通过以下方法： ◆ 选择要删除的单元格，执行“表格”“删除单元格”命令。 选择要删除的单元格，并单击鼠标右键，从弹出的快捷菜单中选择 “删除单元格”命令

2．在表格中添加文字和图片 创建一个表格以后，就可以在表格中添加相应的内容了，在表格 中添加的内容有文字与图片两种形式。 （1）在表格中添加文字 在创建好的表格内按要求输入文字，调整文字的字号、字体、对 齐方式等。 （2）在表格中插入图片 ① 选中要插入图片的单元格，选择“插入”| “图片”| “来自文件” （根据需要选择图片的来源）命令，打开“图片”对话框； ② 在对话框中选择图片，选中图片文件之后，单击“插入”按钮， 则图片及插入到相应的单元格里。调整图片大小及位置。 3．删除表格 （1）删除单元格 在FrontPage 2002中如果要删除某个单元格，可以通过以下方法：  选择要删除的单元格，执行“表格”|“删除单元格”命令。  选择要删除的单元格，并单击鼠标右键，从弹出的快捷菜单中选择 “删除单元格”命令

(2)删除列或行 在FrontPage2002中如果要删除某列或某行，可以采用以下方 法 ◆ 选择要删除的列或行，执行“表格”“删除单元格”命令即可。 ◆ 选择要删除的列或行，并单击鼠标右键，从弹出的快捷菜单中选 择“删除单元格”命令。 (3)删除整个表格 如果要删除某个表格，只需选中此表格中的所有单元格，然后单 击右键并从弹出的快捷菜单中选择“删除单元格”命令即可。删 除整个表格的操作方法如下： 注意：如果在删除表格、单元格、行或列时，使用Delete键删除， 则只删除该表格、单元格、行或列中的文本，而不是删除表格

（2）删除列或行 在FrontPage 2002中如果要删除某列或某行，可以采用以下方 法：  选择要删除的列或行，执行“表格”|“删除单元格”命令即可。  选择要删除的列或行，并单击鼠标右键，从弹出的快捷菜单中选 择“删除单元格”命令。 （3）删除整个表格 如果要删除某个表格，只需选中此表格中的所有单元格，然后单 击右键并从弹出的快捷菜单中选择“删除单元格”命令即可。删 除整个表格的操作方法如下： 注意：如果在删除表格、单元格、行或列时，使用Delete键删除， 则只删除该表格、单元格、行或列中的文本，而不是删除表格

4.1.3设置表格的属性 将光标置于表格中，然后单击右键并从弹出的快捷菜单中选择 “表格属性”命令，在打开的“表格属性”对话框中进行表格属性 设置。 1.表格的布局 （1)表格的对齐方式 FrontPage2002中提供了4种对齐方式：默认、左对齐、右对齐和 居中。单击“表格属性”对话框中的“对齐方式”下拉列表框，可 从中选择所需的对齐方式。 (2)表格的浮动方式 此功能有点像图片的环绕功能。创建一个表格后，表格的两侧是 不能输入任何文字的。 如果进行了浮动设置，就可以获得与图片环绕差不多的效果了。 FrontPage2002中提供了3种浮动方式：默认、左对齐和右对齐。 (3)单元格的边距与间距 如果想设置表格线与表格内容间的距离或两单元格间的距离，可 以通过单元格边距与单元格间距两个选项来设置

4.1.3 设置表格的属性 将光标置于表格中，然后单击右键并从弹出的快捷菜单中选择 “表格属性”命令，在打开的“表格属性”对话框中进行表格属性 设置。 1．表格的布局 （1）表格的对齐方式 FrontPage 2002中提供了4种对齐方式：默认、左对齐、右对齐和 居中。单击“表格属性”对话框中的“对齐方式”下拉列表框，可 从中选择所需的对齐方式。 （2）表格的浮动方式 此功能有点像图片的环绕功能。创建一个表格后，表格的两侧是 不能输入任何文字的。 如果进行了浮动设置，就可以获得与图片环绕差不多的效果了。 FrontPage 2002中提供了3种浮动方式：默认、左对齐和右对齐。 （3）单元格的边距与间距 如果想设置表格线与表格内容间的距离或两单元格间的距离，可 以通过单元格边距与单元格间距两个选项来设置

2.为表格添加背景 为表格添加背景也要应用“表格属性”对话框。表格背景可分为 两种形式：一种是为表格添加背景颜色，另一种是为表格添加背景 图片。 (1)为表格添加背景颜色 选中表格或单元格后，单击“表格属性”对话框中的“颜色”选 项右侧的向下箭头，从弹出的颜色面板中选择所需的背景颜色，则 此颜色就会显示在表格的背景层中。 (2)为表格添加背景图片 选中表格或单元格后，启用“表格属性”或“单元格属性”对话 框中的“使用背景图片”复选框，然后选择一个图片作为表格的背 景，可为表格添加背景图片。 3.为表格添加边框 在FrontPage中如果想要改变表格的边框，可以采用以下方法： 选择要设置边框的表格，执行“格式”|“边框和底纹”命令。 在要设置边框的表格中单击鼠标右键，从弹出的快捷菜单中选择 “表格属性”命令，打开“表格属性”对话框，在“边框”选项组 中进行相关设置

2．为表格添加背景 为表格添加背景也要应用“表格属性”对话框。表格背景可分为 两种形式：一种是为表格添加背景颜色，另一种是为表格添加背景 图片。 （1）为表格添加背景颜色 选中表格或单元格后，单击“表格属性”对话框中的“颜色”选 项右侧的向下箭头，从弹出的颜色面板中选择所需的背景颜色，则 此颜色就会显示在表格的背景层中。 （2）为表格添加背景图片 选中表格或单元格后，启用“表格属性”或“单元格属性”对话 框中的“使用背景图片”复选框，然后选择一个图片作为表格的背 景，可为表格添加背景图片。 3．为表格添加边框 在FrontPage中如果想要改变表格的边框，可以采用以下方法：  选择要设置边框的表格，执行“格式”| “边框和底纹”命令。  在要设置边框的表格中单击鼠标右键，从弹出的快捷菜单中选择 “表格属性”命令，打开“表格属性”对话框，在“边框”选项组 中进行相关设置

4.1.4使用表格设计页面布局 在网页设计中表格还有一个重要的作用，就是设计页面布局。 个空白网页布置起来比较困难，尤其是一些复杂的页面。这 时可以利用表格将网页分成若干个单元格，每个单元格对应网页中 的一个部分。然后，对每一部分分别进行设计和制作，这样就可以 使复杂的网页设计简化，而且所设计的网页清晰、有条理性。 另外，在很多网页上都有各种细线的布局效果，使得页面简洁 明快、条理清楚。这些细线要么是用图像的方式生成，要么是利用 表格的各种特性制作而成。使用表格实现这些细线可以使页面文件 更小，下载更快，因此更为实用。细线效果大致可以分为两类， 类是表格框线，另一类是各种横竖分隔线。 用表格布置页面时，首先要规划页面的布置，然后利用表格的 平铺和嵌套，将网页中的各元素定位在各自的位置上。由于浏览器 在下载网页时，先下载整个表格，然后再下载表格中的内容。所以 在用表格布置页面时，不能将整个网页的内容都放在一个大表格中， 以免影响网页的下在速度

4.1.4使用表格设计页面布局 在网页设计中表格还有一个重要的作用，就是设计页面布局。 一个空白网页布置起来比较困难，尤其是一些复杂的页面。这 时可以利用表格将网页分成若干个单元格，每个单元格对应网页中 的一个部分。然后，对每一部分分别进行设计和制作，这样就可以 使复杂的网页设计简化，而且所设计的网页清晰、有条理性。 另外，在很多网页上都有各种细线的布局效果，使得页面简洁 明快、条理清楚。这些细线要么是用图像的方式生成，要么是利用 表格的各种特性制作而成。使用表格实现这些细线可以使页面文件 更小，下载更快，因此更为实用。细线效果大致可以分为两类，一 类是表格框线，另一类是各种横竖分隔线。 用表格布置页面时，首先要规划页面的布置，然后利用表格的 平铺和嵌套，将网页中的各元素定位在各自的位置上。由于浏览器 在下载网页时，先下载整个表格，然后再下载表格中的内容。所以 在用表格布置页面时，不能将整个网页的内容都放在一个大表格中， 以免影响网页的下在速度