web前端设计（HTML5+CSS）——元素的浮动和清除

课程名称：web前端设计（HTML5+CSS）

适用专业：计算机应用技术

主要教材：网页设计与制作项目教程（HTML+CSS+JavaScript）（第2版），ISBN:9787115565983，主编:黑马程序员，出版社:人民邮电出版社，出版时间：2022年1月

案例作者： 王小燕

1. 案例主题

“元素浮动”案例，使学生在《web前端设计（HTML5+CSS）课堂教学中明白通过打开“中国党史网”、“中国载人航天”的网站感受网页效果，观察浮动对页面的影响。通过在教学项目中融入爱岗敬业、精益求精的工匠精神，要求学生在课后任务的网页内容中加入陕西特色农产品和国家新科技内容。将贯彻党的二十大精神，深入实施科教兴国、人才强国和创新驱动发展战略；并关注国家精准扶贫举措与成果，树立理想信念、坚定四个自信，弘扬传统文化、陪养家国情怀、提升民族情感的课程目标贯穿课程教学。

二、教学目标

（一）知识目标

1. 使学生理解元素的浮动，能够为元素设置浮动样式。

2. 使学生熟悉清除浮动的方法，可以使用不同方法清除浮动。

（二）能力目标

1.通过使用元素的浮动属性float对页面的影响，培养学生对页面排版的技巧。

2. 通过清除浮动的两种方法：clear 属性；使用空标签清除浮动；使用 overflow 属性清除浮动，消除浮动对对页面中其他元素的排版产生影响。

（三）素质目标

1. 提高学生正确认识问题、分析问题和解决问题的能力

2. 注重科学思维方法的训练和科学伦理的教育，培养学生探索未知、追求真理、勇攀科学高峰的责任感和使命感。

3. 培养学生精益求精的大工匠精神，激发学生科技报国的家国情怀和使命担当。

三、案例意义

高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念

本课程于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（任务）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。任务学习融入爱岗敬业、工匠精神等思政元素。学习过程中通过线上线下资源协同教学，使学生学习形成实境导学、任务实践、问题反馈、理实结合、项目综合、能力提升、岗位实践、能力达标、实境调优的闭环专业技能培养。

四、教学活动过程

利用开放共享的立体化教学资源，各种智能终端设备，课前、课中、课后纵向贯通，自学、助学、导学三种模式结合，搭建“立体化大课堂”，实现课上课下、线上线下、随时随地的学习、答疑、测试、学习情况跟踪。通过调整学习模式，扩展了课堂学习的三维空间，提高了课堂学习成效。教学全过程融合思政育人，培养学生精益求精的工匠精神。

“元素的浮动和清除”教学课时2课时，分为课前自学、课堂内化和课后升华三个阶段，其中涵盖自研自探、答疑探究、实训提升、多元评价和总结拓展五个环节，具体的教学过程设计如图1所示。

图1 教学实施过程图

（一）课前自研自探

教师通过学习平台发布学习资源：课件、预习测试题、相关网页链接等， 并留下课前思考问题。学生接收课前任务及资源信息，并完成预习测试题。

（二）课中——答疑探究

1. 打开“中国党史网”、“中国载人航天”的网站让学生感受页面的效果。

图3 中国载人航天网站

2. 对课前提出的问题进行解答和分析, 并引入本节课学习的内容，元素的浮动和清除浮动的影响。

3. 重点内容讲解：

（1）元素的浮动属性 float 及其用法；

（2）清除浮动的方法：clear 属性；使用空标签清除浮动；使用 overflow 属性清除浮动。

（三）课中——实训提升

1.观看“感动中国”视频，引发学生对感动中国人物优秀品质的学习。

图4 感动中国视频

2.展示案例“感动中国人物”的效果图。

图5 案例效果图

3.分析制作步骤，并加以简单演示。

图6 案例代码

4.对学生出现的问题进行启发式解答，把马克思主义立场观点方法的教育与科学精神的培养结合起来，提高学生正确认识问题、分析问题和解决问题的能力。

（三）课后拓展

1. 校级精品在线课程在智慧树网发布学习资源（https://coursehome.zhihuishu.com/courseHome/1000064884/153934/19?ticket=ST-32390088-aW1NcV4sgrJ5C5pWyc7a-passport.zhihuishu.com#teachTeam

）课程累计建设资源包括课程标准及教学实施方案1套、课程教学演示文稿44个、课程自建及中慧云启企业任务指导书46个、课程教学辅导微视频36个、中慧云启企业演示文稿22个、企业WEB前端开发实验任务指导书30个、课程电子试题库（4套在线测试题，200道考题）

2. 教学资源与在线教学设计有机结合，包括在线全过程教学监督指导，课前引导，课中视频学习（通过弹题增强学生学习粘性），课后包含小测、单元测，互动问答、资源评价、视频知识点扩充，并通过全国最美公务员、科技警察钟毅的事迹，激励学生养成吃苦耐劳的工作作风，努力提升技能回报社会、服务群众等思政元素。

3. 发布课后拓展练习：西安古迹介绍。让学生自行在网上查找资料并仿照案例做出相应的页面。

五、教学效果评价

教学内容由浅入深，从简单到复杂。教学过程循序渐进，课堂容量恰当。通过代码编写，学生基本上掌握了的元素浮动属性 float和清除浮动的两种方法的使用方法。通过课后巩固练习，能够使用所学语句解决实际问题。

教学活动中通过每个过程点的教学资源引入辅助完成教学活动，教学中运用任务驱动教学法、小组合作探究法等方法，激发学生的学习热情，促进学生进一步提高自主学习的能力、分析能力，课堂上逐步深入，运用翻转课堂有助于突破教学难点，易于学生掌握较复杂的内容。将抽象问题形象展示，实境重现，激发了学生的学习兴趣和动手欲望，引导学生自主学习，提高教学效果。