第9课 动感网页教案
图片预览
文档简介
第9课 动感网页
一、教学目标
1．懂得动感网页的概念，了解动感网页和动态网页的不同。
2．学会制作DHTML效果和滚动字幕。
3．学会插入Flash影片，学会设置网页背景音乐。
二、教学重点和难点
1．教学重点：应用DHTML效果，制作滚动字幕，插入Flash影片，设置网页背景考音乐。
2．教学难点：动感网页和动态网页的区别。设置字幕的速度，设置Flash影片的透明方式 。
三、教学准备
1．教学环境：Windows XP操作系统，FrontPage 2003，多媒体广播控制系统，因特网环境。21世纪教育网版权所有
2．教学资源：教学资源包（微视频、插图、客家节日网页等），课件。
四、教学过程
教学环节
教师活动
学生活动
设计意图
一、创设情境，激发兴趣（3分钟）
1．展示“客家魂”网站中的“客家节日”网页（教材第49页的图9-1）。网页中的图片用到了DHTMI的图片飞入特效，标题文字用到了滚动字幕特效，实时播放的是Flash影片，配以轻快悦耳的背景音乐。
2．提问：请同学们观察这张网页，说一说：看完后你有哪些感受？
3．小结：这样的网页动感十足，给我们留下了难忘的印象。网页中有Flash影片、背景音乐，还加上了图片文字等特效。
4．揭题：动感网页。
观赏网站。
说一说自己观看网页后的感受。
了解构成动感网页的基本要素。
明确学习任务。
从学生熟悉的网页人手，通过看一看、说一说，感受动感网页的优点，激发学生学习新知的欲望。
二、合作交流，理解新知（5分钟）
1．引言：客家魂网站由许许多多的网页组成，有些网页是静态的，有些富有动感。
2．布置任务：浏览客家魂网站，组内讨论：
(l)哪些网页是动感网页？
(2)上网找出一个动态网页的案例，并说说它与动感网页是否相同。
（教师来回巡视、点拨）
3．小组汇报：请各小组派代表汇报本小组同学探究、交流、讨论后得出的结论。
4．点评与小结。点评学生汇报时的亮点，简明扼要总结动感网页与动态网页的区别：动感网页一般指网页元素在视觉上给人以动的感觉，如飞入、滚动、播放等；动态网页指采用动态技术自动生成的网页，它也可以是静态的。
感受动感网页。
分组讨论，用自己的语言说出动感网页与动态网页的区别，学会辨别两种不同的网页。
倾听小组代表的发言，纠正自己错误的见解。
理解动感网页的特点，学会区分动感网页与动态网页。
通过真实的因特网环境，以任务驱动的方式，培养学生的观察力、思维能力。
通过列举出动感网页，初步学会区别动感网页与动态网页。教师在评价学生汇报时，注重过程性评价，提高学生学习积极性，培养学生的语言概括能力。
三、任务引领，获取新知（20分钟）
1．学习应用“DHTMI．效果”工具栏制作图片飞入效果。
(1)边讲解边演示：如何实现网页加载时，海鸥图片从右下角飞入的动态效果。
(2)学生尝试练习。在Front-Page中，打开半成品网页“kjjr. htm”，选中海鸥图片，实现从右下角飞入的动态效果。
(3)小结：“DHTML效果”工具栏中，响应事件有单击、双击、鼠标悬停、网页加载等，应用效果有逐字放入、弹起、飞人等，效果选项有从右端、从底端等。我们要合理使用DTHML动态效果，为网页增色添辉。
2．学习应用“Web组件”制作字幕。
(l)引言：请同学们打开桌面上老师发过来的学习包，观看微视频：插入“Web组件”之滚动字幕。
(2)出示任务：在“kjjr. htm”网页中，选中“客家端午节挂葛藤由来”这几个字，添加滚动字幕。
(3)巡视：对个别学生进行辅导，既面向全体，又关注个体。
(4)学生汇报探究结果。
(5)小结：滚动字幕就是人们通常所说的跑马灯，位于Web组件当中。利用滚动字幕，可以增强网页的动感，常用来显示通知、欢迎信息、产品介绍等。
3．学习插入Flash影片，设置背景音乐。
(1)出示分层任务内容。
①基础任务：继续在客家节日网页中插入Flash影片，影片位于网站的“Flash”子文件夹中。给网页设置背景音乐，音乐位于“sound”子文件夹中。
②进阶任务：设置插入的Flash影片背景为透明。
(2)引导学生开展分层任务活动。
(3)巡视指导，及时鼓励评价。
(4)引导小组同学互帮互助。
(5)小结：Flash影片能够带来强烈的视觉、听觉冲击，在插入时可以设置影片的大小、对齐方式、透明度等。通过设置背景音乐，既能增加网页的动感，又能增强主题的表现力。我们要合理使用动感元素，使我们的网页动感十足，富有吸引力。
聆听讲解，观看演示。
开始操作练习。
了解DHTML动态效果的种类和特点。
了解滚动字幕命令所在位置，自学操作步骤。
明确学习任务。尝试添加滚动字幕。
汇报添加字幕操作步骤。
了解滚动字幕的作用。
明确学习任务。
选择任务，进行操作。完成后按要求保存，提交至教师机。
了解Flash影片、背景音乐的作用，懂得合理使用动感元素。
通过观看演示，动手操作，了解DHTML效果的用途和操作步骤，充分感知动感网页所带来的神奇效果。
在微视频的帮助下，学生开始小组合作探究学习，以更好地掌握重点知识。
分层任务设计满足各层次学生探究学习的需要。引导学生选择适当的任务，在操作中巩固所学知识。
四、主动探究，迁移提高（9分钟）
1．出示任务：请同学以小组为单位，完成教材创新活动：新建一个民俗风情网页，让网页初具动感。可以使用DHTML效果、滚动字幕、Flash影片、背景音乐等。
2．让学生动手练习。
3．巡视学生，个别辅导，适时点拨。引导规范保存文件，并提交至教师机。
4．展示小组完成的网页，由学生代表讲述创作思路。
5．引导全班学生一起评价作品。
6．小结：合理地应用动感元素，可以更好地展示民俗民风，让网页显得多姿多彩，给浏览者留下深刻的印象。
小组合作，上机实践，完成任务。
在小组讨论的基础上，独立完成。
及时帮助有困难的同学。
欣赏其他同学的作品，学会评价他人的作品。
了解动感网页的作用。
通过创新活动，加强对动感网页的理解，提高学生的评价能力，巩固本节课所学内容。
五、展示点评，梳理总结（3分钟）
1．设问：同学们，通过这节课的共同探究，我们有了哪些收获？
2．师生共同归纳这节课知识点：
(1)网页的动感是视觉带来的效果，这种动感网页不是动态网页。
(2)应用DHTML效果可以在网页上浏览到动态变化的图片。
(3)应用Web组件制作字幕，可以实现字幕滚动，滚动方向可以调整。
(4)插入Flash影片，使得网页动感十足。
(5)设置背景音乐，可以丰富浏览者的感官享受。
3．让学生填写教材的活动评价表，反馈填表情况。
4．总结：网页的世界可真精彩。有了DHTML效果、滚动字幕、Flash影片、背景音乐等，不仅大大增强了网页的动感，而且使得网页更加生动富有趣味。只要我们认真学习，多加操作，一定会掌握更多的网页制作技巧。
和老师一起归纳这节课知识点。 填写活动评价表。
回顾这节课所学知识。
及时的总结，有助于学生将零散的知识系统化．加深对所学知识的认识，进一步培养学生学会交流、总结学习过程的方法，有效提高学生的语言表达能力。
五、板书设计
六、教学反思
一、教学目标
1．懂得动感网页的概念，了解动感网页和动态网页的不同。
2．学会制作DHTML效果和滚动字幕。
3．学会插入Flash影片，学会设置网页背景音乐。
二、教学重点和难点
1．教学重点：应用DHTML效果，制作滚动字幕，插入Flash影片，设置网页背景考音乐。
2．教学难点：动感网页和动态网页的区别。设置字幕的速度，设置Flash影片的透明方式 。
三、教学准备
1．教学环境：Windows XP操作系统，FrontPage 2003，多媒体广播控制系统，因特网环境。21世纪教育网版权所有
2．教学资源：教学资源包（微视频、插图、客家节日网页等），课件。
四、教学过程
教学环节
教师活动
学生活动
设计意图
一、创设情境，激发兴趣（3分钟）
1．展示“客家魂”网站中的“客家节日”网页（教材第49页的图9-1）。网页中的图片用到了DHTMI的图片飞入特效，标题文字用到了滚动字幕特效，实时播放的是Flash影片，配以轻快悦耳的背景音乐。
2．提问：请同学们观察这张网页，说一说：看完后你有哪些感受？
3．小结：这样的网页动感十足，给我们留下了难忘的印象。网页中有Flash影片、背景音乐，还加上了图片文字等特效。
4．揭题：动感网页。
观赏网站。
说一说自己观看网页后的感受。
了解构成动感网页的基本要素。
明确学习任务。
从学生熟悉的网页人手，通过看一看、说一说，感受动感网页的优点，激发学生学习新知的欲望。
二、合作交流，理解新知（5分钟）
1．引言：客家魂网站由许许多多的网页组成，有些网页是静态的，有些富有动感。
2．布置任务：浏览客家魂网站，组内讨论：
(l)哪些网页是动感网页？
(2)上网找出一个动态网页的案例，并说说它与动感网页是否相同。
（教师来回巡视、点拨）
3．小组汇报：请各小组派代表汇报本小组同学探究、交流、讨论后得出的结论。
4．点评与小结。点评学生汇报时的亮点，简明扼要总结动感网页与动态网页的区别：动感网页一般指网页元素在视觉上给人以动的感觉，如飞入、滚动、播放等；动态网页指采用动态技术自动生成的网页，它也可以是静态的。
感受动感网页。
分组讨论，用自己的语言说出动感网页与动态网页的区别，学会辨别两种不同的网页。
倾听小组代表的发言，纠正自己错误的见解。
理解动感网页的特点，学会区分动感网页与动态网页。
通过真实的因特网环境，以任务驱动的方式，培养学生的观察力、思维能力。
通过列举出动感网页，初步学会区别动感网页与动态网页。教师在评价学生汇报时，注重过程性评价，提高学生学习积极性，培养学生的语言概括能力。
三、任务引领，获取新知（20分钟）
1．学习应用“DHTMI．效果”工具栏制作图片飞入效果。
(1)边讲解边演示：如何实现网页加载时，海鸥图片从右下角飞入的动态效果。
(2)学生尝试练习。在Front-Page中，打开半成品网页“kjjr. htm”，选中海鸥图片，实现从右下角飞入的动态效果。
(3)小结：“DHTML效果”工具栏中，响应事件有单击、双击、鼠标悬停、网页加载等，应用效果有逐字放入、弹起、飞人等，效果选项有从右端、从底端等。我们要合理使用DTHML动态效果，为网页增色添辉。
2．学习应用“Web组件”制作字幕。
(l)引言：请同学们打开桌面上老师发过来的学习包，观看微视频：插入“Web组件”之滚动字幕。
(2)出示任务：在“kjjr. htm”网页中，选中“客家端午节挂葛藤由来”这几个字，添加滚动字幕。
(3)巡视：对个别学生进行辅导，既面向全体，又关注个体。
(4)学生汇报探究结果。
(5)小结：滚动字幕就是人们通常所说的跑马灯，位于Web组件当中。利用滚动字幕，可以增强网页的动感，常用来显示通知、欢迎信息、产品介绍等。
3．学习插入Flash影片，设置背景音乐。
(1)出示分层任务内容。
①基础任务：继续在客家节日网页中插入Flash影片，影片位于网站的“Flash”子文件夹中。给网页设置背景音乐，音乐位于“sound”子文件夹中。
②进阶任务：设置插入的Flash影片背景为透明。
(2)引导学生开展分层任务活动。
(3)巡视指导，及时鼓励评价。
(4)引导小组同学互帮互助。
(5)小结：Flash影片能够带来强烈的视觉、听觉冲击，在插入时可以设置影片的大小、对齐方式、透明度等。通过设置背景音乐，既能增加网页的动感，又能增强主题的表现力。我们要合理使用动感元素，使我们的网页动感十足，富有吸引力。
聆听讲解，观看演示。
开始操作练习。
了解DHTML动态效果的种类和特点。
了解滚动字幕命令所在位置，自学操作步骤。
明确学习任务。尝试添加滚动字幕。
汇报添加字幕操作步骤。
了解滚动字幕的作用。
明确学习任务。
选择任务，进行操作。完成后按要求保存，提交至教师机。
了解Flash影片、背景音乐的作用，懂得合理使用动感元素。
通过观看演示，动手操作，了解DHTML效果的用途和操作步骤，充分感知动感网页所带来的神奇效果。
在微视频的帮助下，学生开始小组合作探究学习，以更好地掌握重点知识。
分层任务设计满足各层次学生探究学习的需要。引导学生选择适当的任务，在操作中巩固所学知识。
四、主动探究，迁移提高（9分钟）
1．出示任务：请同学以小组为单位，完成教材创新活动：新建一个民俗风情网页，让网页初具动感。可以使用DHTML效果、滚动字幕、Flash影片、背景音乐等。
2．让学生动手练习。
3．巡视学生，个别辅导，适时点拨。引导规范保存文件，并提交至教师机。
4．展示小组完成的网页，由学生代表讲述创作思路。
5．引导全班学生一起评价作品。
6．小结：合理地应用动感元素，可以更好地展示民俗民风，让网页显得多姿多彩，给浏览者留下深刻的印象。
小组合作，上机实践，完成任务。
在小组讨论的基础上，独立完成。
及时帮助有困难的同学。
欣赏其他同学的作品，学会评价他人的作品。
了解动感网页的作用。
通过创新活动，加强对动感网页的理解，提高学生的评价能力，巩固本节课所学内容。
五、展示点评，梳理总结（3分钟）
1．设问：同学们，通过这节课的共同探究，我们有了哪些收获？
2．师生共同归纳这节课知识点：
(1)网页的动感是视觉带来的效果，这种动感网页不是动态网页。
(2)应用DHTML效果可以在网页上浏览到动态变化的图片。
(3)应用Web组件制作字幕，可以实现字幕滚动，滚动方向可以调整。
(4)插入Flash影片，使得网页动感十足。
(5)设置背景音乐，可以丰富浏览者的感官享受。
3．让学生填写教材的活动评价表，反馈填表情况。
4．总结：网页的世界可真精彩。有了DHTML效果、滚动字幕、Flash影片、背景音乐等，不仅大大增强了网页的动感，而且使得网页更加生动富有趣味。只要我们认真学习，多加操作，一定会掌握更多的网页制作技巧。
和老师一起归纳这节课知识点。 填写活动评价表。
回顾这节课所学知识。
及时的总结，有助于学生将零散的知识系统化．加深对所学知识的认识，进一步培养学生学会交流、总结学习过程的方法，有效提高学生的语言表达能力。
五、板书设计
六、教学反思