第6单元 美丽乡村新闻网页制作教案4：2 学时

教学设计一、基本信息课程名称Web前端开发技术课题名称6.1美丽乡村新闻网页制作授课班级授课时间授课类型理实一体化课教学环境机房（有网络），超星教学平台（已建设对应网络课程）授课学时40分钟*2学时教学方法主导：项目引领“任务驱动”教学法；辅助：理实一体化教学法、案例演示法、讲练结合法、小组协作法教学重点1.运用Flex布局搭建美丽乡村新闻网页总体框架2.页面头部导航区与主体新闻列表区的制作教学难点1.Flex布局属性在网页各模块中的灵活适配应用2.结合AIGC生成代码并优化调整，实现规范布局学情分析1.前置基础：已掌握HTML5基础标签、CSS3基本样式及Flex布局核心属性，能搭建简单网页结构，熟悉VSCode操作与超星平台使用。2.学情特点：动手能力强、具象思维突出，对实操项目兴趣浓厚，但抽象逻辑较弱，对布局属性适配及代码优化能力不足，需依托实例拆解引导。板书设计美丽乡村新闻网页制作1.框架搭建：header、main、footer（Flex布局）2.核心模块：头部导航、新闻列表3.关键属性：display:flex、justify-content二、教学设计教学环节教学内容师生活动设计意图/时间项目导入，任务拆解1.案例展示：呈现美丽乡村新闻网页成品效果（图6-1），对比普通网页，说明Flex布局在响应式、精细化布局中的优势。2.任务拆解：明确本次项目核心目标是完成新闻网页制作，拆分为3个子任务——搭建总体框架、制作头部导航区、制作主体新闻列表区。3.亮点预告：引入“AIGC辅助编码+手动优化”模式，降低代码编写难度，提升布局效率。教师：通过超星平台展示案例，讲解网页结构组成（头部、主体、页脚），拆解任务优先级，演示AIGC生成基础代码的简单操作。学生：观察案例效果，明确任务目标，记录AIGC辅助编码的关键要点，结合前置知识思考Flex布局的应用场景。设计意图：以直观案例激发兴趣，拆解任务降低学习难度，凸显AIGC辅助亮点，为后续实操铺垫。时间：10分钟知识回顾，案例精讲1.知识回顾：聚焦Flex布局核心属性，重点回顾display:flex、justify-content、flex-direction等属性的作用及取值。2.案例精讲：结合教材图6-2布局规划图，讲解网页总体框架的HTML结构（header、main、footer标签）及CSS样式设计，演示容器宽高、居中对齐、响应式适配（@media）的代码编写。3.AIGC提示词指导：讲解如何撰写精准提示词，生成网页框架代码（参考教材任务实施中的提示词范例）。教师：通过超星平台展示属性对照表，结合代码演示讲解布局逻辑，示范AIGC提示词的撰写技巧，强调代码规范与注释添加。学生：跟随教师回顾属性用法，记录代码编写要点，尝试仿写AIGC提示词，提出疑问并交流。设计意图：衔接前置知识，通过案例精讲突破框架搭建重点，指导AIGC使用，契合职校生具象学习特点。时间：15分钟小组协作，实操攻坚一任务：搭建新闻网页总体框架并制作头部导航区，细化步骤如下：1.新建文件：打开VSCode，复用第5单元站点文件夹，新建new_page.html及css/newsstyles.css文件，完成样式文件链接。2.框架搭建：编写HTML框架代码，添加header、main、footer标签，在main中嵌套image-display、news-list分区。3.基础样式：编写CSS代码，重置浏览器默认样式，设置body字体、各容器宽高、居中对齐及响应式样式。4.头部制作：采用Flex布局实现头部1行3列布局（logo、导航、搜索框），设置粘性定位、边框及背景色。教师：将学生分为4人小组，明确分工（代码编写、AIGC辅助、调试、记录）；巡视指导，重点解决Flex布局适配、文件链接错误等问题，提醒代码规范。学生：小组协作完成任务，运用AIGC生成基础代码并手动优化，调试布局效果，记录遇到的问题并小组内讨论解决。设计意图：通过小组协作提升效率，细化实操步骤确保可操作性，聚焦框架与头部制作，突破教学重点。时间：25分钟（第一学时结束）成果点评，问题梳理1.成果展示：选取2-3组作品通过投影展示，由小组代表讲解制作过程及遇到的问题。2.点评纠错：教师针对作品中的共性问题（如Flex布局属性误用、响应式适配失效、文件路径错误）进行集中讲解，演示修正方法。3.问题梳理：总结头部导航区制作的关键要点及常见误区，为后续新闻列表区制作铺垫。教师：组织成果展示，客观点评作品优劣，聚焦共性问题展开讲解，引导学生总结经验。学生：认真倾听点评，对照自身作品修正问题，记录关键要点及误区，补充完善已完成模块。设计意图：通过成果点评强化知识应用，集中解决共性问题，巩固第一学时实操内容，衔接后续任务。时间：10分钟案例示范，实操攻坚二任务：制作主体新闻列表区（选项卡+新闻卡片），细化步骤如下：1.选项卡制作：新建css/tabs.css文件，编写选项卡导航及内容容器样式，使用单选按钮+兄弟选择器实现选项卡切换效果。2.新闻卡片制作：新建css/new_card.css文件，采用Flex布局实现2列卡片布局（图片区35%、文本区65%），设置圆角、阴影及悬停效果。3.内容填充：复制新闻卡片代码，填充教材中的新闻内容（标题、简介、发布时间），完成两个选项卡内容制作。4.整体调试：整合所有样式文件，在浏览器中预览效果，调整布局细节。教师：示范选项卡及新闻卡片的核心代码编写，强调Flex布局在卡片中的灵活应用，指导学生进行内容填充与调试；针对难点问题单独辅导。学生：独立完成新闻列表区制作，结合AIGC优化代码，填充内容并调试效果，遇到问题及时向教师或小组求助。设计意图：通过示范降低难点难度，细化步骤确保实操落地，强化Flex布局灵活应用能力，突破教学难点。时间：20分钟总结拓展，任务布置1.知识总结：梳理本次项目的核心流程（框架搭建-头部制作-列表区制作）及关键技术（Flex布局、AIGC辅助编码、响应式适配）。2.拓展延伸：简要介绍页脚区制作思路，引导学生课后自主完成，完善整个网页。3.任务布置：明确课后作业及要求，强调作业提交规范。教师：用思维导图梳理知识点，强调重点难点，布置课后作业，提醒学生通过超星平台提交作业及提问。学生：跟随教师梳理知识，记录拓展内容及作业要求，规划课后完善计划。设计意图：系统梳理知识，拓展学习空间，通过作业巩固所学内容，形成完整的项目闭环。时间：10分钟（第二学时结束）三、课后作业和教学反思课后作业1.完善美丽乡村新闻网页，自主完成页脚区制作（参考教材页脚提示词），优化整体布局细节，确保响应式效果正常，上传超星平台。2.整理本次项目的核心代码及注释，总结Flex布局的应用技巧与