资源简介

(共45张PPT)
第四单元 第5课
（教科版）七年级
上
展示多彩生活
1
核心素养目标
3
新知讲解
5
拓展延伸
7
板书设计
2
新知导入
4
课堂练习
6
课堂总结
课后作业
8
01
核心素养目标
。
信息意识
计算思维
数字化学习与创新
信息社会责任
在网页发布中树立合法合规意识，关注网页设计的包容性与访问友好性，能动手搭建局城网Web服务器以实现网页作品的存储与发布。
运用网页工具制作并发布科技节宣传页，通过优化素材和适配设计提升访问体验与传播效果。
能分析比较B/S与C/S模式的结构特点，能发布网页作品，知道网页服务器的功能，能够概括HTTP协议的基本传输原理。
认识到网页是信息传播的有效载体，能主动思考如何通过选择域名、发布策略让作品在互联网上被有效访问和传播。
02
新知导入
网页如何能在互联网中呈现呢？互联网中呈现的网页数据一般存储在哪里？网页数据是如何在互联网中进行传输的呢？
本节课，我们将了解网页发布条件，搭建网页服务器，上传发布
制作好的网页。
本课要点
02
新知导入
是什么？
这个叫域名，是网站的“名字”，输入它，浏览器就能找到百度的服务器。
02
新知导入
浏览器怎么和服务器“说话”？
它们用一种叫 HTTP协议的“语言”交流。输入网址（请求），服务器就发送网页数据（响应），确保信息准确送达。
02
新知导入
当我们用手机轻松刷视频、查资料时，是否想过信息是如何跨越千里准确送达的？想让我们的科技节网页也拥有这种“超能力”，就需要了解互联网的“门牌”（域名）和浏览器与服务器对话的“语言”（HTTP协议）。
指尖触达世界的“门牌”与“语言”
02
新知导入
03
新知讲解
要想让网页数据在互联网上得以访问要有供网页存储的空间以及浏览服务的网页服务器，然后将网页放在服务器上（即发布网页），最后还要让别人知道服务器的名字和地址。
在
为了让更多的朋友通过互联网看到学校的科技节宣传网页，我们需要做些什么呢？
探索
03
新知讲解
网页服务器的主要功能是存储、处理和传输网页给客户。网页服务器可以放置网页文件，让全世界浏览，还可以放置数据文件，让全世界下载。
探索
通过浏览器能看到丰富多彩的网页数据。这些数据通常存储在哪里？是个人计算机，还是特定类型的计算机？
网页服务器（ Web 服务器）
03
新知讲解
探索
互联网上大部分的网站都运行在专门的网页服务器上。服务器提供各种资源及服务，24小时不间断工作。用户计算机（客户端）只需要装有浏览器，就可以在任意时刻通过浏览器访问网页了，我们把这种模式称作浏览器/服务器模式（Browser/Server模式，简称B/S模式）。B/S模式已经成为互联网中的典型网络结构。
网页服务器究竟是指硬件设备还是软件程序呢？
除了B/S模式，互联网中还有客户端/服务器模式（简称C/S模式）。与B/S模式相比，C/S模式发展历史更为悠久。请查询两种模式的相关资料，与小组成员讨论两者的特点，填写下表。
03
新知讲解
议一议
对比维度 B/S模式 (浏览器/服务器) C/S模式 (客户端/服务器)
优势分析 1. 无需安装客户端，浏览器直接访问
2. 跨平台兼容（Win/Mac/手机通用）
3. 维护升级只需更新服务器 1. 响应速度快，本地计算能力强
2. 可设计复杂功能（如3D渲染）
3. 支持离线操作（部分功能）
缺点说明 1. 功能受限于浏览器能力
2. 网络依赖性强（断网不可用）
3. 数据安全风险较高（网页易被攻击） 1. 需为不同系统开发客户端（Win/Mac版）
2. 用户需手动安装更新
3. 部署成本高（每台设备装客户端）
典型举例 百度搜索
在线邮箱（163邮箱）
教务系统网页版 微信客户端
网络游戏（原神/王者荣耀）
银行ATM终端系统
03
新知讲解
能量加油站
浏览器/服务器模式
在浏览器/服务器模式下，大部分工作由服务器完成，浏览器只需要完成少量的工作。这样可简化系统的开发和维护，且对浏览器的配置要求不高。
03
新知讲解
探索
发布到 Web 服务器中的网页，既可以通过服务器的IP地址访问浏览，也可以通过服务器的域名访问。相比于IP地址，域名更便于人们记忆和使用。若想创建一个具有影响力的网页，首先要注册一个朗朗上口、容易记忆的域名，方便用户访问。
域名
03
新知讲解
探索
类似于生活中的门牌号码，互联网域名也是用字符标识，用于识别和定位互联网中的设备。
一个完整的域名由2个或2个以上部分组成，各部分之间用英文的句点“.”来分隔。最后一个“.”的右边部分称为顶级域名（也称为一级域名），最后一个“.”的左边部分称为二级域名，二级域名的左边部分称为三级域名，以此类推，每一级域名控制它下一级域名的分配。
域名
03
新知讲解
写一写
写出学校官网服务器的域名，或者其他你知道的域名，分析其组成。
常见域名 顶级域名 二级域名
1. 清华大学
www.tsinghua. .cn .edu
2. 百度搜索
www. .com baidu
3. 中国政府网
www. .cn .gov
4. 北京大学
www.pku. .cn .edu
5. 联合国
www.un.org .org un
03
新知讲解
探索
顶级域名分为国别域名和国际通用域名。国别域名有：cn(中国)、us(美国，域名通常缺省)、r(俄罗斯)等，一般用两个英文字母缩写来表示。国际通用域名有：com(商业机构)、edu(教育机构)、net(从事Internet相关网络服务的机构或公司)等，由国际互联网信息中心(InterNIC)管理。要想在互联网上拥有域名，需要先进行域名注册。
域名
03
新知讲解
探索
域名是经过互联网官方认可的标识符，有专门的注册和管理机构，以确保域名不会被重复使用。互联网顶级域名是由互联网名称与数字地址分配机构(ICANN)来定义和分配。
域名
做一做
03
新知讲解
选择几个域名，利用域名注册查询工具判断是否已被注册。
03
新知讲解
能量加油站
顶级域名与二级域名
一个顶级域名中的任意两个二级域名是不可重复的，但不同顶级域名中的二级域名可以相同，例如baidu这个二级域名，既可以在com中注册，也可以在cn中注册。因此，域名是一种相对有限的资源，它的价值随着注册企业和个人用户的增多而逐步被人们所重视。
03
新知讲解
探索
网页服务器中存储着许多数据。用户身处千里之外，要用浏览器获取并查看某个网页，就离不开浏览器和服务器之间的通信“语言”——HTTP 协议。
超文本传输协议 HTTP——浏览器和服务器之间的通信协议
自主思考下列问题后与小组同学交流，并说明判断理由。
03
新知讲解
议一议
HTTP 通信协议适合哪种工作模式？ □ C/S
B/S
谁先发出通信请求？ 浏览器发出
□ 服务器发出
HTTP（超文本传输协议）设计初衷是用于浏览器向服务器请求网页资源，其核心架构为：
浏览器（Browser） 作为客户端发起请求
服务器（Server） 响应并返回数据
HTTP协议采用请求-响应模型：
浏览器主动发起请求（如：输入网址后按回车）
服务器被动接收请求并返回结果（如：发送网页HTML文件）
03
新知讲解
探索
HTTP语言里，常用的请求与响应语句如下图所示。
HTTP语言
请求 响应
HTTP 语言 GET /index.html HTTP/1.1 Host:www. 200
实现功能 获取 www. 网站的主页 请求已正常处理
玩一玩
两人一组，分别扮演浏览器和服务器。提前准备好手卡，蓝色手卡表示请求命令，绿色手卡表示回复状态码。请模拟浏览器与服务器之间的“通话”过程，并解释原理。
03
新知讲解
03
新知讲解
设计
03
新知讲解
实现
活动1：选择Web服务器(可以是学校内搭建的 Web服务器，也可以是互联网上的 Web服务器)，将你制作完成的科技节宣传网页发布至Web服务器上，使其他同学能够在浏览器上查看你的网页作品。
网页作品发布前需要检查网页内容有无错误、是否有侵犯版权等情况哟。
03
新知讲解
实现
活动2：浏览其他小组的网页作品，描述该网页所呈现的内容，写一段简短的网页评价，说一说这个网页中你喜欢的地方及可以改进的地方。
这是第三小组的"校园科技节"网页，展示了活动时间表、科学实验照片和报名入口。
我的评价：
喜欢的地方：颜色搭配很舒服（蓝白主题）、活动照片拍得清晰有趣、报名按钮大且醒目
改进建议：部分图片加载较慢（可压缩变小）、手机屏幕文字会错位（需适配移动端）、缺少返回顶部的快捷箭头
拓展
当浏览网页时，如果看到如图所示的页面，你知道出了什么问题吗？404代码是什么意思呢？利用所学内容进行分析并与小组成员交流。
03
新知讲解
问题： 浏览器请求的网页文件丢失或不存在
404含义： HTTP "未找到资源" 状态码
常见原因：
网址输入错误（如拼写错误）
网页被删除/移动
其他网站链接失效
03
新知讲解
科技漫游
中国互联网的兴起
1995年，中国电信开通了北京和上海两个接入Internet的节点，由此拉开了中国互联网的大幕。1998年前后是中国门户网站上线的爆发期。
1999年，搜狐推出新闻及内容频道，呈现了综合门户网站雏形，开启中国互联网门户时代。2000年，新浪、网易、搜狐等陆续在美国纳斯达克挂牌上市，成为中国互联网兴起的里程碑。
单元作品展示与交流
1.以小组或个人为单位，对本单元完成的网页作品进行展示。
03
新知讲解
单元作品展示与交流
2.填写评价表，对本单元完成的作品进行评价。
03
新知讲解
作品评价表 同学互评( )分 教师评价( )分学生自评( )分 评价维度 评价标准 分值 得分
主题 作品主题鲜明，内容完整 5
作品与主题相关，内容基本完整 4 作品与主题相关度不大，内容不太完整 3 作品跑题或内容不完整 2 技术 能选择适合的工具并熟练使用，网页呈现合理 5
能使用适合的工具完成作品，网页呈现基本合理 4 使用相关软件基本完成了作品，网页呈现效果有待改进 3 未完成作品，网页呈现效果有待改进 2 创意 使用了多种素材，作品创意十足，页面布局合理，给人美的享受 5
能选用适合的图片，有一定的创意，页面布局合理观看体验较好 4 页面内容较为单调，创意不足，页面布局单一 3 以文字为主，呈现效果较为简单 2 合作 小组成员分工明确，任务分配合理，作品展示效果好 5
小组成员有分工，能完成分配的任务，作品展示顺利 4 小组成员分工明确，任务分配合理，作品展示效果好 3 小组成员有分工，能完成分配的任务，作品展示顺利 2 单元内容小结与概念图
本单元，我们探秘了互联网中的网页数据呈现背后的原理，解密了网页标记语言，尝试编辑与优化网页素材，最终发布了网页作品。请回顾本单元所学知识，将下面的单元知识概念图补充完整。
03
新知讲解
实践项目
项目主题一 向世界介绍我们的学校
项目功能
1.创建网页，呈现学校的介绍信息、校园风光图片、地址定位和活动视频等。
2.利用主控板结合摄像头和舵机等外围设备，搭建网页呈现控制设备。（可选）
3.利用激光切割等技术，设计制作控制设备外观。（可选）
03
新知讲解
实践项目
项目主题一 向世界介绍我们的学校
项目说明
1.设计制作网页作品：选择适合的网页编辑工具，完成网页的设计制作。
2.搭建网页呈现控制设备：可以结合六年级过程与控制模块的内容，利用主控板结合摄像头和舵机，搭建控制设备，其中摄像头和舵机分别实现视频数据采集和摄像头方位控制，主控板自带的屏幕实现网页的呈现。
3.设计制作控制设备外观：可以结合初中劳动课中学习的相关技术如激光切割，为网页呈现设备设计制作外观。
03
新知讲解
实践项目
项目主题二 前沿科技我关注
项目功能
创建网页，呈现体现我国前科技的图片、音频、视频等多媒体信息，且网页具有一定交互功能。
项目说明
选择我国在某个领域的前沿支术，如航空航天、量子通信等，以网页的形式展示科技成果。
03
新知讲解
05
拓展延伸
保持“轻装出行”——优化访问效率
图片瘦身计划：像整理书包时去掉多余书本，压缩图片大小（如用在线工具缩小文件），让网页快速打开。
善用缓存帮手：浏览器自动存储常用素材（如校徽图标），下次访问无需重新下载，像把课本放桌面随时取用。
网页设计的“礼貌礼仪”
05
拓展延伸
当好“变形金刚”——适配多设备
响应式布局：网页布局随屏幕尺寸自动调整（如电脑三栏变手机单栏），像水倒入不同杯子总能填满。
触屏友好设计：按钮和链接大小适合手指点击（避免误触），如同教室门牌要够大才容易被找到。
网页设计的“礼貌礼仪”
05
拓展延伸
铺设“无障碍通道”——包容所有人
alt文本描述：为每张图片添加文字说明（如“机器人竞赛照片”），视障者用读屏软件也能“看见”内容。
友好错误提示：用清晰语言提示问题（如“链接失效，试试返回首页”），像路标写明“此路不通请绕行”。
网页设计的“礼貌礼仪”
06
课堂总结
1
引入新知内容
2
了解域名的重要作用
3
理解顶级域名分类
4
掌握404错误的含义
5
进行相关知识拓展
1
2
3
4
5
展示多彩生活
07
板书设计
展示多彩生活
1、进行新知引入
2、了解域名的重要作用
3、理解顶级域名分类
4、掌握404错误的含义
5、进行相关知识拓展
课后作业。
1、404错误是什么意思？
08
课后作业
1.想让互联网上的其他人通过浏览器看到你制作的节网页，必须把网页文件存放在哪里？ ( )
A. 自己的个人电脑上 B. 老师的U盘里 C. 一台能联网的Web服务器上 D. 班级的共享文件夹里
2.在浏览器地址栏输入 www. 就能访问百度网站，其中 baidu 是这个域名的哪一部分？ ( )
A. 顶级域名 (一级域名) B. 二级域名 C. 三级域名 D. 服务器IP地址
3.当你在浏览器里输入网址并按下回车后，浏览器会主动向服务器发送一个“请求”，服务器收到后会把网页数据发送回来，这个过程主要遵循什么协议？ ( )
TCP/IP协议 B. HTTP协议 (超文本传输协议)
C. FTP协议 (文件传输协议) D. SMTP协议 (邮件传输协议)
C
B
B
08
课后作业
我们通过浏览器访问网页，网页文件存放在远端的服务器上，这种模式叫做 ________ 模式。
要想在互联网上拥有一个像 school. 这样的网址名称，需要先进行 ________ 。
为了让网页加载更快，可以对网页中的图片进行 ________ 来减小文件大小。
B/S
域名注册
压缩
08
课后作业
上网时，有时浏览器会显示一个“404错误”页面，这通常表示遇到了什么问题？请简单说明。
浏览器请求的网页文件在服务器上找不到或不存在了。可能的原因是网址输入错误、网页被删除或移动了位置、或者链接失效了。
https://www.21cnjy.com/recruitment/home/fine

展开更多......

收起↑