第4课 优化网页设计 教学设计-2025-2026学年七年级上《信息科技》（教科版）

第4课 优化网页设计
教学内容分析
本课位于单元“呈现优化”环节，是学生首次系统研究网页加载速度与性能调优。核心内容包括：加载原理、影响因素、压缩工具、代码精简、缓存策略。通过“测—析—改—比”四步闭环，学生将体验“数据—算法—工程”融为一体的计算思维，树立“绿色网络、高效传播”的价值观念。已学的HTML/CSS/多媒体嵌入为本课提供待优化的“真实对象”，本课成果又直接服务于第5课的公开发布，实现单元链条的递进。
学习者分析
学生已能制作含图片、音频的网页，但页面平均加载时间较长，在移动端也会出现排版错位。他们对“快与慢”有直观体验，却缺乏系统诊断方法；喜欢竞赛、排行榜，愿意尝试一键压缩等“魔法”工具，但对背后的算法原理感到陌生。发展需求是从“能用”走向“好用”，路径是“感知—量化—优化—反思”。可能存在的困难是：开发者工具面板信息过载；压缩参数选择无从下手；小组合作时优化方案难以统一。
学习目标确定
（1）通过实测活动，掌握PageSpeed/Lighthouse基本指标含义，提升数据解读能力。
（2）通过压缩与合并实践，学会图片、CSS、JS三轴优化方法，提升工程思维。
（3）通过对比实验，能够用数据论证优化成效，提升批判性表达。
（4）通过绿色网络倡议，树立“轻量即美德”的价值观念。
教学重点和难点
教学重点：诊断指标识读与三轴优化操作。
教学难点：在视觉效果与加载性能之间做出合理权衡。
教学活动设计
教师活动 学生活动 支撑的资源
环节一 聚焦
课前将同一网页的“慢版”与“快版”并排投影，引出“慢网页焦虑”。 观看对比，用手环记录心率变化；阅读挑战卡，明确优化目标。 双版本网页、挑战卡。
活动意图说明：用生理反应数据化“慢”的危害，激发优化内驱力。
环节二 探索
示范打开网页测速工具如Lighthouse，解读FCP、LCP、CLS三条核心指标；提供“病因—药方”对照表。 两人一组运行工具平台，填写诊断单，用红笔圈出最大瓶颈。 网页测速工具、诊断单、红笔。
活动意图说明：引导学生第一次量化“慢”的元凶，为后续精准优化做好铺垫。
环节三 设计
引导学生用“三轴优化鱼骨图”梳理方案：图片轴、CSS轴、JS轴；每轴下设“压缩—合并—缓存”子节点。 组内分工，把便签贴在对应节点，拍照上传班级群，形成可视化作战图。 鱼骨图模板、彩色便签、手机。
活动意图说明：将杂乱选项条理化，便于分工协作与时间管控。
环节四 实现
现场演示TinyPNG批量压缩、CSSnano在线合并、浏览器缓存头设置；提供“一键优化脚本”供进阶组尝试。 按作战图执行优化，实时记录PageSpeed分数变化；完成后把优化报告PDF存入共享盘“speed-race”文件夹。 压缩工具、CSS压缩工具（CSSnano）、脚本、共享盘。
活动意图说明：让学生在真实代码与实时数据对比中体验“数字说话”的快感。
环节五 拓展
联合物理教师开设“网页能耗实验”——用功率计对比优化前后电脑访问时的瞬时功耗，测算“每节省 1 秒加载 ≈ 减少 X 克碳排放”。 记录功耗差异，换算碳排放，树立节能理念。 功率计。
活动意图说明：将理性数据与情感体验融合，强化“性能=体验=责任”的核心观念。