资源简介

中小学教育资源及组卷应用平台
第4课《优化网页设计》教学设计
课题 优化网页设计 单元 第四单元 学科 信息科技 年级 七年级上
核心素养目标 信息意识：能诊断网页加载缓慢问题，识别图片/视频过大、文件冗余、服务器响应慢等关键影响因素，形成优化网页性能的初步意识。计算思维：通过优化网页设计，为网页提速，运用压缩素材、选择合适格式、合并文件等策略，系统性优化网页加载速度。数字化学习与创新：会运用在线工具处理图片/音视频素材，并探索流媒体技术实现边下边播，创新提升网页浏览体验。信息社会责任：通过体验与对比多种网页制作工具，能够选用适合的工具对网页数据进行编码优化和代码优化，创建具有特色的网页作品。
教学重点 掌握压缩图片、选用合适格式以及使用缩略图来显著减小网页素材体积、优化加载速度的具体方法。理解并能够测试分析影响网页加载速度的关键因素。认识流媒体技术实现“边下载边播放”的原理及其对改善网页音视频体验的作用。
教学难点 理解浏览器加载网页的详细顺序及其对速度的影响。在实际操作中根据不同需求准确选择最合适的图片格式以平衡质量与速度。清晰区分有损压缩与无损压缩的应用场景及效果差异，并能根据素材类型选择恰当的压缩方式。
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 本课要点在制作学校科技节宣传网页的过程中，同学们遇到了新的问题。随着网页内容不断丰富，特别是图像、音视频等媒体形式，让网页所占空间越来越大，网页加载速度逐渐变慢。对于网页内容呈现，不仅要考虑呈现形式，还要考虑加载速度。网页正式发布前，需要对网页素材做必要的优化。那么，网页素材优化的目的是什么？应该如何优化网页素材呢？本节课我们将测试网页加载速度，分析影响加载速度的因素，尝试优化网页素材。浏览器加载网页是一下子全出来吗？还是有先有后？不是同时的。它先加载部分，遇到JS脚本还会暂停，处理完再接着加载里的主要内容。为什么我看网页视频不用等它完全下载完就能开始播放了？这用到了流媒体技术，它先下载一小段存起来开始播，后面的边播边下，不用干等着。图片格式的智慧选择：小身材也能有大精彩！为科技节网页选一张主图，存成JPG只要120KB，色彩真实；存成PNG-24要480KB，边缘锐利但体积惊人；存成WebP只要60KB，效果接近JPG还支持透明！面对这么多格式，怎么选？选错了，高清大图会让网页变成“蜗牛”，用户等不及就离开了；选对了，既能保证视觉清晰，又能让页面快速呈现。如何在文件大小和图片质量之间找到最佳平衡点？这就是网页设计中的一门关键艺术。播放视频《提升用户体验的关键网站设计技巧》。 分组讨论并列出“哪些素材可能拖慢网页？”（如大图、长视频）。 尝试使用Chrome DevTools的“Network”标签监控网页加载，标注的加载顺序及JS脚本的暂停点。针对不同使用场景（如网页背景图、透明图标、高清产品图），讨论并投票选择最合适的格式。观看视频 通过讨论培养学生的观察与分析能力，识别关键优化对象。通过实际体验培养学生观察与分析网页资源加载优先级的能力，提高学生理解关键脚本对加载流程的影响。通过比较培养学生分析实际需求的能力，理解格式选择需结合具体场景。了解影响用户体验的因素
讲授新课 新知讲解：一、探索制作好的网页，打开速度有些慢，等待时间有些长。我们可以测试网页加载时的等待时间，分析一下原因。网页加载过程，是指从输入网址按下回车键发出访问网页请求开始，到最终显示完整页面的过程。网页加载时间有一条“8秒原则”，即大多数浏览者不会用超过8秒的时间等待完整加载一个网页，所以在设计网页时，应使预计加载时间少于8秒。二、做一做速度是网页的灵魂，但网络运行速度快，不代表网页加载速度一定快我们可以选择几个网页，用网页加载速度测试工具测试这些网页的加载速度，填写在表格里。测评网页地址网页体积 (MB)加载耗时 (秒)是否优秀？原因简析www.0.81.2是体积小，无复杂动画www.1.42.9是文字为主，图片少量压缩www.3.54.8否商品图片多，体积过大www.xxxschool.2.16.3否未优化图片，加载缓慢三、探索浏览器加载网页内容的顺序为：先加载，如果碰到