《网页设计与制作》课程教学资源（PPT课件讲稿）第7章 网页布局

第7章网页布局 使用表格布局网页 意上机实践一用表格布局主页 。使用框架布局网页 鲁上机实践一用框架布局页面

第7章 网页布局  使用表格布局网页  上机实践——用表格布局主页  使用框架布局网页  上机实践——用框架布局页面

7.1使用表格布局网页 表格是由一个或多个单元格构成的集合，表格中横向 的多个单元格称为行，垂直的多个单元格称为列。 行 列

7.1 使用表格布局网页 表格是由一个或多个单元格构成的集合，表格中横向 的多个单元格称为行，垂直的多个单元格称为列。 行 列

7.1.1 创建表格 确定插入点后，在“插入”栏的“常用”类别中单击 “表格”图标，打开“表格”对话框，可以在“表格” 对话框中设置表格的行数、列数、宽度、边框、边数 以及间距。 表格 ☒ 表格大小 常用 回&里园回··简朵回卧，园 行数：2 列数：3 表格宽度：0像素 Untitled-1 表格 边框相细1☐像索 单元格边距：)图 单元格间距：)☐田 页眉 两者 功能 60 标题 对齐标题默认一 挽要 帮助 确定门取消

7.1.1 创建表格 确定插入点后，在“插入”栏的“常用”类别中单击 “表格”图标 ，打开“表格”对话框，可以在“表格” 对话框中设置表格的行数、列数、宽度、边框、边数 以及间距

7.1.2i 改变表格和单元格的宽度与高度 使用属性面板可以非常方便地改变表格和单元格的宽 度与高度，也可取消宽度与高度的设置。 属性 表格Id 行2 宽30 像素 填充0 对济默认 类@)无 列3 高 像素 间距0 边框1 哈学岁 背景颜色 边框颜色二[ o I 背景图像⑧)「 多日 通过拖动表格的边框也可轻易改变表格的宽度与高度。 57 按Sift键并拖动可以保留其他列宽 按Control键并单击可以选择单元格 按住Control键并单击以选择多个单元格

7.1.2 改变表格和单元格的宽度与高度 使用属性面板可以非常方便地改变表格和单元格的宽 度与高度，也可取消宽度与高度的设置。 通过拖动表格的边框也可轻易改变表格的宽度与高度

7.1.3 拆分和合并单元格 1.拆分单元格 所谓拆分单元格，就是将一个单元格拆分为几行或几 列。 ,属性 格式无网 样式无 ycSS□BL套盏言■链接 白 字体默认字体 大小无 网园☐扫扫丝丝目标 单元格 水平默认 宽30 不换行口 背景 页面属性，： 垂直默认V 高57 标题口 背景颜色匠 边框 拆分单元格 ☒ 141 把单元格拆分O行⑧) 确定 ⊙列C) 取消 列数)：3 帮助

7.1.3 拆分和合并单元格 1．拆分单元格 所谓拆分单元格，就是将一个单元格拆分为几行或几 列

2.合并单元格 所谓合并单元格，就是将相邻的几个单元格合并成一 个单元格。 、属性 格式无 样式无 CSS B I差善■链接 白 字体默认字体 大小无四 ☐扫扫丝望 目标 单元格 水平默认 宽 不换行口 背景 母 页面属性. 回 垂直默认V 高 标题☐ 背景颜色匚[ 边框 -141- 41 30+30

2．合并单元格 所谓合并单元格，就是将相邻的几个单元格合并成一 个单元格

7.1.4 插入、删除行和列 如果希望在某个单元格上方插入行，或者在其左侧插 入列，可首先右击该单元格，然后从弹出的快捷菜单 中选择“插入行”或“插入列”。 如果希望删除行或列，可在弹出的快捷菜单中选择 “删除行”或“删除列”。 表格1 上选择表格) 经落格式伊 兰并单斤tt的户，1+2344到 拆分单元格@).，C+1+1ts 对济 插入行仅) C红1+用 C式) 葡入行酸列 插入行或列 ☒ 大小 除行) 模板) Ctrl+Shift+- 插入：⊙⑧ 确定 元家视图巡) 增加行宽) O列C) 取消 行数)：1 减少列克D 打升流顶面 表格宽度 位置：○所选之上a) 扩展表格级式)6 ⊙所选之下鱼) 帮助) 加到色收童) 建新代码片断g) 花贴) CultV 承性)

7.1.4 插入、删除行和列 如果希望在某个单元格上方插入行，或者在其左侧插 入列，可首先右击该单元格，然后从弹出的快捷菜单 中选择“插入行”或“插入列” 。 如果希望删除行或列，可在弹出的快捷菜单中选择 “删除行”或“删除列”

7.1.5为表格和单元格设置背景颜色或背景图像 可为整个表格设置背景颜色，也可为单个或多个单元 格设置背景颜色，其设置方法完全相同。 #P0000 ☑ bodw><td 属性 表格Id 行⑧)3 宽 对齐)默认 y列g)3☐ 高 边框⑧)1☐ 学以以 背景颜色©⑨ 力框颜色®) Io II 背景图像⑧) 还可为表格或单元 格设置背景图像

7.1.5 为表格和单元格设置背景颜色或背景图像 可为整个表格设置背景颜色，也可为单个或多个单元 格设置背景颜色，其设置方法完全相同。 还可为表格或单元 格设置背景图像

7.1.6为表格和单元格设置边框颜色 通过设置表格边框粗细、单元格间距、背景颜色，以 及单元格背景颜色可以制作不同边框的表格。 细线表 格 粗线表 格 双线表 格

7.1.6 为表格和单元格设置边框颜色 通过设置表格边框粗细、单元格间距、背景颜色，以 及单元格背景颜色可以制作不同边框的表格。 细线表 格 粗线表 格 双线表 格

7.1.7表格的高级操作 表格的高级操作主要包括对表格的整行内容进行移动、 排序表格内容和导入/导出表格数据等。 1.移动表格整行内容 选中行 粘贴 并剪切 10 10 10 i2 2 5 13 .1415 .16 6 13 145 .16 218 218 218 将光标置于要移 动位置的下一行 任意单元格中

表格的高级操作主要包括对表格的整行内容进行移动、 排序表格内容和导入/导出表格数据等。 7.1.7 表格的高级操作 1.移动表格整行内容 选中行 并剪切 将光标置于要移 动位置的下一行 任意单元格中 粘贴