《WEB前端框架应用》-教案全套 第1周第1次-初识Bootstrap -18周第2次-验收课设

《WEB前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元初识Bootstrap单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标了解Bootstrap框架的相关知识。Bootstrap框架入门的基本操作（下载、安装等）。能够正确下载Bootstrap框架开发包；能够搭建Bootstrap框架开发环境，并运用Bootstrap框架创建一个最简单的程序。培养学生自主探究和解决问题的能力；培养学生严谨的逻辑思维能力；培养学生爱国主义精神，塑造积极进取的品质。教学重难点教学重点掌握Bootstrap框架下载及开发环境搭建。教学难点搭建Bootstrap框架的基本HTML代码。教学策略教学组织以任务为导向，将教学内容进行结构化和学习化处理，采用线上、线下混合式教学模式，整个教学过程分为课前、课中、课后拓展三个教学环节，职业核心素养和文化素养的培养贯穿始终。教学方法鉴于学生缺乏实战，沟通技巧欠缺，教师采用PPT讲解、案例教学，以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学认识Bootstrap框架，了解Bootstrap框架的相关知识，下载并导入到项目中。备课：教学思路整理；在职教云平台或QQ群发布课程内容和课程目标，并提出预习的测试问题。阅读ppt、教材，观看微知库视频，思考教师提出的问题，参与课前讨论与测试活动。以问题导入方式引起学生注意，激发学生的学习主动性；让学生了解课堂内容和学习目标，有针对性得阅读教材，为课中学习打下基础。课中研学对本课程整体介绍；引入教学内容：Bootstrap框架基本知识。讲解本课程基本内容、定位，让学生对课程有基本认识；提出问题：什么是Bootstrap框架？了解本课程定位；思考教师提出的问题。学生通过课前预习及讨论，解决教师提出问题，加深对教学内容的理解。Bootstrap框架介绍；Bootstrap框架环境准备；Bootstrap框架运用，编写一个简单的网页。讲解Bootstrap框架的基本知识；Bootstrap框架下载、环境搭建；Bootstrap框架导入，编写一个简单的网页，观察效果。认真听取教师的讲解；根据教师演示同步练习；遇到问题及时向老师提出。讲练结合，加深学生对理论知识的理解和提升实践应用能力，培养学生严谨的科学作风和踏实的工作态度。发布课堂任务：导入Bootstrap框架，创建一个带图片效果的网页。学生动手实践。检查学生完成情况，及时解决学生实践中遇到的问题；根据教师的讲解进行实践；遇到问题及时向老师提出。学生通过实操练习，进一步夯实理论基础。课堂小结：总结Bootstrap框架的基础知识，Bootstrap框架环境搭建，并能运用Bootstrap框架创建页面。总结本堂课程知识点，答疑。巩固所学新知识；通过归纳总结加深理解。对本次课程内容总结归纳，加深对知识的理解与掌握。课后拓展发布拓展作业：完成一个简单的Bootstrap实例。挑选优秀学生作品，在班级中进行分享；找出学生本次课学习中的共性问题，集中讲解。通过课后项目实例练习巩固所学知识；学生将课中遇到的新问题进行总结，并反馈给老师。强化课堂效果，丰富课堂教学，巩固课程知识点。教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改学生并没有很系统的学习过HTML、CSS的知识，在后续教学过程中需要适当补充必要的相关知识，对Bootstrap的介绍可侧重于其应用而非原理。《WEB前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元Bootstrap栅格系统单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标复习HTML+CSS选择的器的基本用法能使用HTML+CSS设计制作页面2.熟练使用css设计格式温故知新，引导学生对已学知识灵活应用；培养学生严谨的逻辑思维能力；培养学生爱国主义精神，塑造积极进取的品质。教学重难点教学重点掌握HTML元素的语法。教学难点灵活应用HTML元素。教学策略教学组织以任务为导向，将教学内容进行结构化和学习化处理，采用线上、线下混合式教学模式，整个教学过程分为课前、课中、课后拓展三个教学环节，职业核心素养和文化素养的培养贯穿始终。教学方法鉴于学生缺乏实战，沟通技巧欠缺，教师采用PPT讲解、案例教学，以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学请学生准备好在大一学习阶段，使用HTML+CSS设计制作的网页。为了更高效更简洁的设计制作网页，在开发中，会引入很多框架，本门课程围绕BootStrap框架的应用，帮助同学们学习快速设计网页。能够从官网上下载合适版本的BootStrap引导学生培养自主学习，主动学习的良好学习习惯。课中研学通过启发式问题，引导学生复习已有知识提问：大家在《静态网页设计》课程中学习了HTML的基本知识，那么什么是HTML呢？答：超文本标记语言（英语：HyperTextMarkupLanguage，简称：HTML）是一种用于创建网页的标准标记语言。学习需要温故知新，将不同学期的课程融会贯通，希望同学们对各门课的学习都坚持做到这点。发布课堂任务：运用DIV+CSS，实现一个布局的页面。学生动手实践。讲练结合，以任务为导向，演示编写代码；检查学生完成情况，及时解决学生实践中遇到的问题；根据教师的讲解进行实践，同步练习；遇到问题及时向老师提出。学生通过实操练习，进一步夯实理论基础。以上页面的实现讲解学生实践过程中的问题根据教师的讲解进行实践，思考自己的代码实现；遇到问题及时向老师提出。帮学生回顾html、css的相关知识课堂小结：总结html标签和css选择器、div+CSS布局。总结本堂课程知识点，答疑。巩固所学新知识；通过归纳总结加深理解。对本次课程内容总结归纳，加深对知识的理解与掌握。课后拓展发布拓展作业：运用DIV+CSS实现一个两栏布局的页面。挑选优秀学生作品，在班级中进行分享；找出学生本次课学习中的共性问题，集中讲解。通过课后项目实例练习巩固所学知识；学生将课中遇到的新问题进行总结，并反馈给老师。强化课堂效果，丰富课堂教学，巩固课程知识点。教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改学生不熟练HTML+CSS创建网页的过程、核心编码，需要引导学习，采用教师边讲边演练，学生跟练的方式进行授课，引导学生逐步熟悉必要的知识和编码，更利于学生理解。《WEB前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元Bootstrap栅格系统单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标掌握Boostrap的布局概念，即流式布局；掌握栅格系统的工作原理。能够运用Bootstrap栅格系统实现页面基本布局；理解Bootstrap栅格系统原理，实现响应式、列组合。培养学生自主探究和解决问题的能力；培养学生严谨的逻辑思维能力；培养学生爱国主义精神，塑造积极进取的品质。教学重难点教学重点掌握Bootstrap栅格系统工作原理，实现页面布局。教学难点Bootstrap栅格布局的定义方法，理解栅格对响应式的实现，列组合的方法。教学策略教学组织以任务为导向，将教学内容进行结构化和学习化处理，采用线上、线下混合式教学模式，整个教学过程分为课前、课中、课后拓展三个教学环节，职业核心素养和文化素养的培养贯穿始终。教学方法鉴于学生缺乏实战，沟通技巧欠缺，教师采用PPT讲解、案例教学，以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群、智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/indexBootStrap中文网：BootStrap官网：http://www.bootS教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学Bootstrap网格布局的工作原理是什么？2.如何运用Bootstrap框架实现页面排版？备课：教学思路整理；在职教云平台或QQ群发布课程内容和课程目标，并提出预习的测试问题。阅读ppt、教材，观看微知库视频，思考教师提出的问题，参与课前讨论与测试活动。以问题导入方式引起学生注意，激发学生的学习主动性；让学生了解课堂内容和学习目标，有针对性得阅读教材，为课中学习打下基础。课中研学回顾上学期所学页面布局方法DIV+CSS；引入教学内容：Bootstrap栅格布局基础。讲解回顾DIV+CSS页面布局的方法；提出问题：在Bootstrap框架中如何实现页面布局？1.回顾上学期所学的相关知识；2.思考教师提出的问题。学生通过课前预习及讨论，解决教师提出问题，加深对教学内容的理解。Bootstrap4中页面布局的思路；Bootstrap4栅格系统工作原理；Bootstrap4栅格布局的基本定义；Bootstrap4列组合定义。讲解Bootstrap4栅格系统工作原理；讲解Bootstrap4栅格布局的基本定义；讲解Bootstrap4栅格布局的列组合定义。认真听取教师的讲解；熟悉教师演示的代码；遇到问题及时向老师提出。讲练结合，加深学生对理论知识的理解和提升实践应用能力，培养学生严谨的科学作风和踏实的工作态度。发布课堂任务：运用Bootstrap4网格系统，实现一个布局的页面。学生动手实践。讲练结合，以任务为导向，演示编写代码；检查学生完成情况，及时解决学生实践中遇到的问题；根据教师的讲解进行实践，同步练习；遇到问题及时向老师提出。学生通过实操练习，进一步夯实理论基础。课堂小结：总结Bootstrap栅格系统布局的工作原理和基本知识，运用Bootstrap4实现页面布局。总结本堂课程知识点，答疑。巩固所学新知识；通过归纳总结加深理解。对本次课程内容总结归纳，加深对知识的理解与掌握。课后拓展发布拓展作业：运用Bootstrap栅格系统实现一个两栏布局的页面。挑选优秀学生作品，在班级中进行分享；找出学生本次课学习中的共性问题，集中讲解。通过课后项目实例练习巩固所学知识；学生将课中遇到的新问题进行总结，并反馈给老师。强化课堂效果，丰富课堂教学，巩固课程知识点。教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改未充分衔接学生HTML+CSS的薄弱点，栅格类名、响应式逻辑讲解偏抽象，后续注意适时补基础、多用实例演示，搭配实操练习，帮助学生具象化理解布局原理。《WEB前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元Bootstrap栅格系统单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标掌握Boostrap栅格系统列的重排定义；掌握Boostrap栅格系统列的嵌套定义；掌握Boostrap栅格系统列的偏移定义。能够运用Bootstrap实现页面排版布局；能够运用Bootstrap栅格系统灵活实现列重排、列偏移、列嵌套。培养学生自主探究和解决问题的能力；培养学生严谨的逻辑思维能力；培养学生爱国主义精神，塑造积极进取的品质。教学重难点教学重点Bootstrap栅格系统列重排、列偏移、列嵌套。教学难点Bootstrap栅格布局的列嵌套。教学策略教学组织以任务为导向，将教学内容进行结构化和学习化处理，采用线上、线下混合式教学模式，整个教学过程分为课前、课中、课后拓展三个教学环节，职业核心素养和文化素养的培养贯穿始终。教学方法鉴于学生缺乏实战，沟通技巧欠缺，教师采用PPT讲解、案例教学，以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/indexBootStrap中文网：BootStrap官网：http://www.bootS教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学如何实现页面多栏布局中列的偏移、重排？什么是Bootstrap栅格布局列的嵌套？备课：教学思路整理；在移动专业资源平台或QQ群发布课程内容和课程目标，并提出预习的测试问题。阅读ppt、教材，观看微知库视频，思考教师提出的问题，参与课前讨论与测试活动。激发学生的学习主动性；让学生了解课堂内容和学习目标，有针对性得阅读教材，为课中学习打下基础。课中研学回顾Bootstrap响应式布局知识；引入教学内容：Bootstrap布局中列位置的变化实现。回顾上节课所学Bootstrap响应式布局的知识；提出问题：在Bootstrap布局中如何调整各列的位置？1.回顾上节课所学的相关知识；2.思考教师提出的问题。学生通过课前预习及讨论，解决教师提出问题，加深对教学内容的理解。Bootstrap栅格布局的列重排定义；Bootstrap栅格布局列偏移的定义；Bootstrap栅格布局列嵌套的定义。Bootstrap栅格布局的列重排定义，代码讲解；Bootstrap栅格布局列偏移的定义，代码讲解；Bootstrap栅格布局列嵌套的定义，实例代码讲解。认真听取教师的讲解；遇到问题及时向老师提出。讲练结合，加深学生对理论知识的理解和提升实践应用能力，树立学生正确的技能观，强化动手实践的能力。发布课堂任务：设计页面，运用Bootstrap栅格布局，实现页面列重排、列嵌套。学生动手实践；讲练结合，演示任务代码；检查学生完成情况，及时解决学生实践中遇到的问题；根据教师的讲解进行实践；2.根据教师演示同步练习；3.遇到问题及时向老师提出。理论与实践结合，学生通过实操练习，进一步夯实理论基础。课堂小结：总结Bootstrap栅格布局的各列位置调整定义，运用Bootstrap栅格布局实现列重排、列偏移、列嵌套。总结本堂课程知识点，答疑。巩固所学新知识；通过归纳总结加深理解。对本次课程内容总结归纳，加深对知识的理解与掌握。课后拓展发布拓展的思考题：运用Bootstrap栅格系统实现W3school首页。找出学生本次课学习中的共性问题，集中讲解。通过课后思考题巩固所学知识；学生将课中遇到的新问题进行总结，并反馈给老师。强化课堂效果，丰富课堂教学，巩固课程知识点。教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改列重排、偏移、嵌套的逻辑讲解偏理论，实操引导不足，后续需简化案例，分步演示效果，搭配即时练习，帮学生理清层级关系与应用场景。《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栅格系统实现银行首页。挑选优秀学生作品，在班级中进行分享；找出学生本次课学习中的共性问题，集中讲解。通过项目实例练习巩固所学知识；学生将课中遇到的新问题进行总结，并反馈给老师。强化课堂效果，丰富课堂教学，巩固课程知识点。教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改以w3school首页为实例讲授栅格综合运用，学生对多组件适配、响应式调试吃力，后续介绍综合性案例需分步拆解模块，强化实时演示，搭配分层实操，降低综合运用门槛。《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元CSS布局单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标Bootstrap在页面排版中的格式设置能够根据页面需求，选择设置合适的排版内容进行页面排版。学习中国传统节日和传统文化，能在页面设计过程中融入传统文化教学重难点教学重点排版格式的识记和应用教学难点根据内容正确调用相应格式进行设置教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前预习本次课恰逢24节气中的秋分时节，课前查阅“秋分”节气的相关知识。发布预习要求找合适的案例和素材以便于自己网页的布局1、引导学生培养自主学习，主动学习的良好学习习惯2、引导学生关注中国传统节日，将知识和生活结合起来课中导学导入环节：复习旧知，引入新知1概括旧知识在前面的课程中，对bootstrap的栅格有了比较全面的认识。在案例的实践过程中，我们都是自己调整和设计格式。2引出新知识在bootstrap的框架中，也提供了非常多的排版格式和组件供使用，从本次课开始，我们进入CSS格式和组件的学习。介绍课前查阅的节气知识本次课恰逢秋分时节，秋分曾是传统的“祭月节”，中秋节由“秋夕祭月”演变而来。2018年6月21日，中华人民共和国国务院关于同意设立“中国农民丰收节”的批复发布，同意自2018年起，将每年秋分设立为“中国农民丰收节”。知识引入：通过秋分节气的诗词引入文字内容古时的文人墨客写了很多诗词来表达情感，比如：晚晴【唐】杜甫返照斜初彻，浮云薄未归。江虹明远饮，峡雨落馀飞。凫雁终高去，熊罴觉自肥。秋分客尚在，竹露夕微微

这些诗词都可以在页面中展示出来，我们选取其中的一首诗词作为页面内容，进行排版的格式设置。查阅相关的诗词内容临近寒露、霜降，马上也是重阳节，学生查阅相关的节气知识结合中国传统文化进行页面内容的设计，弘扬中国文化。讲授新课：文字排版排版主要是使用CSS对HTML元素进行样式设置及布局定位，排版在前端开发中的重要性不言而喻。Bootstrap提供了一套CSS样式，可以方便快速地帮助我们渲染修饰HTML元素，让页面排版变得更简单。排版中涉及的格式：标题：h1—h6;副标题small段落格式内联文本文本颜色文本排列字体样式等等选取两到三首古诗，调用bootstrap格式本次课结合秋分节气的相关内容，在页面中进行排版格式的设置，做到页面内容的排版和美化效果。学生实践在教室中查看学生完成情况，解答学生遇到的问题完成相应知识和诗词内容的排版设计在设置格式过程中，需要不断试错才能达到最终期望的效果。在这个过程中，培养学生踏实严谨的工作态度和细心耐心的工作品质。课后拓展进一步完成好案例，在格式上注意细节设置。发布预习任务查阅资料，预习新知复习和预习，提高学习效率教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改讲授Bootstrap文字排版时，未充分关联学生HTML基础，学生对类名应用、响应式排版逻辑讲解偏浅，后续需结合实例对比效果，增加即时调试练习，帮学生理清用法与场景适配。《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元CSS布局单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标不同列表的格式设置页面中设计代码显示效果使用bootstrap提供的格式进行美化表格调用bootstrap中的按钮格式设计按钮能够根据页面需求，选择设置合适的排版内容进行页面排版。能够在页面中选择合适的格式设置版面内容通过在页面中展示新闻列表，引导学生关注新闻，了解时事教学重难点教学重点列表、表格格式的识记和应用教学难点根据内容正确调用相应格式进行设置教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前预习关注新闻简讯内容，选取合适的时事内容作为页面设计内容。发布预习要求查找新闻资料（选择适合列表排版的新闻）1、引导学生培养自主学习，主动学习的良好学习习惯2、引导学生关注时事，筛选信息课中导学导入环节：复习旧知，引入新知1概括旧知识在前次课中，主要学习了网页中文字格式的设置，通过设置文字标题、段落、字体颜色等进行文字排版格式设置。2引出新知识本次课继续学习CSS格式相关内容。在页面中，经常会用到列表格式，作为软件专业的学生，在页面中写代码也是非常常见的。通过调用bootstrap中提供的格式，让页面的内容更加丰富美观。介绍课前查阅的节气知识引导学生关注时事，筛选信息知识引入：选举类似每日新闻的列表式新闻引入排版要求复习列表的定义和排版样式筛选适用于列表的新闻内容复习大一学习的旧知，结合时事引入新知讲授新课：列表、代码、表格等以任务为导向，通过列表形式，展示当日的新闻简讯，提出任务要求，学习列表调用方法以案例为导向，讲解代码格式效果以任务为导向，通过列表形式，根据表格讲授相应格式设置以案例为驱动，设置不同按钮格式完成图示列表效果设计完成图示代码格式排版练习表格基础格式设置练习按钮基本格式设置关注时事，通过水平列表展示每日新闻资讯。结合案例，讲练结合，掌握常用表格和按钮格式设置学生实践：在教室中查看学生完成情况，解答学生遇到的问题完成相应知识和诗词内容的排版设计完成音乐表格在设置格式过程中，需要不断试错才能达到最终期望的效果。在这个过程中，培养学生踏实严谨的工作态度和细心耐心的工作品质。课后拓展进一步完成好案例，在格式上注意细节设置。发布预习任务查阅资料，预习新知，结合课程内容，自主进行页面设计复习和预习，提高学习效率教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改页面格式的调用并不复杂，关键在于如何能根据页面实际需求进行使用，课堂上要引导学生多思考，多动手，在实践过程中能真正应用到学习的知识。《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元CSS布局单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标图像的格式设置图文框的格式设置能够根据页面需求添加图片和图文框能够在页面中选择合适的格式设置版面内容通过在页面中展示各地欢庆国庆的图片，共庆国庆，激发同学的爱国之前教学重难点教学重点图像的格式设置图文框的标签格式教学难点根据内容正确调用相应格式进行设置教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前预习浏览新闻，关注各地庆国庆举办的活动发布预习要求选择合适的新闻图片1、引导学生培养自主学习，主动学习的良好学习习惯课中导学导入环节：复习旧知，引入新知1概括旧知识我们已经学习了文字、表格、列表和按钮的格式设置。总结方法，通过class进行调用，注意辨析格式名称。2引出新知识本次课继续学习CSS格式相关内容。前面的内容主要进行文字相关内容的排版，本次课来学习图像相关的格式。回顾旧知，查漏补缺引导学生养成复习的好习惯知识引入：页面中如何插入图像根据不同页面效果，查看图片排版效果选择多张图片备用通过课前资料的查阅，引导学生关注生活，激发学生爱国情怀讲授新课：图像图文框以任务为导向，通过预定的图文排版的效果，讲解如何使用bootstrap进行图片插入和格式设置练习图片和图文框的基本调用结合案例，讲练结合，掌握常用格式设置学生实践在教室中查看学生完成情况，解答学生遇到的问题选择合适的图片，结合相应新闻内容，完成页面图文混排效果在设置格式过程中，需要不断试错才能达到最终期望的效果。在这个过程中，培养学生踏实严谨的工作态度和细心耐心的工作品质。课后拓展完善案例发布预习任务查阅资料，预习新知，结合课程内容，自主进行页面设计复习和预习，提高学习效率教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改以时事为案例讲授Bootstrap图像与图文框，增强了趣味性，学生学习积极性比较高，后续设计案例时可继续按照此思路，并注意聚焦核心用法，分步演示，搭配实操，帮学生掌握场景化应用技巧。《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元CSS布局单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标文本格式应用图像格式应用背景设置能够根据页面需求添加图片和图文框能够在页面中选择合适的格式设置版面内容1.通过少儿编程页面的设计，引导学生了解当今社会对编程学习的重视，激励学生更努力的学习专业课程。教学重难点教学重点案例的实现步骤，CSS格式的应用教学难点根据内容正确调用相应格式进行设置教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前复习复习css格式内容发布复习要求复习css布局的格式内容，参考少儿编程页面效果，进行布局规划1、引导学生培养自主学习，主动学习的良好学习习惯课中导学导入环节：复习旧知，引入新知1概括旧知识我们已经学习了文字、表格、列表和按钮以及图像的的格式设置。总结方法，通过class进行调用，注意辨析格式名称。2引出新知识本次课继续学习CSS格式相关内容，通过案例，对css格式应用有更深刻的了解根据少儿编程图的实现效果，进行页面布局规划规范网页设计步骤，引导学生从布局到实现完整实现项目知识引入：明确任务要求，实现案例目标发布案例目标任务讨论课前布局规范通过少儿编程页面的设计，引导学生了解当今社会对编程学习的重视，激励学生更努力的学习专业课程。案例分析分析页面结构和思路，给出关键结构思路按步骤设计制作页面通过少儿编程页面的设计，引导学生了解当今社会对编程学习的重视，激励学生更努力的学习专业课程。学生实践在教室中查看学生完成情况，解答学生遇到的问题完成案例的部分实现在设置格式过程中，需要不断试错才能达到最终期望的效果。在这个过程中，培养学生踏实严谨的工作态度和细心耐心的工作品质。课后拓展进一步完成好案例，思考案例后半部分的实现过程发布任务要求查阅资料，预习新知复习和预习，提高学习效率教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改发现学生在实践过程中对图文搭配、响应式适配把控不足，后续需细化模块拆分，强化可视化演示，搭配分层实操，助力学生掌握场景化布局技巧。《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元工具类单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标思政目标掌握边框、颜色、浮动等工具类能够根据页面需求，设置边框、颜色、浮动等工具类的调用页面中合理应用工具类温故而知新，要对学过的知识多实践，做到灵活应用教学重难点教学重点颜色、边框、浮动、尺寸等工具类的调用教学难点熟练运用工具类教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前复习完成完善百度词条案例发布复习要求和预习任务完善百度词条案例，预习工具类1引导学生培养自主学习，主动学习的良好学习习惯课中导学导入环节：复习旧知，引入新知1概括旧知识前面的课程中，我们学习了css常用格式的调用，能够快速使用css格式设置页面。2引出新知识本次课开始将学习工具类的调用，让页面元素更加丰富。回答预习中看到过的工具类检查学生预习情况知识引入：案例效果对比展示首先给学生展示页面，直观的感受工具类的优势。辨析有无工具类时页面的区别，效果好在哪通过页面的直观展示，让学生对工具类有直观的认识，明确学习目标新课讲解1.颜色2.边框3.浮动4.边距5.尺寸6.display属性的设置讲授演示调用过程动手实践查看运行效果工具类的这些内容在静态网页中似曾相识，但是使用工具类的调用，可以更简洁直观和方便，所以要对以前的内容温故而知新，做到灵活应用。学生实践在教室中查看学生完成情况，解答学生遇到的问题使用工具类，进行自主页面设计在设置格式过程中，需要不断试错才能达到最终期望的效果。在这个过程中，培养学生踏实严谨的工作态度和细心耐心的工作品质。课后拓展预习新知内容发布任务要求查阅资料，预习新知复习和预习，提高学习效率教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改讲授Bootstrap颜色、边框等工具类时，知识点零散且未突出实用场景，学生易混淆类名与适配逻辑。后续需分类整合案例，强化效果对比与即时实操，帮学生理清用法、提升灵活运用能力。《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元工具类单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标了解flex布局掌握用flex布局工具类格式能够在页面中使用flex布局设计页面内容能够灵活使用flex布局的格式1通过展示flex布局页面的内容，引导学生学习理论知识2、引导学生在日常生活和学习中勤于思考，尽量能把复杂问题简单化。教学重难点教学重点Flex布局方式教学难点熟练运用工具类教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前复习复习常用工具类发布复习要求和预习任务总结工具类的基本作用1引导学生培养自主学习，主动学习的良好学习习惯课中导学导入环节：复习旧知，引入新知1概括旧知识常用的工具类的调用，包括颜色、边框、尺寸等各类工具2引出新知识本次课继续学习bootstrap的工具类----flex布局预习反馈检查学生预习情况知识引入：案例效果对比展示首先给学生展示页面，直观的感受页面效果辨析有无工具类时页面的区别，效果好在哪通过页面的直观展示，让学生对工具类有直观的认识，明确学习目标新课讲解介绍flex布局涉及到的知识点（1）Display属性（2）flex-flow属性（3）justify-content属性（4）Align-items属性（5）Align-self属性（6）order属性（7）flex-grow和flex-shrink属性（8）.flex-fill类动手实践查看运行效果工具类的这些内容在静态网页中似曾相识，但是使用工具类的调用，可以更简洁直观和方便，所以要对以前的内容温故而知新，做到灵活应用。学生实践在教室中查看学生完成情况，解答学生遇到的问题使用工具类，掌握flex布局常用属性在设置格式过程中，需要不断试错才能达到最终期望的效果。在这个过程中，培养学生踏实严谨的工作态度和细心耐心的工作品质。课后拓展预习新知内容发布任务要求查阅资料，预习新知复习和预习，提高学习效率教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改讲授BootstrapFlex布局时，未充分衔接CSSFlex基础，对对齐、排列等核心属性讲解偏抽象，学生实操适配吃力。后续需简化案例，分步演示效果，搭配即时调试练习，帮学生理清逻辑与场景应用。《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元工具类单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标掌握和使用定位、阴影、垂直对齐等工具类能够根据页面需求选择和使用合适的工具类1、通过选择和应用工具类，培养学生在实践过程踏实严谨的工作态度，培养学生的匠人精神。2、引导学生在日常生活和学习中勤于思考，尽量能把复杂问题简单化。教学重难点教学重点Bootstrap的定位、阴影、可见性、图像替换等工具类教学难点熟练运用工具类教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前复习复习flex布局属性发布复习要求和预习任务实践复习1引导学生培养自主学习，主动学习的良好学习习惯课中导学导入环节：复习旧知，引入新知复习flex属性，明确新课任务：学习剩下的工具类。讨论总结学习工具类的思路将知识应用于实践中知识引入：案例展示首先给学生展示页面，直观的感受页面效果，分析用到了哪些工具类画出页面布局通过页面的直观展示，让学生对工具类有直观的认识，明确学习目标新课讲解嵌入embed定位阴影垂直对齐可见性溢出图像替换动手实践查看工具类的实现效果工具类的这些内容在静态网页中似曾相识，但是使用工具类的调用，可以更简洁直观和方便，所以要对以前的内容温故而知新，做到灵活应用。学生实践在教室查看学生实践完成情况，解答学生疑问完成工具类的实现效果熟能生巧。课后拓展预习新知内容发布任务要求查阅资料，预习新知复习和预习，提高学习效率教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改工具类种类多，涉及面广，需要引导学生多实践多练习，在页面中更好的选择和应用。《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元工具类单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标工具类的灵活使用能够根据页面需求灵活调用工具类来设计美化实现页面1通过案例实践，引导学生关注历史、文化、热点时事等内容的学习，培养学生做一个新时代全面发展的当代大学生教学重难点教学重点Flex布局、定位、颜色、尺寸等工具类的灵活调用教学难点Flex布局、定位、颜色、尺寸等工具类的灵活调用教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前复习复习复习各种工具类发布复习要求和预习任务实践复习1引导学生培养自主学习，主动学习的良好学习习惯课中导学导入环节：复习旧知，引入新知1概括旧知识我们学习了不同的工具类，能够分别调用实现局部页面效果。2引出新知识本次课通过学习电台的页面实践，让大家能够对工具类应用有更深的理解根据学习电台页面效果分析页面布局思路将知识应用于实践中知识引入：案例展示首先给学生展示页面，明确完成学习强国网站中学习电台页面画出页面布局通过页面的直观展示，让学生对工具类有直观的认识，明确学习目标新课讲解分析页面布局分析可以使用哪些已经学习过的css样式和工具类动手实践页面布局并添加内容工具类的这些内容在静态网页中似曾相识，但是使用工具类的调用，可以更简洁直观和方便，所以要对以前的内容温故而知新，做到灵活应用。学生实践在教室查看学生实践完成情况，解答学生疑问完成学习电台页面通过实践提高实际应用能力课后拓展预习新知内容预习表单查阅资料，预习新知复习和预习，提高学习效率教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改以学习强国学习电台首页为实例时，学生对Flex结合栅格的综合运用感到吃力，后续需细化模块拆分，强化实时演示，搭配分层实操，助力学生掌握场景化布局技巧。《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元表单单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标基础表单的设计基础表单格式的调用能够在页面中添加基础表单引导学生通过探究式学习方式构建自己的知识体系，培养创新能力。教学重难点教学重点基础表单的标签和格式教学难点表单格式的调用教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前复习复习工具类发布复习要求和预习任务复习工具类，完成个人简历制作，预习表单1引导学生培养自主学习，主动学习的良好学习习惯课中导学导入环节1概括旧知识前面学习了css格式设置和工具类的调用，对于页面在静态格式上的设置有了比较多的实践。2引出新知识本次课开始学习bootstrap提供的表单格式的设置，为页面中添加表单效果提供方便。讨论表单的应用场景，在哪些页面中会看见表单引导学生主动思考，对新知进行探索知识引入：案例展示结合当下的双十一活动，展示不同购物网站中的表单使用效果思考页面布局，讨论用到的表单元素通过页面的直观展示，让学生对表单的应用有明确的感受，明确学习目标新课讲解1.基础表单2.bootstrap提供的三种表单布局的实现动手实践：在编辑器中编写代码实现不同类型的基础表单。引导学生通过探究式学习方式构建自己的知识体系，培养创新能力。学生实践布置实践任务，实现内联表单和水平表单，在教室查看学生实践完成情况，解答学生疑问学生操作：在页面中分别添加内联表单和水平表单通过实践提高实际应用能力，引导学生通过探究式学习方式构建自己的知识体系，培养创新能力。新课讲解表单控件应用讲解输入框下拉框文本域单选复选表单焦点表单禁用表单大小动手实践：对每个控件进行实践操作在实践中熟悉表单控件的使用学生实践明确实践要求，在教室查看学生实践情况，解答学生疑问对上次课后的百度注册页面进行完善，添加表单元素通过实践提高实际应用能力，引导学生通过探究式学习方式构建自己的知识体系，培养创新能力。课后拓展课外实践，预习新知内容发布实操任务结合本次课内容，模拟百度注册页面通过实践练习提高知识的应用能力教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改讲授Bootstrap表单及常用控件时，较侧重控件样式讲解，忽视了表单验证、响应式适配及实际场景应用，学生实操时易遇适配问题，后续需结合实例强化逻辑拆解，增加交互练习，帮学生夯实实用技能。《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元表单单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标表单验证属性及值的设置输入框组的调用能够结合表单内容设置表单验证项能够使用输入框组进行搜索等工具栏的设置引导学生通过探究式学习方式构建自己的知识体系，培养创新能力。教学重难点教学重点表单验证的属性、输入框组的调用教学难点能够正确编写表单验证的内容教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前复习复习基本表单控件发布复习要求和实践要求修改自定义表单的格式通过实践提高知识应用的能力课中导学导入环节1概括旧知识在前面已经学习了设置表单控件的格式，包括基础格式和自定义格式，同时也通过查看css源码的方式学习如何自己对格式再修改。2引出新知识本次课继续学习表单，要能够在表单中增加验证内容和格式，让表单的设计更加丰富。思考平时在页面中哪些地方见过表单验证引导学生主动思考，积极探索知识引入：案例展示通过网站注册页面展示，提问，在页面中需要设置哪些验证要求思考需要验证的内容通过页面的直观展示，让学生对表单的验证有明确的感受，明确学习目标新课讲解1、表单验证基本格式形式2、输入框组的应用思考问题，验证方式可以怎样设置，并动手实践引导学生结合注册页面实际需求进行表单验证设计，将知识应用于实际案例中学生实践明确实践要求，在教室查看学生实践情况，解答学生疑问动手实践表单验证和输入框组设计通过实践提高实际应用能力，引导学生通过探究式学习方式构建自己的知识体系，培养创新能力。课后拓展实践复习，预习新知发布实践要求查看下前面课程内容的源码，在已有格式上学会修改控件格式。引导学生主动拓展学习教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改教学过程中发现学生对验证逻辑理解较慢，输入框组布局实操易出错，后续需增加基础HTML结构回顾，多设计分层实操案例，降低理解难度。《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元CSS组件单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标掌握表单的综合应用能够根据内容需求和制作表单能够使用bootstrap的格式应用于表单上根据模拟的表单注册页面效果，培养学生的实践应用能力，也提醒学生不要在网上随意注册和填写注册信息，注意防诈骗教学重难点教学重点表单的综合应用教学难点根据内容正确调用相应格式进行设置教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前复习复习表单内容发布复习要求和实践要求熟练使用控件制作表单页面通过实践提高知识应用的能力课中导学导入环节1概括旧知识我们已经介绍了表单的基本控件和格式的调用，能够选择不同的表单控件设计表单2引出新知识本次课通过一个案例来综合应用表单的控件和格式思考需要用到的表单元素引导学生主动思考，积极探索知识引入：案例展示查看案例任务效果，明确学习目标思考实践过程通过页面的直观展示，让学生对表单的验证有明确的感受，明确学习目标新课讲解：知识点讲解按照项目实现过程，讲解案例实现思路分析页面思路，准备动手实践引导学生结合注册页面实际需求进行表单设计，同时提醒学生注意网络诈骗，不要轻易的在不熟悉的网络平台上注册个人真实信息。学生实践明确实践要求，在教室查看学生实践情况，解答学生疑问动手实践完成表单页面设计通过实践提高实际应用能力，引导学生通过探究式学习方式构建自己的知识体系，培养创新能力。课后拓展实践复习，预习新知发布实践要求思考课后实训案例的实现思路引导学生主动拓展学习教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改本次注册表单综合案例授课，学生对验证逻辑与Bootstrap类名结合运用仍吃力。因基础薄弱，需拆解案例步骤，增加基础语法关联讲解，强化实操引导。《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元CSS组件单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标下拉菜单的结构下拉菜单的触发导航组件能够正确使用下拉菜单按钮组的应用引导学生在编码过程中代码规范、设计严谨。大力弘扬工匠精神。教学重难点教学重点下拉菜单的结构和调用方法，导航组件的使用教学难点正确设计和调用下拉菜单教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前复习复习css布局和工具类发布复习要求和实践要求实践复习，预习新知通过实践提高知识应用的能力课中导学导入环节1概括旧知识前面已经介绍了css的工具类和布局，以及在表单中应用bootstrap的格式进行设置。2引出新知识本次课开始来看看bootstrap提供的组件类，通过组件类，可以更便捷的在页面中设计容器格式和内容，方便页面的布局和制作。反馈预习过程中发现的问题引导学生主动思考，积极探索知识引入：案例展示展示下拉菜单的实现效果，让学生直观感受页面，明确学习目标明确需达成的案例目标通过页面的直观展示，让学生对表单的验证有明确的感受，明确学习目标新课讲解下拉菜单的实现步骤下拉菜单注意事项.dropdown-toggle及data-toggle="dropdown"的属性调用分裂式下拉菜单（按钮组）动手实践下拉菜单效果明确学习重点，强调规范编码学生实践明确实践要求，在教室查看学生实践情况，解答学生疑问实践分别使用button和链接实现下拉菜单效果强调实践练习，弘扬工匠精神新课讲解导航类：nav-link，nav-item选项卡导航.nav-tabs类pills导航导航二级菜单动手实践不同导航效果明确学习重点，强调规范编码和实践练习学生实践明确实践要求，在教室查看学生实践情况，解答学生疑问实践分别使用各类导航效果。（重点：选项卡效果）强调实践练习，弘扬工匠精神课后拓展实践复习，预习新知发布实践要求和预习要求预习导航栏、分页导航、徽章等新组件引导学生主动拓展学习教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改本次讲解下拉菜单和导航组件时，学生对组件嵌套结构、类名搭配理解模糊。因基础薄弱，需先梳理HTML结构，拆解类名作用，增加分步实操练习。《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元CSS组件单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标导航栏的结构导航栏组件的调用徽章的使用能够在页面中正确添加导航栏灵活使用徽章引导学生在编码过程中代码规范、设计严谨。大力弘扬工匠精神。教学重难点教学重点导航栏的结构和调用方法教学难点导航栏的结构和调用方法教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前复习复习导航组件的应用发布复习要求和实践要求实践复习，预习新知通过实践提高知识应用的能力课中导学导入环节1概括旧知识上次课已经学习了导航的应用，可快速生成导航2引出新知识本次课继续学习bootstrap提供的组件类----导航栏反馈预习过程中发现的问题引导学生主动思考，积极探索知识引入：案例展示展示一个完整的导航栏，让学生直观感受页面，明确学习目标明确需达成的案例目标通过页面的直观展示，明确学习目标新课讲解导航栏的整体格式navbar导航栏中的品牌图标导航栏中的表单固定导航栏导航栏配色响应式动手实践导航栏的各个元素明确学习重点，强调规范编码和实践练习学生实践明确实践要求，完成一个包含各个元素的导航栏，在教室查看学生实践情况，解答学生疑问完成包含不同元素的导航栏的设置强调实践练习，弘扬工匠精神新课讲解分页导航的结构徽章的使用动手实践徽章明确学习重点，强调规范编码和实践练习学生实践完成一个按钮上的徽章效果完成按钮上的徽章强调实践练习，弘扬工匠精神课后拓展实践复习，预习新知发布实践要求和预习要求预习卡片组件引导学生主动拓展学习教学评价采用多元化教学评价体系对学生学习全过程进行真实、客观、公平地评价，从知识、技能、素养、参与度等多方面展开。突出过程评价，包括课堂考勤、课堂活动参与情况、课堂实践练习、作业完成情况等，根据完成情况进行评分，评分既针对任务的实现情况，也考查学生对知识的理解掌握情况。反思诊改创建导航栏组件时，学生对响应式适配、类名组合运用掌握不足，因HTML/CSS基础薄弱，需拆解布局结构，增加基础样式关联讲解，强化分步实操。《Web前端框架应用》课程单元教学设计课程名称WEB前端框架应用授课单元CSS组件单元学时2授课教师职称授课地点多媒体机房教学目标知识目标能力目标素质目标1、卡片的结构2、卡片的应用场景进度条的结构和应用4、列表组的结构和调用5、媒体对象的应用1、能在页面中正确添加卡片2、会使用和美化进度条丰富页面元素3、在页面合适的位置添加多媒体对象4、能综合使用列表组等页面组件布局页面内容引导学生在编码过程中代码规范、设计严谨。大力弘扬工匠精神。2.通过卡片实现页面效果，引导学生观看和学习人物传记纪录片，了解历史，了解我国革命先烈的事迹教学重难点教学重点卡片的结构和应用进度条的格式、列表组、媒体对象的实现教学难点正确添加组件格式教学策略教学组织以具体任务为导向，结合丰富的线上学习资源和线上互动平台，对基础知识进行分解，开展本节课教学。整个教学过程可以分为课前线上答题测试、学习资源；课中案例教学；课后线上扩展。教学方法以任务为驱动，激发学生学习兴趣，创设情境，营造实战氛围，让学生多体验、多积累。教学准备环境准备理实一体化机房HBuilderX编辑器chrome浏览器资料准备教材、课件、课程标准、课程实施方案、案例资源资源准备国家教学资源库、职教云专业群BootStrap中文网：BootStrap官网：http://www.bootS智慧职教mooc学院《Web前端框架应用（Bootstrap）》课程/index教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前复习复习导航栏组件的应用发布复习要求和实践要求完成页面，区分导航、导航栏和分页导航通过实践提高知识应用的能力课中导学导入环节1概括旧知识通过导航和导航栏的学习，要区分这两个组件的概念和应用场景。2引出新知识本次课继续学习bootstrap提供的组件类----卡片和进度条、列表组、媒体对象，通过组件类，可以更便捷的在页面中设计容器格式和内容，方便页面的布局和制作。反馈预习过程中发现的问题引导学生主动思考，积极探索知识引入：案例展示展示卡片页面应用效果，分析卡片应用场景思考在哪些页面中会应用到卡片通过卡片页面的直观展示，明确学习目标新课讲解卡片的基本实现，引用实际页面案例进行分析和讲解2、进度条的应用动手实践卡片页面效果和进度条效果明确学习重点，强调规范编码和实践练习，通过卡片实现页面效果，引导学生观看和学习人物传记纪录片，了解历史，了解我国革命先烈的事迹学生实践明确实践要求，要求应用卡片布局的页面完成实践练习强调实践练习，弘扬工匠精神新课讲解列表组区分列表和列表组，结合徽章实现案例效果观察下图效果，思考页面构成3、使用媒体对象实现图中所示效果动手实践列表组和媒体对象通过案例的简单融合，培养学生的实践能力，引导学生在编码过程中代码规范、设计严谨，举一反三，大力弘扬工匠精神