Bootstrap基础教程（第3版）（微课版）-教案 第11周第2次-JS插件1-模态框

《WEB前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元Javascript插件单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标认识Bootstrap插件库；掌握Bootstrap模态框插件的定义；掌握Bootstrap下拉菜单插件的定义。能够运用Bootstrap定义模态框插件；能够在网页中实现下拉菜单插件效果。培养学生自主探究和解决问题的能力；培养学生严谨的逻辑思维能力；培养学生动手实践能力和精益求精的工匠精神。教学重难点教学重点掌握模态框、下拉菜单插件的定义。教学难点模态框插件的定义。教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学什么是Bootstrap的JS插件？Bootstrap中如何定义模态框插件？Bootstrap中如何实现下拉菜单插件定义？备课：教学思路整理；在移动专业资源平台或QQ群发布课程内容和课程目标，并提出预习的测试问题。阅读ppt、教材，观看微知库视频，思考教师提出的问题，参与课前讨论与测试活动。激发学生的学习主动性；让学生了解课堂内容和学习目标，有针对性得阅读教材，为课中学习打下基础。课中研学回顾上一章课所学的组件相关知识；引入教学内容：Bootstrap的插件库，模态框、下拉菜单插件的定义和使用。回顾上一章介绍的组件相关知识；提出问题：什么是Bootstrap插件库？模态框、下拉菜单插件的定义和使用？回顾Bootstrap组件相关知识；思考教师提出的问题。学生通过课前预习及讨论，解决教师提出问题，加深对教学内容的理解。认识Bootstrap的JS插件库；模态框插件的定义和使用；下拉菜单插件的定义和使用。JS插件库的介绍；模态框插件定义，代码讲解；下拉菜单插件定义，代码讲解。认真听取教师的讲解；遇到问题及时向老师提出。讲解结合代码演示，加深学生对理论知识的理解和提升实践应用能力，培养学生谦虚谨慎的学习态度，脚踏实地的工作作风。课堂任务：运用Bootstrap模态框、下拉菜单插件定义，实现如下页面效果。学生动手实践；讲练结合，引导学生编写代码；检查学生完成情况，及时解决学生实践中遇到的问题；根据教师的讲解进行实践；2.根据教师演示同步练习；3.遇到问题及时向老师提出。理论与实践结合，学生通过实操练习，进一步夯实理论基础。页面效果如下图：课堂小结：总结本节课所学模态框、下拉菜单插件定义，实现在页面中的运用。总结本堂课程知识点，答疑巩固所学新知识；通过归纳总结加深理解。对本次课程内容总结归纳，加深对知识的理解与掌握。课后拓展课后拓展任务：页面多级导航菜单。完成课后拓展任务；挑选优秀学生作品，在班级中进行分享；学生将课中遇到的新问题进行总结，并反馈给老师。通过课后拓展任务巩固所学知识；学生将课中遇到的新问题进行总结，并反馈给老师。强化课堂效果，丰富课堂教学，巩固课程知识点。教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务