第四单元 第1课《探索网页数据呈现》 教案【教科版】信息科技 七年级上册

资源下载
  1. 二一教育资源

第四单元 第1课《探索网页数据呈现》 教案【教科版】信息科技 七年级上册

资源简介

中小学教育资源及组卷应用平台
第1课《探索网页数据呈现》教学设计
课题 探索网页数据呈现 单元 第四单元 学科 信息科技 年级 七年级上
核心素养目标 信息意识:通过学习、交流、对比分析等活动,能够解释万维网、浏览器、网页等概念,能主动利用其探索和关联所需知识。计算思维:探索网页数据呈现,初建宣传网页,认识代码指令如何控制网页呈现,深入理解超链接技术,简要描述互联网信息呈现的主要过程。数字化学习与创新:运用记事本创建基础HTML文件,观察浏览器解析效果,体验网页内容与结构代码的关系。信息社会责任:了解中国WWW网站发展历程,关注网络技术进步;认识https等安全协议,初步形成个人信息保护意识。
教学重点 理解浏览器通过“发送请求-接收数据-解析渲染”的基本工作流程实现网页访问。认识网页文件的本质是包含代码指令的文本文件,而非直接存储多媒体素材。
教学难点 掌握超链接是万维网非线性组织信息、实现自由跳转的核心技术特征。引导学生建立“源代码文本指令”与“浏览器渲染后多媒体效果”之间的认知联系。
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 本课要点互联网时代,网页成为人们获取信息的重要途径,同时设计和发布自己的网页,也是宣传自己的重要手段。为助力学校科技节活动,社团的同学们计划以科技节为主题设计制作相关宣传网页。本节课,我们将了解用于呈现网页的浏览器的工作过程,体会网页的非线性浏览带来的便利;探索网页文件的本质,并创建一个包含文本内容的简单网页。浏览器到底是干啥用的呀?浏览器就像个“万能翻译官+画师”!它负责向网站“要”数据,把看不懂的代码“翻译”并“画”成咱们能看的文字、图片和视频,没它可不行。为啥网上点一下字或图就能跳到新页面?像有魔法!信息海洋的“时空航行”我们常说互联网是“信息的海洋”,万维网(WWW)就是这片海洋中最璀璨的明珠。在这片海洋中航行,我们乘坐的“船”是什么?(停顿)没错,是浏览器!更奇妙的是,海洋中的“岛屿”(网页)之间,有一种神奇的“任意门”——超链接,让我们能瞬间穿梭。今天,我们就化身小小探险家,驾驶“浏览器号”,学习航行原理,并研究一下这些“岛屿”和“任意门”是如何建造的!播放视频《网址到网页:神奇的变身之路》。 分析3个简单网页源代码,用荧光笔标注文本标签(

``

)和链接特征(),完成元素-标签连线卡。记录首次/二次访问同一网站的加载速度差异,分析缓存对图片/文字加载优先级的影响。用F12开发者工具模拟“航海日志”,记录访问网页时的请求头、响应状态码及资源加载顺序。观看视频 培养学生通过逆向工程分析网页源代码的能力,帮助学生理解网页本质为标记语言。培养学生数据分析能力,帮助理解浏览器缓存优化机制,引导思考前端性能与用户隐私的平衡。培养学生实验记录能力,帮助理解浏览器作为“航船”如何与服务器通信,引导学生分析HTTP协议在信息海洋中的导航作用。了解网址与网页的关系。
讲授新课 新知讲解:一、探索浏览器是用户浏览网页时使用的特定软件,它的工作过程是怎样的?相较于文档、演示文稿等文件,网页文件又有哪些特点呢?输入网址时,通常会输入WWW这三个字母,这是为什么?万维网(World Wide Web,WWW)是互联网提供的重要服务之一。畅游信息海洋:互联网的神奇世界互联网之所以被称为信息的海洋,是因为网络中有海量信息在快速传播并跨时空共享与交流。万维网是大规模的信息储藏所,是由存储在网络中不同计算机上的数以千万计的网页所构成的。二、议一议万维网中不同网页通过超链接连接。点击超链接可跳转至新网页,重复此过程就能找到所需内容。超链接是一种按信息关系非线性组织信息的计算机技术。它允许用户点击文字或图片等元素跳转到相关页面,成为互联网的核心特征。甚至有人说,这种“点哪到哪”的方式是互联网的“灵魂”。结合你的使用体验,你认同这种说法吗?为什么?我认同! :自由探索像“寻宝”:查资料时,点关键词(如“宇宙黑洞”)立刻跳转到新页面,再点链接继续深入,像在知识地图中自由挖宝,没有超链接就做不到。信息从孤立变互联:超链接把相关网页“手拉手”连起来(如古诗链接诗人故事),一点就能顺藤摸瓜,让碎片信息织成知识网。它赋予网络“生命力”:搜索引擎和APP都依赖它,“点哪到哪”的自由跳转体验是互联网最独特的功能——说它是“灵魂”,名副其实!核心:超链接让信息“活”起来,把选择权交给用户,这正是互联网的魔力所在。三、探索如果把万维网比作信息的海洋,那么浏览器就是载着我们在海上航行的船只。浏览器,也叫 Web浏览器,是用来检索、展示以及传递 Web 信息资源的应用程序。四、写一写打开你的计算机,看看你目前使用的浏览器是什么?除此之外,你还知道哪些浏览器?我正在使用的浏览器:打开电脑查看后,我发现用的是 Edge 浏览器(屏幕右下角或开始菜单有图标)我还知道这些浏览器:Chrome(谷歌浏览器):图标像彩色圆球,很多同学用它Firefox(火狐浏览器):标志是小狐狸抱地球Safari:苹果手机/平板自带,图标像指南针手机自带浏览器:比如华为的“浏览器”、小米的“小米浏览器”五、探索通过浏览器,用户可以上网查阅资料和浏览信息。那么,浏览器是如何实现这些功能的,原理是什么呢?浏览器的主要功能是发出请求,接收数据,解析和渲染网页代码,在浏览器窗口中呈现网页信息。这里的“渲染”指的是根据接收的网页代码在浏览器窗口中“画”出内容的过程。六、写一写请以小组为单位,看图分析,写出浏览器的工作过程。根据图示,浏览器的工作分为三步:用户在 (浏览器) 输入网址,浏览器向互联网发送 (请求)。互联网将请求传送给 (服务器),服务器找到网页并传回数据。浏览器把数据 (组装) 成可视化的 (网页) 供用户浏览。七、议一议以小组为单位,打开浏览器,点击右键选择 “查看源代码”,看看网页的实际内容。说一说网页是什么样的文件?为什么在源代码中看不到任何图片、视频等内容呢?网页实际是“说明书”文件右键点击网页空白处 → 选择“查看源代码”,会发现网页其实是一个 .html 文本文件(像用代码写的说明书),里面全是英文、符号和网址(例如

文字

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

标题、

段落、图片标签),在浏览器中预览并修改代码(如删除标签),观察显示效果的变化。六、写一写小组为单位,看图分析,写出浏览器的工作过程。七、议一议以小组为单位,讨论“图片/视频存在哪里”,用流程图绘制“代码指令→浏览器请求→服务器返回资源”的完整路径。八、探索以小组为单位,讨论“网页和网站有什么不同”,举例说明(如“一篇博客是网页,整个博客平台是网站”),用表格总结差异。九、探索打开文字类网页(如新闻)和多媒体类网页(如视频网站),统计源代码中

标签与

(标题)、

(段落)、(图片)标签,记录它们如何组成网页框架。十三、设计设计实践任务。十四、实现选择一个实践任务,小组协作完成。十五、科技漫游用浏览器打开中科院高能所官网(http://www.ihep ( http: / / www.ihep ).),在“历史沿革”栏目中找到1994年建立中国首个WWW网站的记录,截图保存关键页面。十六、拓展延伸用nslookup命令查询www.的IP地址(如180.101.49.12),尝试直接访问该IP,观察是否能打开网页,记录“域名是IP的别名,直接访问IP可能无法加载完整内容”。 一、探索通过实际操作培养学生信息检索能力,帮助理解“WWW”作为万维网标识的传统意义,引导学生分析域名结构中子域名的功能分化(如mail.用于邮件服务)。二、议一议培养学生批判性思维能力,帮助理解超链接实现非线性跳转的核心价值,引导通过生活经验论证技术对信息传播的革命性影响。三、探索培养学生流程观察能力,帮助理解浏览器作为“航船”如何定位资源并逐步展示内容四、写一写培养学生的观察识别能力,帮助学生理解不同浏览器作为“信息航船”的外观特征,引导学生通过图标快速区分工具类型。五、探索培养学生认识代码与显示关联能力,帮助学生理解浏览器如何将标记语言“翻译”为可视化内容,引导学生建立“代码决定网页长相”的认知。六、写一写培养学生的观察能力。七、议一议培养学生系统思维能力,帮助学生理解“网页文件只存指令,资源存在远程服务器”的本质,引导学生建立“分布式存储”的概念。八、探索培养学生思辨能力,引导学生建立清晰概念,掌握“网页是文件单位,网站是内容集合”的本质区别。九、探索培养学生比较分析能力,帮助学生理解“不同网页通过不同标签实现信息呈现”,掌握“标签决定内容类型”的原理。十、写一写培养学生总结能力,引导学生系统梳理知识点,巩固“扩展名决定文件类型与技术实现”的核心概念。十一、探索培养学生观察能力,帮助学生理解“音频/视频同样通过链接调用”,建立学生“多媒体资源独立存储”的认知。十二、能量加油站培养学生代码观察能力,帮助学生理解HTML是“网页的骨架”,决定“文字、图片在哪里显示”的结构与内容。十三、设计培养学生的计算思维。十四、实现培养学生的动手能力。十五、科技漫游培养学生信息检索能力,帮助学生验证“中国第一个WWW网站由高能所建立”的历史事实,建立学生对“互联网发展需学术推动”的认知。十六、拓展延伸培养学生技术转换能力,引导学生理解“域名替代复杂IP地址”的便捷性,建立学生“顶级域名标识网站类型”的认知(如.com为商业网站)。
课堂小结 探索网页数据呈现1、进行新知引入2、了解WWW代表万维网3、掌握查看源代码的方法4、认识万维网是信息海洋5、进行相关知识拓展 总结回顾 对本节课内容进行总结概括。
课后作业 1、为什么说网页文件就像一张“藏宝图”,而不是直接装着宝藏的“宝箱”? 布置作业 拓展学生的学习能力
课堂板书 观看板书 强调教学重点内容。
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 (共 2 页)
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)

展开更多......

收起↑

资源预览