Bootstrap基础教程（第3版）（微课版）-教案 第3周第1次-栅格系统

《WEB前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元Bootstrap栅格系统单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标实现W3school首页页面实例练习；Boostrap栅格系统布局的综合运用。能够运用Bootstrap实现页面排版布局；Bootstrap布局综合灵活运用。培养学生自主探究和解决问题的能力；培养学生严谨的逻辑思维能力；培养学生工匠精神，塑造积极进取的品质。教学重难点教学重点通过项目实例实现Bootstrap栅格布局综合运用。教学难点Bootstrap栅格布局的项目实例。教学策略教学组织以任务为导向，将教学内容进行结构化和学习化处理，采用线上、线下混合式教学模式，整个教学过程分为课前、课中、课后拓展三个教学环节，职业核心素养和文化素养的培养贯穿始终。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/indexBootStrap中文网：BootStrap官网：http://www.bootS教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学制作W3school首页页面，如何运用Bootstrap栅格系统实现页面布局？备课：教学思路整理；在移动专业资源平台或QQ群发布课程内容和课程目标，并提出预习的测试问题。阅读ppt、教材，观看微知库视频，思考教师提出的问题，参与课前讨论与测试活动。激发学生的学习主动性；让学生了解课堂内容和学习目标，有针对性得阅读教材，为课中学习打下基础。课中研学复习回顾Bootstrap栅格布局知识；引入教学内容：栅格与其他类的综合W3school首页页面。回顾所学Bootstrap布局的知识；提出任务：运用Bootstrap栅格系统布局W3school首页页面。回顾Bootstrap栅格布局的知识；思考教师提出的问题。学生通过课前预习及讨论，解决教师提出问题，加深对教学内容的理解，培养学生严谨的科学作风和踏实的工作态度，强化动手实践的能力。栅格排序、与flex工具类、外边距类的结合使用行列类的使用讲解与工具结合、行列类实现书中小的案例强化实践操作发布课堂任务：设计页面，运用Bootstrap栅格系统，实现W3school首页布局。学生动手实践；提出任务，讲解任务实现方法和布局要点，要求学生独立完成；检查学生完成情况，及时解决学生实践中遇到的问题；根据任务要求进行实践；遇到问题及时向老师提出。强化实践操作，学生通过实操练习，进一步夯实理论基础。页面效果：课堂小结：总结Bootstrap栅格布局的知识点，实现项目实例。总结本堂课程知识点，答疑。通过归纳总结加深理解。对本次课程内容总结归纳，加深对知识的理解与掌握。课后拓展发布拓展的思考题：运用Bootstrap栅格系统实现银行首页。挑选优秀学生作品，在班级中进行分享；找出学生本次课学习中的共性问题，集中讲解。通过项目实例练习巩固所学知识；学生将课中遇到的新问题进行总结，并反馈给老师。强化课堂效果，丰富课堂教学，巩固课程知识点。教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改以