高中一年级信息技术必修1教学设计：6.1网站和网页-认识信息世界的窗口

高中一年级信息技术必修1教学设计：6.1网站和网页——认识信息世界的窗口一、教材与学情分析本课选自浙江教育出版社高中信息技术必修1《数据与计算》第六章第一节，是学生从"用网络"走向"懂网络"的起点课。教材以网站与网页的基本概念为主线，涉及网页的构成元素、网页文件的本质、浏览器的工作原理以及网站的组织结构等内容，为后续学习网页制作、网络应用开发奠定认知基础。高一学生在日常生活中频繁使用浏览器浏览网页、检索信息、观看视频，对网页有充分的感性经验，但绝大多数学生从未思考过"网页到底是什么""浏览器点开一个网址后发生了什么"这类本质性问题。他们容易把网页等同于一张图画，把网站等同于某个品牌名称，认知停留在表层。本课的教学价值就在于撕开这层表象，引导学生从文件、代码、协议的角度重新审视熟悉的网络世界，实现从"信息消费者"到"信息理解者"的角色转变。依据课程标准对"信息系统"模块的要求，本课侧重培养学生的信息意识与计算思维，让学生在观察、对比、拆解网页的过程中建立"网页是一种结构化文档"的核心认识。二、教学目标1.信息意识：能说出网站与网页的区别与联系，理解URL的基本含义，能从地址栏、标签页等细节中主动获取网页信息。2.计算思维：通过查看网页源代码、保存网页文件等操作，理解网页的本质是文本文件，浏览器是解释执行HTML的工具，初步建立"代码—解析—呈现"的过程模型。3.数字化学习与创新：能使用浏览器开发者工具观察网页元素，敢于对网页进行安全的本地修改实验，体验"所见非所得"的探索乐趣。4.信息社会责任：通过辨别网页真实源码与前端显示的差异，初步形成对网络信息"眼见未必为实"的批判意识，为甄别虚假信息、防范网页钓鱼埋下认知种子。三、教学重难点教学重点：网站与网页的概念辨析；网页的本质（HTML文本文件）；浏览器的工作过程。教学难点：理解"网页是代码、浏览器是翻译官"这一抽象机制；建立网页元素与源代码之间的对应关系。四、教学准备教师准备：多媒体机房（保证每人一机可联网）、教学演示课件、一个结构简单的自制示例网页（含文字、图片、超链接、表格）、一段网页源代码的打印片段、课堂任务单。学生准备：具备基本的浏览器操作经验，提前访问过至少三个不同类型的网站（新闻类、购物类、学习类）。五、教学过程（一）情境导入：一张"网页"值多少钱（约6分钟）上课伊始，教师在投影上展示两幅画面：一幅是某知名电商平台的首页截图，另一幅是本地一张普通的风景照片。教师抛出问题："这两张图在你的屏幕上看起来都是图像，但它们背后是同一种东西吗？"学生会产生分歧。有学生说都是图片，有学生隐约感觉不一样但说不清。教师不急于揭晓答案，继续追问："如果我把这个电商首页'复制'下来发给国外的同学，我发过去的到底是什么？是一张照片，还是别的什么？"带着这个悬念，教师点明本课主题：网站和网页。板书课题后，请学生用一句话写下自己此刻对"网页"的理解，投入收集盒，课末再取出来对照——这一设计形成了贯穿全课的认知对照线。（二）概念辨析：网站与网页是什么关系（约8分钟）教师引导学生观察自己打开的浏览器窗口：地址栏里的网址、标签页上的标题、页面里的链接。以学校官网为例，点击"校园新闻""通知公告""教师风采"几个栏目，页面不断切换。教师提问："我们刚才访问了几个网站？"多数学生回答"好几个"，教师顺势纠正：我们始终在学校的同一个网站里，切换的只是不同的网页。由此引出核心概念：网页是网站中的一页，是信息呈现的基本单位；网站是一组相互链接、围绕同一主题或归属同一主体的网页集合，存放于服务器上。可以类比：网站像一本书，网页是书中的每一页；也像一座商场与商场里的一间间店铺。随后讲解URL的含义：统一资源定位符，是每一个网页在互联网上的唯一"门牌号"。教师拆解一个真实网址的结构，指出协议部分、域名部分、路径部分各自的意义，让学生明白地址栏里那串字符不是乱码，而是精确的定位指令。学生完成任务一：打开任务单上给定的三个网址，记录每个网址的域名，并判断它们属于同一网站还是不同网站，写出判断依据。教师巡视，针对把"同一域名下不同路径"误判为不同网站的学生进行个别点拨。（三）探究实验：撕开网页的"外衣"（约15分钟）这是本课的核心探究环节。教师演示第一步：在示例网页上右击，选择"查看网页源代码"。屏幕瞬间铺满密密麻麻的字符。学生一片惊讶——平时光鲜的页面背后竟是这样一堆"乱码"。教师引导学生冷静观察：这些字符里有没有你认识的东西？学生很快能找到网页标题的文字、正文中出现过的词句。教师画龙点睛：网页的本质就是一个纯文本文件，用HTML这种标记语言写成。HTML的全称是超文本标记语言，"标记"的意思就是用一对对标签给内容做记号，告诉浏览器"这是标题""这是段落""这里放一张图""点这里跳到别处"。教师展示源代码中若干典型片段，用放大投影逐行指认：一对标题标签夹着文字，一对图片标签里写着图片文件的地址，一对链接标签里藏着跳转目标。学生发现图片并不在源代码里，源代码只记录了图片的"存放位置"，浏览器再去那个位置把图片取回来拼在页面上。这一发现解决了课前悬念：网页不是一张图，而是一份"组装说明书"。学生完成任务二：在自己打开的网页中查看源代码，使用浏览器的查找功能，在源代码中定位页面上的一句正文文字，把找到的标签结构抄在任务单上；再尝试找出该网页中一张图片的文件地址，并单独访问这个地址，验证图片是否独立存在于服务器上。教师巡视时重点关注两类学生：一类是被满屏代码唬住不敢动手的，鼓励他们先用查找功能"捞"熟悉的内容；另一类是学有余力的，引导他们观察标签的成对出现规律，尝试总结"标记"的书写格式特点。（四）揭秘时刻：浏览器在做什么（约8分钟）教师用一个类比收束前面的发现：源代码是一份乐谱，浏览器是演奏家。我们访问网页时，浏览器做了三件事——第一步，根据URL向服务器请求并网页文件；第二步，逐行解读HTML标记，弄清每个内容的身份和摆放规则；第三步，按照规则把文字、图片、链接渲染成我们看到的画面。为了让学生直观理解"渲染"是实时发生的，教师演示一个安全的小实验：打开浏览器的开发者工具，选中网页标题对应的代码，把标题文字改成学生提议的一句玩笑话，页面上的标题立刻改变。学生兴奋之余，教师立即追问三个问题："我改了服务器上的网页吗？别人刷新这个网页会看到我的修改吗？这说明截图能作为证明网站内容的铁证吗？"讨论后学生达成共识：修改只发生在自己电脑的内存里，刷新即恢复原样。教师由此自然渗透信息社会责任教育：网页截图可以被轻易伪造，面对网传截图要多一分求证意识；同时也正面引导学生，这种审查元素的本领应当用于学习和调试，而不是伪造与欺骗。点到为止，不说教。（五）归纳梳理：构建概念框架（约5分钟）师生共同在黑板上完成一幅概念关系图。最底层是服务器，存放着网站的所有网页文件和资源文件；中间是URL，作为每个文件的定位方式；用户通过浏览器输入URL发起请求，服务器返回HTML文本，浏览器解析渲染成网页；多个相互链接的网页构成网站。教师请两名学生不看笔记，看着概念图把"从敲下回车到看到页面"的完整过程复述一遍，其他学生补充修正。通过复述把零散知识压缩成可迁移的过程模型。（六）首尾呼应与课堂小结（约3分钟）教师取出课初收集的认知纸条，随机朗读几条，请学生自己评价："现在的你会怎么修改这句话？"学生在笑声与对照中感受一节课的认知升级。教师小结本课三层收获：概念上，分清了网站与网页、URL的含义；本质上，知道了网页是HTML文本，浏览器是解析渲染的工具；素养上，懂得了网页显示与底层代码可以分离，看待网络信息要有穿透表象的意识。（七）作业布置基础作业：访问一个你最常用的网站，画出它的首页与至少三个次级页面的链接关系草图，标注每个页面的网址路径。拓展作业：使用记事本仿照课堂示例，写一段只含标题和一段文字的最简HTML代码，保存后用浏览器打开，截图记录代码与显示效果的对照。下节课将从这份手写代码出发，正式学习网页的制作。六、板书设计主板书以概念关系图为中心：服务器（网站=网页集合+资源）→URL定位→请求与响应→HTML文本→浏览器解析渲染→页面呈现。副板书左侧记录网页的四个基本元素（文字、图片、超链接、多媒体），右侧记录学生的典型疑问与课堂生成。七、教学反思本课以"撕开网页外衣"为主线，把抽象的网页本质转化为可操作、可验证的探究活动，源代码查看、图片地址验证、开发者工具改标题三个小实验层层递进，学生的惊异感成为最好的学习动力。概念辨析环节借助"一