(
课件网) 第四单元 第4课 （教科版）七年级 上 优化网页设计 1 核心素养目标 3 新知讲解 5 拓展延伸 7 板书设计 2 新知导入 4 课堂练习 6 课堂总结 课后作业 8 01 核心素养目标 。 信息意识 计算思维 数字化学习与创新 信息社会责任 通过体验与对比多种网页制作工具，能够选用适合的工具对网页数据进行编码优化和代码优化，创建具有特色的网页作品。 会运用在线工具处理图片/音视频素材，并探索流媒体技术实现边下边播，创新提升网页浏览体验。 通过优化网页设计，为网页提速，运用压缩素材、选择合适格式、合并文件等策略，系统性优化网页加载速度。 能诊断网页加载缓慢问题，识别图片/视频过大、文件冗余、服务器响应慢等关键影响因素，形成优化网页性能的初步意识。 02 新知导入 在制作学校科技节宣传网页的过程中，随着网页内容不断丰富，特别是图像、音视频等媒体形式，让网页所占空间越来越大，网页加载速度逐渐变慢。对于网页内容呈现，不仅要考虑呈现形式，还要考虑加载速度。网页正式发布前，需要对网页素材做必要的优化。那么，网页素材优化的目的是什么？应该如何优化网页素材呢？本节课我们将测试网页加载速度，分析影响加载速度的因素，尝试优化网页素材。 本课要点 02 新知导入 浏览器加载网页是一下子全出来吗？还是有先有后？ 不是同时的。它先加载部分，遇到JS脚本还会暂停，处理完再接着加载里的主要内容。 02 新知导入 为什么我看网页视频不用等它完全下载完就能开始播放了？ 这用到了流媒体技术，它先下载一小段存起来开始播，后面的边播边下，不用干等着。 02 新知导入 为科技节网页选一张主图，存成JPG只要120KB，色彩真实；存成PNG-24要480KB，边缘锐利但体积惊人；存成WebP只要60KB，效果接近JPG还支持透明。面对这么多格式，怎么选？如何在文件大小和图片质量之间找到最佳平衡点？ 图片格式的智慧选择：小身材也能有大精彩 02 新知导入 03 新知讲解 我们可以测试网页加载时的等待时间，分析一下原因。 在 制作好的网页，打开速度有些慢，等待时间有些长。 探索 03 新知讲解 探索 网页加载过程，是指从输入网址按下回车键发出访问网页请求开始，到最终显示完整页面的过程。网页加载时间有一条“8秒原则”，即大多数浏览者不会用超过8秒的时间等待完整加载一个网页，所以在设计网页时，应使预计加载时间少于8秒。 做一做 速度是网页的灵魂，但网络运行速度快，不代表网页加载速度一定快我们可以选择几个网页，用网页加载速度测试工具测试这些网页的加载速度，填写在表格里。 03 新知讲解 测评网页地址 网页体积 (MB) 加载耗时 (秒) 是否优秀？ 原因简析 www. 0.8 1.2 是 体积小，无复杂动画 www. 1.4 2.9 是 文字为主，图片少量压缩 www. 3.5 4.8 否 商品图片多，体积过大 www.xxxschool. 2.1 6.3 否 未优化图片，加载缓慢 03 新知讲解 探索 浏览器加载网页内容的顺序为： 1、先加载，如果碰到
