Dreamweaver-CC网页设计与应用-(5课件.ppt

1、第5章使用表格本章简介：本章简介：在制作网页时，表格的作用不仅是列举在制作网页时，表格的作用不仅是列举数据，更多的是用在网页定位上。很多网数据，更多的是用在网页定位上。很多网页都是以表格布局的，这是因为表格在内页都是以表格布局的，这是因为表格在内容的组织、页面中文本和图形的位置控制容的组织、页面中文本和图形的位置控制方面都有很强的功能。本章主要讲解表格方面都有很强的功能。本章主要讲解表格的操作方法和制作技巧。通过这些内容的的操作方法和制作技巧。通过这些内容的学习，可以熟练地掌握数据表格的编辑方学习，可以熟练地掌握数据表格的编辑方法及如何应用表格对页面进行合理的布局。法及如何应用表格对页面进行合

2、理的布局。 课堂学习目标掌握插入表格的方法掌握插入表格的方法掌握设置表格的方法和技巧掌握设置表格的方法和技巧掌握在表格内添加元素的方法掌握在表格内添加元素的方法掌握网页中数据表格的编辑方法掌握网页中数据表格的编辑方法 5.1 表格的简单操作 插入表格插入表格设置表格属性设置表格属性在表格内添加元素在表格内添加元素课堂案例课堂案例营养美食网页营养美食网页5.1.1 插入表格 要将相关数据有序地组织在一起，必须先插入表格，然后才能有要将相关数据有序地组织在一起，必须先插入表格，然后才能有效组织数据。效组织数据。插入表格的具体操作步骤如下：插入表格的具体操作步骤如下：（1）在）在“文档文档”窗口中，

3、将插入点放到合适的位置。窗口中，将插入点放到合适的位置。（2）通过以下几种方法启用）通过以下几种方法启用“表格表格”对话框。对话框。选择“插入 表格”命令。单击“插入”面板中“常用”选项卡上的“表格”按钮 。按Ctrl+Alt+T组合键。（3）根据需要选择新建表格的大小、行列数值等，单击）根据需要选择新建表格的大小、行列数值等，单击“确定确定”按钮完成新建表格的设置。按钮完成新建表格的设置。5.1.2 设置表格属性 插入表格后，通过选择不同的表格对象，可以在插入表格后，通过选择不同的表格对象，可以在“属性属性”面板中面板中看到它们的各项参数，修改这些参数可以得到不同风格的表格。看到它们的各项参

4、数，修改这些参数可以得到不同风格的表格。表格的表格的“属性属性”面板，其各选项的作用如下。面板，其各选项的作用如下。 表格“属性”面板 5.1.3 在表格内添加元素 建立表格后，可以在表格中添加各种网页元素，如文本、图像、表建立表格后，可以在表格中添加各种网页元素，如文本、图像、表格等。格等。1. 输入文字输入文字在单元格中输入文字，有以下几种方法。单击任意一个单元格并直接输入文本，此时单元格会随文本的输入自动扩展。粘贴来自其他文字编辑软件中复制的带有格式的文本。 2. 插入其他网页元素插入其他网页元素（1）嵌套表格。将插入点放到一个单元格内并插入表格，）嵌套表格。将插入点放到一个单元格内并插

5、入表格，即可实现嵌套表格。即可实现嵌套表格。（2）插入图像。在表格中插入图像有以下几种方法。）插入图像。在表格中插入图像有以下几种方法。将插入点放到一个单元格中，单击“插入”面板“常用”选项卡中的“图像”按钮 。将插入点放到一个单元格中，选择“插入记录 图像”命令。将插入点放到一个单元格中，将“插入”面板中“常用”选项卡中的“图像”按钮 拖曳到单元格内。从资源管理器、站点资源管理器或桌面上直接将图像文件拖从资源管理器、站点资源管理器或桌面上直接将图像文件拖到一个需要插入图像的单元格内。到一个需要插入图像的单元格内。5.1.4 课堂案例营养美食网页使用使用“表格表格”按钮，插入表格进行页面布局；

6、使用按钮，插入表格进行页面布局；使用“图像图像”按钮，按钮，插入图像；使用插入图像；使用“代码代码”视图，手动输入代码控制图像的间距。视图，手动输入代码控制图像的间距。 效果图5.2 网页中的数据表格 导入和导出表格的数据导入和导出表格的数据排序表格排序表格课堂案例课堂案例绿色粮仓网页绿色粮仓网页5.2.1 导入和导出表格的数据 1 1导入导入ExcelExcel文档中的表格数文档中的表格数2 2导入导入WordWord文档中的内容文档中的内容 “导出表格”对话框 “导入表格式数据”对话框 5.2.2 排序表格 日常工作中，常常需要对无序的表格内容进行排日常工作中，常常需要对无序的表格内容进行

7、排序，以便浏览者可以快速找到所需的数据。表格排序功序，以便浏览者可以快速找到所需的数据。表格排序功能可以为网站设计者解决这一难题。能可以为网站设计者解决这一难题。 将插入点放到要将插入点放到要排序的表格中，然后选择排序的表格中，然后选择“命令命令 排序表格排序表格”命令，命令，弹出弹出“排序表格排序表格”对话框。根据需要设置相应选项，单对话框。根据需要设置相应选项，单击击“应用应用”或或“确定确定”按钮完成设置。按钮完成设置。5.2.3 课堂案例绿色粮仓网页使用使用“导入表格式数据导入表格式数据”命令，导入外部表格数据；命令，导入外部表格数据；使用使用“属性属性”面板改变表格的宽度、高度和背景

8、颜色。面板改变表格的宽度、高度和背景颜色。效果图课堂练习火锅餐厅网页 使用使用“页面属性页面属性”命令，设置页面的边距和标题；使用命令，设置页面的边距和标题；使用“表格表格”按钮插入表格；使用按钮插入表格；使用“CSSCSS样式样式”命令，为单元格添命令，为单元格添加背景图像效果；使用加背景图像效果；使用“图像图像”按钮插入图像。按钮插入图像。 效果图课后练习茶文化网页使用使用“导入表格式数据导入表格式数据”命令，导入外部表格数据；使用命令，导入外部表格数据；使用“插入插入列列”命令，为表格增加列；使用命令，为表格增加列；使用“图像图像”按钮插入图像；使用按钮插入图像；使用“CSSCSS样样式式”命令，控制文字的大小及颜色。命令，控制文字的大小及颜色。 效果图