[教学设计]电商美工之网页Banner设计

1、电商美工之网页Banner 设计【课题】 网页 Banner 设计【课时】8课时之第7、8课时，电商美工之网页Banner设计（90分钟）。【设计理念】为突显“做中学，做中教”的职教特色创新教学理念，同时也为了真正做到学以致用，学做结合。 因此， 在教学中采用基于工作过程导向的任务驱动教学法来组织课堂教学， 让学生在电商美工的职业岗位场景中学习和掌握电商网页Banner 的设计准则。采用工作过程导向，任务引领， 小组合作学习的方式，同时配合以微课导学视频、 学习交流论坛等多种信息技术教学手段进行课堂教学，扩展课堂容量，实现有效教学。【学情分析】网页美工与制作 课程是中等职业学校电子商务专业的一

2、门核心专业课程。 在第二学期开设， 学生在第一学期已经学习了 Photoshop 图形图像基础 课程， 已掌握了 Photoshop的基础知识和使用技法， 对本专题的学习打下了良好的基础。 在这节课之前， 学生已经学习了几个 Banner 制作案例，掌握了 Banner 设计的初步知识和技能，初步了解了 Banner 背景图设计、 广告文案排版设计以及辅助元素的设计。 对本次课将要完成的任务学生有了初步的了解和准备。针对职中学生理解力不强， 但动手能力较强的特点， 在整个专题的学习中，学生应具有自主探究学习的能力以及获取助学帮助资源的能力。 故本堂课是以学生为主体， 研学后教，进行探究学习及小

3、组合作学习探知电商Banner设计准则的自主学习过程。【教学目标】1、知识与技能：本节课主要是对学生通过前期的自主学习所产生的感性认知进行归纳与提升， 使学生能从企业实际应用的角度掌握Banner 设计的原理和方法， 重点掌握 Banner 设计的构图和配色准则。 同时使学生具备自主学习的能力， 独立解决问题的能力，团队合作的能力， 演示和表达能力。2、过程与方法：为了更好的体现以学生为中心的教学主旨， 本节课采用情境案例演示， 课堂问答， 学生自主探究， 作品展示与评价等方式突出学生学习主体的作用， 教师只起到主持和引导以及知识梳理和总结的作用。3、情感态度与价值观：培养学生通过本节课的学习

4、， 增强学生学习电商美工岗位的相关知识和技能的自信心， 健康、良好的审美情趣，以及自我管理和团队协作精神。【教学重点难点】教学重点：电商 Banner 的构图和配色准则教学难点：通过作品的类比、分析、交流经验，让学生掌握Banner 设计的构图和配色原则并能灵活运用于自己的作品设计过程。【教学策略与手段】职业情境，工作导向： 通过创设情境，分组教学，学生以电商美工从业人员的职业身份参与课堂学习， 通过完成一系列从行业典型工作任务提炼出来的学习任务来掌握相关的知识和技能。 校企合作单位真实工作任务的引入， 学生有机会参与企业实训的激励， 更有助于激发学生学习专业技能的兴趣。任务驱动、微课导学：

5、采用任务驱动教学法来组织学生学习，学生通过微课导学视频，超级美工微信公众平台提前了解所学知识， 课堂上采用下发学生工作页的形式， 组织学生分组进行团队合作学习， 通过完成工作页设计方案的填写， 检验学生自主学习的情况， 再有针对性的进行讲解和点评，实现研学后教。鼓励创新， 多维评价： 课堂上尽可能多的提供时间给学生进行实践操作和知识探究， 自 主设计方案的选择和实现， 有利于鼓励学生进行创新， 实时的优秀团队评选有利于鼓舞士气，课后多维评价的应用以及拓展任务的布置，让学生通过一个个美工任务熟悉工作流程。【课前准备】教学环境与媒体：多媒体机房、电子教育系统、投影仪、自制课件、导学微课视频、学生工

6、作页、任务素材、美工团队龙虎榜、最佳美工团队奖状。学生分组：按组内异质，组间同质的原则进行分组，6人一组，每组设立一名组长，担任电商美工 总监的工作角色，负责小组进度和工作状况的检查和督导。【教学过程】、热情开场，激活课堂一一引入职场情境（约 15分钟）环节一：互动破冰，宣布任务。（约1分钟）课前设置了一分钟与学生的互动破冰环节。各美工团队通过热烈的口号掌声激活课堂气氛，提振学习热情。教师宣布今天的学习任务一一完成客户的电商Banner设计招标任务,优秀小组将有机会到我们的校企合作单位梵米广告有限公司进行企业实训。环节二：回顾旧知，建立联系。（约8分钟）教师展示一组学生上节课自学后初步完成的电

7、商Banner设计作品，通过课堂问答的形式，请学生分析作品的优劣，引入本节课的学习重点一一电商Banner的构图和配色准则。环节三：明确任务，介绍框架（约6分钟）教师讲解电商Banner设计招标任务的具体要求，介绍本节课所用到的学生工作页，助学资源的获取方法，以及评价激励措施。并针对上次课学生存在的问题做出初步的分析，通过课堂问答的形式提醒学生要从营销和客户消费心理的角度进行作品设计。【设计意图】该环节的设置，其目的是让学生了解今天要学什么，怎么学，帮助学生更好的进入学习状态，激发学生学习新知识、新技能的期望，产生学习的内部动力。式、翻转课堂，研学后教一一体验工作过程（约 40分钟）任务一：解

8、读客户招标任务书。环节一：教师提供导学微课视频和学习资料，各美工团队在设计总监的协作下，完成工作页“任务1式一解读客户招标任务书”的填写。教师按各小组完成的效率和完成质量给予 加分奖励。环节二：分享“任务1一一解读客户招标任务书”的完成情况，进行师生互动点评。使 学生明白要从哪些方面对客户的设计需求进行解读以及如何做好前期的沟通和准备工作。并特别强调了广告文案的确定要主题明确，主次分明。任务二：确定Banner设计方案环节一：教师提供导学微课视频和学习资料，各美工团队在设计总监的协作下，完成工作页“任务2确定Banner设计方案”的填写。教师按各小组完成的效率和完成质量给 予加分奖励。环节二：

9、分享“任务 2确定Banner设计方案”的完成情况，进行师生互动点评。使学生懂得如何根据设计任务的要求选择适合的设计风格类型，掌握banner配色的方法和原则，并懂得根据设计任务选择合适的排版和构图样式，并学会绘制设计草图。【设计意图】该环节通过微课导学视频和助学微信公众平台等信息技术手段的应用，把学生学习相关知识内容的环节提前到课前，学生通过小组合作学习把所学知识迁移运用于情境任务，通过完成工作页设计方案的填写和师生互动点评，突出本节课所学重点一一懂得Banner设计的工作流程并掌握Banner设计的构图和配色准则。境、动手实践，提升技能一一获取职场技能（约 25分钟）各美工团队在设计总监的

10、分工安排下，根据各小组修改后的设计方案完成“任务3一一设计电商Banner广告”。该环节，教师提供学生前期学习 Banner制作案例的操作录屏文件， 以及学生上节课初步完成的设计作品，为了提高学生完成该工作任务的效率，教师还提供了我们的校企合作单位一一梵米广告有限公司的部分设计用参考素材。教师在学生分工合作完成设计任务的过程中进行巡视，对学生提出的问题进行解答。学生限时完成并上交Banner设计作品，教师按各小组完成作品的时间先后顺序进行加分奖励。【设计意图】通过该实践动手环节的设置， 检验学生对Photoshop知识掌握的牢固程度， 同时要求学生能灵活运用本节课所学知识，把所学的Banner

11、设计的构图和配色原则灵活运用于自己的作品设计过程。 小组合作学习，导学视频和资料的提供， 有助于实现难点的突破。 小组竞赛的方式，有助于促进学生学习的积极性。四、作品评价，课堂小结一一传授职场经验（约 9分钟）教师展示各小组完成的电商Banner设计图，选择有代表性的小组进行点评。归纳出Banner设计的职场经验：对齐、对比、留白、突出主题等设计准则。根据各小组课堂的表 现，评选出优秀美工团队，并认可表彰。【设计意图】通过各组作品的展示与对比，归纳强调电商美工设计的职场经验。通过现场表彰优秀团队，鼓舞士气，凤尾结束。五、课后拓展，精彩继续一一点燃创业热情（约 1分钟）各小组提交工作任务书，教师

12、布置课后拓展任务：登陆Banner学习论坛对本次的 Banner 作品进行投票评分，根据各小组设计的不同类型电商网站，自行设计符合网站风格的网站 Banner,并插入到各自设计的电商网页中，该网页作品将参加校园十大网商作品评选。【设计意图】通过在线投票评分系统，引入多维评价，教师、 家长和学生作为多维评价 主体参与学生学业评价， 有利于鼓舞学生的学习士气。 拓展任务的布置， 进一步巩固所学知 识，强化技能训练。让学生通过一个个美工任务熟悉工作流程。【教学反思】知识不是老师“教”会的，而是学生“学”会的；能力不是老师“讲”会的，而是学生 “练”会的。在本次课的教学过程中，以工作过程系统化为导向，

13、以“任务驱动教学法”为 主轴，结合采用职场情景法、头脑风暴法等教学方法，激发学生学习的积极性和主动性；微 课导学视频和学习交流论坛以及超级美工微信公众平台等多种信息技术手段的应用，有效的扩充了课堂的容量，把知识性的内容通过信息技术手段的传播让学生提前在课前了解和学 习，而课堂教学中则主要遵循“教师为主导，学生为主体，训练为主线”的原则，教学过程 中尽可能地增加学生参与教学活动和实际动手操作的时间，充分体现了 “以学生为主、以能力为本”的教学指导思想。【附件一】“网页Banner设计”学生工作页学生姓名所属团队学 习 目 标认知目标：了解电商Banner设计的风格定位，配色准则和构图形式。能力目

14、标：通过团队合作完成 Banner设计方案的制定并根据设计方案设计制作符合客户要求的 Banner作品。情感目标：熟悉工作过程，锻炼团队精神，形成健康审美情趣。工 作 任 务任务一：团队合作，讨论解读客户的电商Banner设计招标任务书。任务二：合作学习微课导学视频和学习资料，共同完成并提交本美工团队的Banner设计方柔。任务三：美工总监分配团队各成员的具体工作任务，合作完成Banner作品设计法提交。任 务 实 施 过 程解读客 户招标 任务书Banner尺、要求产品所属类目确定广告文案客户风格偏好其他要求任 务 实 施 过 程确定本 团 队Banner设计方 案方案名称风格定位时尚风复古风清新风炫酷风简约风确定配色主体模特或产品颜色Banner背景颜色文茶颜色配色及所占比例底色：主色：强调色：确定构图两栏式三栏式上下式简易式组合式1组合式2构图草图10任务完成客实施户 的过Banner程设计二序号工作职责岗位员工姓