项目4 制作企业介绍页面（盒子模型）教案四

附件教案课程名称：授课教师：适用专业：教学单位：信息工程学院编制时间：年月天津滨海汽车工程职业学院授课教案首页授课班级：课程名称AI+网页前端开发企业级项目教程课程类型□理论☑理论+实践□实训总学时64授课地点周次8授课学时2教学目标学习目标：本项目案例以企业级网页核心模块开发为载体；让学生掌握盒子模型的核心原理与实操应用；技能目标：能独立完成企业介绍页“横幅模块”“导航栏”“企业介绍模块”“企业文化模块”的网页制作，确保布局规范、适配合理，符合企业级前端开发标准。素质目标：培养严谨细致的开发态度，注重代码的规范性、可读性和可维护性，养成“写规范代码、做优质项目”的职业习惯。教学重点企业级前端开发中，盒子模型的规范使用（如间距统一、布局对齐、响应式适配基础）教学难点四大模块（横幅、导航栏、企业介绍、企业文化）的布局协同，确保整体页面风格统一、适配协调。教材及教参《AI+网页前端开发企业级项目教程》版本978-7-5606-7987-1信息化资源PPT课件、学习通教学环节安排教学设计以“企业真实需求”为导向，先通过企业案例展示激发学生兴趣，再讲解盒子模型核心知识，结合AI工具辅助实操，通过小组项目完成四大模块开发，最后总结复盘、融入思政，实现技能与素养的双重提升。教学实施要求熟练掌握盒子模型核心知识与企业级前端开发规范，能熟练操作AI前端辅助工具，具备较强的项目指导和问题排查能力，善于结合教学内容融入思政元素，引导学生主动思考、积极实践。教学后记课后练习完成教材对应习题拓展提高教学反思教学内容与教学过程注释巩固复习复习盒子模型这一章的知识点：盒子模型就是将HTML页面中的元素看作一个矩形的盒子，每个矩形盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分组成。盒子模型的边框属性：边框（border）是围绕内容和内边距的线，可使用border属性设置其宽度（border-width）、样式（border-style）和颜色（border-color）。复习CSS常见的边框属性、单侧边框属性、圆角边框设置。复习盒子模型的边距属性，margin和padding属性。边距塌陷问题的解决方法。运用背景属性为网页添加美观的背景颜色和背景图片相关知识点。二、任务介绍讲授本节课的主要任务：使用前面所学的盒子模型相关知识，实现企业介绍页的“横幅”模块、企业介绍导航栏、企业介绍模块和企业文化模块网页制作项目。教师示范教师写出代码边具体讲解，可以分为如下6个步骤：1.创建项目2.设置网页通用样式3.实现企业介绍“横幅”模块制作4.实现企业介绍导航栏结构模块制作5.实现企业介绍模块制作6.实现企业文化模块制作学生实操给学生分成小组，要求每个组能独立完成企业介绍页的制作并提交作业。五、总结拓展，融入思政总结盒子模型这一章的知识点。思政元素：引导小组分工协作，强调“团队合作是企业项目开发的核心，每个人都要发挥自身优势，相互配合、互帮互助，才能高效完成任务”；鼓励学生勇于尝试、不怕