资源简介

单元基本信息
单元教学主题 第一单元 互联网信息编码 单元课时 5
单元项目情境与任务 科技文化艺术节是学校一项颇具特色的活动，每年都会邀请一大批校外人士参加。为了能让更多人了解并积极参与，需要你组建一支团队，运用语文、英语、美术等学科知识，来设计制作一份便于社交媒体转发的、以“向世界介绍我的学校”为主题的宣传网页。
单元学习目标 1.知识技能 （1）知道网页的代码组成部分，能够说出浏览器是如何渲染网页绘制出视觉效果的。 （2）知道视频是存储原理，并说出流媒体是如何实现流畅地播放。 （3）知道HTTP协议存在的缺陷，并能说出HTTPS通过哪些改进确保信息在网络传输中的安全。 （4）知道根据需求来设计网页，能够选择合适的工具根据设计来制作、测试和发布网页。 2.素养指向 （1）信息意识：能够认识到互联网对人类社会的影响，并应用于项目问题的解决。 （2）计算思维：能够根据学校科技文化艺术节的宣传需求，设计出便于社交媒体转发的宣传网页。 （3）数字化学习与创新：按照任务需求，能够选择合适的网页制作工具来设计、制作网页，能根据需求收集、加工网页素材，小组成员协同解决相关项目问题。 （4）信息社会责任：在收集、处理和使用网络素材的过程中学习和了解版权知识，负责任地使用网络资源，设计和制作网页。
单元教学整体规划 项目活动 对应课题 拟解决的项目子问题或子任务 课时
项目筹备 第1节精彩尽在网页中——从制作到渲染 规划项目实施方案 1
知识探究 了解网站与网页之间的关系、网页的制作标准与设计制作工具、浏览器是如何渲染网页的，为项目制作储备知识
第2节流畅的网络视频——视频压缩、流媒体及版权保护 了解视频的存储原理及流媒体是如何实现流畅播放的，为收集、编辑适合的视频做储备 1
第3节信息传输保安全——Web 安全协议 了解HTTP和HTTPS的两个协议，为更安全地选择网页发布平台储备知识 1
整理展示 第4节跨学科活动：向世界介绍我的学校 合理设计、制作并交流分享“向世界介绍我的学校”网页 2
项目实施
课题名称 第1课 精彩尽在网页中——从制作到渲染
课时目标 1.合理规划项目实施方案，能够基于小组情况与实验条件进行规划。 2.知道网页诞生的过程，能够说出网站与网页之间的关系。 3.知道网页的制作标准，能够说出网页设计制作工具有哪些。 4.知道浏览器渲染网页的过程。
教学准备 计算机网络，课件，浏览器，AIGC平台
导学过程 意图说明
一、项目筹备 1.展示单元项目情境：略 2.提出单元项目任务：你会如何规划设计“向世界介绍我的学校”的网页？ （1）提供项目方案范例 知识学习实施步骤预期成果学习教材中的相关知识 了解如何根据需求来收集、处理制作网页所需要的各类素材（文字、图片、音频、视频等） 了解如何根据需求来设计网页 了解根据设计来制作网页 掌握如何对网页进行测试、优化和发布确定网页的栏目 选写出网页栏目对应的宣传内容要求 收集并处理素材 设计制作网页 测试优化发布网页（1）向世界介绍我的学校网页 （2）项目成果汇报文档（PPT格式）
姓名角色职责组长主持整个项目开展过程，协调处理各种情况以确保完成项 目任务组织员组织各成员共同开展需求分析、规划实施与交流评价等具 体活动记录员记录并整理需求分析、规划实施与交流评价等活动的相关 信息检查员核查各项任务的完成情况，制作汇报 PPT 并负责对外展示 交流
（2）引导开展自主规划 　　　——要求以小组为单位，基于自身情况进行规划，并将结果填入下表1、表2。 表1 项目实施规划 学习知识实施步骤预期成果
表2 小组合作分工 姓名角色职责
（3）各小组汇报展示交流 　　　——展示小组规划成果，交流规划缘由。 知识探究 项目子任务引入 ——了解网站与网页之间的关系、网页的制作标准与设计制作工具、浏览器是如何渲染网页的，为项目制作储备知识。 2.探究内容与要求 （1）方法引导：遵循“概念→实现→应用”的认知规律。 （2）主要内容： ①网站和网页之间的关系是什么？——变革基础（概念）习得 ②浏览器是如何渲染网页的？——关键技术（实现）运用 ③在网上搜索适合的网页制作工具制作网页？——重要工具（应用）探究 3.知识习得 （1）自主阅读：以书本P3-9为主，网络知识作补充 （2）知识梳理： ①网站与网页之间是 和 的关系。 ②网站是 上用来存放 ，它是所有相关网页的 ，而 则是网站中的文档元素。 ③ 是用于标识网站的名称， 是指输入网站地址后，默认被打开的第一张网页。 ④在网站中， 是用来导航与链接其他内页，而 就是网站内部的其他页面。 4.核心素养培育 （1）学会分析：使用浏览器访问两个你喜欢的网站，并通过单击超链接切换不同的网页，在这个过程中，浏览的网页内有哪些基本元素，基本的结构是什么，是通过什么实现的？ 辅助分析支架：用户通过 来架设网页的结构，通过 控制网页的样式，通过_________来为网页添加交互功能和动态效果。 学会解释： ①编写生成的网页可直接在客户端的任意软件上显示出来，这种说法对吗？请说明理由。 辅助分析支架：无论是采用哪种制作工具，编写生成的网页都是一种包含HTML标签、CSS样式与JavaScript的纯文本文件。而它真实的视觉效果与功能，则必须经过_________，才能正常显示出来。 ②使用浏览器打开网页，尝试将 UTF-8 字符编码更改为 GBK 或者其他编码，网页中的文字发生了变化，为什么？ 辅助分析支架：UTF-8 是互联网中使用最广泛的_________，能够满足不同语言字符的_________，因此在文字解析时不容易出现“乱码”现象。 （3）学会求证：W3C 标准的网页就是一段由 HTML 标签组成的描述性文本文档，其各所有代码的功能都是用来创建网页的结构的。你同意这个观点吗？ ①求证技能：请自行了解并选择一款人工智能大语言模型工具，来帮你生成一张用 HTML 语言编写的简单网页，并要求对每一行代码进行注释。然后阅读并理解这些 HTML 代码的意思，再将它们完整地复制到记事本中，并命名为web.html文件，最后用浏览器打开并观察该网页的页面效果，看看它是否与你的理解保持一致。 网页代码编程语言效果结构表现行为
②求证活动：尝试修改web.html中的代码，并观察修改后的网页效果，看看它与W3C标准要求是否一致。（具体操作见课件） （4）对学科方法、工具或作品进行评价反思 ①请搜索更多关于网页制作工具的知识，并与同学分享交流哪一款工具更适合现有的实验条件。 习题测试 1.浏览器渲染网页时，首先解析的是（ ） A. HTML 标签 B. CSS 样式 C. JavaScript 脚本 D. 视频 小结回顾 请同学按照下列提示进行总结回顾： 1.学到了哪些知识与技能？ 2.提升了哪些方面的能力？ 3.生成了怎样的观点？ 布置作业 1.项目实施作业 请各小组对项目探究的阶段成果进行整理并提交，整理内容： （1）项目方案与小组分工表 （2）查找并汇总关于网页制作工具的知识，并与同学分享交流，选择适合自己的网页制作工具 2.课后挑战作业 使用浏览器打开某一网页，按 F12 键，在弹出的源代码窗口中仔细阅读网页的源代码，找出标题、文本、图片等元素，并对其进行修改编辑，注意观察浏览器的实时渲染结果。 通过范例来帮助学生降低设计制作网页的难度 通过自主阅读，培养学生自习能力，通过知识梳理帮助学生厘清知识脉络。 以浏览网站、网页时常见的现象为情境，将所学知识内化为分析、解释和求证的能力。 通过习题测试检测学生掌握程度。

展开更多......

收起↑