完成任务
“边框”：指定表格边框的宽度，单位为像素。 “清除列宽”按钮：从表格中删除所有明确指定的列宽。 “清除行高”按钮：从表格中删除所有明确指定的行高。 “将表格宽度转换成像素”按钮和“将表格高度转换成像素”按钮：将表格中每列的宽度或高度设置为以像素为单位的当前宽度，同时将整个表格的宽度设置为以像素为单位的当前宽度。 “将表格宽度转换成百分比”按钮和“将表格高度转换成百分比”按钮：将表格中每列的宽度或高度设置为按百分比表示的当前宽度，同时将整个表格的宽度设置为按百分比表示的当前宽度。 b．单元格“属性”面板参数介绍 “合并单元格”按钮：将所选的单元格、行或列合并为一个单元格。 “拆分单元格”按钮：将一个单元格拆分成多个单元格。一次只能拆分一个单元格；如果选择的单元格多于一个，则此按钮将禁用。 “水平”：设置单元格、行或列内容的水平对齐方式。 “垂直”：设置单元格、行或列内容的垂直对齐方式。 “宽”和“高”：可以以像素为单位或按占整个表格宽度或高度的百分比进行设置。若让浏览器根据单元格的内容以及其他列和行的宽度和高度自动确定适当的宽度或高度，此文本框采取默认设置（空）。 “不换行”：可以防止换行，从而使给定单元格中的所有文本都在同一行。如果启用了“不换行”，则当键入数据或将数据粘贴到单元格时，单元格会加宽来容纳所有数据。 “标题”：可以将所选的单元格格式设置为表格标题单元格。默认情况下，表格标题单元格的内容为粗体并且居中。 “背景”和“背景颜色”：设置所选单元格、列或行的背景图像和背景颜色。 “边框”：单元格的边框颜色。 c．继续上一个遗留问题：选中表格中所有单元格和选中整个表格是一个概念吗？ 2．自己动手 让学生按着下列要求编辑任务一中已创建的表格。 ⑴ 编辑表格“table1” 学生自己操作，做好的给予鼓励，做不好时一定要给予其提示。 31
设置表格“table1”在页面中居中对齐。设置表格“table1”的第2行的单元格背景图像为“wkimages”文件夹下的dh．Jpg。 ⑵ 编辑表格“table1-1” 设置表格“table1-1”宽500像素、高34像素、左对齐。把“table1-1每个单元格宽度设为100像素。 ⑶ 编辑表格“table2” 设置表格“table2”的属性：“表格Id”为“table2”、高“50像素”、对齐方式为“居中对齐”，背景颜色为“#FFFFFF”，第一列和第四列的列宽均为17像素。 ⑷ 编辑表格“table3”及其中的嵌套表格 设置表格“table3”为“居中对齐”，背景颜色为“#FFFFFF”，第1列与第3列列宽均设置为17像素。 设置“table3-1”边框粗细为1像素，边框颜色为“#EFEFEF”。分别设置表格“table3-1”第一行、第三行和第五行单元格中嵌套的表格“web1”、“flash1”和“3D1”的属性：高30像素，对齐方式为左对齐，第1列列宽为30像素。 分别设置表格“table3-1”第二行、第四行和第六行单元格中嵌套的表格“web2”、“flash2”和“3D2”的属性：第1列和第5列的列宽均设置为40像素。 ⑸ 编辑表格“table4” 设置表格“table4”对齐方式为居中对齐，背景颜色为“#FFFFFF”。将第2行行高设置为1像素、背景颜色设置为“#EFEFEF”，这样表格“table4”的第2行就显示为一条高1像素、颜色为“#EFEFEF”的细线（注意：必须在“代码”视图里将表格“table4”第2行单元格内的“ ”删除，否则行高不会以1像素显示）。 至此，完成了“作品展示”网页中所有表格的编辑工作。 通过完成本任务学习了： 1．选则单元格、表格的方法。 2．设置单元格属性。 3．设置表格属性。 4．表格的基本操作：如合并、拆分单元格，添加、删除行或列，调整行高、列宽。 引导学生分组做任务二的举一反三。通过这些
知识小结 举一反三 任务目标 教师总结 32
启发思路 分组完成任务 学生自评或互评 教师点评总结 布置作业 练习，使学生熟练掌握编辑表格的知识，并从中体会和总结学习方法。 创建网页“practice3-4.html”，插入一个1行2列的表格，在属性面板中设置表格的填充、间距、边框均为10像素，在第1行第2列中再插入一个2行1列的嵌套表格，设置表格的填充、间距为0像素，边框为1像素，保存并预览网页，体会填充、间距、边框的含义。 学生分组完成任务，教师巡视指导，指出问题，纠正学生不良操作习惯。 由各组学生代表分析说明自己完成的任务。 对完成任务的学生给予鼓励，完不成的帮助其找到原因并引导完成。 1．创建网页“practice3-5.html”，插入如图JYFS3-4所示表格并按要求设置其属性：宽400像素、高100像素、单元格间距为5像素、边框粗细为3像素、边框颜色为“#FF0000”。表格第1、3列宽100像素、单元格的边框颜色为“#00FF00”，第2列宽100像素、单元格的边框颜色为“#0000FF”。 图JYFS3-4 2．创建网页“practice3-6.html”，插入一个4行3列的表格，按图JYFS3-5所示，对单元格进行合并与拆分。设置表格边框粗细为1像素、颜色为“#000000”，将表格第1行的背景颜色设置为“#3399CC”，第2行与第3行的第一列单元格、第4行第1、2列单元格的背景颜色设置为“#FFFFCC”。 图JYFS3-5 3．创建网页“practice3-7.html”，插入5个表格，设置表格对齐属性及单元格内容对齐属性，使预览效果如图JYFS3-6所示。 33
图JYFS3-6 4．继续创建上一任务作业中以环保为主题的网页，对表格进行相应编辑。暂不添加表格中的内容。
任务三 添加表格内容
一、提出任务
1．任务目标
在“作品展示”网页中添加表格内容。 2. 解决的问题
通过在“作品展示”网页的表格中添加内容，学习在表格中添加内容并设置格式。 3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：表格的创建和编辑。
二、教学目标
1. 知识目标
⑴ 掌握在单元格中插入图片。 ⑵ 掌握在单元格中设置图片格式。 ⑶ 掌握在单元格中插入文字。 ⑷ 掌握在单元格中设置文字格式。 ⑸ 掌握使用表格的“扩展”视图模式。 ⑹ 掌握使用表格的“布局”视图模式。 2. 能力目标
通过完成本任务使学生掌握在表格中添加内容并设置格式。 3. 情感目标
培养学生耐心、踏实的学习态度；给学生以成功的体验，提高学习网页知识的积极性。
三、教学分析与准备
1. 教学重点
⑴ 在表格中插入内容。 ⑵ 表格的三种视图模式。 2．教学难点
表格三种视图模式的使用。 3. 教学方法
任务引领学习、任务驱动学习、协作学习和探究拓展学习相结合。 4. 课时安排
4课时。
34
5. 教学环境
多媒体网络教室。
四、学习过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学时。） 教学环节及手段 组织课堂 复习提问 任务流程 导入任务 分析任务 完成任务 教学内容 集中学生注意力，准备上课。 通过提问考察学生对插入表格的掌握情况和上节课作业的完成情况。 1．总结表格属性面板和单元格属性面板的不同。 2．提问学生，谈谈自己用表格制作并编辑环保为主题的网页页面布局，想做成一张什么样的网页。其他同学可以进行评论。 用表格布局好页面后，就可以添加相应内容了，本次课任务就是在上一任务完成的表格内添加内容。 提出任务：向表格中添加内容 任务二已完成“作品展示”页面表格的编辑，页面布局部分已经完成，本任务需要将准备好的内容添加进去，并设置其格式。 1．添加并编辑表格内容 ⑴ 向表格“table1”中添加内容 利用第二单元所学的方法，在“文件”面板中打开“works”文件夹，把“wkimages”文件夹下的“title.jpg”图像添加到表格“table1”的第1行中。 将光标放入表格“table1-1”的第1列的单元格中，输入导航文字“首页”。在第2至5列的单元格中分别输入文字“作品展示”、“心情日记”、“家乡山水”和“访客信息”。 用鼠标拖拽选中表格“table1-1”的全部单元格，在单元格“属性”面板中设置各单元格内容的对齐方式为“居中”，文字大小保持默认值，文字颜色为“#5E5C5D”并加粗显示。 ⑵ 向表格“table2”、“table3”中添加内容 将光标放入表格“table2”的第2个单元格中，添加图像“works.jpg”。 将光标放入表格“table2”的第3个单元格中，添加图像“link.jpg”。 将光标放入表格“web1”的第1个单元格中，备注 学生回答，教师补充归纳 教师引导学生动手完成任务。完成的给予鼓励，完不成的一定要给予其提示 35