第十七课 编辑网页代码 教学设计
1教材分析
《编辑网页代码》是浙教版信息技术八年级上册第三单元的第十七课内容,本节安排主要是让学生认识HTML的代码,接着通过给网页添加“飘动的字符跟随鼠标”特效的活动,能让学生合理运用并修改网页特效代码。然后让学生利用课堂上已学技能,对教师所给或者自己所建网站实现个性化——添加特效代码(可以通过网上下载或者用教师课前准备好的特效代码),让学生体验用超文本标记语言修改网页的方法,最后,让学生通过“课堂测验”的活动,让学生在回顾中更深落实教学重难点。
整堂课,在给网页添加特效代码的活动中,开启了学生认识与了解网页新的大门,丰富了学生的信息技术知识,同时活跃的气氛课堂,提高了学生学习信息技术的积极性。
2教学目标
【知识与技能】
1、认识HTML代码; 2、学会HTML代码标签的简单编辑; 3、学会插入简单的网页特效。
【过程与方法】
通过认识HTML代码,揭示了网页的另一种编辑形式,同时也了解并掌握基本的HTML结构代码,并将之用于简单特效代码的添加,鼓励学生自主尝试更改代码来修改或者修饰网页,使作品更具有灵动感。
【情感态度与价值观】
通过找和插入特效代码并生成特效的环节,使学生积极地投入到学习信息技术中活动中,并获得了学习信息技术的成功体验,提高学生学习的兴趣,使学生在探究、反思与交流中学习与提高。同时,通过身边的实际到对未来畅想,培养学生知识技能运用的意识,并增强学生创新能力。
3学情分析
通过前面两节课的学习,学生认识了SharePoint Designer 2007软件界面,并能在网页中插入图片、文字等素材,这些都为本节课的学习做了一定的知识铺垫。根据学生心理特征和实际情况出发,从学生感兴趣的“小智能汽车”本班学生制作的社团作品引入。这样环节的编排,让学生明白程序代码在现在生活中的应用,同时也打破学生对程序代码的神秘感,消除学生接触新知识的后怕心理,激发主动学习的积极性。因学生手中没有教科书,因此在本节课中,我在学习资料 “学习空间”中,提供给学生学习任务单,还有他们平时课堂中会用的课微视频,因此本课制作了一个“学习空间”的网页,引导学生自主探究。
4重点难点
重点:了解HTML语言;添加网页特效代码。
难点:网页特效代码的合理运用与修改。
5教学过程
活动1【导入】情景导入
1、学生观看“开启智能小汽车”。
活动情景:让一个社团的学生将自己制作的Arduino的智能小汽车作品展示。
师:同学们,这是李某同学做的小汽车。之前,老师没有接触这个东西时,我好奇过——为什么这辆车会听这个遥控器的话,让它怎么走,它就这么走?现在明白了。不过老师先卖一个关子,请问同学们,你们知道吗?
生:知道——程序代码。(如果学生不会回答,请制作者讲解)同时,师幻灯片出示程序代码图片。
师:原来是程序代码,他能解析一种能让人和物或者物和物体之间进行交流的一种语言。
过渡:这种语言我们这节课也要去学它,我们是将它用在最近我们学的网页中。
2、明确教学任务。(幻灯片出示课题——编辑网页代码)
活动2【活动】认识HTML代码和标签
师生共同学习。(幻灯片出示HTML的概念和HTML文件标签)。
过渡:掌握了这些知识之后,我们要进行小试一下了。
活动3【活动】网页代码试试手
1、出示任务(幻灯片展示)
任务1:给网页标题栏取名字。
欢乐童年(^-^)
任务2:修改网页背景。
改成为
2、教师在教师机里演示并讲解完成任务1和任务2的操作步骤。
3、学生上机操作。
操作要求:打开桌面上的《编辑网页代码》学习资料文件夹里,“欢乐童年”站点中的主页,完成前面2个任务。
老师巡视, 从中收集到学生完成任务中出现的问题。
4、反馈学生学习情况:借用普遍性出现的问题的学生机展示解决的方法(让学生展示,教师讲解注意点。)
活动4【活动】网页特效
过渡:同学们,修改代码后,请记住——要保存并刷新网页哦。
(在这个环节中,教师已经提前将“飘动的字符跟随鼠标”特效加入到代码视图中。)
教师操作:在用浏览器浏览作品时,故意将鼠标移动,把鼠标后边跟着字符的网页特效吸引学生眼球。在学生惊叹中引出知识点——网页特效。
(1)认识网页特效
幻灯片出示:网页特效指网页上的特殊效果,主要是通过将JavaScript程序代码加入到网页中,使网页页面更加生动、活泼。
过渡:你们想不想试试这个效果,很简单哦!只需要以下几步:
第1步:找到网页特效代码,并将它复制。(拥有它)
第2步:定好光标位置,并将它粘贴。(使用它)
第3步:修改内容,将它变成有自己的个性特效。(修改它)
第4步:使用IE浏览器来看效果。(欣赏它)
(2) 布置任务3:给“欢乐童年”网站中的 “default.htm”里,添加“飘动的字符跟随鼠标”的网页特效,并能进行合理有个性的修改和修饰,最后测试成功。
学习帮助方式:在“《编辑网页代码》学习资料”里,可以在“学习空间”的网页中,找到“飘动的字符跟随鼠标”微课视频学习。)
教师巡视指导。
(3)欣赏作品,分享经验
师:同学们,老师想你们能不能借用这个机会和同学们分享一下,刚才在自学中自己遇到问题,当然这个问题可以经过你和同学或老师已经解决掉或者没有解决掉的,都可以。
学生活动:请学生上教师机将自己遇到的问题以及解决问题的方法进行演示和讲解。
活动5【活动】课堂练习——训练营地
过渡:看来,你们可以“出师”了,不过,我还是想要测测你们水平。
布置任务4:打开训练营地文件夹,从中选一个站点,或者用自己所建的站点,然后在你选的站点主页中添加一些网页特效。
说明:特效代码可以从老师已经准备好的特效代码中找,也可以上网用关键词“网页特效代码”搜索获取。
温馨提示:一个页面的特效过多会影响页面的视觉美感。
学生活动、师巡视指导,并时不时展示已完成的有个性的网页特效代码的学生作品。
活动6【测试】课堂测验
?打开”课堂测验.xls”,开始测试。
温馨提示:可以不断修改答案,直至正确哦!
活动7【活动】总结
这节课,你学会了什么?
认识HTML和标签、能在网页中添加简单的特效代码,并可以用编写代码来修改或者修饰网页。
活动8【活动】未来畅想
师:同学们,这节课你们带给我许多预想不到的惊喜,你们是太厉害了。不过,我想你们从网页特效代码中,也体会到很多的惊喜。而我们这节课所学的是HTML语言,是一种简单的语言,属于低级语言。在以后的学习中,我们会慢慢接触更多的高级语言。同学们。如果你会了编写这个程序代码,你会做什么?
学生活动:让学生自由畅想自己的未来。
课件10张PPT。第十七课 编辑网页代码1.认识HTML与标签HTML：超文本标记语言，是用于描述网页文档的一种标记语言，它是万维网上的通用语言。HTML标签通常成对出现HTML标签2.网页代码试试手任务1: 给网页标题栏取名字任务2：修改网页背景修改代码后,请保存并刷新网页欢乐童年(^_^) 网页特效指网页上的特殊效果，主要是通过将JavaScript程序代码加入到网页中，使网页页面更加生动、活泼。3.网页特效任务3.酷炫网页随我来第1步：找到网页特效代码，并将它复制。（拥有它）
第2步：定好光标位置，并将它粘贴。（使用它）
第3步：修改内容，将它变成有自己的个性特效。（修改它）
第4步：使用IE浏览器来看效果。（欣赏它）
在要求网页页面中，将“飘动的字符跟随鼠标”的特效代码加入，并要修改字符内容和颜色等。温馨提醒：
遇到困难，请看“学习空间”网页中的微课视频进行学习.训练营地 任务4: 打开训练营地文件夹或自己建立的主页，从中选一个站点，在它的主页中添加一些网页特效。一个页面的特效过多会影响页面的视觉美感课堂测验打开”课堂测验.xls”,开始测试。可以不断修改答案，直至正确哦今天你学会了什么？查看并编辑网页代码
HTML和标签
网页特效
未来畅想