资源简介

(共20张PPT)
信息意识· 计算思维· 数字化学习与创新· 信息社会责任
第四单元　互联网数据编码与呈现——美编网页
第1课　探索网页数据呈现
信息科技 七年级 上册
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
引入情境
互联网时代，网页成为人们获取信息的重要途径。同时，设计和发布网页也是宣传的重要手段之一。我们每天都会上网浏览各种网页，大家有没有想过，网页是怎样呈现我们眼前的呢？今天，我们就一起来探索网页数据呈现的奥秘。
第1课 探索网页数据呈现
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
聚焦问题，明确任务
聚焦问题
认知浏览器工作过程、体会非线性浏览价值和除网页文件神秘感，了解网页数据是如何从服务器传输到浏览器并呈现出来的。
明确任务
通过观察和实验，理解网页数据传输和呈现的过程，掌握浏览器的工作原理。
成果形式
一份包含网页数据传输和呈现过程的流程图。
第1课 探索网页数据呈现
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
聚焦问题，明确任务
万维网中不同网页之间通过超链接相互关联。用户点击网页中的超链接就会跳转到另一个网页，如此重复操作，直到找到所有需要的网页内容。超链接是按照信息之间的关系非线性地存储、组织、管理和浏览信息的计算机技术，超链接允许用户通过点击文字或图片等元素跳转到其他相关页面，这已成为互联网的核心特征之一，甚至有人说，超链接这种“点哪到哪”的非线性浏览方式是互联网的“灵魂”。结合自身的使用体验，你认同这种说法吗 为什么
议一议
第1课 探索网页数据呈现
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
分析问题，探索方法
分析问题
这是一个网页数据传输与呈现问题，需要我们从技术实现和用户体验的角度出发，结合互联网应用的知识进行综合考量。
思维方法
需要应用互联网思维，关注网页数据的传输过程；同时运用计算思维，理解浏览器的工作原理。过程中涉及HTTP请求—响应流程、网页文件的本质等新概念。
第1课 探索网页数据呈现
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
分析问题，探索方法：探索要求
探索任务
请同学们使用浏览器开发者工具观察指定网页的加载过程，记录TTFB和下载时间，并分析网页加载慢的原因。
温馨提示
在观察时，重点关注Network面板中的“TTFB”和“下载”两列，用不同颜色标记关键字段，记录数据并总结原因。
第1课 探索网页数据呈现
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
分析问题，探索方法：探索要求
第1课 探索网页数据呈现
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
分析问题，探索方法：探索要求
第1课 探索网页数据呈现
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
分析问题，探索方法：探索要求
第1课 探索网页数据呈现
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
第1课 探索网页数据呈现
分析问题，探索方法：点评展示
点评指导
学生展示观察结果和分析报告，教师点评学生对网页加载过程的理解程度，指出优点和不足之处。
本环节提升升华
通过本次探索，同学们学会了使用开发者工具观察网页加载过程，初步理解了网页数据传输和呈现的技术基础。
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
梳理思路，设计方案：设计要求
任务发布
1. 梳理网页数据传输和呈现的整体思路，以流程图的形式呈现设计方案，包括请求数据、解析数据、呈现内容等步骤。
2. 依据流程图完善设计方案，绘制详细的网页数据传输和呈现流程图，明确每个步骤的操作和注意事项。
温馨提示
在设计时注意步骤的逻辑性和完整性，确保方案的可行性和可靠性；同时，流程图设计需简洁明了，便于理解和操作。
第1课 探索网页数据呈现
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
梳理思路，设计方案：点评展示
点评指导
各小组汇报设计方案，展示流程图，介绍设计思路与内容安排，分享设计亮点。教师点评小组设计方案，肯定优点，指出不足，如流程图设计是否合理、步骤是否完整等；针对问题提出改进建议。
本环节提升升华
通过本次设计，同学们掌握了网页数据传输和呈现的完整流程，学会了用流程图梳理复杂问题，提升了系统化设计思维。
第1课 探索网页数据呈现
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
运用所学，实现方案
活动1：制作第一个HTML网页文件
网页文件本质是文本文件，用任何文本编辑软件都可创建，最简单的编辑软件就是记事本。尝试使用记事本创建一个文本文件，输入一段宣传科技节的文本数据，以htm或html作为文件名后缀保存文档。用浏览器打开该文件，显示文件内容。
第1课 探索网页数据呈现
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
第1课 探索网页数据呈现
运用所学，实现方案
活动2：对比网页呈现效果，思考产生差异原因
请以小组为单位，将老师提供的网页文件分别用记事本和浏览器打开，对比效果。想一想，为什么在浏览器上看就是丰富多彩的、由多种媒体整合在一起的页面呢 思考产生差异的原因。
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
运用所学，实现方案：实现要求
思维碰撞
以小组为单位，思考并探讨以下问题：
为什么在记事本中看到的只是代码，而在浏览器中却能呈现出丰富多彩的页面？
浏览器是如何解析这些代码，将网页元素正确呈现出来的？
网页中的多媒体元素（如图片、视频）是如何嵌入并正确显示的？
第1课 探索网页数据呈现
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
第1课 探索网页数据呈现
运用所学，实现方案：点评展示
点评指导
学生演示实验过程和结果，展示网页呈现效果，介绍实验过程中的关键点和遇到的问题。教师点评学生实现成果，肯定成功之处，指出问题所在，如实验过程是否规范、实验结果是否准确等，针对问题进行详细讲解。
本环节提升升华
通过本次实现，同学们掌握了网页数据传输和呈现的关键技术，提升了操作能力和问题解决能力，增强了对网页呈现过程的理解。
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
第1课 探索网页数据呈现
评价交流，拓展练习
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
第1课 探索网页数据呈现
评价交流，拓展练习：拓展性任务要求
任务要求说明：
课后请尝试使用不同的浏览器访问同一网页，记录各浏览器的加载速度、显示效果和资源占用情况。对比分析后，选择一款最适合自己的浏览器，并撰写一份简短的报告，说明选择理由。这将帮助你更好地理解浏览器的性能差异，提升上网体验。
第1课 探索网页数据呈现
聚焦
探索
设计
实现
拓展
第1课 探索网页数据呈现
全课总结提升
总结提升
运用了互联网思维理解数据传输，用计算思维分析浏览器工作原理。通过实验和观察，建立了“抽象—分解—调试”的思维方式，为后续学习打下基础。
课后学习指导与作业
了解浏览器插件的种类与功能，尝试为浏览器安装插件，解决浏览中出现的问题。
谢 谢

展开更多......

收起↑