项目7-1浮动和定位

项目7中华优秀传统文化网站-讲好工匠故事课程名称授课内容授课学期2024-2025（1）学期授课班级授课时间授课地点授课形式理论+实践授课课时学情分析授课对象计算机应用技术专业学生，开设于大一第二学期。学生知识经验分析学生已掌握HTML元素分类（块级/行内）、CSS盒子模型及基础样式设置，能完成简单的静态内容排版。学生学习能力分析对抽象的布局原理理解困难，易陷入“凭感觉试错”的误区；在多技术融合应用时，逻辑梳理能力不足。学生思想状况分析希望通过完成“图文优化”获得成就感，对调试体验需求强烈；当遭遇顽固性问题时，易产生挫败感，需要及时的方法指导与正向反馈。教学目标知识目标掌握明确浮动的核心价值与基础规则；掌握清除浮动的原理与方法；掌握四大定位模式的特性与应用。能力目标能掌握定位模式灵活应用能力；能够具备浮动布局实践能力。价值目标通过技术优化工匠故事的呈现形式，体会“技术是文化传播的载体”，增强用专业技能“讲好中国故事”的责任感；培养耐心排查、理性分析的能力，理解“技术突破需反复打磨”，将工匠精神从认知层面转化为实践中的行动自觉。重点难点解决策略：采取互动、分组讨论方法，通过案例落实重难点内容学习。思政资源教学方法线上线下混合式教学、任务驱动教学法、自主探究学习法、小组学习法、VR体验法教学手段多媒体、VR、动画视频等课程资源智慧树线上课程资源清华在线教学平台教学视频教学照片课程案例观看动画授课照片教学实施教学内容教师活动学生活动意义课前引入1.学生回顾前置知识：简要回顾块级元素与行内元素的核心特性、盒子模型的四层结构及基础布局规则。2.展示“中华优秀传统文化网站——讲好工匠故事”的网页原型图，聚焦当前存在的布局痛点。3.提出问题“如何让4位古代工匠的图片在网页中横向整齐排列？。1.教师通过智慧树教学平台发布课前预习讨论问答帖；2.利用多媒体展示“讲好工匠故事”网页原型，用红笔标注“图片排列不美观”“成就信息不突出”等问题。1.以小组为单位在线提交讨论结果；2.仔细观察网页原型，结合自身浏览网页的习惯，感受当前布局存在的不美观之处，对问题形成直观认知。1.通过回顾旧知，为新知识的学习搭建桥梁，让学生理解新知识是旧知的延伸与拓展，降低学习的陌生感；2.紧密结合“讲好工匠故事”的项目需求，让学生明确学习目的，激发主动探索的内驱力。学习目标掌握明确浮动的核心价值与基础规则；掌握清除浮动的原理与方法；掌握四大定位模式的特性与应用。教师发布课前预习PPT和动画视频资源。学生以小组形式预习PPT内容，观看动画资源。以学生为主体，学生明确学习目标，有助于实践学习。课前测验在智慧树平台互动问答模块设计“互动问答+题库测验”两类课前测验，兼顾实时互动摸底与系统结果反馈。在智慧树平台题库模块发布课前测验试题，平台反馈测验结果，对学生掌握情况摸底。教师通过智慧树发布线上问答和课前测验。学生完成智慧树平台线上问答和课前测验。了解学生知识水平，调整教学方案。参与式学习-词汇学习（4分钟）1.position，定位，CSS属性，用于设置元素的定位方式。2.float，浮动，实现元素水平排列等布局效果的属性。3.clear，清除，与浮动配合使用。讲解本次课相关专业英语词汇，引领学生反复读并且记忆。小组间互相反复读，达到理解记忆的效果。1.思政元素：学好专业英语词汇，助力工匠精神的全球传播。2.培养学生编程学习能力。参与式学习-VR体验（5分钟）参与式学习-播放视频（3分钟）参与式学习-任务一：掌握浮动布局与清除浮动（20分钟）智慧树平台学习任务：1.浮动核心特性：理解float属性（left/right/none）使元素脱离标准流、水平排列且具备行内块特性的原理；2.清除浮动方法：掌握“额外标签法”、“父级overflow:hidden法”、“after伪元素法”，解决“父级无高度+子元素浮动”导致的布局塌陷问题。；引出知识点：1.通过代码示例，先展示未加浮动时图片垂直排列效果，直观呈现浮动特性；2.引导学生添加float:left和清除浮动的CSS代码。；3.通过清华在线平台发布课堂小测。明确知识点：1.学生按照教师引导，为“讲好工匠故事”网页中的古代工匠图片添加浮动属性，观察图片排列变化；2.小组讨论：交流浮动布局，讨论在实际项目中选择浮动方法。1.思政元素：培养严谨的网页结构设计思维，贴合“工匠精神”中“注重细节”的内涵；2.引导学生体会技术对网页呈现效果的重要性；3.通过智慧树平台课堂小测，了解学生知识点掌握情况。参与式学习-任务二：熟练运用定位模式（25分钟）智慧树平台学习任务：1.深入讲解相对定位（相对于自身原位置偏移，不脱离标准流）、绝对定位（相对于最近已定位父级偏移，脱离标准流）；2.结合“讲好工匠故事”网页：用相对定位微调工匠姓名标签位置，用绝对定位让“鲁班发明锯子”的成就信息悬浮在鲁班图片右上角。引出知识点：1.制作简单案例，分别演示相对定位、绝对定位、固定定位的效果；2.教师发布课堂测试：给出“讲好工匠故事”网页中鲁班图片及成就信息的HTML结构，要求学生用定位和z-index实现成就信息悬浮展示。明确知识点：1根据教师任务，为“讲好工匠故事”网页中的鲁班成就信息添加定位样式，反复调整参数，确保成就信息悬浮在正确位置且显示层级合理；切换不同工匠图片，检查成就信息定位是否准确。1.思政元素：培养学生根据需求选择合适定位模式的能力，提升对网页细节布局的把控力；2.通过智慧树平台课堂小测，了解学生知识点掌握情况。参与式学习-任务三：综合运用浮动与定位（25分钟）智慧树平台学习任务：1.综合运用浮动（实现多元素水平排列）、清除浮动（确保布局稳定）、定位（实现特殊元素悬浮与固定）技术，解决网页布局中的复杂问题；2.对“讲好工匠故事”网页进行整体布局优化。引出知识点：1.教师展示“讲好工匠故事”网页优化后的原型图，讲解各区域分别运用的技术（浮动、定位等），引导学生梳理优化思路。；2.教师利用清华在线教学平台发布任务：工匠图片的浮动与定位。明确知识点：1.学生自主对“讲好工匠故事”网页进行布局优化，整合浮动、清除浮动、定位等技术；2.在小组内展示自己的网页效果，介绍所用技术与解决的问题。1.思政元素：让学生体会到技术学习最终服务于实际项目与文化传播的价值。；2.提升学生综合运用技术解决复杂网页布局问题的能力，培养网页设计的整体思维与创新意识。。参与式学习-总结提高（3分钟）课堂总结：总结知识点，强调重难点。点明任务：教师归纳总结，夯实基础。明确任务：学生通过回顾本节课知识点，拓展提高。思政元素：引导学生树立“严谨务实、精益求精”的工匠精神。课后测试（5分钟）智慧树平台发布课后测试：1.拓展任务：根据本节课的知识，完成运用浮动实现工匠图片水平排列、清除浮动解决布局塌陷、用定位实现成就信息悬浮、完成网页布局优化的核心需求练习。2.预习任务：学习智慧树下一节课的课