第6单元 新闻详情介绍网页制作教案6：2 学时

教学设计一、基本信息课程名称Web前端开发技术课题名称6.5新闻详情介绍网页制作授课班级授课时间授课类型理实一体化课教学环境机房（有网络），超星教学平台（已建设对应网络课程）授课学时40分钟*2学时教学方法主导：项目引领“任务驱动”教学法；辅助：理实一体化教学法、案例演示法、讲练结合法、小组协作法教学重点1.运用Flex布局搭建新闻详情页“图文结合”主体结构2.新闻正文样式优化及相关推荐模块的排版设计教学难点1.图文模块的间距、对齐方式及响应式适配精准控制2.页面各模块（标题区、正文区、推荐区）的风格统一性优化学情分析1.前置基础：已掌握HTML5/CSS3核心技能、Flex布局全属性应用，完成新闻列表页与瀑布流相册制作，能运用AIGC辅助编码及媒体查询适配，熟悉VSCode与超星平台操作。2.学情特点：动手能力强、对完整网页制作兴趣浓厚，具象思维突出，但对多模块风格统一把控不足，图文适配的精细化布局能力薄弱，需依托案例拆解与分步实操引导。板书设计新闻详情页制作1.页面结构：标题区、图文正文、相关推荐（Flex布局）2.核心技能：图文适配、样式统一、响应式调整二、教学设计教学环节教学内容师生活动设计意图/时间项目导入，任务拆解1.案例展示：呈现美丽乡村新闻详情页成品（图6-15），关联上节课新闻列表页，说明详情页与列表页的衔接逻辑及展示重点。2.任务拆解：明确项目目标为制作完整新闻详情页，拆分为3个子任务——搭建页面整体结构、制作图文正文区、设计相关推荐模块。3.亮点预告：引入“模块样式复用+全局样式统一”模式，结合AIGC生成适配代码，提升页面美观度与制作效率。教师：通过超星平台展示案例，讲解详情页各模块功能与衔接要点，拆解任务优先级，演示新闻素材（文本、图片）的整理与导入方法。学生：观察案例效果，明确任务目标，回顾新闻列表页制作经验，思考Flex布局在图文模块中的应用场景。设计意图：关联旧知激发兴趣，拆解任务降低难度，凸显样式复用亮点，为实操铺垫。时间：10分钟知识回顾，案例精讲1.知识回顾：聚焦图文布局核心技能，重点回顾Flex布局align-items对齐属性、gap间距控制，补充text-indent、line-height等文本样式属性用法。2.案例精讲：结合教材图6-16布局示意图，讲解详情页HTML结构（标题区、图文正文区、相关推荐区），演示CSS全局样式（字体、颜色、边距）与模块样式编写逻辑。3.风格统一技巧：讲解如何通过全局样式变量、统一间距标准，实现各模块风格一致性，示范基础代码编写。教师：通过超星平台展示属性应用示例，结合代码演示拆解图文适配逻辑，强调全局样式与模块样式的层级关系，示范样式统一技巧。学生：跟随回顾属性用法，记录代码编写要点，尝试仿写全局样式代码，提出疑问并交流。设计意图：衔接前置知识，通过案例精讲突破图文布局重点，铺垫样式统一技巧，契合职校生学习特点。时间：15分钟小组协作，实操攻坚一任务：搭建详情页整体结构并制作标题区、图文正文区，细化步骤如下：1.新建文件：打开VSCode，复用站点文件夹，新建news_detail.html及css/detailstyles.css文件，完成样式文件链接与全局样式重置。2.结构搭建：编写HTML代码，创建页面容器，嵌套标题区（.news-title）、图文正文区（.news-content），插入新闻标题、正文文本及配套图片。3.核心布局：编写CSS代码，标题区采用Flex布局居中对齐，图文区设置为Flex-wrap:wrap实现图文自适应，控制图片宽度与文本间距。4.文本优化：设置正文首行缩进、行高、字体大小，添加段落间距，优化文本可读性。教师：将学生分为4人小组，明确分工（结构搭建、样式编写、AIGC辅助、调试）；巡视指导，重点解决图文对齐、文本样式混乱、间距不均等问题。学生：小组协作完成任务，运用AIGC优化样式代码，调试图文适配效果，记录问题并小组内讨论解决。设计意图：通过小组协作提升效率，细化步骤确保实操落地，聚焦核心图文模块制作，突破教学重点。时间：25分钟（第一学时结束）成果点评，问题梳理1.成果展示：选取2-3组作品投影展示，由小组代表讲解制作过程及遇到的图文适配问题。2.点评纠错：教师针对共性问题（图文对齐错位、文本样式不统一、图片溢出）集中讲解，演示修正方法，强调全局样式的统一应用。3.问题梳理：总结图文正文区制作的关键要点与误区，为相关推荐模块制作及响应式适配铺垫。教师：组织成果展示，客观点评优劣，聚焦共性问题讲解，引导学生总结经验，修正作品。学生：倾听点评，对照自身作品修正问题，记录要点与误区，补充完善图文正文区样式。设计意图：通过点评强化知识应用，集中解决共性问题，巩固第一学时内容，衔接后续任务。时间：10分钟案例示范，实操攻坚二任务：制作相关推荐模块并添加响应式适配，细化步骤如下：1.推荐模块制作：采用Flex布局制作3列相关新闻卡片，复用相册卡片样式框架，调整尺寸与间距，填充推荐新闻标题、缩略图及简介。2.响应式适配：编写媒体查询代码，屏幕宽度≤768px时推荐模块改为2列布局，≤480px时改为1列布局，同步调整图文区图片尺寸。3.风格统一优化：检查页面各模块字体、颜色、间距，统一调整参数，添加页面边框、阴影，提升整体美观度。4.整体调试：在不同浏览器窗口尺寸下预览，调整响应式断点与样式参数，确保页面适配正常、风格统一。教师：示范推荐模块核心代码编写，强调样式复用技巧与响应式断点逻辑，指导学生进行全局风格统一调整；针对难点问题单独辅导。学生：独立完成推荐模块制作与响应式适配，结合AIGC优化代码，调试整体风格与适配效果，主动求助解决问题。设计意图：通过示范降低难点难度，细化步骤确保实操可落地，强化样式统一与响应式适配能力，突破教学难点。时间：20分钟总结拓展，任务布置1.知识总结：梳理项目核心流程（结构搭建-图文制作-推荐模块-风格优化）及关键技术（Flex图文布局、样式统一、响应式适配）。2.拓展延伸：简要介绍网页导航跳转功能（关联新闻列表页），引导学生课后自主实现，提升页面关联性。3.任务布置：明确课后作业及提交规范，强调作品完整性、风格统一性与适配效果。教师：用思维导图梳理第六单元整体知识体系，强调重点难点，布置课后作业，提醒通过超星平台提交作品与提问。学生：跟随梳理知识，记录拓展内容及作业要求，规划课后完善计划，形成单元知识闭环。设计意图：系统梳理单元知识，拓展学习空间，通过作业巩固所学，形成项目闭环，提升综合应用能力。时间：10分钟（第二学时结束）三、课后作业和教学反思课后作业1.完善新闻详情页，实现与新闻列表页的导航跳转功能，优化响应式适配与整体风格，上传超星平台。2.整合第六单元作品（新闻列表页、瀑布流相册、新闻详情页），统一站点风格，形