《网页设计与制作教程教学课件作者汪兴来5》由会员分享，可在线阅读，更多相关《网页设计与制作教程教学课件作者汪兴来5（50页珍藏版）》请在金锄头文库上搜索。
1、项目活动五 公司网站建设:表格在页面中的应用,任务一 表格的基本操作 任务二 特殊表格的制作 任务三 公司网站建设,返回,任务一 表格的基本操作,一、插入表格 在网页中插入表格， 可以使用以下几种方法。 方法一: 在菜单栏上执行“插入” “表格” 命令。 方法二: 在“插入” 工具栏的“常用” 选项卡中单击“表格” 图标。 方法三: 在“插入” 工具栏的“布局” 选项卡中单击“表格” 图标。 利用以上几种方法都可以弹出“表格” 对话框， 在该对话框中可以设置表格的属性， 这些都是在设计面板中完成的， 参数设置完成后， 单击“确定” 按钮， 插入表格， 如图 所示。 “表格” 对话框分为三个部分
2、， 它们被灰色的线区分开。,下一页,返回,任务一 表格的基本操作,.表格大小 在这一部分中可以对表格的基本数据进行设置。 “行数” 选项和“列” 选项用来设置表格的行数和列数。 “表格宽度” 的设置有两种， 一种是像素， 另一种是百分比。 以像素为单位来进行宽度设置时， 可以精确地设置表格的宽度,以百分比为单位设置宽度时， 会按比例来显示表格的宽度。 “边框粗细” 选项用于以像素为单位来设置表格的边框， 如果不希望表格的边框在浏览器中显示出来， 可以将它的值设置为。 “单元格边距” 就是指在单元格中插入的对象与单元格边框之间的距离。 “单元格间距” 是指单元格与单元格之间的距离。,上一页,下一
3、页,返回,任务一 表格的基本操作,.标题 用于对表格进行页眉的设置， 有四种标题设置方式。 选择“无” 可以将其设置为没有标题的表格,选择“左” “顶部” “两者” 这三种可以将标题的位置设置为相应的位置。凡被设置为页眉栏的表格， 其内部的文字就会自动加粗处理、居中显示。 如图 所示为使用“顶部” 页眉模式制作的一个简单的职称表。 在制作这个职称表时， 设置好顶部页眉后， 就可以直接在第一行中输入“姓名” “性别” “职称”。 由于页眉的设置， 这些字样会与其他单元格中的不一样。 从图 中可看出， 被设置为页眉栏的单元格中的文字都被加粗处理、居中显示了， 而没有被设置为页眉栏的单元格则依然保持
4、原来的状态。,上一页,下一页,返回,任务一 表格的基本操作,.辅助功能 用户在这里可以设置表格的标题， 并可以通过“标题” 选项对表格的标题和显示位置进行设置。 “摘要” 部分是对这个表格的一些说明， 使用屏幕阅读器可以读取摘要， 不过这个摘要不会显示在用户的浏览器中。 设置完毕后单击“确定” 按钮就可以将表格插入到文档中。 二、选择表格 在对这些插入好的表格进行进一步的编辑时， 要先选择这个表格。 除了能够选择整个表格， 还需要能够选择表格的行、列及单元格。,上一页,下一页,返回,任务一 表格的基本操作,.选择整个表格 如果表格处于选中状态， 那么表格周围就会出现一个黑边框， 这个边框的右边
5、和下面附带有黑色的控制点。 选择整个表格的方法如下: 方法一: 将光标移动到表格的左上角、上边框或下边框外的附近区域， 在光标的右下角出现一表格的缩略图时， 单击鼠标左键就可以将这个表格选中。 方法二: 将光标定位到表格的任一单元格中， 然后单击该表格对应的 标签，就可以将这个表格选中。 方法三: 将光标定位到表格的任一单元格中， 然后按下“ ” 组合键两次就可以选中表格。 方法四: 将光标定位到表格的任一单元格中， 执行菜单“修改” “表格” “选择表格” 命令即可选中表格。,上一页,下一页,返回,任务一 表格的基本操作,.选择表格的行 为了使选中的部分能够和没有选中的部分区分开， 当用户选
6、择了某行时， 行的周围都带有黑色的边框， 将光标指向当前选中的行， 所有单元格的周围都带有红色边框。 选择表格行的方法如下: 方法一: 将光标定位到要选择行的任一单元格中， 然后在选择器上单击相对应行的 标记， 即可选择行。 方法二: 将光标移动到要选择行的左边框附近位置， 当鼠标指针变为一个指向右的黑色箭头形状时， 单击鼠标即可选择行。 方法三: 将光标定位到要选择行的第一个单元格中， 按住鼠标左键拖动至该行的最后一个单元格， 即可选择行。,上一页,下一页,返回,任务一 表格的基本操作,.选择表格的列 当用户选择了列以后， 它的显示状态和行的状态一样， 不同的是它们的选择方式。 选择表格列的
7、方法如下: 方法一: 将光标移动到要选择列的上边框附近位置， 当鼠标指针变为一个指向下的黑色箭头形状时， 单击鼠标即可选择列。 方法二: 将光标定位到要选择列的第一个单元格中， 按住鼠标左键拖动至该列的最后一个单元格， 即可选择列。 .选择表格的单元格 对表格的行和列的选择已经非常熟悉时， 单元格的选择就已经不再困难了。 用户可以在表格中的某个单元格内单击， 然后按住鼠标向相邻单元格方向拖动鼠标就可以选中这个单元格。 使用快捷键进行选择时要先在某个单元格内单击一下， 然后按“ ” 组合键即可将这个单元格选中。,上一页,下一页,返回,任务一 表格的基本操作,如果要选择连续单元格， 按住鼠标左键拖
8、动， 即可选择连续单 元格,如果要选择不连续单元格， 将光标定位到单元格中， 按 键并单击就可以选择任意不相邻的单元格。 三、表格属性的设置 表格属性的设置主要通过“表格” 属性面板来进行。 选中表格， 属性面板就会变成“表格” 属性， 如图 所示。 主要选项介绍如下: “行” 和“列”: 可以直接在“行” 和“列” 后的文本框中输入行数和列数， 以调整原来表格的结构。 “宽度”: 用来设置表格的宽度， 默认单位为像素， 也可以为百分比 “填充”: 用来设置单元格内部空白的大小， 单位为像素。 “间距”: 用来设置单元格之间的距离， 单位为像素。,上一页,下一页,返回,任务一 表格的基本操作,
9、“边框”: 用来设置表格边框的宽度， 单位为像素。 “对齐”: 用来设置表格的对齐方式， 对齐方式有“默认” “左对齐” “居中对齐” 和“右对齐”。 和 按钮: 分别用来清除表格的列宽和行高。 和 按钮: 分别用来将表格的列宽转换为像素和将表格的列宽转换为百分比。 四、单元格属性的设置 在网页中既可以对表格进行属性设置， 也可以对单元格进行属性设置。 选择单元格，属性面板就会变成“单元格” 属性， 如图 所示。,上一页,下一页,返回,任务一 表格的基本操作,在“单元格” 属性面板中可以对单元格进行一些设置和修改， 主要选项介绍如下: “水平”: 用来设置单元格内容的水平对齐方式， 水平对齐方
10、式有“默认” “左对齐”“居中对齐” 和“右对齐”。 “垂直”: 用来设置单元格内容的垂直对齐方式， 垂直对齐方式有“默认” “顶端”“居中” “底部” 和“基线”。 “宽” 和“高”: 用来设置单元格的宽度和高度， 单位为像素或百分比。 “不换行”: 当单元格中的文本超过它的宽度时， 该单元格的宽将会自动发生改变以适应过长的文本。,上一页,下一页,返回,任务一 表格的基本操作,“标题”: 用来设置单元格文字为标题格式。 通常在使用表格时把表格的第一行或第一列单元格设置为标题单元格， 也称为表头。 如果对“标题” 复选框进行选择， 那么被选择的单元格都将被设置为标题单元格。 而被设置为标题的单
11、元格中的内容将被加粗显示出来， 以表明该单元格中的内容已经被设置为标题。 “背景颜色”: 用来设置单元格的背景颜色。 和 按钮: 分别用来合并单元格和拆分单元格。 五、表格的修改 .插入行和列 () 如果要插入一行， 将光标定位在最后一行的任一单元格中， 单击鼠标右键， 在弹出的快捷菜单中选择“表格” “插入行或列” 命令， 弹出“插入行或列” 对话框， 如图 所示。,上一页,下一页,返回,任务一 表格的基本操作,() 设置对话框“位置” 选项为“所选之下”， “行数” 为“”， 单击“确定” 按钮即可。 用同样的方法也可以插入一列。 .删除行和列 删除行和列的方法很简单， 下面介绍三种方法。
12、 方法一: 选中要删除的行或者列， 单击鼠标右键， 在弹出的快捷菜单中选择“表格” “删除行” 或者“表格” “删除列” 命令即可。 方法二: 选中要删除的行或者列， 选择菜单“修改” “表格” “删除行” 或“修改” “表格” “删除列” 命令即可。 方法三: 选中要删除的行或列， 按 键即可。,上一页,下一页,返回,任务一 表格的基本操作, 合并和拆分单元格 在使用表格进行网页的布局时， 表格并不是单独地放在网页里面的， 而是有层次地在表格里面再嵌套表格， 或将一个单元格拆分为几个单元格， 也可以把多个单元格合并在一起。 在 中， 一个单元格可以扩展到多行或多列的大小。 而合并单元格可以将
13、 多个单元格合并为一个较大的单元格。 中可以使用以下三种方法来合并和拆分单元格。 方法一: 利用“属性” 面板中的“合并” 按钮 和“拆分” 按钮 方法二: 选择菜单“修改” “表格” “合并单元格” 或者“修改” “表格” “拆分单元格” 命令。,上一页,下一页,返回,任务一 表格的基本操作,方法三: 单击鼠标右键， 在弹出的快捷菜单中选择“表格” “合并单元格” 或者“表格” “拆分单元格” 命令进行操作。 合并单元格时， 选择的几个单元格必须都是相邻的， 并且还要在一个矩形的范围内才能被合并。 如果选择的单元格不相邻或没有形成一个矩形的范围， 那么它们就无法合并为一个单元格。 拆分单元格
14、就比较简单了， 不过它要求只能选择一个单元格来进行拆分。 六、表格排序 中的表格有一个排列表格内容的功能， 这个功能对于数据表格来说非常有用。 用户能够通过该功能轻松地实现按姓名或数字排列表格中的内容。 表格排序命令可以重新排列任何大小的表格， 并能够保持表格的格式不发生变化。 不需要使用数据库， 表格排序命令就可以将同样的数据以不同的形式显示出来。,上一页,下一页,返回,任务一 表格的基本操作,表格排序方法如下: ) 执行菜单“命令” “排序表格” 命令， 打开“排序表格” 对话框。 ) 在“排序按” 下拉菜单中， 选择“列”， 在“顺序” 下拉菜单中选择“按数字顺序”， 并且“升序” 排列
15、， 如图 所示。 ) 设置完成， 单击“确定” 按钮即可。,上一页,返回,任务二 特殊表格的制作,一、细线表格的制作 在设置表格边框时， 即使将表格的边框设置为“”， 其边框还是有些粗的。 那么如何制作出更细表格线的表格呢? 下面将介绍制作细线表格的方法。 ) 在网页中， 选择如图 所示表格。 ) 在“属性” 面板的“表格” 框中输入“”， 在“填充” 和“边框” 文本框中输入“”， 在“间距” 文本框中输入“”， 如图 所示。 ) 选择表格， 执行菜单“窗口” “ 样式” 命令， 打开“ 样式” 面板，单击面板下方的 按钮， 出现如图 所示的“新建 规则” 对话框， 单击“确定” 按钮。,下一页,返回,任务二 特殊表格的制作,) 弹出如图 所示的“ 的 规则定义” 对话框， 在“分类” 栏中的“背景” 选项卡中设置“ ” 为“”， 设置完成， 单击“确定” 按钮。 ) 选择表格中的所有单元格， 在单元格属性面板的“背景颜色” 选项卡中输入“”， 将单元格背景色设置为白色， 保存， 按 键浏览页面， 效果如图 所示。 二、外框线表格的制作 ) 在网页中， 选择如图 所示的表格。 ) 在属性面板中“表格” 名称框中输入“”， 在“填充” “边框” 和“间距” 文本框中输入“”。,上
