资源简介

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

展开更多......

收起↑