4.4《网页的美化与特效制作》教学设计
一、
教材分析
网页美化是对前期所做的网页的修饰，是提升网站可观赏性的一个非常重要手段，是网站建设中一个重要的环节，所以本节是网站制作中最重要、最精彩的部分，也是学习网页制作的重点内容。正是由于有了各种美化网页的方法，网页才会显得有吸引力，因此，要通过本节课的学习，充分激发学生的学习兴趣。 二、
学生学情分析
学生们爱问好动、求知欲强、想像力丰富，对网页的制作有着浓厚的兴趣，对直观实践感知较强，正处于形象思维向抽象思维逐步过渡的阶段。因此，在学习过程中，应该鼓励学生自己观察，自我探究，亲自动手，进行讨论和交流，然后，师生共同归纳总结，体验学习。
在本节课前，学生已经学习了如何制作一个简单的网页，并且已经能对网页进行简单的修饰，这为学生进一步学习网页的美化做好了准备。
基于以上情况的分析，本节大胆采用“学生主体，教师主导”的课堂模式进行设计。
三、
教学策略
以任务驱动的方式引导学生，注重以学生为主体，让学生主动探究来构建知识体系，把理论应用到实践，倡导学生小组合作互助。在教学过程中，教师应引导学生参考借鉴优秀网站在动态效果、布局上的做法，自主地学习有关动态网页制作方面的知识，并应用于自己的网站设计中。 四、
学习目标
（一） 知识与技能
1、 理解掌握网页样式表css的三种分类及应用；
2、 学会在网页制作动态特效包括滚动字幕和图片动态效果； 3、 掌握在网页中插入动画和视频的方法。 （二） 过程与方法
1、 通过欣赏示范网页，了解网页风格统一美化的必要性； 2、 通过任务和实践掌握美化网页的几种方法。 （三） 情感态度及价值观
1、 体验精美网页的动态效果，培养网页设计的审美能力，激发学习兴趣；
2、 培养动手合作及创新能力，增强自主探究能力。 五、
教学重难点
（一） 网页样式表的使用 （二） 网页中图片动态特效的实现 （三） 网页中视频及动画的插入方法 六、
教学资源
（一） 计算机及多媒体网络教室
（二） Frontpage2003软件、《网站的开发》学习网站及微视频、网页制作半成品 七、 教学过程 教学内容 欣赏思考两个网页的不同（一个静态的，一个动态的） 师：通过观察，大家发现这两张网页的区别了吗？哪一张网页更美观，更吸引人？ 师：是的，第二张更美观，更吸引人，因为这张网页不仅样式更合理，还具有动态的特效，比如滚动字幕、动画和视频等动态特效。 师：由此可见，网页的美化是多么的重要，本节课我们就一起来学习一下网页的美化和特效制作。 自主学习5分钟 师：网页的美化和特效制作都需要哪些方法呢？ 请大家打开《网站的开发》学习网站，找到本节课的内容，快速浏览关于本节课的内容，重点了解网页样式表、动态特效和展示学科网站，引导学生自学本节课的重点内容 浏览学科网站，了解网页样式表、动态特效和通过学科网站学习，让学生了解网页样式表、动态特效和ActeivX控教师活动 展示网页 引导学生欣赏并指出前后两张网页的不同 学生活动 欣赏并感知前后两张网页的不同之处，了解网页美化的重要性 设计意图 通过对网页的对比，让学生了解网页美化的必要性，并感受滚动字幕、动态特效、动画等对网页的强化作用，引发学生的学习兴趣 环节时间 课堂导入3分钟 ActeivX控件在网页美化ActeivX控件在网页美化中的应用。 中的应用 件等本节课的三个重要知识内容。 教师讲解4分钟 师：刚才通过自学大家了解了网页美化的相关知识，分别是…… 师：今天老师就教大家三招网页美化的秘籍，第一招叫做应用“CSS”样式表。 CSS称为层叠样式表，用于对打开课堂练习“美丽的一中”网页，演观摩学习，理利用“美丽解CSS概念，的一中”网了解样式表页进行示范，演示CSS样式表的三种应用，了解通过样式表可以统一网页的整体风格，节省网页制作者的工作量 示讲解CSS 的三种应用样式表概念及三种不同方式，了解各自的适用场合 页面进行美化，CSS的可以使页面的应用方式 更加的美观。它有三种分类：1、内嵌样式表2、内部样式表3、外部样式表 请大家观看我来演示样式表的三种应用…… 亲身自主体验：体验外部链接样式表教师巡视指导 学生自主体验并演示效果 让学生体验CSS样式表在网页美化中的具体应用 体验 应用，为 “美丽的一中”首页3分钟 index.html添加外部链接样式表style.css 素材：桌面/美丽的一中 要求：根据刚才讲解，自己亲手体验一下利用外部链接样式表来美化网页。 自主探究亲身自主探究一：设置图片切换动态特效 任务：为“美丽的一中”首页教师巡视指导 学生根据学习网站自主探究并演示效果 让学生自主探究操作，通过观察对参数显示效果的影响，强化对知识体验 index.html下方的图片添加动态 切换效果（鼠标悬停事件） 素材：桌面/美丽的一中 指出问题与15分钟 要求：认真按学习网站的操作提示步骤操作，大胆实践，勇于探究。 通过实践思考问题: 1、 DHTML中一共有几种事件？ 2、 其它事件分别是什么效果? 自主探究二：制作滚动字幕 任务：为“美丽的一中”首页要求 发现问题，及时提示 思考每个问题，在实践中找到答案，强化学习效果 点的理解 学生为主体，教师作引导的课堂模式，学生学习的主动性更高，效果会更好 index.html的导航栏下方插入动 态字幕“欢迎光临我们的校园网！” 要求：认真按学习网站的操作提示步骤操作，大胆实践，勇于探究。 通过实践思考问题: 1、 滚动字幕的滚动方式有何不同？ 2、 滚动字幕的字体样式和大小可以调整吗？ 自主探究三：插入视频或动画 任务：为“美丽的一中”首页index.html插入学校简介的视频， 或将网页顶端的图片换成flash动画。 素材：桌面/美丽的一中/images/video(flash) 要求：认真按学习网站的操作提示步骤操作，大胆实践，勇于探 点名让完成效果好的同学进行操作演示 究。 通过实践思考问题: 1、 视频或动画的大小可以调节吗？ 2、 在编辑状态下，视频或动画能播放吗？ 综合巩固与提高，迁移运用——牛刀通过前面的探究，大家对几个美化网页的技能有根据要求操作，利用本节所学，小组合作完成一个让学生发挥自己想像，进行个性发挥，综合利用本节所学技能进行自主创作 实践 小试 小组利用教师提供的素材，结合亲身评比 体验学习的知识，小组合作完成10分钟 一个完整美观的网页，完成后保存文件夹并压缩，命名成“学号+姓名”格式，在学习网站里提交上传，参加课堂评比。 主题：《杨家埠木版年画探究》 基本要求： 1、为首页插入动态字幕“传承中华文明 探寻民俗文化”； 2、为首面“版画简介”添加图片按钮的动态效果； 3、为首页插入木版年画制作视频。 进阶要求： 1、为首页中间插入Flash动画。 2、为网页切换加入过渡效果。 交流评价总结展示学生作品 选择有代表性的作品进行展示 交流并点评学生作品 了初步认识，完整主题的需要进一步实践来巩固所学技能 网页作品。 展示学生作品，进行点评， 小结本节知上传作品 欣赏同学作通过点评作品，让学生品，进行点评 系统回顾本节所学内反思 总结课堂知识点
高中信息技术_网页的美化与特效制作教学设计学情分析教材分析课后反思
