资源简介

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

展开更多......

收起↑