资源简介

(共36张PPT)
第四单元 第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、先加载，如果碰到