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

第10课　网页的编辑与发布

教学设计（表格式）

学科：信息科技

年级：八年级上册

教材：浙教版（2023）

课型：新授课

一、文本解读

本课为浙教版八年级上册第二单元收尾课，承接网页数据组织、呈现与编码，落点在记事本编写HTML、规范保存与上传发布。教材以“人工智能”主题网站贯穿，把工具选择、代码编写、本地预览、上传发布连成一线，构成编辑、调试、发布的实践闭环，为后续作品共享打底。

二、核心素养

信息意识：能辨认网页文件的编码与命名规范，主动核对发布地址。

计算思维：把编辑与发布拆为编写、预览、上传，依标签排查页面异常。

数字化学习与创新：用记事本与浏览器做出网页，改造栏目成个性页面。

信息社会责任：发布前核对素材来源与内容真实，尊重版权。

三、教学重难点

重点：用记事本编写基础HTML代码，按规范保存为网页文件并设好UTF-8编码，把图片与网页归入同一文件夹；理清网站发布流程与上传操作。

难点：理解标签与页面效果的对应关系，弄清本地文件与服务器网页的差别，能就乱码、空白页、死链作出排查。

四、自学探究

课前打开记事本与浏览器，照教材图例试写含标题、正文、图片的网页，保存中留意类型与扩展名；把网页与图片放进同一文件夹，双击查看效果；再浏览一个校园网站，标出主页文件名，带着“文件怎样变成他人可访问的网页”的疑问进课堂。

五、任务式教学过程（三任务群·九任务）

任务群一　辨析工具，认读网页文件

围绕“用什么写、存成什么”展开，比较记事本、代码编辑器与可视化工具的长短，认清网页本质是文本文件；在试存与复看中记牢扩展名、文件名、编码三条规范，明白编码声明决定中文能否正常显示，并把站点文件集中存放，为后续编写扫清格式障碍。

任务

任务内容

学生活动

达成标志

任务一

比较三类网页开发工具

教师出示同一主题网页的三份制作记录：记事本逐行写代码、代码编辑器带语法提示、可视化工具拖拽排版。提出比

以小组为单位读三份记录，圈出各自的操作痕迹，各写一句适用场景；推选代表用一句话说明本组判

能说出三类工具的不同与适用场合，指出记事本便于理

较角度：代码是否可见、上手难易、改动是否可控。学生按角度填比较表，说明初学者为何从记事本起步，也说明可视化工具的长处。教师追问“看不见代码会带来什么”，引导学生说出可控与可迁移的差别，再补一句：工具只是入口，决定页面样子的仍是代码怎么写。各组的比较表课后汇入学习记录，作为选工具的依据。

断依据，接受其他组补充；组间互评中只提一条最想补上的应用场景。

解代码。

任务二

试存网页，核对扩展名与编码

教师示范一次“看似存好却打不开”的错误存法：类型留在文本文档，文件名沿用默认，编码未选。请学生找出问题，再按“所有文件、英文名、扩展名写html、编码选UTF-8”重存。随后让学生在浏览器打开，观察标题栏与中文显示是否正常；再把编码改成别的选项重存一次，对照乱码现象。教师把两份文件并排放到投影上，让学生指认哪一份能被浏览器识别并说出判据；提示保存位置要与图片所在文件夹一致，避免日后图片丢失。

两人一组，一人按规范保存，一人按错误做法保存，互换文件后双击打开，记录两种结果；在记录单上写出错误成因与改正动作，末尾留一行写本组下次要避开的存法。

能独立存出可打开的网页文件，说出乱码与扩展名错误的表现。

任务三

辨认同文件夹的主页与栏目页

教师给出“人工智能”网站文件夹视图，其中有主页、栏目页、图片子文件夹。请学生指认主页文件名index.html，说明主页为何固定命名；再看栏目页之间的链接，找出跳转去向。教师追问：把文件散放在不同盘会怎样。学生试着移动一个页面，观察链接是否失效，由此体会文件夹即站点、路径即地址的道理。教师再出示把图片放在桌面、网页放在文件夹的错误样本，请学生说出打开后会出现什么。学生把正确做法写成一句话贴在小组牌上，供邻组比对。

在资源管理器中打开样本站点，逐层点开文件夹，画出简图标注主页与栏目页；把移动文件后的异常写进学习记录。

能指出主页文件名，说明站点文件须集中存放。

任务群二　编写网页，调试效果

以“人工智能”主题网站为样本，从骨架标签写起，逐层加入标题、正文、图片与链接，边写边在浏览器核对效果；把乱码、空白、图片不显示当作调试线索，养成改代码再回看页面的习惯，体会结构与呈现的对应。每组留一份排查记录，供组间互查引用。

任务四

搭骨架，写标题与正文

教师在黑板画出骨架：文档类型声明、html、head、body四层关系，说明标签成对出现、内容写在中间。示范在head内写编码声明与页面标题，在body内用

独立输入骨架，逐行核对成对标签；把页面标题改为本组主题名，正文写入两句介绍；同桌互查漏写的结束标签，并把本组骨

能写出可显示标题与正文的网页，标签成对无遗漏。