第4章 表格(网页制作案例教程课件).ppt

网页制作案例教程 第1章：网站与网页概述 第2章：HTML入门 第3章：网页基本编辑 第4章：表格 第5章：框架 第6章：AP Div 第7章：表单 第8章：CSS和模板 第9章：网页图形处理工具Fireworks CS5 第10章：图像处理工具Photoshop CS5 第11章：动画制作工具Flash CS5 第12章：网站制作综合应用 第4章 表格 学会表格的基本操作 学会表格属性的设置 学会在表格中添加各种元素 掌握在表格中导入、导出数据 能制作简单表格 4.1 表格的基本操作 掌握表格的基本组成部分以及一些基本操作，如插入表格、选择表格、添加或删除行和列、单元格的拆分与合并等。 掌握表格的基本用法，利用表格实现对网页的布局 。 4.2 在表格中添加内容 掌握在表格中添加文本、图像等网页元素。 掌握在表格中嵌套表格 。 4.3 表格属性 掌握对整个表格的属性设置，如表格的大小、边框、对齐方式、背景等； 掌握单元格的属性设置，如单元格的大小、对齐方式、边框、背景 。 P75 4.4 表格数据的导入与导出 掌握如何把表格数据导入到网页中。 掌握把网页中的表格数据导出。 掌握对表格中的数据进行排序操作。 4.5 小结 本章介绍了Adobe Dreamweaver CS5中表格的作用，详细介绍了表格的插入、格式的设置、网页元素的添加以及表格在网页布局上的作用，并描述了一个实例——功课表的制作过程。 本章在最好还讲解了表格数据的导入、导出和排序操作。 * 学习目标： 4.1.1 表格的组成 表格通常由标题、行、列、单元格、边框几部分组成。P70 标题位于表格第一行，用来说明表格的主题。 一张表格横向叫行，纵向叫列。 行列交叉部分就叫做单元格。 单元格中的内容和边框之间的距离叫边距。 单元格和单元格之间的距离叫间距。 整张表格的边缘叫做边框。 4. 1.2 插入表格 一、单击“常用”菜单中的“表格”按钮，或选择“插入”菜单中 的“表格”选项。 二、在弹出的对话框中设置表格参数。 三、单击确定，完成表格的插入。 4.1.3 选择表格 一、选择整个表格 在编辑窗口中，拖动鼠标，圈选整个表格，或单击编辑窗口 下面“table”的标签，系统自动选择整个表格。 二、选择一行 在编辑窗口中，拖动鼠标，圈选一行，或单击要选择的行中 的任意一个单元格，然后点击编辑窗口下面的“tr”的标签，系 统自动选择一行。 三、选择一列 在编辑窗口中，拖动鼠标，圈选一列。 四、连续或不连续的多个单元格 在编辑窗口中，按住“ctrl”键不放，同时用鼠标单击选择单元格。 4.1.5 单元格的拆分与合并 一、单元格的拆分 1、选中要拆分的单元格。 2、在“属性面板”中，单击“拆分”按钮，或打开拆分单元格 对话框，在行（或列）前面勾选，然后在下面的数值文本 框中选择数值或直接输入数值，单击确定，完成对单元格 的拆分。 二、单元格的合并 1、选中要合并的单元格。 2、在“属性面板”中，单击“合并”按钮，或打开合并单元格 对话框进行有关设置，完成合并功能。 4.2.1 在表格中插入图像 4.2.2 在表格中插入表格 在表格中插入新的表格，称为表格的嵌套，用这种方 式可以创建出复杂的表格，是网页布局常用的方法之一。 4.2.3 在表格中添加文本 一、 设置表格外观 表格的边框上单击鼠标右键，弹出快捷菜单中选择“编辑标签” 二、 设置背景图像 三、 表格宽度转换 4.3.1 设置表格属性 实例应用1——制作功课表 参照下图(P77 )，完成功课表网页“lesson_table.html” 。 表格实例应用——功课表 4.4.3 从网页中导出表格数据 将表格数据从 Dreamweaver 导出到文本文件中，相邻单元格的内容由分隔符隔开，也可以使用逗号、冒号、分号或空格作为分隔符。当导出表格时，将导出整个表格，而不能选择导出部分表格。 P83 4.4.1 表格数据的导入 P80 4.4.2 表格数据排序 1、选择表格或单击任意单元格，选择“命令”|“排序表格”命令。 2、在对话框中设置选项，完成对表格的排序。 根据单个列的内容对表格中的行进行排序，还可以根据两个列的内容执行更加复杂的表格排序。 实例应用2——用表格制作学校主页 运用表格的编辑功能，尝试完成以下学校主页制作。 （注意: 用表格进行网页排版并不是一种理想的方法,其操作不够灵活,版面在不同浏览器中容易产生变形,目前网页设计更好的方法是AP层布局编辑,详见第六章内容。） *