资源简介 (共23张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）将知识转为能力学会求证：W3C 标准的网页就是一段由 HTML 标签组成的描述性文本文档，其各所有代码的功能都是用来创建网页的结构的。你同意这个观点吗？网页代码 编程语言 效果结构 表现 行为 将知识转为能力求证活动：尝试修改web.html中的代码，并观察修改后的网页效果，看看它与W3C标准要求是否一致。观察当改变HTML基本元素后发生的变化生成的效果，分析HTML的基本结构。修改后的： <title><br/>增加一行：<p> <p><br/>修改<style>：原始代码： <br/>修改后代码： <br/>将知识转为能力<br/>对学科方法、工具或作品进行评价反思<br/>①请搜索更多关于网页制作工具的知识，并与同学分享交流哪一款工具更适合现有的实验条件。<br/>测试题<br/>1.浏览器渲染网页时，首先解析的是（ ）<br/>A. HTML 标签 B. CSS 样式<br/>C. JavaScript 脚本 D. 视频<br/>三、 习题测试<br/>学到了哪些知识与技能？<br/>提升了哪些方面的能力？<br/>生成了怎样的观点？<br/>四、 小结回顾<br/>1.项目实施作业<br/>请各小组对项目探究的阶段成果进行整理并提交，整理内容：<br/>（1）项目方案与小组分工表<br/>（2）查找并汇总关于网页制作工具的知识，并与同学分享交流，选择适合自己的网页制作工具<br/>2.课后挑战作业（对应B版中的“挑战”部分）<br/>使用浏览器打开某一网页，按 F12 键，在弹出的源代码窗口中仔细阅读网页的源代码，找出标题、文本、图片等元素，并对其进行修改编辑，注意观察浏览器的实时渲染结果。<br/>五、 作业制作简单网页<br/>实验目标：初步学会制作简单网页，并能通过修改代码浏览网页效果验HTML各元素的作用。<br/>器材要求：信息科技实验室（计算机、网络、AIGC平台）<br/>实验步骤：<br/>观察与记录<br/>1.观察HTML文档的基本格式生成效果。（可以使用W3C提供的在线HTML编辑器https://www..cn/tiy/t.asp f=eg_html_intro）<br/>请自行了解并选择一款人工智能大语言模型工具，来帮你生成一张用 HTML 语言编写的简单网页，并要求对每一行代码进行注释。然后阅读并理解这些 HTML 代码的意思，再将它们完整地复制到记事本中，并命名为web.html文件，最后用浏览器打开并观察该网页的页面效果，看看它是否与你的理解保持一致。<br/>AI大模型生成代码：<br/>生成效果<br/>识别特征<br/>观察当改变HTML基本元素后发生的变化生成的效果，分析HTML的基本结构。<br/>修改后的：<title> <title><br/>增加一行：<p> <p><br/>修改<style>：原始代码： <br/>修改后代码： <br/>修改后的HTML经浏览器生成的效果<br/>三、综合判断<br/>问题思考：<br/>在网页代码中，HTML的作用是什么？CSS的作用是什么？JS（JavaScript脚本语言）的作用是什么？<br/>网页代码 编程语言 效果<br/>结构<br/>表现<br/>行为<br/>附：参考代码<br/>使用百度AI助手生成的<br/>https://www./tryit/tryit.asp filename=tryhtml_hello<br/>当然！以下是一个简单的HTML网页示例，包含基本的结构和一些内容：<br/>html<br/>Copy Code<br/><!DOCTYPE html><br/><html lang="zh-CN"><br/><head><br/><meta charset="UTF-8"><br/><meta name="viewport" content="width=device-width, initial-scale=1.0"><br/><title>简单网页示例欢迎来到我的简单网页这是一个标题这是一个段落，包含一些示例文本。您可以在这里添加您想要展示的内容。列表项1列表项2列表项3希望您能喜欢这个简单的网页示例！