项目7-2块级元素和行内元素、盒子模型

项目7中华优秀传统文化网站-讲好工匠故事课程名称授课内容授课学期2024-2025（1）学期授课班级授课时间授课地点授课形式理论+实践授课课时学情分析授课对象计算机应用技术专业学生，开设于大一第二学期。学生知识经验分析学生已掌握HTML基本标签和CSS基础语法，能编写简单的静态网页，对“元素”“样式”等概念有初步认知。学生学习能力分析对抽象概念理解可能存在困难，容易混淆margin与padding的功能差异；在多属性组合使用时，可能出现语法错误或逻辑偏差。学生思想状况分析对“制作中华优秀传统文化网站”有一定兴趣，希望通过技术实现可视化的文化内容展示。教学目标知识目标掌握块级元素的概念及使用方法；掌握行内元素的概念及使用方法；掌握盒子模型的概念及使用方法。能力目标能够独立编写HTML代码实现元素嵌套；能够熟练使用CSS编写盒子模型样式。价值目标通过学习网页布局核心知识，培养严谨的代码编写习惯和细致的布局调试意识，理解“精准控制”在网页设计中的重要性；结合“中华优秀传统文化网站”项目背景，在学习技术的同时，间接接触古代工匠、近代工匠的故事，初步感悟“精益求精、执着专注”的工匠精神，增强文化认同。重点难点解决策略：采取互动、分组讨论方法，通过案例落实重难点内容学习。思政资源教学方法线上线下混合式教学、任务驱动教学法、自主探究学习法、小组学习法、VR体验法教学手段多媒体、VR、动画视频等课程资源智慧树线上课程资源清华在线教学平台教学视频教学照片课程案例观看动画授课照片教学实施教学内容教师活动学生活动意义课前引入1.学生在智慧树观看块内元素和行内元素的教学视频及动画资源。2.小组讨论：在制作“工匠故事”网页时如何展示盒子类型的信息？3.学习智慧树教学视频-块内元素、行内元素和盒子模型知识。3.掌握三种列表标签的使用方法。1.教师通过智慧树教学平台发布课前预习讨论问答帖；2.教师通过智慧树教学平台发布块内元素、行内元素和盒子模型章节动画、仿真视频等资源。1.以小组为单位在线提交讨论结果；2.利用学习平台线上工具评选优秀小组。1.思政元素：引导学生了解工匠故事，感悟工匠精神；2.课前引入模式多样化，实现线上线下、师生混合的模式，激发学生学习兴趣学习目标掌握块级元素的概念及使用方法；掌握行内元素的概念及使用方法；掌握盒子模型的概念及使用方法。教师发布课前预习PPT和动画视频资源。学生以小组形式预习PPT内容，观看动画资源。以学生为主体，学生明确学习目标，有助于实践学习。课前测验在智慧树平台互动问答模块设计“互动问答+题库测验”两类课前测验，兼顾实时互动摸底与系统结果反馈。在智慧树平台题库模块发布课前测验试题，平台反馈测验结果，对学生掌握情况摸底。教师通过智慧树发布线上问答和课前测验。学生完成智慧树平台线上问答和课前测验。了解学生知识水平，调整教学方案。参与式学习-词汇学习（4分钟）1.box，盒子。在本章中将所有元素视为矩形的盒子容器；2.content，内容区，呈现主要信息；3.\t"/zwb1365237878/article/details/_blank"margin，边框外部区域；4.padding，边框内部区域。5.border，边框。讲解本次课相关专业英语词汇，引领学生反复读并且记忆。小组间互相反复读，达到理解记忆的效果。1.思政元素：学好专业英语词汇，助力工匠精神的全球传播。2.培养学生编程学习能力。参与式学习-VR体验（5分钟）参与式学习-播放视频（3分钟）参与式学习-任务一：区分块级元素与行内元素（20分钟）智慧树平台学习任务：1.块级元素与行内元素的核心定义：块级元素默认独占一行，可设置宽高；行内元素默认与其他元素同行排列，宽高设置无效；2.元素嵌套规则：块级元素可嵌套块级/行内元素，行内元素建议嵌套行内元素，行内元素嵌套块级元素会导致布局异常；引出知识点：1.演示讲解：通过代码，在浏览器中实时展示块级元素独占一行、行内元素同行排列的效果；2.对比“块级嵌套块级”“块级嵌套行内”“行内嵌套行内”的正常效果；3.通过清华在线平台发布课堂小测。明确知识点：1.学生通过教师讲解，掌握块级元素与行内元素的核心定义；2.学生通过教师讲解，编写代码在浏览器中预览并记录不同嵌套方式的显示效果；1.思政元素：通过分析“区域划分”的合理性，初步培养严谨的网页结构设计思维，贴合“工匠精神”中“注重细节”的内涵；2.引导学生自主探究；3.通过智慧树平台课堂小测，了解学生知识点掌握情况。参与式学习-任务二：拆解盒子模型结构（25分钟）智慧树平台学习任务：1.盒子模型四层结构：内容区、内边距、边框、外边距；2.结合“讲好工匠故事”网页：用padding调整工匠图片与边框的距离，用margin调整“古代工匠”区域与页面边缘的间距，用border给区域添加装饰边框。引出知识点：1.结构可视化：展示案例，用分层色块标注content、padding、border、margin的范围；2.教师发布课堂测试：完成border复合属性的不同书写顺序。明确知识点：1.学生学会属性调试，感受属性值与效果的对应关系；2.学生给“近代工匠”区域添加样式，对比修改前后的布局效果，小组内互相检查属性设置的正确性。1.思政元素：通过“微调属性值实现布局优化”的过程，体会“精益求精”的工匠精神，理解技术细节对网页美观度的影响；2.通过智慧树平台课堂小测，了解学生知识点掌握情况。参与式学习-任务三：掌握盒子布局关系（25分钟）智慧树平台学习任务：1.三种布局关系：①水平布局：元素水平排列，间距取左右margin之和；②垂直布局：元素垂直排列，间距取上下margin的较大值；③重叠布局：通过负margin实现元素重叠；2.完成古代工匠图片排版制作。引出知识点：1.教师逐一讲解代码逻辑，引导学生用所学布局规则解决问题；2.教师利用清华在线教学平台发布任务：古代工匠图片排列。明确知识点：1.学生掌握图片布局的排版方法；2.学生理解盒子布局的底层逻辑。1.思政元素：通过按规则实现精准布局的过程，强化严谨务实的做事态度，进一步深化对工匠精神的理解，实现技术学习与文化感悟的融合；2.通过学生们完成任务情况，准确掌握学生们的学习情况。参与式学习-总结提高（3分钟）课堂总结：总结知识点，强调重难点。点明任务：教师归纳总结，夯实基础。明确任务：学生通过回顾本节课知识点，拓展提高。思政元素：引导学生树立“严谨务实、精益求精”的工匠精神。课后测试（5分钟）智慧树平台发布课后测试：1.拓展任务：根据本节课的知识，完成“内容区域划分”“图文间距调整”“元素排列布局”练习。2.预习任务：学习智慧树下一节课的课程，观看课