中职高教版《Dreamweaver网页制作》项目三 任务二 编辑表格教案

资源下载
  1. 二一教育资源

中职高教版《Dreamweaver网页制作》项目三 任务二 编辑表格教案

资源简介

任务二 编辑表格
一、提出任务
1.任务目标
编辑已创建成的表格。
2. 解决的问题
通过对本单元任务一创建的表格进行编辑,学习更改表格边框或背景颜色,添加、删除行或列,调整行高、列宽及表格大小,拆分或合并单元格。
3. 本任务所涉及原有知识要点
完成本任务需要掌握以前学过的利用表格布局页面,创建表格等知识点。
二、教学目标
1. 知识目标
⑴ 掌握选择单元格。
⑵ 掌握选择表格。
⑶ 掌握设置单元格属性。
⑷ 掌握设置表格属性。
⑸ 掌握表格的基本操作:如合并、拆分单元格,添加、删除行或列,调整行高、列宽。
2. 能力目标
掌握表格编辑,能够根据具体需求灵活应用表格。
3. 情感目标
培养学生用比较分析方法分析问题、解决问题的能力,并使学生具有自主学习能力。
三、教学分析与准备
1. 教学重点
⑴ 选择单元格、选择表格。
⑵ 设置单元格和表格的属性。
⑶ 表格的基本操作。
2.教学难点
单元格和表格属性的区分
3. 教学方法
任务驱动学习、协作学习、探究拓展学习与举一反三相结合
4. 课时安排
4课时
5. 教学环境
多媒体网络教室
四、学习过程(组织课堂、复习知识、教师引领完成任务占2学时;举一反三占2学时。)
教学环节及手段 教学内容 备注
组织课堂 复习提问 任务流程 导入任务 分析任务 完成任务 知识点讲解 完成任务 知识小结 举一反三 任务目标 启发思路 分组完成任务 学生自评或互评 教师点评总结 布置作业 集中学生注意力,准备上课。 通过提问方式考察学生对插入表格的掌握情况。 1.创建表格的方法有哪些? 2.用表格布局页面的注意事项有哪些? 表格插入后和课本图3-1的表格相比较,会发现相差甚远,至少表格的高度就相差很多,有些单元格还需要调整。要完成最终效果,就必须对表格进行编辑。 提出任务:编辑任务一中已创建成的表格。 观察任务一中创建的表格,对比最终效果,需要分别对表格“table1”、“table2”、“table3”、“table4”及其嵌套表格,设置对齐、行高与列宽、背景颜色、背景图像和边框等属性。 1.知识点讲解 ⑴ 选中单元格和表格 a.引导学生利用已经学过的Word表格知识迁移总结什么是表格、单元格、行、列。 b.介绍表格的3个重要标签“table、tr、td”并演示用法。 c.学生分组讨论选择表格的方法,并最后总结。 d.学生分组讨论选择表格中行、列、单元格的方法,并最后总结。 思考:选中表格中所有单元格和选中整个表格是一个概念吗?带着问题学习下面知识。 ⑵ 设置单元格属性、表格属性 利用属性面板设置属性。 a.表格“属性”面板参数介绍 “表格Id”:表格的Id,为表格命名。 “行”和“列”:表格中行、列的数目。 “宽”和“高”:以像素为单位或按百分比指定表格宽度、高度。通常不需要设置表格的高度。 “填充”:指的是单元格边距,即单元格内容和单元格边框之间距离,单位为像素。 “间距”:指的是单元格间距,即相邻单元格之间的距离,单位为像素。 “对齐”:确定表格相对于同一段落中其他元素(例如文本和图像)的显示位置。 “边框”:指定表格边框的宽度,单位为像素。 “清除列宽”按钮:从表格中删除所有明确指定的列宽。 “清除行高”按钮:从表格中删除所有明确指定的行高。 “将表格宽度转换成像素”按钮和“将表格高度转换成像素”按钮:将表格中每列的宽度或高度设置为以像素为单位的当前宽度,同时将整个表格的宽度设置为以像素为单位的当前宽度。 “将表格宽度转换成百分比”按钮和“将表格高度转换成百分比”按钮:将表格中每列的宽度或高度设置为按百分比表示的当前宽度,同时将整个表格的宽度设置为按百分比表示的当前宽度。 b.单元格“属性”面板参数介绍 “合并单元格”按钮:将所选的单元格、行或列合并为一个单元格。 “拆分单元格”按钮:将一个单元格拆分成多个单元格。一次只能拆分一个单元格;如果选择的单元格多于一个,则此按钮将禁用。 “水平”:设置单元格、行或列内容的水平对齐方式。 “垂直”:设置单元格、行或列内容的垂直对齐方式。 “宽”和“高”:可以以像素为单位或按占整个表格宽度或高度的百分比进行设置。若让浏览器根据单元格的内容以及其他列和行的宽度和高度自动确定适当的宽度或高度,此文本框采取默认设置(空)。 “不换行”:可以防止换行,从而使给定单元格中的所有文本都在同一行。如果启用了“不换行”,则当键入数据或将数据粘贴到单元格时,单元格会加宽来容纳所有数据。 “标题”:可以将所选的单元格格式设置为表格标题单元格。默认情况下,表格标题单元格的内容为粗体并且居中。 “背景”和“背景颜色”:设置所选单元格、列或行的背景图像和背景颜色。 “边框”:单元格的边框颜色。 c.继续上一个遗留问题:选中表格中所有单元格和选中整个表格是一个概念吗? 2.自己动手 让学生按着下列要求编辑任务一中已创建的表格。 ⑴ 编辑表格“table1” 设置表格“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.表格的基本操作:如合并、拆分单元格,添加、删除行或列,调整行高、列宽。 引导学生分组做任务二的举一反三。通过这些练习,使学生熟练掌握编辑表格的知识,并从中体会和总结学习方法。 创建网页“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所示。 图JYFS3-6 4.继续创建上一任务作业中以环保为主题的网页,对表格进行相应编辑。暂不添加表格中的内容。 学生回答,教师归纳。 教师用PPT展示这两张表格。 教师讲授 教师简单介绍知识点。 学生自己操作,做好的给予鼓励,做不好时一定要给予其提示。 教师总结

展开更多......

收起↑

资源预览