任务六 制作动态网页 教学设计
文档属性
| 名称 | 任务六 制作动态网页 教学设计 |  | |
| 格式 | zip | ||
| 文件大小 | 12.8KB | ||
| 资源类型 | 教案 | ||
| 版本资源 | 沪教版 | ||
| 科目 | 信息技术（信息科技） | ||
| 更新时间 | 2016-07-14 18:15:53 | ||
图片预览
文档简介
任务六
制作动态网页
教学设计
1教学目标
⑴
知识与技能：掌握在网页中表格、图片的使用方法，进一步体会表格所具有的实现网页布局的功能。
⑵
过程与方法：具有一定的观察、分析能力，能发现在美化网页过程中出现的问题，并通过实践学会解决问题。
能充分利用现有条件，主动查阅FrontPage
2000相关资料，进行自主学习。
⑶
情感态度与价值观：通过学习和实践，培养学生对网站建设的兴趣和主动探索精神。
通过与小组中其他同学密切配合，培养团队协作精神。
2学情分析
通过之前的教学活动可知，学生的掌握知识程度参差不齐，接受新知识的能力也有所不同。因此采用小组合作方式，照顾整个班级学生水平的差异，将不同层次的学生均匀地分散到各小组中，每组中由一位水平较高的学生担任组长，担当“小老师”角色，负责管理本组的学习探究活动，指导其他学生，共同完成学习任务，让不同层次的学生均有所收获。
3重点难点
重点：引导学生掌握网页布局与美化的常用方法，激发学生的求知欲。
难点：掌握使用表格进行网页布局时参数设置的方法与依据。
4教学过程
活动1【导入】学前评价
1、以下表述正确的是
A、网站是由一些互相关联的网页构成的，构成网站的网页地位是相等的。
B、建设网站，只能通过FrontPage
2000
来实现。
C、图片作为网页的元素，是作用是对相应的文字作补充说明、增加页面的美感。
D、在FrontPage
2000中，使用框架网页模板创建的主页，不能调整各个框架的大小。
2、合理、美观的网页布局，能给网页增加的美感，增强网页对受众的吸引力，增强信息交流的效力。关于网页布局，以下说法正确的有
A、使用框架,可以把浏览器窗口分割成不同的区域（框架），每个区域，每个区域（框架）可显示一个独立的网页，从而实现布局。
B、使用表格布局，可以对网页元素进行更加合理、精确的布局。
C、网页中使用图片即可实现对网页元素进行布局。
D、查看网页的源代码，如果网页使用了框架，则源代码中可搜索到特征字符串“【设计意图】通过评价来确定学生已经具备的基本素质，了解学生是否具备直接学习本节内容应该具备的最低知识和技能，给本节课教学提供参考。
活动2【导入】创设情境
回想我们曾经登录过的网站，其网页布局很多都是设计精美，使人赏心悦目。现在请大家登录林口县第四中学网站，进入“学校概览”页面，观察其图片与文字等网页元素的布局，想一想，这是如何实现的。
林口县第四中学http://www./com/index/index.jsp
学校概览页面http://www./com/schoolInfo/schoolInfo.jsp
（登录信息技术课堂辅助网站，点击“导学”页面中给出的网址链接。）
欣赏此网页中运用的表格布局、图片美化的方法，引入本节课主题。
活动3【活动】下达任务
1、先请学生阅读教材119页任务三的提示板，理解表格布局的特点。
2、演示教材配套光盘提供的“我爱我校”网站，观察其主页及各个框架网页top1.htm、top2.htm、top3.htm，对所要实现的任务目标有所了解。
3、浏览网站路径下的图片文件，对图片文件名对应的文件内容有所了解。
图片文件名
宽度(像素)
高度(像素)
图片用途
活动4【活动】探究任务
分为两大步骤；
1、参照教材提示，由学生独立完成任务三的第1步和第2步，即top1.htm和top2.htm页面的制作。
2、参照教材提示，完成任务三的第3步至第5步，即制作二级子页、top3.htm页面的制作及框架高度的调整。
学生活动：学生分组，由组长负责，实现小组内协作学习，给基础较差的学生提供必要的协助。
教师活动：跟踪巡视学生完成操作任务的过程，针对发现的问题及时给予必要的提示，避免学生走不必要的弯路，提高课堂学习效率。
引导学生思考：在表格中插入图片时，图片的大小与表格的尺寸之间有什么联系？让学生知道表格尺寸是依照图片来设置的，图片大小按照网页需求而是事先精心设计的。
检查学生阶段作业，分析完成情况。
活动5【活动】组内讨论
⑴
在top1.htm中，表格第3行的宽度和高度是如何确定的？
提示（可选）：注意使用的图像文件尺寸。
引导学生探究，尝试改变单元格宽度和高度来观察实际效果，从而得出明确的结论，进一步明确美化网页过程中，作为背景图片的大小与表格的尺寸之间的关系。
⑵
表格第3行指定了宽度和高度，为什么第1、2行没有指定宽度和高度？
引导学生发现其不同之处，通过探究得出如下结论：图片文件作为单元格背景，要求对单元格宽度和高度与图片尺寸一致，否则影响美观；单元格中插入图片，在不指定单元格宽度和高度的情况下，则单元格宽度和高度自适应于图片尺寸。
⑶
表格第1、2行是插入图片，第3行是将图片作为背景图片，这两种方式可互换吗？为什么？
引导学生发现其不同之处，通过探究得出结论。插入图片充满单元格后，不能在图片上重叠输入文本或嵌套表格所以，第三行必须将图片作为背景使用。
⑷
（备选）表格第2行依次插入的3个图片文件Tm1.gif、Tm2.gif和Tm3.gif实际组成了一个完整的图，为什么不使用一个图片文件来呈现？这样作有什么有利之处？
引导学生使用Internet来探寻答案，解决问题。
⑸（备选）如果将第二行的图片变为背景图片，该怎样做？
活动6【活动】组内交流
将尝试过程中的收获，包括解决问题的途径、方法、技巧进行组内交流；将尝试过程中的收获中遇到的问题与困惑进行组内交流，寻求解决问题的方法。
活动7【活动】成果展示
展示default.HTM主页的整体效果，进行自评、组内互评、教师点评。
对于完成效果不理想的学生，找出闪光点给予激励。
制作动态网页
教学设计
1教学目标
⑴
知识与技能：掌握在网页中表格、图片的使用方法，进一步体会表格所具有的实现网页布局的功能。
⑵
过程与方法：具有一定的观察、分析能力，能发现在美化网页过程中出现的问题，并通过实践学会解决问题。
能充分利用现有条件，主动查阅FrontPage
2000相关资料，进行自主学习。
⑶
情感态度与价值观：通过学习和实践，培养学生对网站建设的兴趣和主动探索精神。
通过与小组中其他同学密切配合，培养团队协作精神。
2学情分析
通过之前的教学活动可知，学生的掌握知识程度参差不齐，接受新知识的能力也有所不同。因此采用小组合作方式，照顾整个班级学生水平的差异，将不同层次的学生均匀地分散到各小组中，每组中由一位水平较高的学生担任组长，担当“小老师”角色，负责管理本组的学习探究活动，指导其他学生，共同完成学习任务，让不同层次的学生均有所收获。
3重点难点
重点：引导学生掌握网页布局与美化的常用方法，激发学生的求知欲。
难点：掌握使用表格进行网页布局时参数设置的方法与依据。
4教学过程
活动1【导入】学前评价
1、以下表述正确的是
A、网站是由一些互相关联的网页构成的，构成网站的网页地位是相等的。
B、建设网站，只能通过FrontPage
2000
来实现。
C、图片作为网页的元素，是作用是对相应的文字作补充说明、增加页面的美感。
D、在FrontPage
2000中，使用框架网页模板创建的主页，不能调整各个框架的大小。
2、合理、美观的网页布局，能给网页增加的美感，增强网页对受众的吸引力，增强信息交流的效力。关于网页布局，以下说法正确的有
A、使用框架,可以把浏览器窗口分割成不同的区域（框架），每个区域，每个区域（框架）可显示一个独立的网页，从而实现布局。
B、使用表格布局，可以对网页元素进行更加合理、精确的布局。
C、网页中使用图片即可实现对网页元素进行布局。
D、查看网页的源代码，如果网页使用了框架，则源代码中可搜索到特征字符串“
活动2【导入】创设情境
回想我们曾经登录过的网站，其网页布局很多都是设计精美，使人赏心悦目。现在请大家登录林口县第四中学网站，进入“学校概览”页面，观察其图片与文字等网页元素的布局，想一想，这是如何实现的。
林口县第四中学http://www./com/index/index.jsp
学校概览页面http://www./com/schoolInfo/schoolInfo.jsp
（登录信息技术课堂辅助网站，点击“导学”页面中给出的网址链接。）
欣赏此网页中运用的表格布局、图片美化的方法，引入本节课主题。
活动3【活动】下达任务
1、先请学生阅读教材119页任务三的提示板，理解表格布局的特点。
2、演示教材配套光盘提供的“我爱我校”网站，观察其主页及各个框架网页top1.htm、top2.htm、top3.htm，对所要实现的任务目标有所了解。
3、浏览网站路径下的图片文件，对图片文件名对应的文件内容有所了解。
图片文件名
宽度(像素)
高度(像素)
图片用途
活动4【活动】探究任务
分为两大步骤；
1、参照教材提示，由学生独立完成任务三的第1步和第2步，即top1.htm和top2.htm页面的制作。
2、参照教材提示，完成任务三的第3步至第5步，即制作二级子页、top3.htm页面的制作及框架高度的调整。
学生活动：学生分组，由组长负责，实现小组内协作学习，给基础较差的学生提供必要的协助。
教师活动：跟踪巡视学生完成操作任务的过程，针对发现的问题及时给予必要的提示，避免学生走不必要的弯路，提高课堂学习效率。
引导学生思考：在表格中插入图片时，图片的大小与表格的尺寸之间有什么联系？让学生知道表格尺寸是依照图片来设置的，图片大小按照网页需求而是事先精心设计的。
检查学生阶段作业，分析完成情况。
活动5【活动】组内讨论
⑴
在top1.htm中，表格第3行的宽度和高度是如何确定的？
提示（可选）：注意使用的图像文件尺寸。
引导学生探究，尝试改变单元格宽度和高度来观察实际效果，从而得出明确的结论，进一步明确美化网页过程中，作为背景图片的大小与表格的尺寸之间的关系。
⑵
表格第3行指定了宽度和高度，为什么第1、2行没有指定宽度和高度？
引导学生发现其不同之处，通过探究得出如下结论：图片文件作为单元格背景，要求对单元格宽度和高度与图片尺寸一致，否则影响美观；单元格中插入图片，在不指定单元格宽度和高度的情况下，则单元格宽度和高度自适应于图片尺寸。
⑶
表格第1、2行是插入图片，第3行是将图片作为背景图片，这两种方式可互换吗？为什么？
引导学生发现其不同之处，通过探究得出结论。插入图片充满单元格后，不能在图片上重叠输入文本或嵌套表格所以，第三行必须将图片作为背景使用。
⑷
（备选）表格第2行依次插入的3个图片文件Tm1.gif、Tm2.gif和Tm3.gif实际组成了一个完整的图，为什么不使用一个图片文件来呈现？这样作有什么有利之处？
引导学生使用Internet来探寻答案，解决问题。
⑸（备选）如果将第二行的图片变为背景图片，该怎样做？
活动6【活动】组内交流
将尝试过程中的收获，包括解决问题的途径、方法、技巧进行组内交流；将尝试过程中的收获中遇到的问题与困惑进行组内交流，寻求解决问题的方法。
活动7【活动】成果展示
展示default.HTM主页的整体效果，进行自评、组内互评、教师点评。
对于完成效果不理想的学生，找出闪光点给予激励。