项目四 表 格 教学任务要点： 教学重点与难点： 理解表格的构成和作用。 掌握表格的基本操作和属性设置方法。 掌握导入和导出表格的方法。

Presentation on theme: "项目四 表 格 教学任务要点： 教学重点与难点： 理解表格的构成和作用。 掌握表格的基本操作和属性设置方法。 掌握导入和导出表格的方法。"— Presentation transcript:

1 项目四 表 格 教学任务要点： 教学重点与难点： 理解表格的构成和作用。 掌握表格的基本操作和属性设置方法。 掌握导入和导出表格的方法。
项目四 表 格 教学任务要点： 理解表格的构成和作用。 掌握表格的基本操作和属性设置方法。 掌握导入和导出表格的方法。 掌握排序表格的方法。 掌握使用表格进行网页布局的方法。 教学重点与难点： 使用表格制作网页。

2 表格是网页设计中一个非常有用的工具，它不仅可以将相关数据有序地排列在一起，还可以精确地定位文字、图像等网页元素在页面中的位置，使得页面在形式上丰富多彩又条理清楚，在组织上井然有序而不显单调。使用表格进行页面布局的最大好处是，即使浏览者改变计算机的分辨率也不会影响网页的浏览效果。因此，表格是网站设计人员必须掌握的工具。表格运用得是否熟练，是划分专业制作人士和业余爱好者的一个重要标准。

3 4.1 任务1 插入表格 表格是网页布局设计的常用工具，其在网页中的应用已经突破了传统的用来记载大量数据的功能，它可以使插入页面中的图像和文本等对象被限定在某一固定位置。相对于没有使用表格的页面，使用表格的页面显得更加整齐有序。合理使用布局表格，会使网页对象被组织得更加紧密，使整个页面看起来更加紧凑，如图4-1所示的页面就是使用表格将大量的网页元素对象定位在网页特定的位置上的效果。

4

5 在设计网页时，可以直接绘制表格，也可以导入表格数据，并将其转化为表格。
表格是网页中对文本和图像布局的强有力的工具。一个表格通常由行、列和单元格组成，每行由一个或多个单元格组成。表格中的横向称为行，纵向称为列，一行与一列相交所产生的区域则称为单元格。要将相关数据有序地组织在一起，必须先插入表格，然后才能有效组织数据。 绘制表格的具体操作步骤如下： （1）在“文档”窗口的“设计”视图中，将插入点放在需要表格出现的位置。 提示： 如果您的文档是空白的，则只能将插入点放置在文档的开头。

6 （2）通过以下几种方法启用【表格】对话框。
在菜单栏中选择【插入】→【表格】命令。 在【插入】面板的【常用】模式中，单击【表格】按钮 。 弹出【表格】对话框，如图所示。其中，各选项的含义如下：

7 行数：确定表格行的数目。 列数：确定表格列的数目。 表格宽度：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。 边框粗细：指定表格边框的宽度（以像素为单位）。 单元格间距：决定相邻的表格单元格之间的像素数。如果没有明确指定边框粗细或单元格间距和单元格边距的值，则大多数浏览器都按边框粗细和单元格边距设置为 1、单元格间距设置为 2 来显示表格。若要确保浏览器显示表格时不显示边距或间距，请将“单元格边距”和“单元格间距”设置为 0。 单元格边距：确定单元格边框与单元格内容之间的像素数。

8 无：对表格不启用列或行标题。 左对齐：可以将表格的第一列作为标题列，以便可为表格中的每一行 输入一个标题。 顶对齐：可以将表格的第一行作为标题行，以便可为表格中的每一列 输入一个标题。 两者兼有：使您能够在表格中输入列标题和行标题。 标题：提供一个显示在表格外的表格标题。最好使用标题以方便使用屏幕阅读器的 Web 站点访问者。屏幕阅读器读取表格标题并且帮助屏幕阅读器用户跟踪表格信息。 对齐标题：指定表格标题相对于表格的显示位置。 摘要：给出了表格的说明。屏幕阅读器可以读取摘要文本，但是该文本不会显示在用户的浏览器中。

9 （3）根据需要选择新建表格的大小、行列数值等，单击【确定】按钮,完成如图所示的表格，这里一切选择默认设置。

10 4.2 任务2 设置表格属性 在绘制表格或者导入表格数据后，根据需要可能要对表格属性项进行修改设置才能达到设计的要求。下面就来介绍一下表格属性的设置方法。

11 4.2.1 情境1 选择表格 1、选择整个表格 选择整个表格的方法有很多种，可以参照下列方法之一进行操作：
将鼠标指针移动到表格的上方，当鼠标指针的形状变为表格形状 时，单击鼠标左键即可选中整个表格，如图所示。

12 将鼠标指针移动到表格的格线处，当鼠标指针的形状变为上下方向的箭头时，单击鼠标左键即可选中整个表格，如图所示。

13 将光标置于表格中，单击窗口左下角的<table>标记即可选中整个表格。
将光标置于表格中，在菜单栏中选择【修改】→【表格】→【选择表格】菜单命令，即可选中整个表格。 将光标置于表格之外，按住【shift】键，然后在表格中的任意处单击鼠标左键即可选择整个表格。 选中表格后，表格的外框变成粗黑色，并在右方、下方和右下方各会显示一个黑色控制点，【属性】面板也会变为表格【属性】面板，在其中可以设置表格的属性。

14 2、选择单元格 选择单元格既可以选择单个单元格，也可以选择一整行或者一整列，还可以选择不连续的多个单元格。
选择单个单元格，直接单击要选择的单元格即可。选择行（或列），可按如下几种操作方法进行： (1)将鼠标指针置于所要选择的行的左方（或列的上方），待鼠标指针形状变为向右（或向下）的箭头时，单击鼠标左键，则可以选中该行（或该列）。将鼠标指针置于所要选择的行的左方（或列的上方），待鼠标指针形状变为向右（或向下）的箭头时，拖曳鼠标可以选中连续的多行（或多列）。

15 (2)将鼠标置于待选择的单元格中，然后按住鼠标左键不放并拖动鼠标，横向拖动可以选择一行，纵向拖动可以选择一列，如果向对角线方向拖动，行和列可以同时选择。
(3)通过与【ctrl】键的结合使用，可以选择多个不连续单元格。按住【ctrl】键，然后单击需要选择的单元格，即可选中该单元格。如果想取消选择某单元格，只需在按住【ctrl】键的同时，再次单击该单元格即可。

16 4.2.2 情境2 设置行数和列数 1、通过【属性】面板 2、通过快捷菜单 3、通过菜单栏命令

17 4.2.3 情境3 设置表格大小 1、相对大小和绝对大小 2、改变表格大小 3、相对、绝对大小之间的转换 4、清除行高和列宽
5、设置填充和间距

18 4.2.4 情境4 设置表格对齐方式 表格同网页中的其他元素对象一样，有三种对齐方式，即左对齐、右对齐和居中对齐，默认情况下是左对齐，为表格设置对齐方式的操作方法如下： （1）选中要设置对齐方式的表格。 （2）在表格【属性】面板上的“对齐”下拉列表框中选择一种对齐方式。

19 4.2.5 情境5 设置表格边框 表格中的一些效果是通过设置表格边框的属性来实现的，对于表格边框，可以设置它的粗细和颜色。 1）边框的粗细
在表格【属性】面板上的“边框”问半框用来设置表格边框的粗细，默认情况下设置为1，即如果没有明确指定边框的值，则大多数浏览器按边框值为1的设置显示表格。通过改变该文本框中的数值，可以调整表格边框的粗细。如下图所示为分别将表格的边框设置为0、1和10的效果。

20

21 2）边框的颜色 表格的边框颜色默认情况下是灰色的，通过【CSS样式】面板或HTML代码可以为表格的边框选择其他的颜色。为表格边框设置颜色的操作方法如下： （1）选中要改变边框颜色的表格。 （2）切换到“代码”视图或“拆分”视图，在对应的表格代码的“<table”后按空格后输入“bordercolor=”将弹出一个颜色选择面板，如下图所示。 （3）在弹出的调色板中选择一种颜色。

22

23 设置完成后的效果如图所示。

24 4.2.6 情境6 设置表格背景 在网页中，表格是一个独立的对象，不仅可以设置表格边框的颜色，还可以为其添加背景色或者选择背景图像。
1）添加背景色 为表格添加背景色的操作方法如下： （1）选中要添加背景色的表格。 （2）在【CSS样式】面板中，单击 【新建CSS规则】按钮 ，将弹出【新建CSS规则】对话框，在该对话框中，“选择器类型”选择“标签（重新定义HTML元素）”，“选择器名称”选择“table” 。

25 （3）单击【确定】按钮，将弹出【CSS规则定义】对话框。在该对话框中，选择“背景”分类，设置“Background-color ”（即背景色），如图所示。

26 （4）选择一种适合的背景色后，单击【确定】按钮，即可为表格添加背景色。为表格添加背景色的效果如图所示。

27 2）选择背景图像 将图像设置为表格的背景，具体操作方法同上述背景色的方法，只是：选中表格后，在 “Background-image”文本框中输入图像的存放路径，或者单击 按钮 ，将弹出【选择图像源文件】对话框，在该对话框中选择一幅图像作为表格的背景图像。 单击【确定】按钮返回，这时可以看到表格中已经插入了一副背景图像，如下图所示。

28 提示：还可以用表格标记<table>的属性代码bgcolor和background来设置表格的背景色和背景图像。

29 4.3 任务3 设置单元格的属性 4.3.1 情境1 单元格的拆分与合并 4.3.2 情境2 设置单元格的对齐属性 1）合并单元格
2）拆分单元格 4.3.2 情境2 设置单元格的对齐属性

30 4.4 任务4 表格的嵌套 表格可以进行嵌套操作，并且嵌套的层数没有限制，但嵌套的层数过多将使导致页面打开速度变慢，实际应用中表格的嵌套层数通常以不超过3层为宜。表格嵌套在使用表格进行页面布局的时候尤其又用。表格嵌套的操作方法如下： （1）在需要嵌套表格父表格单元格中定位插入点。 （2）在菜单栏中选择【插入】→【表格】命令。 （3）在打开的【表格】对话框中设置要插入的表格属性。 （4）单击【确定】按钮。 另外在目标单元格中定位插入点后， 在【插入】面板的【常用】模式中，单击【表格】按钮 ，也可实现表格的嵌套操作。

31 4.5 任务5 表格的数据导入导出 4.5.1 情境1 导入表格数据 4.5.2 情境2 表格数据的导出
有时需要将Word文档中的内容或Excel文档中的表格数据导入到网页中进行发布，或将网页中的表格数据导出到Word文档或Excel文档中进行编辑，Dreamweaver CS4提供了实现这种操作的功能。 情境1 导入表格数据 情境2 表格数据的导出

32 4.6 任务6 表格的排序 对表格数据进行排序的具体操作方法如下：
提示：不能对包含 colspan 或 rowspan 属性的表格（即包含合并单元格的表格）进行排序。 (1)选中要排序的表格或单击该表格的任意单元格。 (2)选择【命令】菜单下的【排序表格】命令，将弹出【排序表格】对话框。

33 项目案例一： 4.7 上机项目实训 1、实训题目： 2、实训目的： 京城影讯
通过该网页的制作，掌握表格的插入、基本属性的设置、利用表格制作网页。

34 3.实训案例效果

35 4.8 小结 表格是网页制作中使用最多的工具之一，因为表格可以使信息更加简洁和条理化。表格的控制能力便于设计者构造网页的布局。先使用较大的表格对网页的版面进行大致控制，再使用嵌套的表格对细节进行刻画。表格在设计者的思维中不仅是一种简单的对象，而且是一种控制版面和制作模版的工具。本项目讲述了如何在文档中插入表格、如何查看和设置表格属性、如何增减行与列、如何改变行与列的大小、如何合并和拆分行与列等基本操作。