“CSS3 animation动画”实现图片轮播 教学设计
2022-03-22魏巍
魏巍
授课类型:新授课
课 时:2课时
教学目标:
知识目标:1.了解什么是banner以及banner的构成要素;
2. 掌握banner的设计原则和规范;
能力目标:1. 能够按照banner的设计原则和规范,设计banner;
2.通过纠错改错,提升自主学习能力。
3.能够参照评价标准对作品进行评价
素养目标:1. banner設计制作上要运用美学原理,给人以美的享受,提高banner的视觉效果和感染力。
2.banner的内容与形式要健康,宣扬爱英雄、敬英雄的爱国情怀。
教学重点:banner的整体构思
教学难点:能够按照整体构思实现banner效果;宣扬爱英雄、敬英雄的爱国情怀。
教学过程:课前
教学环节:布置学习任务
教学内容:带着问题查找资料:
1.什么是banner?
2.Banner的分类及banner组成要素?
3.网页中的banner有什么作用?
4.Banner中的滚屏效果如何实现?
5.搜集相关素材文件。
教师活动:
发布任务:学习通中发布分组任务,明确任务内容。
提供学习支架:上传“banner”及“滚屏效果”学习资料;提供中国大学慕课、WEB前端开发学习平台网址。
查看学生完成情况:查看任务单,根据学生提出的问题,补充相关学习资料,做好教学准备。
学生活动:
组长负责本组成员的分工,小组成员分工搜集、整理加工素材。
自主探究,线上学习。
设计意图:通过完成课前任务初步了解banner,为完成本节任务做铺
教学过程:课中
教学环节一:案例引入(10分钟),布置任务
教学内容:浏览网址:https://www.inspur.com/ https://www.oceanengine.com/
提问思考:1、为什么要设计banner?2、这些banner有什么特点?
布置任务:设计制作首页banner
教师活动:
提问,布置任务
学生活动:观察网站效果,结合课前预习内容,回答问题,明确任务。
设计意图:检测预习效果,引入新课学习
教学环节二:学习banner的三个要素及使用注意事项(25分钟)
教学内容:一、知要素
1.banner构成的三个要素
2.三要素的主要作用:背景:衬托主题、烘托气氛
主视觉元素: 辅助表达主题
标题文字:是banner的主题
教师活动:
1.总结学生发言,展示banner构成的三个要素
2.提问:这三个要素在banner中有什么作用?
PPT展示,借助案例,带领学生分析三要素的作用
学生活动:发言、观察案例、思考问题、小组交流
设计意图:检测预习效果、引入新课学习
教学内容:
3.实际设计时的注意事项
教学环节三:了解banner设计的一般原则,学习动画属性animation(10分钟)
教学环节四:设计制作banner(15分钟)
教学环节五:Banner设计,整体构思,评价交流(10分)
教学环节六:修改完善,完成任务(10分钟)
教学过程:课后
教学环节: 布置课后作业
教学内容:
将作业上传到学习通中,制作自己的个性化网站
登陆WEB前端开发学习平台,完成对animation属性的测试题
教师活动:针对本组的问题提出修改建议
学生活动:继续修改完善
设计意图:培养学生认真做事、追求完美的态度。
教学反思:
1、教学效果:学生在设计制作首页banner的过程中,能够自主探究图片轮播的实现方法,线上学习方式使学生能够尽快的进入学习状态,夯实基础;课后自己制作个性化网站不仅满足学生个性化需求,而且使知识技能掌握的更加牢固。游戏通关在增加趣味性的基础上更是对知识点的再次提升。
2、不足及改进措施:个别学生主动学习能力有待提高,需要加强训练。
3、特色创新:
(1)让学生在设计制作的过程中,通过自主调研渗透爱国教育。
(2)线上线下相结合的学习方式,提升了学生的学习兴趣。
(3)项目中的实践应用,为学生将来适应企业岗位需求打基础。