第2单元 HTML图像应用-美化《七律·长征》古诗文网页（教案3：2 学时）

教学设计一、基本信息课程名称Web前端开发技术课题名称HTML图像应用——美化《七律·长征》古诗文网页授课班级授课时间授课类型理实一体化、新授课授课地点机房（有网络，接入超星教学平台）授课学时40分钟*2学时教材分析本节选自单元2核心内容，聚焦HTML图像知识点，是网页美化、增强视觉表现力的关键技术，承接上一课时超链接应用，为后续表格布局奠定基础。教材结合素材案例讲解图像插入，需补充图像属性配置、路径排查案例，结合古诗文情境强化实操，贴合职校生“实操落地”的学习需求。学情分析1.前置基础：已掌握HTML文档结构、文本标签、超链接使用，能独立编写带跳转功能的古诗文网页，熟练操作VSCode，具备基础路径认知与故障排查能力，可衔接图像实操。

2.学情特点：动手能力强、具象思维突出，对图像美化网页的效果兴趣浓厚；抽象逻辑较弱，对图像路径、尺寸属性的配置逻辑需实例引导。

3.潜在不足：易混淆图像相对路径书写规则，对alt属性的语义化作用认知不足，图像显示异常时排查能力薄弱，需通过分步实操与故障模拟化解。教学目标【知识目标】：

1.掌握HTML图像标签<img>的语法结构、核心属性（src、alt、width、height）及取值规范。

2.理解图像绝对路径、相对路径的应用场景，掌握本地图像、网络图像的插入方法。

【能力目标】：

1.能为古诗文网页插入本地、网络图像，合理配置属性优化显示效果，实现图文结合。

2.能排查图像不显示、尺寸失真等问题，提升自主故障排查能力。

【素质目标】：

1.结合长征主题图像，深化文化认知，培养网页视觉美化意识。

2.养成规范配置图像属性、注重语义化的实操习惯。教学重点1.图像标签<img>的语法结构及src、alt属性的正确使用。

2.本地图像插入的相对路径书写规范与图像尺寸属性配置。教学难点1.相对路径在图像插入中的精准应用，避免因路径错误导致图像不显示。

2.图像尺寸属性的合理配置，兼顾网页美观与图像比例不失真。教学准备1.硬件：机房计算机、投影仪、音响，每人准备1-2张长征主题本地图像素材（如红军行军图、雪山草地图）。

2.软件：超星教学平台（上传教材案例源码、路径手册、AI提示词模板）、VSCode。

3.素材：长征主题网络图像URL、图像属性对照表、路径示例图、常见图像故障对照表、实操任务单。教学方法1.主导方法：项目引领任务驱动教学法。

2.辅助方法：理实一体化教学法、案例演示法、讲练结合法、故障模拟法。板书设计核心内容：1.图像<imgsrc=""alt=""width=""height="">；2.路径（绝对/相对）；3.要点：路径正确、比例不失真、语义化alt。二、教学设计教学环节教学内容师生活动设计意图/时间环节一：复习衔接，项目升级（亮点：情境延续+问题导向）1.复习回顾：抽查上节课带超链接的古诗文网页，提问超链接三种类型及路径书写规则，点评作业中链接故障排查情况，衔接图像知识点。

2.情境升级：展示两张网页对比案例（纯文本古诗文页、图文结合古诗文页），提问“如何为网页添加图像实现美化？图像不显示该如何排查？”，引出本节课核心内容。

3.项目发布：明确本课时核心项目“为古诗文网页添加图像实现图文美化”，拆解为3个子任务——插入网络图像、插入本地图像、优化图像属性与排版。

4.AI辅助：更新超星平台AI提示词模板（如“HTML图像路径书写规则”“图像尺寸配置技巧”），引导学生自主查询疑难问题。教师：抽查作业，点评亮点与不足；展示对比案例，演示图像显示与不显示的差异，讲解项目目标与子任务；指导学生运用AI提示词梳理图像标签基础用法。

学生：展示上节课作品，回忆超链接知识；观察案例差异，明确学习目标；借助AI提示词预习图像标签语法，记录核心要点。设计意图：延续古诗文情境，以问题导向激发思考，衔接前置知识；AI辅助贴合教学风格，以具象对比激发学生实操兴趣。时间：10分钟。环节二：理论精讲，案例演示（亮点：实例拆解+易错点标注）1.图像标签基础语法：

（1）标签结构：讲解<img>自闭合标签特性，核心属性用法——src（指定图像路径）、alt（图像加载失败时的替代文本）、width/height（设置尺寸，单位px），标注“src不能为空、alt不可省略”易错点。

（2）alt属性语义化：强调alt属性对网页可访问性的作用，演示图像加载失败时alt文本的显示效果。

2.图像路径讲解：

（1）网络图像：演示通过网络图像URL插入长征主题图，讲解绝对路径（完整URL）的适用场景，标注“需加http:///https://”易错点。

（2）本地图像：演示插入本地素材，讲解相对路径——同一文件夹直接写文件名、子文件夹写“文件夹名/文件名”，结合路径示例图强化逻辑，对比绝对路径与相对路径差异。

3.尺寸属性配置：

（1）演示仅设置width或height（自动保持比例）、同时设置宽高（易失真）的效果差异，强调“仅设置单维度尺寸”的规范用法。教师：采用理实一体化教学法，在VSCode中逐行编写代码，实时预览图像显示效果；标注易错点，引导学生对比不同路径、尺寸配置的差异。

学生：跟随演示仿写代码，测试图像显示效果；记录语法规则、路径写法及易错点，梳理图像属性配置逻辑。设计意图：以实例拆解抽象路径与属性逻辑，易错点标注降低失误率，贴合职校生具象思维，夯实重点知识。时间：20分钟。环节三：分步实操，突破难点（亮点：分层实操+故障排查）分步实操任务（独立完成，分层设计，基于上节课网页优化）：

1.基础层（必做）：

（1）插入网络图像：为网页头部添加长征主题网络图像，配置src（网络URL）、alt（“长征主题图”）属性，设置width属性（500px），测试显示效果。

（2）插入本地图像：将个人准备的本地素材放入网页同级文件夹，插入图像并配置属性，确保路径正确、图像正常显示。

2.提高层（选做）：

（1）优化排版：调整图像与文本的位置关系（如图像后换行），为图像添加水平线分隔，优化图文排版美观度。

（2）故障排查：故意植入路径错误（如文件名拼写错误、路径层级错误）、尺寸配置失误（宽高比例失衡），引导学生结合故障对照表自主排查修正。教师：巡视指导，重点帮扶路径书写、尺寸配置困难的学生；提供故障对照表，引导学生通过“检查路径、核对属性、预览调试”排查问题；针对共性问题（如本地图像不显示）集中讲解。

学生：按分层任务编写代码，逐一对图像显示效果测试；自主排查并修正错误，记录故障解决方法；完成基础任务后尝试提高层内容。设计意图：分层任务兼顾不同水平学生，故障排查针对性突破路径、尺寸难点，强化自主实操与问题解决能力。时间：25分钟。环节四：小组互评，优化提升（亮点：互评清单+图文适配）小组任务（4人一组）：

1.成果互评：每组对照互评清单（图像显示正常、路径正确、属性完整、尺寸比例协调、排版美观），交叉检查网页，标注问题并提出修改建议。

2.优化完善：根据小组建议修改代码，补充alt属性细节，调整图像尺寸与排版，确保图文适配、网页美观；关联上节课超链接，可为图像添加跳转链接（如链接到图像来源页面）。

3.成果分享：每组推选1份优秀作品，上传至超星平台，由作者分享图像插入与故障排查思路。教师：明确互评清单标准，引导小组聚焦路径书写、尺寸配置、图文排版等重难点；点评优秀作品，讲解典型错误（如alt缺失、尺寸失真）的修正方法；总结图像属性使用技巧。

学生：小组内交叉测试互评，主动发现并修正问题；学习优秀作品的图文排版亮点，优化自身网页；分享编写与排查心得，深化知识理解。设计意图：通过互评强化图像规范意识，借助同伴互助解决个性化问题，成果分享提升表达与总结能力，巩固难点知识。时间：15分钟。环节五：课堂小结，布置作业1.小结：梳理本节课核心内容（图像标签语法、属性用法、路径规则、尺寸配置），回顾重难点与易错点，强化“编写-预览-排查”的实操流程，强调图文适配与语义化。

2.作业布置：明确课后任务要求，预告下一课时HTML表格知识点，引导思考如何用表格优化网页布局。教师：引导学生自主总结，补充完善知识框架；通过超星平台发布作业，附上图像故障排查手册供课后复习。

学生：梳理知识要点与实操流程，记录作业要求；保存网页文件，预习HTML表格相关内容，思考表格在古诗文网页中的应用场景。设计意图：固化知识体系，强化实操思维；通过作业延伸巩固重难点，为下一课时表格布局铺垫。时间：10分钟。三、课后作业和教学反思课后作业1.优化本节课图文网页，新增1张本地图像（配置完整属性），调整尺寸与排版，确保图文美观，将网页文件上传至超星平台。

2.梳理HTM