项目5 制作公司招聘页（浮动与定位）教案20

附件教案课程名称：授课教师：适用专业：教学单位：信息工程学院编制时间：2026年2月天津滨海汽车工程职业学院授课教案首页授课班级：课程名称课程类型□理论☑理论+实践□实训总学时64授课地点周次10授课学时2教学目标（一）知识目标掌握企业招聘页的完整开发流程：需求分析→结构搭建→样式实现→功能调试→优化完善。理解企业级网页的布局规范：版心设置、模块划分、样式统一（字体、色调、间距）。熟练运用浮动、清除浮动、定位技术的组合，实现招聘页各核心模块（导航栏、横幅、图片展示区、企业文化、职位模块、侧边栏、页脚）。了解思政主题与网页开发的融合方式，能在页面中融入爱国、创新、责任等思政元素。（二）技能目标能根据企业招聘页效果图，独立搭建完整的HTML结构，合理划分模块层级。能运用所学CSS技术，实现页面的全局样式（版心、字体、色调）和各模块样式，还原设计效果。能综合运用浮动、清除浮动、定位技术，解决实战开发中的复杂布局问题。能完成思政主题实训“加入信创”页面的核心模块开发，实现技术与主题的融合。能对完成的网页进行全面调试，排查布局错乱、样式不统一、交互效果异常等问题。（三）素质目标培养企业级项目的实战开发能力，建立“需求→开发→调试→优化”的完整开发思维。提升代码的可维护性和规范性，学会按模块编写CSS样式，添加清晰注释。培养团队协作意识（模拟），能按模块拆分开发任务，理解大型项目的开发流程。树立思政与技术融合的意识，能将红色主题、社会责任等思政元素融入网页开发，实现技术的社会价值。养成精益求精的职业追求，注重页面的细节优化和用户体验，打造高质量的网页产品教学重点1.企业招聘页的模块划分与HTML结构搭建：导航栏、横幅、图片展示区、企业文化、职位模块、侧边栏、页脚的层级结构。2.全局样式的统一设置：版心1200px居中、字体（黑体）、色调（主色#0066ff）、内外边距重置。3.各核心模块的样式实现：导航栏：浮动排列+hover效果；横幅：背景图+文字居中；图片展示区：浮动布局+清除浮动；企业文化：卡片浮动+标签定位；职位模块：分类标签浮动+卡片排列；侧边栏：固定定位+hover显示隐藏内容；页脚：浮动布局+样式统一。4.思政主题实训的核心：在页面中融入爱国、创新、责任等思政元素，实现主题与技术的融合。教学难点页面全局样式的统一与一致性：确保各模块的字体、间距、色调符合设计规范，无样式错乱。复杂模块的布局协调：如图片展示区的多列图片排列、企业文化卡片的定位标签与浮动布局配合。固定侧边栏与其他模块的适配：避免侧边栏遮挡主要内容，确保页面滚动时布局稳定。思政元素与网页设计的自然融合：不生硬堆砌思政内容，通过页面主题、文字描述、模块设计传递正能量。综合调试与优化：排查跨模块的布局冲突、响应式适配问题、交互效果异常。教材及教参《AI+网页前端开发企业级项目教程》版本978-7-5606-7987-1信息化资源PPT课件、学习通教学环节安排教学设计1.理实结合：以模块化任务为核心，知识点对应实操场景，避免纯理论讲解。2.三维目标：明确知识、技能、素质目标，自然融入思政元素。3.分层适配：设计基础、提高、拓展内容，适配不同学生水平。4.闭环反馈：遵循“讲解-实操-纠错-总结-复盘”逻辑，强化知识吸收。教学实施要求1.讲练结合：实操占比≥60%，以案例演示+自主实操为主。2.规范把控：强调语义化HTML、模块化CSS，注重代码细节与注释。3.问题导向：聚焦高频错误，精准突破教学难点。4.过程评价：结合课堂表现、作业质量、实操成果综合评价。教学后记课后练习完成教材对应习题拓展提高无教学反思教学内容与教学过程注释（一）巩固复习（5分钟）提问回顾本章节核心知识点：浮动与清除浮动、相对/绝对/固定定位、z-index层叠顺序、“子绝父相”模式。展示企业招聘页完整效果图，引导学生拆分核心模块：导航栏、横幅、图片展示区、企业文化、职位模块、侧边栏、页脚，明确各模块的技术实现方案。强调：企业级网页开发需要综合运用多种技术，注重全局样式统一和细节优化，本节课将完成招聘页完整开发并进行思政实训拓展。（二）新课导入（5分钟）展示企业招聘页最终效果图和思政实训“加入信创”页面效果图，说明这两个页面是本章节知识的综合应用，包含了浮动、定位、清除浮动等所有核心技术。提问学生：“如何将所学技术整合应用，实现从模块开发到完整页面的落地？如何在技术开发中融入思政主题？”引出课题：本节课将进行企业招聘页综合实战开发，按模块逐步实现完整页面，最后完成思政主题实训拓展，检验本章节知识的掌握情况，明确本课时的三维教学目标。（三）新课讲授（65分钟）本环节采用“项目驱动+模块拆分+分步实现”的模式，教师带领学生按模块开发企业招聘页，每完成一个模块进行调试，最后进行思政实训拓展。模块1：项目准备与全局样式设置（10分钟）项目结构创建：带领学生在VSCode中创建项目文件夹CorporateRecruitment，包含：页面文件：05-Recruitment.html；资源目录：images（存放图片素材）；样式文件：css/05-Recruitment.css。全局样式设置（05-Recruitment.css）：样式重置：清除所有元素内外边距，设置box-sizing:border-box，统一字体为黑体。版心设置：.container类宽1200px、居中显示。全局色调：主色#0066ff，链接默认色#666，hover时变主色。引入样式文件：在HTML头部引入CSS文件，确保样式生效。模块2：核心模块分步实现（45分钟）按“从上到下”的顺序，带领学生逐一实现各核心模块，边讲解边实操，强调技术应用和细节优化。模块1：导航栏结构：logo（左浮动）+左侧导航项（左浮动）+右侧登录/注册（右浮动）。样式：高60px，导航项hover时文字变蓝、底部添加蓝色边框，父容器添加清除浮动类。实操：学生跟随教师编写代码，重点掌握浮动排列和hover效果实现。模块2：横幅结构：外层banner容器+内层文字容器。样式：宽100%、高300px，背景图全屏覆盖，文字白色、居中显示，padding-top调整垂直位置。实操：重点掌握background-size:cover和文字居中技巧。模块3：图片展示区结构：左侧大图片+右侧上下两张小图片，父容器设clearfix。样式：左侧图片左浮动（宽690px），右侧容器右浮动（宽40%），内部图片上下排列，间距20px。实操：重点掌握浮动布局和图片尺寸适配。模块4：企业文化结构：标题+描述+4张卡片（父容器clearfix）。样式：卡片左浮动（宽260px），间距50px，添加阴影和圆角，卡片内标签用绝对定位（子绝父相）。实操：重点掌握“浮动卡片+定位标签”的组合应用。模块5：职位模块结构：标题+描述+分类标签（浮动）+职位列表（浮动）。样式：分类标签左浮动，选中项背景色#0066ff、文字白色；职位项左浮动，宽100%，高86px，hover时背景色变浅。实操：重点掌握分类标签与职位模块8：企业招聘“侧边栏”咨询模块制作（10分钟）结构搭建：创建固定定位的侧边栏容器，包含在线咨询、电话咨询、微信咨询三个子模块，每个模块包含默认显示内容和hover时显示的隐藏内容（如咨询类型、联系方式、二维码）。样式实现：设置position:fixed;top:50%;right:0;transform:translateY(-50%);实现垂直居中固定，隐藏内容默认display:none，hover时显示并定位在侧边栏左侧，添加阴影效果增强层次感。实操：学生跟随教师编写代码，重点掌握固定定位的垂直居中实现和hover显示隐藏内容的逻辑。模块9：企业招聘“页脚”模块制作（10分钟）结构搭建：创建页脚容器，包含产品、解决方案、关于我们三个<dl>列表和服务热线、二维码<ul>列表，实现多列布局。样式实现：页脚背景色#030f2d，<dl>和<ul>浮动排列（<dl>左浮动，<ul>右浮动），链接文字默认色#9a9fab，hover时变主色#0066ff，统一字体和间距。实操：重点掌握浮动布局的多列排列，确保页脚元素排列整齐，清除浮动避免布局错乱。模块10：思政主题实训拓展——“加入信创”页面核心模块（10分钟）实训需求分析：明确“加入信创”页面需融入爱国情怀、创新精神等思政元素，核心模块包括头部导航、加入信创横幅、企业文化（含思政内容）、招聘职位、页脚。核心开发思路：结构：沿用企业招聘页的模块划分，在企业文化模块添加“爱国情怀与责任担当”“创新驱动与科技自立”等思政内容。样式：保持版心1200px、主色调#0066ff、字体规范等全局样式统一，招聘职位栏hover时添加阴影和边框。任务布置：要求学生课后完成完整页面开发，课堂上重点讲解思政元素与页面融合的方法，避免生硬堆砌。（四）课程思政（10分钟）科技报国的使命担当：信创产业是国家科技自立自强的核心领域，招聘页和“加入信创”实训页面的开发，不仅是技术实践，更承载着“以科技创新服务国家战略”的使命。让学生理解技术学习的最终价值是服务国家和社会，树立科技报国的远大理想。精益求精的工匠精神：企业级网页开发要求布局精准、样式统一、交互流畅，一个像素的偏差、一行代码的错误都可能影响用户体验。让学生在开发中养成精益求精的工匠精神，注重每一个细节，打造高质量的产品。团队协作与分工意识：大型网页项目需要多人协作完成，本次实训的模块划分（导航栏、横幅、职位模块等）模拟了真实项目的分工模式。让学生体会团队协作的重要性，理解“各司其职、相互配合”才能高效完成复杂项目。思政与技术的自然融合：“加入信创”页面将爱国情怀、创新精神等思政元素融入企业文化模块，而非生硬添加，体现了“技术承载价值”的理念。让学生明白技术不仅是工具，更是传递正能量、践行社会责任的载体，在未来开发中主动融入正确的价值观。总结与作业1.课堂总结梳理本章节核心知识体系：标准流→浮动（语法/特性/清除方法）→定位（相对/绝对/固定/z-index）→企业项目实战→思政实训拓展，形成“基础→技术→应用→升华”的完整逻辑链。强调重点：浮动用于水平排列，定位用于精准控制，清除浮动解决布局塌陷，“子绝父相”“父级标准流+子级浮动”是核心布局模式。梳理易错点：固定定位垂直居中实现、z-index生效条件、清除浮动类遗漏、子元素宽度总和超过父容器导