(
课件网) 信息意识· 计算思维· 数字化学习与创新· 信息社会责任 信息科技 七年级 上册 第四单元 互联网数据编码与呈现———美编网页 第4课 优化网页设计 聚焦 探索 设计 实现 拓展 引入情境 同学们，我们先来看一个有趣的对比。同一网页的“慢版”与“快版”。大家可以看到，慢版网页加载时让人焦急等待，而快版网页瞬间就能呈现内容。这种“慢网页焦虑”是不是很熟悉？我们每天都可能遇到网页加载缓慢的情况，那今天我们就来探究如何让网页变得“飞速”起来，让用户体验更佳。 聚焦 探索 设计 实现 拓展 聚焦问题，明确任务 聚焦问题 如何优化网页加载速度与性能，让网页在不同设备上都能快速、高效地呈现？ 明确任务 通过一系列优化手段，包括诊断网页性能、压缩图片、精简代码、设置缓存等，提升网页加载速度与性能。 成果形式 一个经过优化的网页，其加载速度明显提升，且在不同设备上都能良好适配，同时提交一份详细的优化报告。 聚焦 探索 设计 实现 拓展 分析问题，探索方法：探索要求 探索任务 使用网页测速工具对给定网页进行测试，解读测试结果中的关键指标，找出网页加载慢的最大瓶颈，并记录在诊断单上。 温馨提示 在使用测速工具时，重点关注FCP、LCP、CLS三个指标，它们能直观反映网页的加载性能。同时，参考“病因—药方”对照表，初步判断可能的优化方向。 聚焦 探索 设计 实现 拓展 分析问题，探索方法：探索要求 聚焦 探索 设计 实现 拓展 分析问题，探索方法：探索要求 聚焦 探索 设计 实现 拓展 分析问题，探索方法：点评展示 点评指导 展示网页测速结果及诊断单，教师点评对指标的解读是否准确，找出的瓶颈是否合理，指出优点和不足之处。 本环节提升升华 通过本次探索，同学们学会了使用专业工具量化分析网页性能问题，初步掌握了数据中提取关键信息的方法，为后续优化打下了坚实基础。 聚焦 探索 设计 实现 拓展 梳理思路，设计方案：设计要求 设计任务 确定优化方向，再针对图片、CSS、JS三个轴进行具体优化，最后制定缓存策略。以“三轴优化鱼骨图”呈现设计方案，每轴下设“压缩—合并—缓存”子节点。依据“三轴优化鱼骨图”，制定详细的优化方案，明确每个优化措施的具体步骤和责任人。 温馨提示 在设计时要充分考虑优化措施的可行性和效果，确保方案具有可操作性。同时，注意优化措施之间的协同性，避免相互冲突。 聚焦 探索 设计 实现 拓展 梳理思路，设计方案：点评展示 点评指导 各小组汇报设计方案，展示鱼骨图，介绍优化思路与具体措施，分享设计亮点。教师点评小组设计方案，肯定优点，指出不足，如优化措施是否合理、协同性是否良好等；针对问题提出改进建议。 本环节提升升华 通过本次设计，同学们掌握了从问题诊断到方案制定的完整流程，学会了用鱼骨图梳理复杂问题，提升了系统化设计思维。 聚焦 探索 设计 实现 拓展 运用所学，实现方案：实现示范 范例示范： 教师示范使用TinyPNG批量压缩图片、CSSnano在线合并CSS代码、浏览器缓存头设置等操作，展示优化前后网页加载速度的变化。 聚焦 探索 设计 实现 拓展 运用所学，实现方案：实现示范 范例示范： 教师示范使用工具批量压缩图片、在线合并CSS代码、浏览器缓存头设置等操作，展示优化前后网页加载速度的变化。 聚焦 探索 设计 实现 拓展 运用所学，实现方案 活动：为网页文件优化提速 按照设计方案完成网页优化任务，记录优化前后的PageSpeed分数变化，并将优化报告PDF存入共享盘“speed-race”文件夹。 聚焦 探索 设计 实现 拓展 运用所学，实现方案：点评展示 点评指导 演示优化后的网页，展示PageSpeed分数变化，介绍优化措施的具体效果，分享实现过程中的收获 ... ...
