Dreamweaver网页设计与应用（Dreamweaver CC 2019）（微课版）课件 5表格

项目引入：在制作网页时，使用表格不仅可以列举数据，还可以进行页面元素定位。很多网页都是用表格进行布局的，这是因为表格在内容的组织、页面中文本和图像的位置控制方面都很有优势。本项目主要讲解表格的操作方法和制作技巧。通过对这些内容的学习，学生可以熟练地掌握数据表格的编辑方法及应用表格对页面进行合理布局的方法。

项目5表格掌握插入表格的方法掌握设置表格属性的方法和技巧掌握在表格内添加元素的方法掌握网页中数据表格的编辑方法项目目标掌握“风季租车网页”的关键制作步骤掌握“典藏博物馆网页”的关键制作步骤技能目标培养灵活应变的能力增强实践能力和创新精神素养目标任务5.1表格的简单操作插入表格设置表格属性在表格内添加元素任务实践—风季租车网页5.1.1插入表格要将相关数据有序地组织在一起，必须先插入表格。插入表格的具体操作步骤如下。（1）在文档窗口中将光标置于合适的位置。（2）通过以下几种方法打开“Table”对话框。①选择“插入>Table”命令。②单击“插入”面板“HTML”选项卡中的“Table”按钮。③按Ctrl+Alt+T组合键。（3）根据需要设置新建表格的大小、行列数等，单击“确定”按钮完成表格的新建。5.1.2设置表格属性插入表格后，通过选择不同的表格对象，可以在“属性”面板中看到它们的各项属性，修改这些属性可以得到不同风格的表格。表格的“属性”面板单元格、行、列的“属性”面板5.1.3在表格内添加元素建立表格后，可以在表格中添加各种网页元素，如文本、图像等。1．输入文字在单元格中输入文字有以下几种方法。①单击任意一个单元格并直接输入文本，此时单元格会随文本的输入自动扩展。②粘贴在其他文字编辑软件中复制的带有格式的文本。5.1.3在表格内添加元素2．插入其他网页元素（1）嵌套表格。将光标置入单元格内并插入表格，即可实现表格嵌套。（2）插入图像。在表格中插入图像有以下几种方法。①将光标置入单元格中，单击“插入”面板“HTML”选项卡中的“Image”按钮。②将光标置入单元格中，选择“插入>Image”命令。③将光标置入单元格中，将“插入”面板“HTML”选项卡中的“Image”按钮拖曳到单元格内。④从资源管理器、站点管理器或桌面上直接将图像文件拖曳到一个需要插入图像的单元格内。任务实践—风季租车网页使用“Table”按钮插入表格进行页面布局，使用“Image”按钮插入图像。效果图任务5.2网页中的数据表格导出和导入表格的数据表格排序任务实践—典藏博物馆网页1．将网页内的表格数据导出选择“文件>导出>表格”命令，弹出图所示的“导出表格”对话框，根据需要设置参数，单击“导出”按钮，弹出“表格导出为”对话框，输入保存导出的数据的文件名称，单击“保存”按钮，完成表格数据的导出。5.2.1导出和导入表格的数据“导出表格”对话框2．在其他网页中导入表格式数据首先要打开“导入表格式数据”对话框，然后根据需要进行选项设置，最后单击“确定”按钮，完成设置。要打开“导入表格式数据”对话框，可以选择“文件>导入>表格式数据”命令。5.2.1导出和导入表格的数据“导入表格式数据”对话框日常工作中，常常需要对无序的表格内容进行排序，以便浏览者可以快速找到所需的数据。使用表格排序功能可以解决这一难题。将光标置入要排序的表格中，然后选择“编辑>表格>排序表格”命令，弹出“排序表格”对话框。根据需要设置相应的选项，单击“应用”按钮或“确定”按钮，完成设置。5.2.2表格排序“排序表格”对话框任务实践—典藏博物馆网页使用“表格式数据”命令导入外部表格式数据，使用“属性”面板改变表格的宽度、高度和背景颜色。效果图项目实践—布艺沙发网页使用“页面属性”命令设置页边距和网页标题，使用“Table”按钮插入表格，使用“Image”按钮插入图像