第四单元 互联网数据编码与呈现——美编网页 教学设计-2025-2026学年七年级上《信息科技》（教科版）

第四单元 互联网数据编码与呈现——美编网页
【课程标准要求】
1.能够根据学习和交流的需要，使用互联网搜索、遴选、管理并贡献有价值的数据和资源，能够创建具有特色的作品。
2.了解常用互联网应用中数据的构成，能够使用适当的数字化工具对网页进行编辑和发布。
3.初步了解互联网协议，知道网络中数据的编码、传输和呈现的原理。
【教材分析】
本单元教材以主题式项目学习为主线，按照“呈现路径—呈现原理—呈现尝试—呈现优化—呈现发布”五课时递进，将HTML、CSS、多媒体嵌入、性能调优、域名部署等内容整合为一条完整任务链，与课程标准提出的“真实任务、持续迭代、绿色共享”理念高度契合。
【单元课时】
5个课时。
【单元项目学习主题分析】
项目主题：向世界介绍我们的学校（科技节专题网页）。
项目概述：学生以小组为单位，围绕“让世界了解我校（科技节专题网页）”这一真实任务，完成网页的需求分析、结构设计、内容编码、性能优化与公开发布。项目聚焦“数据如何被编码—传输—呈现—优化—发布”的完整链条，落实课标“互联网应用与创新”模块的核心要求。
项目成果：可访问的“学校名片”网页（含文本、多媒体、交互动效）；网页性能测试报告（含加载速度分数、优化前后对比截图）；项目过程档案袋（需求文档、代码版本库、迭代记录、同伴评价表）。
学习环境：校内计算机教室。
【单元学习目标】
1.通过学习、交流、对比分析等活动，能够解释万维网、浏览器、网页等概念，能够简要描述互联网信息呈现的主要过程，提升分析、规划和抽象的能力。
2.经历分析讨论、编程实现等过程，知道HTML语言的主要构成，能够使用HTML语言有目的地呈现数据，能够增强对互联网技术的理解能力，提升批判性思维，体验计算思维解决问题的一般方法与思路。
3.结合科技节宣传网页制作活动，尝试对网页文件进行整体规划；通过对多种网页编辑工具的体验与对比，能选用适合的工具对网页数据进行编辑，同时结合配色方案、导航栏、背景音乐等方式提升网页呈现效果，创建具有特色的网页作品，从而获得成就感。
4.通过对比、分析、探究等方式，探索网页加载过程，能够测试网页加载速度，分析影响网页加载速度的因素，并能尝试通过编码格式、压缩文件等方式优化网页素材，形成性能优化和调优的能力。
5.通过分组探究、模拟游戏等活动，知道网页服务器的功能，能够概括HTTP协议的基本传输原理，能动手搭建局域网Web服务器，完成网页作品的存储与发布，提升计算思维。
【单元学习路径】
本单元围绕设计制作“宣传页的主题任务，按照本质探究→语言揭秘→网页设计→网页优化→作品发布的顺序展开。
【单元教学准备】
合理的软硬件配置和丰富的教学资源，可以帮助学生更好地掌握互联网数据编码与呈现的相关知识和技能。
1.硬件准备：
计算机教室：配备足够数量的计算机，确保每位学生都能有一台计算机进行操作。
网络设备：确保计算机教室内的网络稳定，以便学生能够顺利访问互联网和进行在线学习。
投影仪/大屏幕：用于展示教师课件、学生作品等，增强课堂互动效果。
2.软件准备：
网页浏览器：如Chrome、Edge、Firefox等，用于访问互联网、查看网页内容和学习相关资源。
文本编辑器：如Notepad++、Sublime Text等，用于编写和编辑HTML/CSS代码。
网页设计软件或平台：如Adobe Dreamweaver、Figma，提供网页设计和编辑功能。
多媒体教学软件：数字演示文稿软件，如WPS Office、PowerPoint等，用于制作和展示课件，增强教学效果。
网速测评工具或平台，用于本单元教学相关实验。
3.其他材料：
教辅资料：包括教材、教案、课件等，用于辅助教学和学生自学。
在线学习资源：提供与课程内容相关的在线学习资源链接，如课程视频、在线论坛等，方便学生拓展学习。
实物展示材料：如优秀的网页设计作品、网页模板等（可选），用于课堂展示和激发学生创作灵感。
【学习任务/活动设计】
任务1：网页数据旅程探秘
核心问题：一条网页数据从服务器到屏幕，到底经历了什么？
学习活动：先体验“慢网页 VS 快网页”计时赛，用浏览器开发者工具记录加载时间；再用记事本手写人生第一份 HTML（只写一行欢迎语），保存后用浏览器验证；最后四人一组完成《数据旅程拼图》海报，把“服务器→HTTP→浏览器→呈现”四个环节用箭头串联，贴在教室 Padlet 墙上。教师提供计时器、拼图模板，并示范如何用“F12”打开 网络面板。
任务2：HTML+CSS 骨架工坊
核心问题：如何用标签和样式搭出学校名片框架？
学习活动：课堂开始是“标签对对碰”小游戏，学生迅速配对 HTML 开始标签与结束标签；随后小组角色分工：结构师负责 HTML、美工负责 CSS、素材官负责收集 logo 及校园照片；各组完成包含 header、nav、main、sidebar、footer 五区域的骨架文件，并提交至指定的空间。教师提供空白骨架模板和 CSS 属性速查表，现场巡视用纸质标签给每组打分并贴在屏幕边框。
任务3：内容编辑
核心问题：工具那么多，哪一个最适合？
学习活动：教师先播放 3 段 2 分钟工具微视频（VS Code、Dreamweaver、WordPress等）；学生用 15 分钟“试驾”其中一款并填写在线工具对比表；接着 20 分钟设计冲刺：完成导航栏、主题色、多媒体嵌入，提交 v1.0 版本至指定位置获取预览链接。
任务4：性能优化
核心问题：如何进行网页提速？
学习活动：先用相关工具诊断自己的网页并生成 PDF 报告；再实施压缩、合并、加载、缩略图四大优化动作；最后做 A/B 测试：记录优化前后加载时间和PageSpeed评分，把对比截图上传到指定位置。
任务5：发布与同学分享
核心问题：怎样让更多的人看到我们？
学习活动：课堂前半段，学生二选一发布方案：A 用 Python http.server 在局域网快速部署并上传发布网页；B 用学校平台上传发布网页；后半段线上互评：每组生成二维码贴在教室海报墙，同学，也可邀请家长、校友等扫码访问并投票。
【学习评价设计】
1.任务1成果：计时赛截图：记录“慢网页 VS 快网页”的加载时间差异；记事本手写HTML文件：保存为“ .html”文件，并在浏览器成功打开；小组《数据旅程拼图》海报：用箭头清晰呈现“服务器→HTTP→浏览器→呈现”流程。
评价方式与评价标准
采取课堂即时观察方式开展评价，标准参考如下：4★优秀：能说出 3 个以上影响加载速度的因素，海报逻辑完整、箭头无遗漏；3★良好：说出 2 个因素，海报基本正确；2★合格：说出 1 个因素，海报有少量缺漏；1★待改进：无法描述或海报错误明显。
2.任务2成果：五区域（header/nav/main/sidebar/footer）HTML 骨架文件；对应 CSS 样式表。
评价方式与评价标准
采取教师评价与同伴互评方式开展评价，标准参考如下：4★优秀：标签 100% 闭合，语义化，CSS 文件无冲突；3★良好：偶有小错误，CSS 基本统一；2★ 合格：出现闭合或命名错误，需二次修改；1★待改进：结构混乱，无法正确显示。
（3）任务3成果：v1.0 可访问网页（含导航栏、主题色、至少 1 张校园图片或 1 段视频）；在线工具对比表（列出 VS Code、Dreamweaver、WordPress 的优缺点）。
评价方式与评价标准
采取同伴互评和教师抽查方式开展评价，标准参考如下：4★ 优秀：页面美观、主题色统一、多媒体嵌入无误，工具对比客观具体；3★ 良好：页面完整但创意一般，对比表有遗漏；2★ 合格：内容基本齐全，存在排版或版权瑕疵；1★ 待改进：页面无法打开或大量缺失。
4.任务4成果：PageSpeed PDF报告；优化前后对比截图（加载时间、评分）；自述优化清单（说明采取的具体措施）。
评价方式与评价标准
采取数据机评结合教师审核方式开展评价，标准参考如下：4★ 优秀：PageSpeed 提升 ≥20 分，文件压缩率 ≥30%，清单数据详实； 3★ 良好：提升 10–19 分，压缩率 20%–29%；2★ 合格：提升 1–9 分，措施单一；1★ 待改进：无提升或未提交证据。
5.任务5成果：可公开访问的网址或网址二维码；线上互评留言截图；项目档案袋（含需求文档、迭代记录、同伴评价表）。
评价方式与评价标准
采取教师等级评定方式开展评价，标准参考如下：4★ 优秀：二维码秒开，内容真实有趣，留言≥10条且正面，档案袋完整；3★ 良好：网址可访问，留言5～9条，档案袋基本完整；2★ 合格：偶有加载延迟，留言不足 5 条；1★ 待改进：无法访问或内容违规。
【单元作业设计】
必选作业（全体）：提交“网页优化前后对比报告”（含截图、数据、心得，300 字以上）。
拓展作业（2选1）：A.为学校网页设计一个实体展示盒（结合劳动课程）。B.研究 WebP/AVIF 与 JPEG 压缩率差异，制作 2 分钟科普小视频。