《Web前端开发》教学设计样例 任务6.3 改变元素的排列方式

教学分析课程名称Web前端开发学时2学时授课对象21级APP开发1班，21级信息安全1班、2班，21级APP开发1班，20级微信小程序工坊班选用教材《Web前端开发项目化教程》教学章节项目6优化国学文化网任务6.3改变元素的排列方式课程思政设计有的人比我们优秀并不可怕，可怕的是比我们优秀的人比我们更努力，让学生在调整元素的层叠顺序等日常一点一滴的代码开发中，锲而不舍，对自己的代码质量不断精进，时刻不忘高标准、严要求、遵规范，最终养成对每一句代码，对每一件事务，对今后从事的任何一个岗位都不放松的精益求精的“敬业精神”。同时，爱岗敬业，也是“职业道德”的基本准则，在教学中梳理整个国学文化网项目，在不断发现瑕疵，调整优化过程之中，需要我们坚守本心、忠于职守、勤于奉献，时刻牢记自觉遵守软件开发公约和保密制度、具备良好的知识产权保护观念和意识、不忘保护客户隐私。同时，通过国学文化网站建设，使学生在学习技能的同时，坚定文化自信。教学内容将职业素养的“职业道德、合作意识、质量意识、服务意识、学习意识”和工匠精神的“敬业、精益、专注、创新”引入课堂，以国学文化网站项目为例，依据Web前端开发工作流程构建模块化课程体系。本单元选自项目6中的任务6.3改变元素的排列方式，结合页面搭建中的优化布局结构部分，讲解浮动页面元素的方法与技巧、页面元素变为浮动属性后的影响等知识点。通过前面的学习，初学者不难发现，在默认情况下，网页中的元素会按照从上到下或从左到右的顺序一一罗列。如果仅仅按照这种默认的方式进行布局，网页将会显得单调、混乱。为了使网页的布局更加丰富、合理，可以在CSS中对元素设置浮动属性。本次课将对元素的浮动设置进行详细讲解。学情分析知识基础学生具有一定的前导知识基础，已了解默认的文档流方式以及要改变页面中元素自上而下、从左到右的排列顺序需要设置浮动属性等；但缺乏解决具体案例中浮动页面元素的方法与技巧。能力水平能够理解元素的浮动属性float及其3种取值方式，但是进入具体项目实施过程中，很容易分不清父元素丢失高度等特殊情况产生的原因及处理方案，亲自上手设置调试时总会出现非常多意想不到的各种各样的问题，分析问题、解决问题的能力有待加强。学习特征学生思维比较活跃，但是没有很好地运用到解决问题上；遇到难题时会不知所措，缺少解决问题的方法。能否及时帮学生解决问题对主讲老师的项目实施经验是否丰富是个极大的挑战和考验，同时也是学生能否树立程序员自信的关键期。教学目标知识目标能力目标素质目标1.理解元素浮动后与文档流状态的区别。2.掌握元素浮动的技巧，理解不同取值的区别和适用场合，以及父级元素丢失高度等特殊情况的产生原因。1.能够为元素设置浮动属性及合理取值。2.具备使用float属性的不同取值完成元素准确布局的能力。3.会多方法清除浮动。1.培养学生对工作不放松、精益求精的“敬业精神”和坚守初心、忠于职守、勤于奉献的职业道德。2.坚定学生的文化自信。3.培养学生自主探究的能力。教学重点理解什么是浮动并能准确设置元素的浮动属性给出合理取值，能在页面中恰当运用浮动实现页面元素的位置调整。解决重点措施：以生活实际举例及大量的案例代码解析知识点；知行合一，通过Web前端开发学习平台边学边练；课后拓展，举一反三。将颗粒化的知识映射在与生活贴近的案例中；通过上机操作加强学习、补充案例进行巩固、拓展项目得到提升。教学难点理解浮动层（脱离文档流）与文档流层的空间划分；掌握清除元素浮动的方法与技巧，尤其是能理解父级元素因所有子级元素发生浮动而丢失高度等问题，并能解决问题。突破难点措施：通过观看视频、画图演示过程、上机操作等加强学习理解持续强基，再利用补充案例进行巩固，深入思考元素之间的关系，然后进行思维导图的梳理总结，最后通过拓展项目任务完成情况考量突破难点，能力得到提升。教学策略教学组织基于Web前端开发工作过程，以企业案例贯穿始终，以任务为导向，将教学内容进行结构化、学习化处理，采用线上、线下混合式教学模式，将整个教学过程分为课前自主学、课中互动学、课后拓展学三个教学环节，将职业素养和工匠精神贯穿整个教学过程。教学采用线上+线下混合式教学模式，课前通过学习通推送预习作业要求学生自主学习，课堂教师对知识点梳理升华并指导学生动手实践答疑解惑，课后学生通过学习平台拓展训练强化提升。教学方法鉴于学生分析问题、解决问题能力不足，乐于动手实践的特点，教师本次课主要采用任务驱动法、案例教学法、小组讨论法，项目实战，学做一体，让学生多体验、多交流，寻求解决问题的方法。教学资源与手段项目案例思维导图视频学习通线上学习资源编程学习平台通关任务教学准备学生准备以“组内异质、组间同质”分组原则建立的学习小组为基本形式，学生按照Web前端开发岗位特点和职业需求分为敬业队、精益队、专注队、创新队、科学队、探索队，共6组，协作完成课后拓展及课前预习；每位学生配备电脑、U盘。环境准备多媒体智慧教室，配备电脑、平板电脑、书写白板、录播设备、WIFI全覆盖、主副屏幕、教室布置便于小组协作。资料准备教材、学材、PPT课件、思维导图、任务评分表、项目案例、视频。教学过程课前导预习教学环节教学内容与资源教师活动学生活动设计意图课前线上活动1.发布课前预习任务；2.查看作业；3.掌握学情。【评价方式】1.课前教师诊断性评价Web页面效果；2.平台数据客观性评价学生资源学习效果。1.借助编程学习平台及学习通在网络空间推送课前学习资源；2.布置项目任务：通过学习通发布课前预习通知和课前预习测验，将本次课预习内容制作成Web页面并进行上传发布，通过学习通查看学生作业，给予评分和修改意见；3.在后台统览学生线上线下学习表现的全景数据，学习通中发布主题讨论，收集学生在预习过程中存在的问题，随时掌握跟进学生的学习情况；4.根据学生提出的问题及课前任务完成情况，修正教学设计，二次备课，确定教学内容。1.接到预习通知后，登录学习平台，在线通过学习平台等信息化教学资源进行自主学习。完成预习任务和通关测试，提交课前预习作业；2.通过学习平台完成预习测验和Web页面制作任务，各小组推选学生代表进行作业分享；3.将遇到的问题评论至学习通的主题讨论中，提出个人课堂学习目标，发现问题，带着问题来上课，分析问题，学中做，做中学，解决问题。1.借助线上课程的线下智能教学延伸工具和基于智能工具的混合式教学模式融合，“配方”新颖，课堂升级，线上线下形成闭环。2.基于教学相长的线上、线下混合式教学模式，提供了多种教学任务支持，辅助线下课堂教学，将教师、学生和课堂主题紧密联系到一起，方便快捷的任务管理，完备的数据统计，全方位的教学管理，多元化教学任务，适用于多种规模的教学场景。3.现代技术手段时尚，成功吸引学生眼球。课中导学习教学环节教学内容与资源教师活动学生活动设计意图精神引领（5min）引入“中国第一程序员求伯君——一个人开发WPS击败200人微软团队！”的故事。引入金山老员工对求伯君的评价：“他（求伯君）不停地写啊写，饿了就吃方便面，困了倒下就睡”。讲一讲：耐心专注就是内心笃定而着眼于细节的执着、坚持精神，这是一切大国工匠所必须具备的精神特质。从中外实践经验来看，工匠精神都意味着一种执着，即几十年如一日的坚持与韧性。术业有专攻，一旦选定行业，就一门心思扎根下去，心无旁骛，在一个细分产品上不断积累优势，在各自领域成为领头羊。学一学：1.学生体会第一代码农的才华横溢，对软件开发的坚定追求，对名利的淡泊，对理想信念的执着。2.学生分享心得体会，关注职业素养和工匠精神，坚定理想信念，增强学习意识、服务意识，夯实学习基础。以第一代码农“WPS之父”通宵达旦、没日没夜写代码为例进行精神引领。求伯君痴迷写软件已经到了忘我的境地，写程序已经不再是为了钱。在潜移默化中培养学生的敬业精神和忠于职守的职业素养，确立专业态度和理想信念。复习回顾（10min）1.作业分享；2.复习提问；3.温故知新；4.任务总结。通过预习情况的展示让大家自主发现问题、重新认知预学内容并提出问题，再共同分析问题。导一导：1.根据课后巩固训练作业的反馈情况整合出易错问题进行全面深入的分析；2.梳理上次课的重难点，巩固旧知，引出新知。讲一讲：各小组代表展示分享盒子布局页面效果。答一答：回答复习问题，盒子的总宽度=width+左右内外边距之和+左右边框宽度之和。通过旧知新学，夯实知识点的掌握，融会贯通到技能水平的提升。提升预习的重视程度、完成质量以及学习有效性。夯实基础（20min）1.联系生活实际演示浮动效果：展示网页中常见的元素浮动效果，教师引导学生探究案例中涉及到的知识点；2.演示“元素的浮动属性”，引导学生有效认知：掌握页面元素浮动后的效果及应用。讲一讲：1.通过演示浮动效果的具体项目案例，引出并分析元素的浮动布局问题；2.教师对“浮动”的概念、浮动层（脱离文档流）与文档流层的空间划分；语法格式及应用效果进行讲解；3.对“浮动”的常用属性—左浮动、右浮动进行讲解，并进行代码演示，引导学生掌握基本原理的基础上，补充制作技巧，解决课上与课后拓展及从业后项目开发中经常遇到的特殊问题。学一学：1.学生观看效果演示，思考什么是浮动？浮动后的影响？并区分浮动方式其中的不同并判断不同的设置所产生的效果及不同的页面效果分别采用的是哪一种浮动方式，学习页面元素浮动的方式方法；2.掌握各场景页面元素浮动的设计技巧；3.思考归纳不同页面元素浮动应用的重点。思一思：通过真实项目案例，引起学生的思考，并探究得出分析判断的结果，对浮动方式形成准确认知。以实际案例解析知识点，感官认识清晰直接，印象深刻。通过思维导图、大量的举例、视频、画图、丰富的案例代码效果演示、动手实践等突破重难点。知行合一（25min）利用课堂教学管理软件下发任务书等相关教学资料，利用课堂教学管理软件控屏，通过引入企业项目案例带入新授知识点浮动，带领学生对任务进行分析和拆解，并引导学生进行分步骤制作。教师在制作过程中与学生互动，对提问题的学生进行屏幕控制，一对一手把手的差异化指导，体现学生的主体性，实现课堂信息化沟通，提高教学效率。1.优化国学文化网；（20min）2.分组完成创意改版。（5min）知行合一，边学边练；强化训练，举一反三。从而解决本次教学的重点部分。讲一讲：分别对“使用空标记清除浮动”以及“使用after伪对象清除浮动”的方法及应用范围进行讲解，并进行代码演示。对比“使用空标记清除浮动”以及“使用after伪对象清除浮动”的异同，并分析其优缺点。导一导：参照案例效果，设计优化国学文化网站板块。析一析：1.总结课前主题讨论的问题；2.分别指出元素应用浮动及清除元素浮动时需要注意的问题。教师巡视，对疑难问题给予解答。3.投屏演示学生设计制作效果。导一导：老师发布命题练习任务：完成项目中定位的设计，指导学生分组完成。学一学：1.认真学习案例的方式方法，举一反三；2.认真思考什么是清除浮动，有哪几种方式方法；3.学习如何通过多种方式清除浮动；练一练：1.学生按照任务书要求，以小组为单位进行任务分析。2.跟随教师进行作品分析，然后跟随制作，不懂的地方可以提问。3.动手制作案例效果并将独立制作好的作品提交，便于教师点评。4.创意设计，优化国学文化网站的版块。5.确定小组代表，根据题目完成分组练习。作品互评，二次制作作品或补充案例。知行合一：一张图片胜过1000个文字，而动画、视频、现场演示、动手实践都更加直观容易理解，让思想可视化，而不只是点缀!教师依托教学平台进行课前-课中-课后的全景教学设计，进而可以统筹规划和设计线上课程和线下课堂两部分的教学；分组讨论：对新课进行讲解前，先让学生分组讨论一组问题。请小组代表对以上问题发表见解。教师对上述问题进行解释总结。1.通过任务驱动教学，让学生在模拟实践过程中学习掌握方式方法。2.通过传统文化网的设计，既掌握技能，同时在潜移默化中培养学生的文化自信和职业素养，渗透课堂思政。指点迷津（5min）1.小组汇报学生代表分享小组的浮动设计方案；2.学生评价小组互评；3.教师评价点评学生设计方案；4.综合评分依据评分标准，登录学习通进行评分。比一比：邀请4位小组代表进行作业分享。评一评：1.教师对小组方案进行点评，给出修改意见；2.教师带领学生查看评分结果，鼓励学生积极参与互动；3.教师询问学生对于知识点还有什么不理解的地方，有针对性地进行答疑解惑。比一比：1.小组代表分享浮动设计方案；2.其他同学认真聆听，总结归纳并思考优化方案。评一评：小组自评；组间互评；认真听取评价意见，思考改进方案；4.学生查看评分结果。1.通过分享锻炼学生的沟通以及语言表达能力；2.通过评分系统增加学生学习的积极性。在网页制作过程中可适时停下来，让学生探索尝试；3.小组之间可以协作讨论，教师巡视，对疑难问题进行解答；特殊效果可以企业导师评价。巩固提升（20min）1.修改浮动设计方案，并完成其他案例效果；2.巩固浮动方式的使用方法与技巧；3.强化“清除浮动”的理解及解决方法；4.使用EditPlus软件完善浮动效果相关代码。导一导：指导学生修改浮动方案并完成设计。讲一讲：巩固浮动方法，强调代码书写规范与技巧。导一导：演示元素浮动后对其他元素带来的影响，并进行多种清除浮动解决方案的代码调试，指导学生完善浮动方案。改一改：根据老师评价与意见，组内讨论修改方案，并协作继续完成浮动设计。学一学：总结浮动设置及清除的方法，归纳思维导图笔记。练一练：完善方案，规范代码。通过巩固练习反复训练达到熟练掌握的目的，从效果快速表达，到修改方案，再到细化、优化方案，循序渐进的解决实际项目中页面元素的浮动问题，巩固本课知识点。持续强基后通过演示、对比、调试破解本次课的难点内容。总结归纳（5min）回顾总结；重点：浮动属性；难点：清除浮动；易错点：注意区分不同场景下清除浮动的用法。2.布置课后巩固及课前预习作业。1.教师总结本次课的重难点；2.分析学生普遍存在的问题及需要注意的易错点；3.布置作业：完成浮动拓展任务，预习【元素的定位】。1.认真聆听教师总结归纳及注意事项，更熟练地掌握如何给元素设置浮动属性及清除浮动元素带来的影响；2.提出尚存疑问，老师帮助解答；3.记录作业。教师带领学生对本课所学知识点进行回顾，通过总结归纳，提高学生的理解能力，使学生对知识内化于心，在Web开发中得以运用与体现。课后导复习教学环节教学内容与资源教师活动学生活动设计意图课后线上活动1.评价问卷；2.课后作业：完成浮动通关任务；3.坚持专业代码每日学习打卡。1.教师通过学习通发布教师评价问卷；2.教师通过学习通发布课后作业要求；3.教师扩充欧陆词典专业代码打卡词汇。1.学生完成教师评价；2.学生完成课后作业，提交至学习通；3.学生自主学习，查漏补缺。通过学生对老师评价，了解本次课教学效果；通过课后作业让学生复习重难点；通过坚持专业代码每日学习打卡，培养学生忠于职守、热爱岗位的职业道德。课后线上拓展1.拓展项目：完成学习平台中关于浮动的拓展练习；准备Web前端开发大赛；完成Web前端开发1+X职业技能等级证书考核练习。1.教师下发课后作业和单元测试题公告；2.发布网络学习平台中关于浮动的作业要求；3.教师推送Web前端开发大赛及1+X职业技能等级证书考核等相关拓展学习资料。1.学生利用课后时间分层次进行拓展任务训练。通过编程学习平台完成课后作业、单元测试和通过任务，并登录教学资源库平台进行拓展学习；2.完成“补充案例”，通过平台提交给教师，教师下次课进行点评。通过课后“补充案例”巩固拓展加强学习，帮助学生开展自主训练，巩固课堂学习成果。教师分发测试题目及案例素材，对于掌握较好的同学，可以通过补充案例对相关知识点进行提升，进一步拓展Web前端开发技能，培养学生自主探究能力。板书设计教学反思教学效果1.教学目标达成度高。根据提问、小组讨论以及练习反馈，90%以上学生掌握基础知识点，能够运用所学理论指导实践。2.课堂练习检测效果好。小组成员能够很好地协作完成任务练习，通过协作能够快速完成浮动设计，设计方案具有一定创新性。3.思政教育逐步渗透。学生通过学习第一代码农代表知名程序员的励志故事，感受到职业素养的重要性，能在代码开发过程中更多地去思考如何凝神聚力、精益求精、追求极致。每一句代码都要写好、写得更好、写到最