资源简介

(共35张PPT)
第四单元 第1课
探索网页数据呈现
（教科版）七年级
上
1
核心素养目标
3
新知讲解
5
拓展延伸
7
板书设计
2
新知导入
4
课堂练习
6
课堂总结
课后作业
8
01
核心素养目标
。
信息意识
计算思维
数字化学习与创新
信息社会责任
了解中国WWW网站发展历程，关注网络技术进步；认识https等安全协议，初步形成个人信息保护意识。
运用记事本创建基础HTML文件，观察浏览器解析效果，体验网页内容与结构代码的关系。
探索网页数据呈现，初建宣传网页，认识代码指令如何控制网页呈现，深入理解超链接技术，简要描述互联网信息呈现的主要过程。
通过学习、交流、对比分析等活动，能够解释万维网、浏览器、网页等概念，能主动利用其探索和关联所需知识。
02
新知导入
互联网时代，网页成为人们获取信息的重要途径，同时设计和发布自己的网页，也是宣传自己的重要手段。为助力学校科技节活动，社团的同学们计划以科技节为主题设计制作相关宣传网页。
本节课，我们将了解用于呈现网页的浏览器的工作过程，体会网页的非线性浏览带来的便利；探索网页文件的本质，并创建一个包含文本内容的简单网页。
本课要点
02
新知导入
浏览器到底是干啥用的呀？
浏览器就像个“万能翻译官+画师”！它负责向网站“要”数据，把看不懂的代码“翻译”并“画”成咱们能看的文字、图片和视频，没它可不行。
02
新知导入
为啥网上点一下字或图就能跳到新页面？像有魔法！
这就是“超链接”的魔法！它像信息间的“任意门”，把相关网页手拉手连成网。一点就跳转，让碎片知识变整体，这可是互联网的“灵魂”！
02
新知导入
我们常说互联网是“信息的海洋”，万维网（WWW）就是这片海洋中最璀璨的明珠。在这片海洋中航行，我们乘坐的“船”是什么？（停顿）没错，是浏览器！更奇妙的是，海洋中的“岛屿”（网页）之间，有一种神奇的“任意门”——超链接，让我们能瞬间穿梭。今天，我们就化身小小探险家，驾驶“浏览器号”，学习航行原理，并研究一下这些“岛屿”和“任意门”是如何建造的！
信息海洋的“时空航行”
02
新知导入
03
新知讲解
探索
输入网址时，通常会输入WWW这三个字母，这是为什么？
万维网（World Wide Web，WWW）是互联网提供的重要服务之一。
浏览器是用户浏览网页时使用的特定软件，它的工作过程是怎样的？相较于文档、演示文稿等文件，网页文件又有哪些特点呢？
03
新知讲解
探索
畅游信息海洋：互联网的神奇世界
互联网之所以被称为信息的海洋，是因为网络中有海量信息在快速传播并跨时空共享与交流。万维网是大规模的信息储藏所，是由存储在网络中不同计算机上的数以千万计的网页所构成的。
万维网中不同网页通过超链接连接。点击超链接可跳转至新网页，重复此过程就能找到所需内容。超链接是一种按信息关系非线性组织信息的计算机技术。它允许用户点击文字或图片等元素跳转到相关页面，成为互联网的核心特征。甚至有人说，这种“点哪到哪”的方式是互联网的“灵魂”。结合你的使用体验，你认同这种说法吗？为什么？
03
新知讲解
议一议
我认同：
自由探索像“寻宝”：查资料时，点关键词（如“宇宙黑洞”）立刻跳转到新页面，再点链接继续深入，像在知识地图中自由挖宝，没有超链接就做不到。
信息从孤立变互联：超链接把相关网页“手拉手”连起来（如古诗链接诗人故事），一点就能顺藤摸瓜，让碎片信息织成知识网。
它赋予网络“生命力”：搜索引擎和APP都依赖它，“点哪到哪”的自由跳转体验是互联网最独特的功能——说它是“灵魂”，名副其实！
核心：超链接让信息“活”起来，把选择权交给用户，这正是互联网的魔力所在。
03
新知讲解
探索
如果把万维网比作信息的海洋，那么浏览器就是载着我们在海上航行的船只。浏览器，也叫 Web浏览器，是用来检索、展示以及传递 Web 信息资源的应用程序。
03
新知讲解
写一写
打开你的计算机，看看你目前使用的浏览器是什么？除此之外，你还知道哪些浏览器？
我正在使用的浏览器：
打开电脑查看后，我发现用的是 Edge 浏览器（屏幕右下角或开始菜单有图标）
我还知道这些浏览器：
Chrome（谷歌浏览器）：图标像彩色圆球，很多同学用它
Firefox（火狐浏览器）：标志是小狐狸抱地球
Safari：苹果手机/平板自带，图标像指南针
手机自带浏览器：比如华为的“浏览器”、小米的“小米浏览器”
03
新知讲解
探索
通过浏览器，用户可以上网查阅资料和浏览信息。那么，浏览器是如何实现这些功能的，原理是什么呢？
浏览器的主要功能是发出请求，接收数据，解析和渲染网页代码，在浏览器窗口中呈现网页信息。这里的“渲染”指的是根据接收的网页代码在浏览器窗口中“画”出内容的过程。
03
新知讲解
写一写
请以小组为单位，看图分析，写出浏览器的工作过程。
根据图示，浏览器的工作分为三步：
1、用户在 （浏览器） 输入网址，浏览器向互联网发送 （请求）。
2、互联网将请求传送给 （服务器），服务器找到网页并传回数据。
3、浏览器把数据 （组装） 成可视化的 （网页） 供用户浏览。
以小组为单位，打开浏览器，点击右键选择 “查看源代码”，看看网页的实际内容。说一说网页是什么样的文件？为什么在源代码中看不到任何图片、视频等内容呢？
03
新知讲解
议一议
网页实际是“说明书”文件
右键点击网页空白处 → 选择“查看源代码”，会发现网页其实是一个 .html 文本文件（像用代码写的说明书），里面全是英文、符号和网址（例如

文字

）。
为什么看不到图片/视频？
源代码只存“指令”：它告诉浏览器去哪找图片（例：），但图片/视频本身存在服务器（像仓库），不直接塞进代码里。
浏览器按指令“组装”：加载代码后，浏览器会根据代码中的网址链接（如 https://xxx/photo.jpg）去下载图片，再拼接到网页上显示。
03
新知讲解
探索
网页，也叫Web页面，是用户通过 Web浏览器所看到的页面，包含文字、图像、声音和动画等信息。
网页是万维网呈现信息的基本单位，它实际上是一个文件，而网站是用于展示特定内容的相关网页的集合。
常见网页扩展名
03
新知讲解
写一写
网页都有哪些扩展名？查看某个网页的扩展名，填写在下表中。同时思考网页为什么会有不同的扩展名。
扩展名 含义 例子
.html 基础网页文件（最常用） index.html
.htm 早期短格式（同html） home.htm
.php 含PHP动态代码的网页 login.php
.aspx 微软技术开发的动态网页 news.aspx
功能不同：
.html：纯静态页面（像固定海报）
.php/.aspx：动态页面（像自动售货机，能根据用户选择变化内容）
技术不同：不同扩展名代表不同编程语言编写（HTML/PHP/ASPX），但最终都被浏览器翻译成网页。
现代网站常隐藏扩展名：为提高简洁性（如 实际由后台程序生成，不显示扩展名）。
03
新知讲解
探索
我们发现，网页文件是由文本内容和一些代码组成的纯文本文件。网页文件里面只存储图片、音视频的链接地址，并不存储图片和音视频，即网页中的多媒体素材通常与网页文件分别独立存储。
03
新知讲解
能量加油站
网页制作关键技术
网页制作关键技术有HTML、CSS和JS：
HTML语言决定网页的结构和内容(“是什么”)，比如网页的整体布局和框架，网页中有哪些文字、图片和视频等信息。
CSS语言决定网页的表现样式(“什么样子”)，比如文字和图片等信息在网页中是怎么排列的。
JS(JavaScript)语言控制网页的行为(“做什么”)，比如单击网页中特定文字，页面会打开并播放段视频等。
03
新知讲解
设计
03
新知讲解
实现
活动1：网页文件本质是文本文件，用任何文本编辑软件都可创建，最简单的编辑软件就是记事本。尝试使用记事本创建一个文本文件，输入一段宣传科技节的文本数据，以htm或html作为文件名后缀保存文档。用浏览器打开该文件，显示文件内容。这是我们制作的第一个HTML文件，标志着我们迈出网页制作的第一步！
03
新知讲解
实现
活动2：请以小组为单位，将老师提供的网页文件分别用记事本和浏览器打开，对比效果。想一想，为什么在浏览器上看就是丰富多彩的、由多种媒体整合在一起的页面呢？思考产生差异的原因。
记事本打开的是网页的源代码，一般是 HTML格式的文件，我们可以通过修改源代码来改变网页显示的内容。浏览器显示的是解析渲染源代码后的效果。
03
新知讲解
科技漫游
中国第一个WWW网站的诞生
20 世纪 90年代初，中国科学院高能物理研究所（以下简称高能所）开通中国互联网历史上第一条国际计算机联网专线。1994年4月，高能所派代表参加了国际首届 WWW 技术大会，回国后就建立了高能所网站，域名为 www.ihep.ac.cn，成为中国第一个 WWW 网站。网站里不仅介绍了中国高科技发展，还提供新闻、经济、文化、商贸等信息。中国第一台网站服务器是 486计算机，安装 Linux 操作系统，通过运行 HTTP 软件包实现内容发布。
03
新知讲解
科技漫游
首先，打开网页速度要快，稳定性要强；其次，账号和密码等安全性要高；最后，操作简单，无广告、弹窗等骚扰，个性化功能齐全。当然，最终选择哪一款，还要根据个人的需求和喜好来决定。
在
我发现，几乎每台计算机都安装有浏览器。你知道哪些浏览器比较好用吗？如何选择适合自己的浏览器呢？
05
拓展延伸
协议：网络通信的“语言规则”
http/https——数据传输方式：浏览器用此协议向服务器请求网页（如http://普通传输，https://为加密安全传输）。
浏览器地址栏“锁图标”的秘密：https://中的s代表加密（SSL证书），保护账号密码不被窃取（锁图标=安全标识）。
URL结构解析
05
拓展延伸
域名：网站的“门牌地址”
域名代替IP——人类可读的捷径：域名（如www.）是IP地址的别名，避免记忆复杂数字（如180.101.49.12）。
顶级域名——网站身份的“后缀”：.com（商业）、.edu（教育）等后缀标明网站类型，如同.html与.php区分网页功能。
URL结构解析
05
拓展延伸
路径与参数：精准定位资源坐标
路径——服务器里的“文件地图”：路径（如/news/index.html）指引服务器找到具体网页文件，如同电脑文件夹层级。
参数——动态内容的“定制指令”： key=value（如 id=123）传递用户需求，实现登录、搜索等个性化页面（对比静态.html）。
URL结构解析
06
课堂总结
1
引入新知内容
2
了解WWW代表万维网
3
理解查看源代码的方法
4
认识万维网是信息海洋
5
进行相关知识拓展
1
2
3
4
5
探索网页数据呈现
07
板书设计
探索网页数据呈现
1、进行新知引入
2、了解WWW代表万维网
3、掌握查看源代码的方法
4、认识万维网是信息海洋
5、进行相关知识拓展
课后作业。
1、为什么说网页文件就像一张“藏宝图”，而不是直接装着宝藏的“宝箱”？
08
课后作业
1.当我们使用浏览器访问一个网站时，浏览器最基本的工作流程是：输入网址 → ( ) → 服务器传回数据 → 浏览器呈现网页。
A. 下载所有图片 B. 发送请求 C. 播放网页音乐 D. 检查电脑安全
2.网页文件（例如 index.html）的本质是什么？（ ）
存储了大量图片和视频的文件包 B. 一个包含文字、图片、视频混合的文件
C. 一个用代码写成的文本文件，存储指令 D. 一个专门用来加密信息的文件
3.万维网（WWW）中，允许用户点击文字或图片就能跳转到其他相关页面的核心技术是什么？它被称为互联网的“灵魂”。（ ）
A. 搜索引擎 B. 网址（URL） C. 超链接（Hyperlink） D. 浏览器插件
B
C
C
08
课后作业
我们用来访问和查看网页的软件叫做_______。
在网页上能实现“点哪到哪”跳转效果的技术叫做______。
最常见的静态网页文件的扩展名是 .______ 或 .______。
浏览器
超链接
html
htm
08
课后作业
为什么说网页文件就像一张“藏宝图”，而不是直接装着宝藏的“宝箱”？
网页文件本身只是一个文本文件（藏宝图），里面写的是代码指令，告诉浏览器去哪里（服务器）找到图片、视频等“宝藏”，并如何组合它们。浏览器需要根据这些指令去下载宝藏并组装成最终看到的页面。
https://www.21cnjy.com/recruitment/home/fine

展开更多......

收起↑