当前位置:
首页 > 中学信息技术教研 > 学科交流

给网页添加动态效果教案

发布者:cj_zgp   发布时间:2012-12-28 09:31:21   点击数:

给网页添加动态效果教案
教学程序设计:教师活动学生活动设计意图一、组织教学:初始化环境,分发相关的资料和素材。二、课题引入:同学们一定都上过网,我们在上网的过程当中见到过不少的网页,很多网页不仅仅布局美观,色彩和谐,还有许多更加吸引人的动态效果,大家想不想自己也动手来制作一个生动活泼的个人网页呢?我们先来看下面的两个网页。打开教学平台,展示添加了动态效果的网页,对比普通网页,让学生仔细观察其中有哪些动态效果,并回答问题。
教学程序设计:
教师活动
  学生活动
  设计意图
一、组织教学:
初始化环境,分发相关的资料和素材。
二、 课题引入:
同学们一定都上过网,我们在上网的过程当中见到过不少的网页,很多网页不仅仅布局美观,色彩和谐,还有许多更加吸引人的动态效果,大家想不想自己也动手来制作一个生动活泼的个人网页呢?我们先来看下面的两个网页。
打开教学平台,展示添加了动态效果的网页,对比普通网页,让学生仔细观察其中有哪些动态效果,并回答问题。
三、讲授新课:
1、插入滚动字幕。
我们经常在网站上看到滚动的文字,这是怎么做的呢?在Frontpage2003中我们可以轻松完成这样的效果。
(1)首先确定要插入字幕的位置;
(2)单击“插入”菜单—“Web组件”-“字幕”,打开字幕属性对话框,设置文本;
(3)表现方式选择滚动条(这里提示有兴趣的学生可以尝试采用不同的表现方式会有什么不同的效果)
2、插入交互式按钮。
交互式按钮的插入与滚动字幕的操作类似,让学生在插入滚动字幕的同时,尝试插入“交互式按钮”。
引导学生发现插入交互式按钮更快的途径。
(提示:有能力的同学按提高要求进行操作,对按钮文字的字体、字号、颜色、等进行设置。)
结合学生的作品提醒学生操作中出现的一些问题,并加以分析讨论。
思考:做多个交互式按钮时有没有更快捷的方法。
3、插入gif动画和Flash动画。
动画效果可以通过插入有动态效果的gif图片或者flash动画来实现。提示学生插入gif图片和flash动画的区别。
说明:插入的gif图片或者flash动画应适当调整大小,要考虑网页整体的美观。
四、课堂任务
基本要求:完成滚动字幕、交互式按钮、gif动画以及Flash动画的插入;
提高要求:对插入的相关动态效果进行适当的设置,能熟练操作并自我创新,以达到美化网页的效果。
五、探究学习——拓展任务
    利用“DHTML效果”工具栏给网页中的特定文字、图片添加动感效果。
    可简单演示,主要是让学生去自主探究学习。
五、课堂总结:
1、 小结滚动字幕、交互式按钮的插入方法;
2、 gif图片和flash动画的区别以及插入方法;
3、 展示学生的作业。
做好上课准备。
回忆曾经看到过的网页。
仔细观察两个网页的不同之处,回答教师的问题,指出不同点(滚动字幕、交互式按钮、gif动画和和Flash动画等)
观察教师的操作过程,并思考字幕属性对话框中其他属性的设置方法。
学生尝试自己动手操作。按照基本要求完成任务一:插入滚动字幕。(提示:有能力的同学按提高要求进行操作,对字体、颜色、背景等进行设置。)
观察、分析“交互式按钮”对话框的各个标签项的内容和设置方法。
学生尝试自己动手操作。按照基本要求完成任务二:插入并设置交互式按钮。
和教师一起小结操作中出现的问题和经验。
区别gif图片和flash动画的不同之处,思考应怎样插入gif图片和flash动画。
观察教师操作,并尝试自己完成任务。
根据教学平台的任务要求,结合自己的能力,对每一种动态效果进行个性化设置,已达到美化页面的效果。         
完成作业后提交作业。
并且根据学习情况进行自我评价。
 让学有余力的学生充分展示自己的能力。充分调动学生制作网页的兴趣。
 由生活到课堂,自然过渡
先从整体上把握即将学习的知识点,激发兴趣
演示操作,逐步分解任务,初步体验成功。
初步学会按钮的插入方法,
活学活用所学知识。
让新旧知识衔接起来。
分层布置任务,让学生各尽其能,每个人都有收获。
开展分层评价。
教学反思:
几点不足:
1、本节课的引入不够细腻,没能发挥学生的主导作用,过渡的比较生硬。
2、在任务设计上虽然注意到了分层设置,但对每个任务的及时评价没有跟上,缺乏及时的总结。
3、教学过程中与学生的互动较少,课堂模式不够新颖。
4、学生作品的展示不够全面,缺乏典型性。
在今后的教学设计和课堂教学中需要充分发挥学生的主导性,进一步研究和分析分层教学,逐步提高信息技术常态课的质量。
 

部门概况

行政部门

业务部门