资源简介

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