第16课 探秘网页与代码 第2课时 教学设计2025-2026学年人教版 初中信息科技七年级全一册

该初中信息科技教学设计聚焦HTML代码修改、图像两种呈现方式及代码保存形式，通过复习标签知识，演示修改标题验证“代码修改→效果变化”逻辑，搭建旧知到新知的学习支架，自然过渡到修改与探究主题。 特色在于递进式实验（代码修改、图像编码、保存形式）与数字化工具应用，培养计算思维与数字化学习能力，融入信息社会责任教育。图像编码实验让学生理解编码替代文件，Web服务器实验突破“代码≠文件”难点，分层任务与教学评一体化设计提升学生实践能力，助力教师高效教学。

第16课 探秘网页与代码 教学设计 课时二：HTML代码的修改与网页文件认知 一、教学目标 1. 核心素养目标 · 信息意识：结合修改校园科技节网页代码的实践，感知“代码修改→效果变化”的直接关联，建立“HTML代码可编辑、网页效果可定制”的认知，提升主动优化网页呈现的意识。 · 计算思维：通过修改标签内容、属性及图像编码转换实验，梳理“需求→代码修改点→效果验证”的逻辑，理解图像在网页中的两种呈现方式，提升代码修改的逻辑规划能力。 · 数字化学习与创新：借助记事本、《图像编码转换器》《Web服务器》等软件完成代码修改、编码转换和网页预览实验，通过小组协作探究网页文件的保存形式，提升数字化工具的综合应用与创新实践能力。 · 信息社会责任：在代码修改和服务器实验中，遵守文件操作规范，不传播修改后的他人网页，知晓网页代码的版权归属，树立合法编辑和使用代码的责任意识。 2. 具体目标 · 能熟练使用记事本编写和修改HTML代码，完成修改网页标题、更换图片、增加段落说明等基础操作，验证“代码修改→效果变化”的逻辑。 · 能通过《图像编码转换器》完成图像的Base64编码转换，理解“图像文件”和“编码字符串”两种网页图像呈现方式的区别与联系。 · 能通过《Web服务器》软件实验，理解“浏览器只需HTML代码即可呈现网页，代码不一定保存在.html文件中”的核心认知，完成网页呈现条件探究表。 · 能拓展验证“网页元素可引用外站资源”，形成对网页资源引用的系统认知。 二、教学重难点 · 重点：用记事本修改HTML代码的基本操作；图像的两种呈现方式（文件引用、Base64编码）；《Web服务器》软件的使用及“代码≠文件”的认知；网页资源引用的拓展验证。 · 难点：准确找到代码修改点（如标签属性、内容）；理解Base64编码将图像转为字符串的原理；理解《Web服务器》实时生成代码呈现网页的逻辑。 三、教学流程 环节 教师活动 学生活动 设计意图 评价方式 复习导入（5分钟） 1. 复习提问：“上节课我们知道了网页元素对应HTML标签，比如标题对应<h1>标签，那如果想把校园科技节网页的标题改成‘2024校园科技节盛典’，应该修改哪里？修改后网页效果会变吗？”2. 操作演示：打开记事本中的简易HTML代码（含校园科技节标题），修改<title>标签内容后保存为.html文件，用浏览器打开展示标题变化，说明：“代码修改后，网页效果真的会变，今天我们就亲手修改代码，还会探究图像在网页中的呈现秘密和代码的保存形式。”3. 过渡：“首先我们从基础的代码修改开始，体验‘改代码，变网页’的乐趣。” 1. 回顾上节课标签知识，准确回答“修改<h1>标签中的内容”，对“修改后效果变化”进行确认猜想。2. 观察教师操作，看到标题从修改前到修改后的变化，验证“代码修改→效果变化”的逻辑，激发亲手修改代码的兴趣。3. 带着“如何修改图片”“图像如何在网页中显示”“代码必须存在文件里吗”的疑问进入新知学习。 通过复习旧知引出修改需求，结合直观的标题修改演示验证核心逻辑，激发学生动手实践的欲望，自然过渡到本节课的修改与探究主题。 教师观察：评价学生对复习问题的回答准确性，记录对代码修改的兴趣程度。 新知建构（15分钟） 1. 讲解HTML代码修改的核心逻辑与操作要点： - 核心逻辑：“网页效果由代码决定，修改标签的内容（如<h1>标题</h1>）或属性（如<img src="图片地址">中的src），保存后重新打开网页，即可看到效果变化”，结合教材图16.2代码与效果对应图强化认知。 - 操作步骤：打开记事本→编写/粘贴代码→修改目标标签→保存为“文件名.html”（编码选UTF-8）→用浏览器打开预览。 - 常见修改场景：修改<title>改网页标题；修改<img>的src属性换图片；在<img>后加<p>标签加图片说明。2. 讲解图像在网页中的两种呈现方式： - 方式一：引用图像文件（常用），通过<img src="文件路径/文件名.png">实现，要求图像文件与网页文件在对应路径下。 - 方式二：Base64编码呈现，通过《图像编码转换器》将图像文件转为字符串，替换<img>标签的src属性值，此时无需单独的图像文件，浏览器可直接解析编码字符串为图像（结合教材图16.5说明）。3. 讲解网页代码的保存形式： - 常规形式：保存在以.html或.htm为扩展名的网页文件中，浏览器打开文件即可解析。 - 特殊形式：浏览器只需获取HTML代码即可呈现，代码可由软件实时生成（如《Web服务器》），无需提前保存为文件。4. 过渡：“这些修改技巧和呈现方式，我们通过三个实验逐一验证。” 1. 记录代码修改的“修改-保存-预览”三步法，在笔记中标注“内容修改找标签中间，属性修改找标签内关键词（如src）”的技巧。2. 对比两种图像呈现方式，填写“方式-代码格式-优势”对比表，明确“文件引用易修改，编码呈现无需单独文件”的特点。3. 明确“代码≠文件”的核心认知，知晓软件可实时生成代码供浏览器解析。4. 明确三个实验的核心任务，做好工具操作准备。 从“修改逻辑→图像呈现→保存形式”层层递进讲解，结合操作步骤和对比分析化解抽象知识，为三个实验搭建清晰的理论框架，突破“代码修改”和“图像编码”的重点。 课堂提问：随机抽查学生对代码修改步骤的描述；提问“两种图像呈现方式的区别”，检查基础概念掌握情况。 实践体验（15分钟） 1. 组织“代码修改基础实验”（教材学习活动2）： - 实验准备：分发校园科技节简易HTML代码文件，确保学生计算机有记事本和目标图像文件（001.png），强调“仅修改提供的代码文件，不修改他人网页”。 - 分组任务： ① 基础任务：用记事本打开代码→修改<title>为“2024校园科技节”→修改<h1>为“AI绘画作品展”→保存后用浏览器预览，记录效果变化。 ② 进阶任务：在基础任务上，修改<img>的src属性为“001.png”→在<img>后添加<p>标签写“AI绘画作品：笑脸”→预览并记录变化。2. 组织“图像编码转换实验”（教材学习活动2方法二）： - 分组任务：运行《图像编码转换器》→选择001.png→复制编码结果→替换代码中<img>的src属性→删除文件夹中的001.png→预览网页，观察图像是否正常显示，记录实验结论。3. 组织“网页代码保存形式实验”（教材学习活动3）： - 分组任务：运行《Web服务器》软件→在“内容”栏粘贴修改后的HTML代码→记录IP地址和端口→用浏览器访问该地址→修改软件中“内容”栏的标题→刷新浏览器，观察效果变化，完成实验记录表。4. 核心探究：引导讨论“没有图像文件，网页为何能显示图像？”“《Web服务器》没有保存.html文件，为何能显示网页？”5. 拓展任务：修改<img>的src属性为外站图片地址（如校园官网logo地址），预览网页，验证“网页可引用外站资源”。 1. 完成代码修改实验： - 基础组：成功修改标题和一级标题，看到浏览器中标题栏和网页标题同步变化。 - 进阶组：成功更换图片并添加说明，观察到图片和文字的同步呈现。2. 完成图像编码实验：发现删除图像文件后，网页仍能显示图像，得出“编码字符串可替代图像文件”的结论。3. 完成保存形式实验：成功通过浏览器访问服务器地址看到网页，修改软件内容后刷新即变，得出“浏览器只需代码，无需.html文件”的结论。4. 小组讨论达成共识：“编码将图像转为字符串嵌入代码；《Web服务器》实时生成代码传给浏览器”。5. 拓展任务：成功在网页中显示外站图片，验证“网页资源可跨站引用”的逻辑。 通过三个递进式实验，分别验证代码修改效果、图像编码原理和代码保存形式，分层任务兼顾操作与探究；核心探究引导学生提炼实验本质，拓展任务拓宽认知，突破“编码原理”和“代码≠文件”的难点。 过程性评价：检查修改后的代码文件和实验记录表；评价实验结论的准确性；点评拓展任务的完成情况。 总结升华（5分钟） 1. 总结本节课核心：代码修改的“修改-保存-预览”逻辑；图像的两种呈现方式（文件引用、Base64编码）；“浏览器只需HTML代码，代码可保存在文件或实时生成”的核心认知；网页可引用外站资源的拓展结论。2. 知识串联：组织讨论“结合两节课内容，从编写代码到看到网页，完整流程是什么？网页效果可通过哪些方式优化？”，引导梳理“编写标签代码→保存为.html文件（或实时生成）→浏览器解析→呈现效果→修改代码优化效果”的完整链条。3. 素养升华：强调“HTML代码赋予了网页定制的灵活性，但修改他人网页需获得授权，代码和网页资源都受版权保护；技术创新的同时要坚守合规底线，做负责任的代码使用者”。 1. 用思维导图整合“代码修改-图像呈现-保存形式-资源引用”的核心逻辑，强化知识体系。2. 参与讨论，梳理出网页从创建到优化的完整流程，明确“修改标签内容、属性、更换图像”等优化方式。3. 理解代码修改的版权边界，承诺“不随意修改和传播他人网页代码”，将技术认知转化为责任自觉。 梳理知识体系并实现两课时知识的串联，形成完整的网页与代码认知链条；通过素养升华将技术实践与社会责任结合，实现育人目标。 体系评价：抽查学生的思维导图逻辑性；评价知识串联讨论的完整性；记录对版权规范的认知程度。 四、学生活动设计 · 代码修改大比拼：分组领取相同的基础HTML代码，给定“修改标题、更换图片、添加3个段落说明”的任务，完成后提交代码文件和预览截图，教师从修改准确性、代码规范性评选最优小组，时间8分钟。 · 编码解码挑战赛：教师提供一张图像的Base64编码字符串，各组用《图像编码转换器》反向解码（若软件支持）或直接替换到代码中预览，判断图像内容，最快且准确的小组获胜，时间5分钟。 · 观点辩论会：围绕“‘图像文件引用’和‘Base64编码呈现’哪种方式更优”展开微型辩论，正方持“文件引用更优，易修改”，反方持“编码呈现更优，无需管理文件”，教师引导辩证选择，时间5分钟。 五、评价方式（教学评一体化） 评价维度 评价内容 评价方式 概念理解 能准确说出代码修改逻辑、图像呈现方式及代码保存形式 课堂提问、编码解码挑战赛（过程性评价） 实践操作 能完成代码修改、编码转换和服务器实验，准确记录结果 代码修改大比拼得分、实验记录表批改（过程性评价） 思维发展 能分析两种图像呈现方式的优劣，梳理网页创建优化流程 观点辩论会表现、知识串联讨论（过程性评价） 社会责任 能遵守代码修改规范，尊重网页版权，不传播违规代码 实验过程观察、版权规范问答（过程性评价） 六、板书设计 课时二：HTML代码的修改与网页文件认知 1.核心技能：代码修改三步法 第一步：打开（记事本打开.html文件或新建） 第二步：修改（内容/属性） 改标题：<title>新标题</title> 改图片：<img src="新路径/编码"> 加说明：<img><p>说明</p> 第三步：预览（保存为.html→浏览器打开） 2.图像呈现：两种方式 方式一：引用文件（常用） 代码：<img src="文件夹/001.png"> 要求：图像文件在指定路径 方式二：Base64编码 操作：《图像编码转换器》→复制编码→替换src 优势：无需单独保存图像文件 3.关键认知：代码≠文件 常规形式：代码保存在.html/.htm文件中 特殊形式：软件实时生成（如《Web服务器》） 操作：粘贴代码→记录IP和端口→浏览器访问 结论：浏览器只需HTML代码，与是否存文件无关 4.拓展发现：资源可跨站引用 代码：<img src="外站图片地址"> 说明：网页元素可来自其他网站 5.责任底线：尊重版权 不随意修改传播他人网页代码 使用外站资源需符合规范 学科网（北京）股份有限公司 $