网页设计与制作课件 项目7：使用表格排版布局网页

网页设计与制作——项目7：使用表格排版

布局网页Project7项目7职场情境网站站点创建完成后，就该对表格有一个进一步的了解了，此项学习对小艾来说非常的陌生，她非常渴求有一个人能够帮助她对表格进行相关知识的了解，从她身边路过的同事凯程看到后，经过询问，凯程告诉她表格是网页排版设计的常用工具，表格在网页中不仅可以用来排列数据，而且可以对页面中的图像、文本等元素进行准确的定位，使得页面在形式上既丰富多彩又有条理，从而使页面显得更加整齐有序。本项目主要讲述表格的创建、表格属性的设置、表格的基本操作、表格的排序和导入表格式数据等。接下来，大家就跟随小艾一同走进Dreamweaver中的表格世界吧，和小艾一起进行相关内容的学习，在网页设计的道路上展现自己的才华，好了，下面我们就一起来进行学习和进步吧！学习目标〓知识目标〓掌握插入表格和表格元素的方法掌握选择表格元素的方法。掌握对表格基本操作的方法。掌握排序及整理表格内容的方法。〓技能目标〓学会插入表格。学会选择表格元素。学会对表格的基本操作。学会对标内容进行整理。〓素质目标〓打牢基础、建万丈高楼，每一砖、每一个螺丝都是整个主体的关键。要想真正的掌握所学知识，就要了解实践操作的重要性。CONTENTS任务1掌握插入表格和表格元素目录任务2掌握选择表格元素任务3掌握表格的基本操作任务4掌握排序及整理表格内容综合实战—图像中插入表格课后习题综合实战—创建表格布局网页任务1掌握插入表格和表格元素在

AdobeDreamweaver中，表格可以用于安排网页文档的整体布局，起着非常重要的作用。活动1掌握插入表格在

Dreamweaver中，表格可以用于制作简单的图表，还可以用于安排网页文档的整体布局，起着非常重要的作用。在网页中插入表格的方法非常简单，新建一个网页文档，将其进行储存后，执行菜单栏中的“插入/Table”命令，打开“Table”对话框，在对话框中将“行数”设置为

2、“列”设置为1、“表格宽度”设置为“1024像素”、“边框粗细”为0、“单元格边距”为0、“单元格间距”为0，如图所示。设置完毕单击“确定”按钮，插入表格，如图

所示。实践经验：如果没有明确指定单元格间距和单元格边距的值，大多数浏览器都将单元格边距设置为

1，单元格间距设置为

2来显示表格。若要确保浏览器不显示表格中的边距和间距，可以将单元格边距和间距设置为

0。大多数浏览器按边框设置为

1显示表格。任务1掌握插入表格和表格元素活动2掌握设置表格属性创建完表格后可以根据实际需要对表格的属性进行设置，如宽度、边框、对齐等，也可只对某些单元格进行设置。设置表格属性之前首先要选中表格，在“属性”面板中将显示表格的属性，并进行相应的设置。再不选取表格的情况下，单击“属性”面板中的“页面属性”按钮，打开“页面属性”对话框，设置“上边距”为0，“页面字体”为“宋体”、“大小”为14px、“文本颜色”为“黑色”，如图所示。之后选择创建的表格，在“属性”面板中设置各项参数，如图所示。任务1掌握插入表格和表格元素活动3掌握添加内容到单元格表格建立以后，就可以向表格中添加各种元素了，如文本、图像、表格等。在表格中添加文本就像在文档中操作一样，除了直接输入文本，还可以先利用其他文本编辑器编辑文本，然后将文本拷贝到表格里，这也是在文档中添加文本的一种简洁而快速的方法。将光标置于单元格中，执行菜单栏中的“插入/Image”命令，选择一个素材图像将其插入到第一行中，设置第二行的“高度”为100、“垂直”为“顶端”，如图所示。将光标放置到第二行中执行菜单栏中的“插入/Table”命令，插入一个“宽度”为80%的3行2列表格，将其居中后设置每个单元格的高度都为30，，在每个单元格中分别输入相应的文字，如图

所示。将光标放置到单元格内，设置“水平”为“居中对齐”，如图所示。任务2掌握选择表格元素活动1掌握选择表格要想对表格进行编辑，那么首先选择它，主要通过以下

4种方法选取整个表格。将光标置于表格的左上角，按住鼠标的左键不放，拖曳鼠标指针到表格的右下角，将整个表格中的单元格选中，单击鼠标的右键，在弹出的菜单中选择“表格/选择表格”命令，如图所示。单击表格边框线的任意位置，即可选中表格，如图所示。处理表格时经常要选择表格中的一个或多个单元格，或者选择整行、整列单元格，这时可以根据具体情况使用不同的方法选择单元格。任务2掌握选择表格元素将光标置于表格内任意位置，执行菜单栏中的“编辑/表格/选择表格”命令，如图所示。将光标置于表格内任意位置，单击文档窗口左下角的<table>标签，如图

所示。任务2掌握选择表格元素选择表格的行与列也有两种方法。鼠标位于要选择的行首或列顶，鼠标指针形状变为黑箭头时，单击鼠标左键即可选中行或列，如图和图

所示。活动2掌握选择行或列任务2掌握选择表格元素按住鼠标左键不放从左至右或者从上至下拖曳，即可选中行或者列，如图和图所示。任务2掌握选择表格元素选择表格中的单元格有两种方式，一种是选择单个单元格，另一种是选择多个单元格。有如下多种方法。

按住“Ctrl”键，然后单击要选中的单元格即可。

将光标移到要选中的单元格中并单击释放，按住“Ctrl＋A”组合键，即可选中该单元格。

将光标置于要选中的单元格中，执行菜单栏中的“编辑/全选”命令，即可选中该单元格。

将光标置于要选择的单元格内，单击文档窗口左下角的<td>标签可以将单元格选中。

按住“Shift”键不放并单击选择多个单元格中的第一个和最后一个，可以选择多个相邻的单元格，如图所示。

按住“Ctrl”键不放单击并选择多个单元格，可以选择多个相邻或不相邻的单元格，如所示。活动3掌握选择单元格任务3掌握表格的基本操作创建了表格后，用户要根据网页设置对表格进行处理，例如选择表格和单元格、调整表格单元格的大小、添加或删除行或列、拆分单元格、剪切/复制和粘贴单元格等，熟练掌握表格的基本操作，可以提高制作网页的速度。活动1掌握调整表格高度和宽度在文档中插入表格后，若想改变表格的高度和宽度可先选中该表格，在出现

3个控制点后将鼠标移动到控制点上，当鼠标指针变成如图下面三个图所示的形状时，按鼠标左键并拖动即可改变表格的高度和宽度，此时的高度与宽度的数值不是精确的。任务3掌握表格的基本操作活动2掌握添加或删除行或列可以执行菜单栏中的“编辑/表格”命令中的子菜单命令，增加或减少行与列。增加行与列有以下方法。将光标置于相应的单元格中，执行菜单栏中的“编辑/表格/插入行”命令，即可插入一行。将光标置于相应的位置，执行菜单栏中的“编辑/表格/插入列”命令，即可在相应的位置插入一列。将光标置于相应的位置，执行“编辑/表格/插入行或列”命令，弹出“插入行或列”对话框，在对话框中进行相应的设置，如图所示。单击“确定”按钮，即可在应的位置插入行或列，如图。任务3掌握表格的基本操作删除行或列有以下几种方法。

选中要删除的行或列，执行菜单栏中“编辑/表格/删除行（删除列）”命令，即可删除行或列，如图所示。

选中要删除的行或列，按“Delete”键或按“BackSpace”键也可删除行或列。任务3掌握表格的基本操作在使用表格的过程中，有时需要拆分单元格以达到自己所需的效果。拆分单元格就是将选中的表格单元格拆分为多行或多列，具体操作步骤如下。课堂实操—通过拆分单元格命令拆出1行3列任务3掌握表格的基本操作活动3掌握合并单元格合并单元格就是将选中表格单元格的内容合并到一个单元格。要合并单元格，首先将要合并的单元格选中，然后执行菜单栏中的“编辑/表格/合并单元格”命令，将多个单元格合并成一个单元格如图所示。或选中单元格后单击鼠标右键，在弹出的菜单中选择“表格/合并单元格”选项，将多个单元格合并成一个单元格。实践经验：选择多个相连的单元格后在“属性”面板中单击“合并所选单元格，使用跨度”按钮

，它往往是创建复杂表格的重要步骤。操作起来简单方便。素养小课堂知识的积累可以更加增进自己学习的信心，遇事不要气馁，要有克服各种困难的信心，只有充分而正确的运用对学习的信心，才能将各个基础知识中进行积累，将其运用到今后的工作和生活中，任何一项大的工程都是由无数个细小的结构构成，知道了这个道理就要认真学好每一个网页的小知识点，只有这样才能最终完成一项宏伟的网页作品。

任务3掌握表格的基本操作活动4掌握清除表格的宽度/高度可用来清除单元格中多余的空白，让行宽与列高和单元格的内容刚好吻合，例如插入的图片或键入的文字比单元格稍微小一点，此时就需要对表格进行清除宽度和高度的操作。选择整个表格，在属性栏中单击“清除列宽”按钮

，此时会发现表格宽度会自动与图像相吻合，如图所示。任务3掌握表格的基本操作活动4掌握清除表格的宽度/高度选择整个表格，在属性栏中单击“清除行高”按钮

，此时会发现表格宽度会自动与图像相吻合，如图所示。任务3掌握表格的基本操作活动5掌握调整边距/间距/边框边距、间距及边框等距离是属于表格的整体设置，因此设置前要先选取整个表格。之后在“属性”面板中设置“CellPad”为0、“CellSpace”为6、“Border”为6，效果如图所示。任务4掌握排序及整理表格内容活动1掌握导入成绩单为了更加快速而有效地处理网页中的表格和内容，Dreamweaver提供了多种自动处理功能，包括导入表格数据和排序表格等。Dreamweaver中导入表格式数据功能够根据素材来源的结构，为网页自动建立相应的表格，并自动生成表格数据。因此，当遇到大篇幅的表格内容编排，而手头又拥有相关表格式素材时，便可使网页编排工作轻松得多。在文本文件中的数据，我们可以将其快速的导入到网页文档中，下面通过实例讲述如何导入表格数据。打开需要导入成绩单的网页文档，如图所示。将文档中的表格进行居中对齐，效果如图所示。任务4掌握排序及整理表格内容将鼠标指针放置到第2行第2列中，在“属性”面板中设置“垂直”为“顶端”，按“Enter”键进行换行，效果如图所示。执行菜单栏中的“文件/“导入/表格式数据”命令，弹出“导入表格式数据”对话框，如图所示。任务4掌握排序及整理表格内容在对话框中单击“数据文件”文本框右边的“浏览”按钮，弹出“打开”对话框，在对话框中选择数据文件，如图所示。单击“打开”按钮，添加到文本框中，在对话框中的“定界符”下拉列表中选择“Tab”选项，“表格宽度”选中“匹配内容”单选按钮，如图

所示。实践经验：在导入数据表格时注意定界符必须要根据文档中的符号进行对应，否则可能会造成表格格式的混乱。任务4掌握排序及整理表格内容单击“确定”按钮，导入表格式数据，导入后将表格居中，效果如图所示。保存文档，按

F12键在浏览器中预览，效果如图

所示。任务4掌握排序及整理表格内容活动2掌握排序表格排序表格的主要功能是针对具有格式数据的表格而言，并根据表格列表中的数据来排序的。导入的数据以学号进行了排序，下面我们就将当前的数据重新进行一下排序，按照名次进行重新的排序，选中表格，执行菜单栏中的“编辑/表格/排序表格”命令，弹出“排序表格”对话框，在对话框中将“排序按”设置为“列8”，“顺序”设置为“按数字顺序”，在下拉列表中选择“升序”，如图所示。设置完毕单击“确定”按钮，对表格进行重新排序，如图

所示。实践经验：如果表格中含有合并或拆分的单元格，则无法使用表格排序功能。综合实战—创建表格布局网页实战训练要求掌握新建文档并进行保存创建表格调整表格大小插入图片键入文字并设置文字实战素材素材文件：素材/项目7/Images/7-5_01、7-5_02、7-5_03、7-5_04、7-5_05、7-5_06，如图所示。任务单项目编号7-1项目名称综合实战—创建表格布局网页时间地点目的：实践网页设计中通过布局表格制作网页的一般流程课堂实践：设计主题，新建、插入表格、嵌套表格、设置文本大小颜色，设置以背景形式插入图片、键入或复制粘贴文字，完成一个网页文字区域的制作。考核标准：新建文档并进行储存。10分插入表格。10分嵌套表格10以背景形式插入图片10键入文字10内容可粘贴：评价评分：指导教师签字：综合实战—创建表格布局网页实战效果图效果文件：源文件/项目7/7-5，如图所示。综合实战—图像中插入表格实战训练要求掌握新建文档并进行保存创建表格调整表格大小插入图片键入文字并设置文字实战素材素材文件：素材/项目7/Images/7-6_01、7-6_02、7-6_03、7-6_04，如图所示。任务单项目编号7-2项目名称综合实战—图像中插入表格

时间地点目的：实践网页设计中通过布局表格制作网页的一般流程课堂实践：简洁音乐主题，新建、插入表格、嵌套表格、设置文本大小颜色，设置以背景形式插入图片、键入或复制粘贴文字，完成一个网页文字区域的制作。考核标准：新建文档并进行储存。10分插入表格、嵌套表格。10分以背景形式插入图片10分键入文字10分设置对齐文字和表格10分内容可粘贴：评价评分：指导教师签字：综合实战—图像中插入表格实战效果图效果文件：源文件/项目7/7-6，如图所示。课后习题一．判断题1.()表格中垂直的排行称为「行」，水平的排行称为「列」。2.()表格中的每一个方格，一般称之为「单元格」。3.()要创建名次数据时，可使用排序表格功能。4.()表格和表格之间的距离，称为「边距」。5.()Dreamweaver必须借助其它