《网页制作》教学设计
一、教材分析
《网页制作》教学是信息基础必修教材中第六章第1节信息集成中网站制作简介的有关内容。编辑网页所使用的是软件是Frontpage2000,该软件的使用与以前所学的word有类似的地方,软件操作具有一定的迁移性。 二、学情分析
学生在之前已经学习了word的有关操作,具备网上获取信息和一定的信息处理能力。Frontpage2000的使用与word有很多类似的地方,学生较容易上手。 三、教学目标
知识与技能:了解网页的基本元素;掌握网页制作中网页元素的应用;懂得利用表格布局网
页的基本思想;
过程与方法:通过实践体验对比,得出结论。亲历网页制作的过程。 情感态度与价值观:在与同伴合作完成简单网页的制作过程中,培养与他人合作交流的意识和习惯,通过设计学校网页,培养学生热爱学校的情感。 四、教学重点、难点
教学重点:网页制作中网页元素的应用 教学难点:利用表格布局网页 五、教学方法:合作探究法、任务驱动 六、教学过程
(一) 情境导入
师:用PPT展示一组美丽的学校风景图片,师生共同欣赏。同学们一看就知道这是我们白蒲中学的风景图片。我校曾被评为江苏省十佳花园学校,请大家思考一下如何让更多的人了解我们学校的美呢?大家有什么好的方法吗?
生回答:通过网络发布,需要制作网页(如回答不在话题上,引导)
师:本节课我们就一起来学习制作《美丽的蒲中校园》网页,宣传学校的美。学校将组织评选同学们设计的优秀网页作品,放在学校网站上。 (二) 新课讲授
师:这里,老师挑选了去年学生设计的优秀网页作品,我们一起来欣赏。展示校园页面,提问:这个页面中由哪些元素构成的?
生:文字、图片、动画、声音、超链接等。
师:网页里的这些元素是通过什么工具集成起来的呢?在这里,老师向大家介绍office2000中的frontpage2000来制作网页,它具有功能强大、简单易用的特点。
教师演示启动frontpage2000的步骤,启发学生:界面和学过的哪个软件比较相似?教师点击相关菜单,引导。由于都是office套件的一种,所以和word界面很相似,演示界面和功能。演示打开站点bpzx,站点打开后,观察网站文件夹的结构,介绍images文件夹与 _private文件夹的作用。后缀名为.htm,代表的是网页文件。其中,index.htm表示网站的主页名称。点击视图下的网页,切换到网页窗口,点击文件夹,切换到站点文件夹窗口,点击bpzx站点文件夹,便于我们打开网页文件。
师:刚才同学们的都非常好,在制作网页前,我们先来放松一下,来玩拼图。请同学们打开D盘的《网页制作》学案,完成实践一。 实践一:2个小实验
实验1:启动Frontpage后,点击“文件”“打开站点”,找到D盘下的bpzx文件夹。双击文件夹列表里的shiyan1.htm文件,学生尝试拼凑图形。
实验2:双击文件夹列表里的shiyan2.htm文件,学生尝试拼凑图形,将图形按顺序拖到表格的单元格里,并适当拖到表格的边框,能拼凑成功吗?
学生操作,发现实验1中的图形总有1个无法拖动,拼凑不成功,实验2在表格中拼凑图形成功。
教师启发学生思考,引导学生观察一开始出示的网页,发现图片、文字、动画等网页元素排列整齐。
师:是什么在起作用?
师生共同得出:利用表格布局网页。得出:表格的定位。
师:利用表格的布局功能。表格的布局功能可以对页面元素进行定位,使网页清晰美观、富有条理。表格中可以包含多种类型的内容,如图像、文本、多媒体文件。
师:在网站文件夹里有一张利用表格布局的“美丽的蒲中校园”网页,今天,老师要请你们当网页设计师,完成“美丽的蒲中”网页制作。制作学校风景,需要什么样的素材?学生回答:图片。老师已经预先把素材准备好了,大家可以打开acdsse浏览素材,选择合适的素材。
实践二:双击文件夹视图里的meilipz.htm,
任务一:请大家从D盘的sucai文件夹中,从7张校园风景图片中挑选其中一张,插入网页表格的适当位置。文字材料直接从sucai文件夹中的word文档中复制。注意页面的保存,保存时要注意:网站中用到的图像、声音、视频文件应有条理地存放到指定文件夹中。当保存图片时,要把图片保存到images文件夹中。
学生自主操作,4人一组合作学习。教师巡回辅导。 操作中的操作步骤要点参考《网页制作》学案。
任务二:在单元格中各插入gif图像动画、欢迎字幕和flash动画,,以实现页面的动态效果。注意保存和预览。
可能的问题:1、图片属性设置2、flash动画的插入 教师展示一部分学生的作品,点评,小结。 学生再次练习完善。
师:刚才,同学们的表现都非常出色,要想使自己的网页更漂亮、更受欢迎吗? 实践三:
任务一:美化页面 操作小贴士:
操作右击网页空白处,“网页属性”,“常规”,输入标题。切换到“背景”,设置背景色。 设置背景图片:可勾选“背景图片”,“浏览”。
任务二:打开index.htm页面,对“美丽校园”创建超链接到meilipz.htm。 操作小贴士:
创建超链接:选定文字,“插入”、“超链接”,选定超链接的网页。 学生合作学习,教师巡回辅导。 教师展示学生作品,点评,小结。
教师提醒学生,做好后的网页,在浏览器里预览,发现有边框线,如何解决? 学生自主探究。 三、课堂总结
《网页制作》教学设计
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)