第5单元 美丽乡村首页制作（教案4：2 学时）

教学设计一、基本信息课程名称Web前端开发技术课题名称5.1美丽乡村首页制作授课班级授课时间授课类型理实一体化、项目实训课授课地点机房（联网，支持超星教学平台）授课学时40分钟*2学时教材分析本节选自《Web前端开发技术》第五单元实训内容，以美丽乡村首页制作为核心项目，整合CSS盒子模型、浮动布局等知识。通过“任务规划-实施-验证”流程，将抽象的布局知识转化为具象项目，是前文HTML、CSS基础的综合应用，为后续复杂网页开发奠定实操基础，兼具实用性与综合性。学情分析1.前置基础：已掌握HTML基础标签、CSS盒子模型核心概念及属性设置，熟悉VSCode操作，能编写简单静态页面，了解超星平台使用方法。

2.学情特点：动手能力强、具象思维突出，对项目化实训兴趣浓厚，但逻辑规划能力较弱，对多模块布局的拆分与整合存在困难，依赖分步指引。

3.潜在问题：对AIGC工具辅助编码不熟悉，易出现浮动布局错乱、文件路径错误等问题，需针对性指导。教学目标【知识目标】：

1.掌握美丽乡村首页的模块拆分方法，理解浮动布局在页面整体布局中的应用。

2.学会运用AIGC工具生成基础代码，掌握代码整理与优化的核心要点。

【能力目标】：

1.能独立完成项目创建、文件结构搭建及首页总体布局框架编写。

2.能精准实现页头导航区的布局与样式优化，排查常见布局错误。

【素质目标】：

1.培养项目规划意识与严谨的编码习惯，提升问题排查能力。

2.掌握AI协作开发技巧，树立高效实训的理念。教学重点1.美丽乡村首页的模块拆分与总体布局框架搭建。

2.页头导航区（LOGO、导航菜单、搜索表单）的布局与样式实现。教学难点1.浮动布局的合理运用及浮动清除，避免布局错乱。

2.AIGC提示词的精准撰写的，及生成代码的整理与优化。教学准备1.硬件：机房计算机、投影仪、黑板。

2.软件：VSCode、Chrome浏览器、超星教学平台（提前上传实训手册、案例代码、AIGC提示词模板）。

3.素材：美丽乡村首页效果图、LOGO图片素材、AIGC工具使用指南、分步实操任务单。教学方法1.主导方法：项目引领“任务驱动”教学法（以首页制作为项目，拆解为阶梯式任务）。

2.辅助方法：理实一体化教学法、案例演示法、讲练结合法、AI协作指导法。板书设计5.1美丽乡村首页制作

一、模块拆分：页头-新闻-特色-热门-页脚

二、核心技术：浮动布局、AI辅助编码

三、难点：清除浮动、代码优化二、教学设计教学环节教学内容师生活动设计意图/时间环节一：项目导入，任务拆解1.项目展示：展示美丽乡村首页效果图，介绍项目背景（乡村振兴主题）及实训价值，明确本节课核心目标——完成首页总体布局框架及页头导航区制作。

2.任务拆解：结合实训手册，将项目拆分为3个阶梯任务：

（1）任务1：项目创建与文件结构搭建（15分钟）；

（2）任务2：总体布局框架编写（AI辅助+代码整理，25分钟）；

（3）任务3：页头导航区布局与样式优化（30分钟）。

3.亮点预告：讲解AIGC工具辅助编码技巧，明确代码整理规范，突破传统编码效率瓶颈。教师：展示效果图，拆解任务，强调重点难点，演示AIGC工具基础用法。

学生：观察效果图，理解任务逻辑，记录AIGC使用要点，明确各阶段目标。设计意图：以项目激发兴趣，阶梯式任务降低实操难度，贴合职校生学情；融入AI协作亮点，提升实训效率。

时间：10分钟环节二：任务部署，示范引领1.任务1部署：讲解项目创建规范，要求在D:\design\路径下创建“BeautifulRuralVillagesWebsite”项目，新建css、js、img子文件夹及index.html文件，引用css/styles.css样式文件。

2.示范操作：在VSCode中演示项目创建、文件新建及路径设置流程，强调素材存放规范（图片放入img文件夹）。

3.AIGC提示词示范：展示总体布局框架的AIGC提示词模板，讲解核心要素（布局要求、技术限制、模块划分），演示生成代码的复制与粘贴。教师：分步示范操作，强调文件路径、命名规范，解析AIGC提示词逻辑。

学生：跟随示范创建项目及文件，记录提示词要点，准备独立实操。设计意图：通过示范降低入门难度，规范项目结构，为后续实操奠定基础，突破AIGC提示词撰写难点。

时间：15分钟环节三：自主实操，分层指导1.任务1实操（10分钟）：学生独立完成项目创建与文件结构搭建，验证样式文件引用正确性，教师巡视指导，排查路径错误、文件命名错误等问题。

2.任务2实操（25分钟）：

（1）学生参照提示词模板，使用AIGC工具生成首页总体布局框架代码（含页头、新闻列表区、乡村特色区等5大模块）。

（2）整理生成代码，删除冗余内容，补充注释，优化标签结构，确保浮动布局合理，添加clear:both清除浮动。

（3）分层要求：基础层完成代码整理与预览；提高层尝试调整模块宽度、边距等属性优化布局。

3.教师指导：重点帮扶基础薄弱学生，针对浮动错乱问题，演示清除浮动的方法；指导提高层学生优化代码规范性。教师：巡视实操情况，一对一解决路径错误、浮动错乱等问题，点评共性问题，提供代码优化建议。

学生：独立完成实操任务，运用AIGC工具生成代码并整理，主动提问解决疑问，验证布局效果。设计意图：落实任务驱动，给予学生自主实操空间，分层要求兼顾不同水平学生，针对性突破浮动布局难点。

时间：35分钟（第一学时结束）环节四：案例精讲，难点突破1.共性问题点评：展示学生任务2完成作品，点评代码规范、布局合理性等，重点讲解浮动清除、模块居中的常见错误及解决方案。

2.页头导航区案例精讲：

（1）讲解页头1行3列布局逻辑（LOGO占20%、导航占50%、搜索占30%），演示浮动布局实现方法。

（2）解析AIGC生成的页头代码，讲解导航菜单横向排列、搜索表单样式优化的核心要点，强调hover效果的实现逻辑。

3.任务3部署：明确页头导航区制作要求，包括LOGO尺寸、导航菜单样式、搜索表单验证功能。教师：点评作品，精讲布局逻辑与样式优化技巧，演示核心代码效果。

学生：对照自身作品修正错误，记录页头制作要点，明确任务3目标。设计意图：通过点评强化知识掌握，案例精讲聚焦重点，为任务3实操提供清晰指引，突破页头布局难点。

时间：15分钟环节五：强化实操，成果检验1.任务3实操（20分钟）：

（1）学生在现有框架基础上，完善页头导航区HTML代码，添加LOGO图片、7个导航链接及搜索表单。

（2）编写CSS样式，实现导航菜单横向排列、hover效果（颜色变化+字体加粗），设置搜索表单样式及HTML5自带验证。

（3）在浏览器中预览效果，排查样式错乱、图片不显示、表单验证失效等问题。

2.成果提交：学生完成后，将项目文件压缩上传至超星教学平台，标注姓名及班级。

3.随机抽检：抽取3-5份作品，在投影仪上展示，师生共同点评。教师：巡视指导，重点解决图片路径、表单验证、hover效果等问题，抽检作品并组织点评。

学生：独立完成页头制作，预览验证效果，提交作品，参与点评并修正问题。设计意图：强化实操应用，检验教学效果，通过师生点评提升学生审美与代码优化能力。

时间：20分钟环节六：项目总结，拓展延伸1.项目总结：回顾本节课任务流程（项目创建-框架搭建-页头制作），梳理核心知识点（模块拆分、浮动布局、AI辅助编码），强调代码规范与问题排查技巧。

2.知识拓展：预告下节课内容（新闻列表区、乡村特色区制作），布置预习任务，要求熟悉实训手册中对应环节的提示词模板。

3.技能提升：鼓励学生课后尝试优化页头样式，添加个性化设计元素。教师：梳理知识点，拓展后续任务，解答学生遗留疑问。

学生：回顾实训流程，记录重点难点，明确预习方向，优化自身作品。设计意图：系统梳理实训内容，形成知识体系，为后续实训铺垫，激发学生个性化创作热情。

时间：5分钟三、课后作业和教学反思课后作业1.完善本节课实训作品，优化页头导航区样式，确保在不同浏览器中预览效果一致，重新上传至超星平台。

2.预习实训手册中新闻列表区、乡村特色区制作内容，撰写对应的AIGC提