第10课 网页的编辑与发布 导学案 2026-2027学年浙教版初中信息科技八年级上册

该初中信息科技导学案聚焦网页编辑与发布，涵盖记事本工具使用、网页保存预览、素材文件夹与相对路径管理、本地与发布网页区别及发布基本流程等核心知识。通过课前回顾第7-9课HTML知识，预习新内容，课中结合乱码、图片不显示等故障案例分析，构建从编辑到发布的完整知识支架。 该资料以任务驱动设计，课前预习夯实基础，课中案例探究突破难点，课后分层训练巩固提升。通过故障排查培养计算思维，版权与隐私教育落实信息社会责任，助力学生数字化学习与创新能力提升，习题设计贴合学情，便于自主学习与教师教学评估。

第10课 网页的编辑与发布 导学案 学习目标 知识上：了解记事本等网页编辑工具；掌握网页文件保存、本地预览调试方法；理解网页素材文件夹、相对路径的作用；分清本地网页与发布后网页的区别；知道网页发布的基本流程；了解服务器、域名简单概念；懂得网页发布版权、隐私相关规范。 能力上：能够使用记事本编辑简单HTML网页；学会排查网页乱码、图片不显示等常见故障；理解本地调试的意义；能简述网页发布完整流程，提升计算思维与数字化实践能力。 素养上：养成规范管理网页素材文件的习惯；树立版权意识，不随意盗用他人图文素材；懂得网页发布要保护个人隐私，落实数字化学习与创新、信息社会责任核心素养。 重点难点 重点：记事本编辑网页；网页保存与本地浏览器预览调试；素材文件夹与相对路径；本地网页和发布网页的区别；网页发布基本流程。 难点：理解相对路径对图片显示的作用；排查网页乱码、图片无法显示等常见错误；理解网页发布到服务器的意义；发布网页的版权与隐私风险。 学习过程 课前预习案 ★任务一： 课前预习案（自主学习，夯实基础） （一）本课各环节任务内容 1. 课前任务：回顾第79课HTML网页知识；预习网页编辑工具、网页保存预览；了解素材文件夹、相对路径；区分本地网页与发布网页；记录预习疑问，完成预习填空、判断题。 2. 课中任务：小组结合网页故障案例分析图片不显示、乱码产生的原因；梳理网页编辑保存预览调试发布完整流程；辨析网页发布版权隐私情景；完成课堂同步习题与辨析题。 3. 课后任务：整理本课笔记；完成分层巩固习题查漏补缺；简单梳理制作一个简易网页的操作步骤。 （二）课前预习案 1. 预习核心知识填空 （1）我们可以使用系统自带________软件编写HTML网页代码，完成网页编辑。网页保存的文件后缀名一般为________。 （2）网页编辑完成之后，双击网页文件，用________打开查看效果，这个过程叫做本地预览。发现错误修改代码后，需要________页面查看更新效果。 （3）网页的网页文件、图片素材统一存放在________中，图片标签使用________，路径出错会造成图片无法显示。 （4）________网页：只能够在自己电脑上打开查看；网页上传到________之后，全网用户可以访问浏览，这就是网页发布。 （5）网页创作和发布要遵守版权规范，不能随意盗用他人素材；发布网页不随意泄露________信息。 2. 预习判断题 （1）记事本可以用来编写HTML网页代码。（） （2）HTML网页保存后缀一般为.txt纯文本格式。（） （3）图片素材和网页文件不做文件夹管理，随意乱放，容易出现图片无法显示。（） （4）本地网页直接发给别人，对方电脑一定可以正常打开访问。（） （5）网页发布可以随意复制使用网络上他人的图片、文字素材，不需要考虑版权。（） 3. 预习简答题 简单写出网页本地编辑预览的两个操作步骤。 课中探究案 ★任务二（合作探究，突破重难点） 1. 课堂探究活动 探究案例：情景：同学使用记事本写好HTML网页，保存后浏览器打开网页出现乱码；还有同学网页打开文字正常，但是图片看不到；网页只在自己电脑可以打开，直接把代码发给同学，同学打开图片丢失。 小组讨论： （1）网页乱码、图片无法显示，分别可能是什么原因？ （2）什么是本地网页？网页发布为什么需要上传到服务器？ （3）网页制作和发布过程，我们需要注意哪些版权与隐私问题？ 2. 课堂同步选择题 （1）Windows系统可以编写HTML网页的简易工具是（） A.记事本 B.游戏软件 C.视频播放器 D.画图 （2）HTML网页正确的文件后缀是（） A..html B..txt C..doc D..jpg （3）网页修改代码之后，浏览器要执行什么操作，才能看到更新效果（） A.刷新 B.关闭浏览器不再打开 C.直接打印 D.删除网页 （4）网页图片无法显示，最常见的原因是（） A.图片路径错误 B.浏览器版本太高 C.电脑音量太大 D.网络断开就一定看不到 3. 课堂辨析题 有人认为：“写好HTML网页，保存到自己电脑，就等于完成网页发布，所有人都可以网上访问。”结合本课知识辨析该观点。 课后巩固案 ★任务三（分层训练，深化提升） 1. 单项选择题（10 题） （1）编写HTML网页，系统自带简易编辑工具是（） A.记事本 B.音频播放器 C.看图软件 D.游戏 （2）HTML网页文件后缀是（） A..html B..txt C..xlsx D..ppt （3）修改网页源代码，要在浏览器看到最新效果需要（） A.刷新页面 B.直接关机 C.删除文件 D.重新安装系统 （4）网页图片不能正常显示，最常见故障原因（） A.图片路径设置错误 B.显示器坏了 C.键盘故障 D.鼠标故障 （5）把网页、图片全部统一放在同一个（），方便管理素材，减少路径错误。 A.文件夹 B.回收站 C.桌面零散堆放 D.系统缓存 （6）仅仅保存在本机电脑，只能本机打开浏览，叫做（） A.本地网页 B.已经发布网页 C.服务器网页 D.网络公开网页 （7）要让互联网其他人访问网页，需要把网页文件上传到（） A.服务器 B.本机回收站 C.本机桌面 D.剪贴板 （8）网页出现中文乱码，一般和什么设置相关（） A.字符编码 B.鼠标灵敏度 C.屏幕分辨率 D.系统音量 （9）下面网页制作行为正确的是（） A.随意盗用网络他人图片不注明来源 B.使用有版权授权或者自己创作的素材 C.网页中大量填写个人身份证家庭住址 D.素材文件随意散乱存放 （10）网页完整流程正确顺序是（） A.编辑代码→保存→本地预览调试→上传服务器发布 B.直接上传服务器再写代码 C.只预览不保存 D.写代码直接删除 2. 多项选择题（5 题） （1）记事本可以完成网页哪些操作（） A.编写HTML代码 B.修改网页标签 C.调整网页文本内容 D.直接渲染预览网页 （2）网页本地调试，会遇到的常见故障有（） A.中文乱码 B.图片无法显示 C.标签不闭合网页错乱 D.代码正确网页正常显示 （3）规范管理网页素材的正确做法有（） A.网页、图片素材统一放在同一个文件夹 B.注意图片相对路径设置 C.素材不要随意散乱存放 D.图片随意重命名、乱放位置 （4）网页发布说法正确的有（） A.本地网页不等于发布网页 B.网页上传服务器，外网才能够访问 C.发布网页需要重视版权 D.发布网页可以泄露自己隐私信息 （5）网页创作发布我们要遵守的规范有（） A.尊重素材版权，不随意盗用他人作品 B.网页不泄露身份证、家庭住址等隐私 C.网页内容积极健康 D.随意复制网络素材直接使用不考虑版权 3. 材料分析题（2 题） 材料一：同学使用记事本编写HTML网页，直接把图片随便放在桌面，网页文件保存在另外位置；保存网页打开浏览器预览，文字正常，但是图片看不到；修改代码后忘记刷新浏览器，看不到修改后的效果；网页只保存在自己电脑，以为别人就可以互联网访问。 （1）结合材料说一说，图片无法显示是什么原因？修改代码之后，要做什么才能看到更新网页效果？ （2）什么是本地网页？本地网页是否等于已经发布的网页？为什么？ 材料二：网页制作完成不等于可以全网共享，需要把网页及素材上传到服务器完成发布。网页创作要注意版权，不要直接盗用网络上他人的图片、文章；网页发布不能随意填写、泄露身份证号、家庭住址等个人隐私信息，遵守网络相关规范。 （1）简述网页从编辑到发布完整操作流程。 （2）作为中学生，我们制作并且发布简易网页，要注意哪些版权和隐私方面要求？ 参考答案 （一）课前预习案答案 1. 预习核心知识填空 （1）记事本；.html （2）浏览器；刷新 （3）文件夹；相对路径 （4）本地；服务器 （5）个人隐私 2. 预习判断题 （1）√ （2）× 解析：网页后缀是.html，txt是纯文本后缀。 （3）√ （4）× 解析：本地网页依赖本机素材，直接发给别人容易出现素材丢失。 （5）× 解析：网页发布不能随意盗用他人素材，要遵守版权。 3. 预习简答题（示例） 记事本编写网页代码；保存为html网页文件；双击文件，浏览器打开预览网页效果（写出两步即可）。 （二）课中探究案答案 1. 课堂探究活动参考答案 （1）网页乱码：字符编码设置不对；图片无法显示：图片路径设置错误，素材存放位置混乱。 （2）本地网页：只保存在本机电脑，仅本机可以打开；网页需要上传到服务器，互联网其他用户才能够访问，所以需要发布上传。 （3）版权：不随意盗用他人图文素材，尽量使用授权、自己创作素材；隐私：网页不要泄露身份证、家庭住址等敏感个人信息。 2. 课堂同步选择题 （1）A （2）A （3）A （4）A 3. 课堂辨析题参考答案 该观点错误。 ①保存在自己电脑的网页只是本地网页，只能在本机打开浏览。 ②想要互联网所有人访问，必须将网页连同素材文件上传到网络服务器，完成网页发布。 ③仅仅保存在本地电脑，没有上传服务器，外网其他用户无法访问这个网页。 （三）课后巩固案答案 1. 单项选择题 （1）A （2）A （3）A （4）A （5）A （6）A （7）A （8）A （9）B （10）A 2. 多项选择题 （1）ABC （2）ABC （3）ABC （4）ABC （5）ABC 3. 材料分析题参考答案 材料一： （1）图片和网页文件存放位置散乱，图片相对路径设置错误，造成图片无法显示；修改网页源代码保存之后，浏览器需要刷新页面，才能看到更新后的网页效果。 （2）保存在本机电脑，只能本机打开浏览的网页叫本地网页。本地网页不等于发布网页；本地网页文件只存在个人电脑，没有上传服务器，互联网其他用户无法访问。 材料二： （1）记事本编辑HTML网页源代码；网页与素材统一文件夹管理；保存为html文件；浏览器本地预览、调试修改；全部网页素材上传服务器，完成网页发布。 （2）版权方面：网页素材优先使用自己创作或者有版权授权的图文，不盗用网络他人作品，尊重作者版权；隐私方面：网页内容不填写、不泄露身份证号、家庭住址等敏感个人隐私；网页整体内容积极健康，遵守网络相关规范。 学科网（北京）股份有限公司 $