魏巍

授课类型：新授课

课    时：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）项目中的实践应用，为学生将来适应企业岗位需求打基础。