绍表格布局知识，即许多网页的表格布局可分为上、中、 下三个部分，上面部分放置网页的标题，中间部分放置 网页的主要内容,下部分放置制作者的信息及版权信息 等。上、中、下三个部分又包含各自的嵌套表格来布局 相应的内容。 提问：回想以前打开一张网页的时候是所有的内容 都同时全部显示吗？如果不是的话是怎样进行显示的 呢？为什么这样显示？表格布局在这里有什么作用？ 总结：如果使用表格布局网页结构不合理，会降低 网页浏览速度。因为浏览器在解析网页时，先将整个网 页的结构下载完后才显示内容，如果不使用嵌套表格布 局网页只使用一个表格会非常复杂，浏览者要等待很长 时间才能看到网页内容。通常用表格布局页面时，应该 遵循以下几点： 创建本栏目目录结a．整个网页不要放在一个表格里，尽量使用多个 构 表格来进行布局。 b．表格的嵌套层次尽量要少。 c．单一表格的结构尽量整齐，不要太复杂。 2．创建目录结构 在Dreamweaver 8中打开“幽幽我心的个人网站”，创建表格知识 依据第一单元建立的网站目录结构，在本栏目“works” 文件夹中新建文件“works.html”，然后把光盘中本单 元素材中的“wkimages”、“flash”、“links”文件夹复 给一定时制到本栏目“works”文件夹中。本栏目目录结构如课 间学生自己学本表3-1所示。 习或讨论找出3．创建表格的知识 ⑴ 练习插入一个表格：学会使用菜单、“插入”栏、答案，教师最后 总结。 快捷键创建表格。 ⑵ 回答表格对话框中如下选项的作用： “页眉”选项组、“标题”、“对齐标题”、“摘要”。 ⑶ 要求学生回答下列问题： a．大多数浏览器默认显示单元格边距、间距是多 少？若要确保浏览器显示的表格没有边距和间距，必须 把单元格边距和单元格间距设置为多少？ b．如果没有明确指定边框的值，则浏览器怎么显 示表格边框呢？大多数浏览器默认显示边框粗细是多 少？若要确保浏览器显示的表格没有边框应该怎么 办？若把边框设置为0，则如何查看单元格和表格的边 框呢？ c．在网页制作过程中，元素的长度单位可以选用 百分比或像素来表示。请解释什么是像素、百分比？它 们的区别是什么？“百分比”是相对于谁说的？（教师 在最后总结时一定要强调是父元素，其绝对大小会随所 属父元素的大小变化而发生变化。）
26
d．在用表格布局页面时，宽度设置为多少时页面完成任务 不会出现水平方向的滚动条？（教师总结：为防止浏览 过程中出现水平方向的滚动条，通常在800*600分辨率 下，把表格宽度最大设置为778像素，在1024*768分知识小结 辨率下最大设置为1002像素。） e．如何给当前表格命名？如何删除当前选中的表 格？ f．嵌套表格的宽度受所在单元格宽度的限制吗？ 4．自己动手 根据所学知识，创建课本图3-1页面所需表格结 构。 举一反三 通过完成本任务学习了： 任务目标 ⑴ 创建表格 ⑵ 表格布局页面 ⑶ 表格在页面中的作用： 让学生讨论表格在网页制作中的作用：网页中既有启发思路 明显的表格，也有隐含的表格；表格在网页中有两种作 用：布局与真正的表格。 创建网页“practice3-1.html”，在网页中插入一分组完成任务 个6行5列的表格，宽500像素，边框粗细与单元格间 距均为5像素，页眉选择“顶部”，标题为“产品信息”， 保存并预览网页。 学生自评或互评 回想插入表格的几种方法，考虑页眉、标题等选项教师点评总结 出现在哪个对话框的选项卡中，并考虑如何设置创建表 格的相关属性。 布置作业 学生分组完成任务，教师巡视指导，指出问题，纠 正学生不良操作习惯。 由各组学生代表分析说明自己完成的任务。 对完成任务的学生给予鼓励，完不成的帮助其找到原因并引导完成。 1．创建网页“practice3-2.html”，在网页中插入如图JYFS3-1所示的嵌套表格，保存并预览网页。 27
图JYFS3-1 2．创建网页“practice3-3.html”，在网页中插入如图JYFS3-2所示的嵌套表格，保存并预览网页。 图JYFS3-2 3．制作一个以环保为主题的网页，首先利用已学知识设计栏目和目录结构，创建表格布局网页。
28
任务二 编辑表格
一、提出任务
1．任务目标
编辑已创建成的表格。 2. 解决的问题
通过对本单元任务一创建的表格进行编辑，学习更改表格边框或背景颜色，添加、删除行或列，调整行高、列宽及表格大小，拆分或合并单元格。 3. 本任务所涉及原有知识要点
完成本任务需要掌握以前学过的利用表格布局页面，创建表格等知识点。
二、教学目标
1. 知识目标
⑴ 掌握选择单元格。 ⑵ 掌握选择表格。
⑶ 掌握设置单元格属性。 ⑷ 掌握设置表格属性。
⑸ 掌握表格的基本操作：如合并、拆分单元格，添加、删除行或列，调整行高、列宽。 2. 能力目标
掌握表格编辑，能够根据具体需求灵活应用表格。 3. 情感目标
培养学生用比较分析方法分析问题、解决问题的能力，并使学生具有自主学习能力。
三、教学分析与准备
1. 教学重点
⑴ 选择单元格、选择表格。 ⑵ 设置单元格和表格的属性。 ⑶ 表格的基本操作。 2．教学难点
单元格和表格属性的区分 3. 教学方法
任务驱动学习、协作学习、探究拓展学习与举一反三相结合 4. 课时安排
4课时 5. 教学环境
多媒体网络教室
29
四、学习过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学
时。） 教学环节及手段 教学内容 备注 组织课堂 复习提问 任务流程 导入任务 分析任务 完成任务 知识点讲解
集中学生注意力，准备上课。 通过提问方式考察学生对插入表格的掌握情况。 学生回答，教1．创建表格的方法有哪些？ 2．用表格布局页面的注意事项有哪些？ 师归纳。 表格插入后和课本图3-1的表格相比较，会发现教师用PPT展相差甚远，至少表格的高度就相差很多，有些单元格示这两张表格。 还需要调整。要完成最终效果，就必须对表格进行编 辑。 提出任务：编辑任务一中已创建成的表格。 观察任务一中创建的表格，对比最终效果，需要 分别对表格“table1”、“table2”、“table3”、“table4” 及其嵌套表格，设置对齐、行高与列宽、背景颜色、 背景图像和边框等属性。 1．知识点讲解 教师讲授 ⑴ 选中单元格和表格 a．引导学生利用已经学过的Word表格知识迁 移总结什么是表格、单元格、行、列。 b．介绍表格的3个重要标签“table、tr、td” 并演示用法。 c．学生分组讨论选择表格的方法，并最后总结。 d．学生分组讨论选择表格中行、列、单元格的 方法，并最后总结。 思考：选中表格中所有单元格和选中整个表格 是一个概念吗？带着问题学习下面知识。 ⑵ 设置单元格属性、表格属性 教师简单介绍利用属性面板设置属性。 知识点。 a．表格“属性”面板参数介绍 “表格Id”：表格的Id，为表格命名。 “行”和“列”：表格中行、列的数目。 “宽”和“高”：以像素为单位或按百分比指定 表格宽度、高度。通常不需要设置表格的高度。 “填充”：指的是单元格边距，即单元格内容和 单元格边框之间距离，单位为像素。 “间距”：指的是单元格间距，即相邻单元格之 间的距离，单位为像素。 “对齐”：确定表格相对于同一段落中其他元素 （例如文本和图像）的显示位置。 30