高中二年级信息技术选修课教学设计：认识网页-结构与原理初探（浙教版选修3第5章第1节）

高中二年级信息技术选修课教学设计：认识网页——结构与原理初探（浙教版选修3第5章第1节）一、教材分析本节是浙教版高中信息技术选修3《网站设计与评价》第五章的开篇内容，承担着从“使用网络”走向“理解网络、制作网页”的桥梁作用。在此之前，学生已经在必修模块中学习了信息的获取、加工与表达，能够熟练地使用浏览器检索信息、整理素材，但他们对网页的认知长期停留在“消费者”层面——知道网页可以浏览、可以点击、可以跳转，却很少思考网页究竟是什么文件、浏览器如何把一段文本变成五彩斑斓的页面、网页与网页之间又是如何实现跳转的。本节正是要打破这种黑箱状态，引导学生完成从用户到设计者的第一次身份转换。本节内容在教材中处于承上启下的关键节点。向上，它呼应了必修模块中“信息集成”的思想；向下，它为后续学习网页制作工具、网站规划与发布、动态网页技术奠定概念基础。可以说，学生对“网页”这一概念理解的深度，直接决定了后续整个选修模块学习的高度。基于此，本课不宜停留在“用软件拖拖拽拽做出一个页面”的操作层面，而应立足学科本质，让学生理解网页的文件本质、超文本的思维方式以及客户端与服务器协同工作的基本原理。二、学情分析授课对象为高中二年级学生。从知识储备看，他们经历了必修模块的系统学习，具备一定的信息素养，能够熟练使用常见的浏览器和办公软件，部分学生有制作演示文稿、图形化编程的经历，对“保存”“上传”“链接”等术语并不陌生。从认知特点看，高二学生抽象思维能力日趋成熟，已经具备理解“代码—解析—呈现”这一转换过程的思维基础，但他们对纯文本的HTML语言往往存在畏难情绪，认为“写代码是程序员的事”。同时，这一学段的学生表现欲较强，乐于在网络空间中展示自我，个人主页、班级相册等真实需求能够形成强劲的学习内驱力。从个体差异看，班级中必然存在两极分化：少数学生通过课外兴趣班接触过网页制作甚至编程，而另一部分学生连文件扩展名的显示都未曾设置。因此教学任务的设计必须具有弹性，设置基础任务与拓展任务两条线，让不同起点的学生都能在本节课获得成就体验。三、教学目标第一，知识与技能层面。学生能够用自己的语言说出网页的本质是一个遵循HTML规范的文本文件，浏览器的作用是解释执行HTML代码；能够识别网页的基本组成元素，包括文字、图像、超链接、表格、表单等；能够理解超文本与超链接的含义，说明超链接如何实现网页之间的关联；能够说出浏览器请求与服务器响应的基本过程。第二，过程与方法层面。通过“查看网页源代码—对比源文件与页面效果—修改代码验证猜想”的探究路径，学生经历一次典型的技术课程实验过程，体会“观察现象—提出假设—动手验证—归纳结论”的技术学习方法，初步形成透过界面看本质的技术眼光。第三，情感态度与价值观层面。消除学生对代码的神秘感与畏惧感，建立“网页并不难，我也可以做”的学习信心；在分析网页的过程中渗透版权意识与信息伦理，引导学生认识到网页代码可查看、可模仿，但内容仍受著作权保护，形成尊重原创的技术伦理观。四、教学重点与难点教学重点为网页的本质、网页的基本构成元素以及超链接的工作原理。这部分内容是整个选修模块的基石，概念必须讲透、讲准。教学难点为HTML代码与页面呈现效果之间映射关系的建立，以及“浏览器请求—服务器响应”这一不可见过程的理解。前者难在从具象到抽象的跨越，后者难在过程不可直接观察，需要借助类比与演示帮助学生建立心智模型。五、教学策略与方法本课采用任务驱动法与对比探究法相结合的策略。以“剖开一张熟悉的网页看它的内部”为核心任务线索，将原理性知识包裹在观察、猜测、验证的活动之中。对比是本课最重要的思维工具：源码与页面对比、记事本与浏览器打开同一文件的对比、有链接与无链接的对比，让学生在差异中建构概念。同时辅以讲授法厘清核心概念，辅以小组协作完成探究任务，辅以演示法突破思维难点。教学环境为配备网络的机房，教师机安装常见浏览器，提前准备一组教学素材网页存于本地D盘，避免网络波动干扰课堂节奏。六、教学准备教师侧准备：制作演示课件；准备三张典型网页——一张图文混排的新闻页、一张含超链接目录的导航页、一张含表单的登录页，全部另存为本地文件；准备一张只有基础标签结构的空白HTML骨架文件（命名为skeleton.html）；在教师机演示环境关闭网页样式表，用于展示“去掉装饰的网页”。学生侧准备：课前一天的导学单，布置三道预习题——你每天访问最多的三个网站是什么；你认为浏览器里看到的网页保存在哪里；猜一猜如果把网页文件的后缀名改掉会发生什么。预习题不追求标准答案，目的是暴露前概念。七、教学过程（一）情境导入：同一个页面，两副面孔（约6分钟）上课伊始，教师在大屏幕上打开一张学生熟悉的学校门户网站首页，提出一个问题：这个页面在服务器上究竟以什么形式存在？不等学生充分讨论，教师随即在页面上右击鼠标，选择“查看网页源代码”，整个屏幕瞬间被一片看似杂乱的代码文字占据。教室里的常见反应是轻微的惊叹声。教师顺势追问：这些像天书一样的文字，和你刚才看到的漂亮页面，是同一个东西吗？学生自由发言。多数人会说“不是同一个，一个看不懂一个看得懂”，少数有基础的学生可能说出“源代码就是网页本身”。教师不急于评判，而是板书两组关键词：左边写“页面——好看、有颜色、能点击”，右边写“源代码——文字、符号、看不懂”，并抛出一个引导性问题：如果它们是同一个东西的两种形态，那么是谁完成了从右到左的“翻译”？这个翻译者就在你们的电脑上，猜猜它是谁？有学生能说出“浏览器”。教师确认：浏览器把一段英文加符号的文本，解释成了我们看到的页面。这节课我们就来回答三个问题——网页到底是什么文件，网页由哪些元素组成，网页与网页之间靠什么连接。设计意图：用“两副面孔”的强烈反差制造认知冲突，导入环节不灌输概念，而是让学生自己产生“想弄明白”的心理需求。三个问题的提出即为本课的学习目标，使整节课的活动有了明确的指向。（二）探究一：网页的本质——一个会“变身”的文本文件（约12分钟）教师下发任务一：在D盘“第五课素材”文件夹中找到wele.txt文件，用记事本打开它，观察内容；然后将文件重命名为wele.html，双击打开，再次观察内容。观察后回答导学案上的两个问题：两次打开看到的内容有什么不同？文件本身的内容改变了吗？学生完成操作后，教师请两三名学生描述现象：用记事本打开看到的是一对对尖括号包着的英文单词和文字内容，改成html后缀后，浏览器打开显示的是排版好的文字，尖括号不见了，标题变大了。教师引导归纳。关键追问一：两次看到的是同一个文件吗？学生确认是的，里面文字完全一样。关键追问二：那一次显示的差别，责任在谁？学生思考后可得出：责任在打开它的程序——记事本只管把内容原样显示，浏览器则会“听懂”尖括号里的指令并按指令排版。教师此时给出本节第一个核心论断：网页本质上是一个纯文本文件，它和作文的区别只在于文字里夹带了浏览器能读懂的排版指令，这些指令有个统一的名字，叫作HTML，中文称为超文本标记语言。“标记”二字，就是指那些包在尖括号里的标签，它们不负责出现在页面上，只负责告诉浏览器“这一段是标题”“这一张是图片”。教师用一段类比巩固理解：一位导演手里有一份剧本，剧本上写着“此处灯光调暗”“女主角从左后方上场”。观众在剧院里看不到这些批注，只看到了灯光变暗和演员登场。HTML就是剧本，浏览器是全体演职员，页面是观众看到的演出。随后教师安排一分钟的快问快答：label是标签的意思，请找出源代码中成对出现的标签，它们长什么样？学生在代码中找出以“<...>”开头、“</...>”结尾的成对标记，初步感知标签的配对结构，为后续模块的深入学习埋下伏笔。设计意图：通过改变文件扩展名这一个几乎零成本的操作，让学生亲手证实“文件没变，解释方式变了”这一事实，把“网页的本质是文本文件”从教师口中的结论变成学生亲手验证的发现。剧本类比则将抽象的“标记—解释”机制落地为可感的生活经验。（三）探究二：解剖网页——页面由哪些元素构成（约10分钟）教师发放第二个任务包，其中包含课前准备的三张本地网页：新闻图文页、目录导航页、表单登录页。任务要求：小组分工，分别用浏览器打开三张页面，填写观察记录表，表中只有三列——“页面上有什么元素”“这个元素起什么作用”“猜猜它在源代码里对应哪个关键词”。学生活动期间教师巡视，重点关注两个观察点：一是学生能否注意到图像与文字的本质差异，二是能否发现表单元素的独特性。巡视中发现的典型问题，留待集中交流时使用。交流环节，教师按元素类别逐一梳理。关于文字，教师指出文字是网页的骨架，占比最大、信息量最密集，标题、正文、段落都可以直接写在HTML中。关于图像，教师重点纠正一个几乎人人都会有的错误前概念。提问：图片是“放进”网页文件里面的吗？请同学们回到刚才的源代码，找到出现图片的位置，看看那一行写了什么。学生找到指向图片文件的img标签后，教师归纳：网页文件里并没有图片本身，只有一张“纸条”写着图片的地址，浏览器读到纸条后再去把图片取来拼在页面上。为了验证这一点，教师现场演示：把素材文件夹里的图片文件改名，刷新网页，图片位置立刻出现破碎图标。这个演示有说服力地证明了图像是以独立文件的形式被网页“引用”而非“包含”的，也为后面讲解文件夹规划埋下伏笔。关于超链接，教师提问：为什么文字会变颜色、鼠标放上去会变成小手？点击之后发生了什么？学生回答“跳到另一个页面”。教师追问：凭什么知道跳到哪里？请一名学生在源代码中找到链接标签，指出其中写着的目标地址。教师总结：超链接的“超”字，体现的是它超越了单一文档的界限，把分散的文档编织成网，这也是“万维网”这个名字里“网”字的由来。关于表单，教师强调它是网页中唯一能让访问者“向服务器说话”的部件——前面所有元素都是服务器给你看，表单是你给服务器递话。登录框、搜索框、问卷提交，都是表单在起作用。最后教师用思维导图在大屏幕上汇总网页的基本组成元素：文字、图像、超链接、表格、音频视频、表单，并请学生对照自己的记录表自查补漏。设计意图：把“网页构成”从教材上的罗列变成逐项的实证活动。其中“图片并非内嵌”的演示是本环节的华彩段，一个破图图标胜过十分钟的讲解；同时三类元素的辨析在功能层面为学生建立了“展示—跳转—交互”的初步框架，这正是网站功能设计的思想起点。（四）探究三：看不见的对话——浏览器与服务器如何协作（约8分钟）教师创设情境：刚才我们打开的网页存在自己电脑的D盘里。可平时上网，网页并不在自己的电脑上，它在别人那里，甚至可能在美国的一台机器里。那你敲下回车的那一刻，发生了什么？学生凭经验回答：浏览器去网上把网页“拿”回来了。教师认可并细化这个模糊的“拿”字，用图示演示一次完整的访问过程：第一步，用户在地址栏输入网址；第二步，浏览器按网址找到存放网页的那台计算机，这台始终开机、专门负责对外提供网页的计算机有个专门称呼——服务器；第三步，浏览器向服务器发出请求，请求的内容翻译成大白话就是“请把某某网页给我”；第四步，服务器找到文件，把它传回浏览器；第五步，浏览器解析代码，呈现页面。为帮助学生形成整体图景，教师组织一次角色扮演活动：请四名学生分别扮演用户、浏览器、网络、服务器，教师口述一个访问网址的场景，由学生依次说出自己这一角色此刻正在做什么、在传递什么。扮演“服务器”的学生需要拿着几张写着HTML内容的卡片，“浏览器”来“索取”并“翻译”给“用户”。活动控制在三分钟内，节奏明快，重在让学生把五个步骤内化为动作序列。教师随后补充两个常见疑问。疑问一：为什么有时网页打开很慢？引导学生回答：服务器远、图片多、网络拥挤，本质都是请求的获取与传输环节耗时。疑问二：为什么有时显示“找不到页面”？引导学生回答：请求发出了，但服务器上没有这个文件，或者地址写错了。至此，学生已经能用本课的原理解释日常上网中的两类典型现象，原理知识实现了向生活经验的回流。设计意图：客户端与服务器的交互不可直接观察，是本课最大的思维障碍点。角色扮演将不可见过程身体化、动作化，符合高二学生从形象到抽象的认知过渡规律；两个“为什么”的追问则让原理知识立刻产生解释力，学生获得“学懂了就能解释生活”的智力愉悦。（五）动手实践：我的第一个网页（约10分钟）教师发放骨架文件skeleton.html，其中已写好最基本的标签框架，标题位置、两段正文位置各留有一处中文提示语“这里换成你想说的话”。任务分三个层级。基础任务：用记事本打开骨架文件，找到提示语，替换成自我介绍的内容，包括姓名、班级、一句喜欢的格言，保存后用浏览器打开查看效果，截图或举手示意完成。进阶任务：在代码中模仿已有标签的写法，尝试修改标题文字的颜色或给某句话加上换行，观察改动前后页面的变化，体会“改代码即改页面”。挑战任务：利用教师提供的第二份素材——一个含有一张示例图片的页面，观察图片标签的写法，把自己素材文件夹中的另一张图片名替换进去，成功让页面显示出新图片。教师巡视指导，重点关注三类情况：忘记保存就刷新页面的，提醒“先保存后刷新”的操作口诀；直接在浏览器里试图打字编辑的，纠正“浏览器只管看，记事本才管改”的分工认识；代码中错用了中文标点或漏掉引号的，引导其对照正确范例逐字符核对，并借此强调代码书写对精确性的要求——标点差一个，效果就完全不同，这正是信息技术严谨性的一堂小课。结束前教师挑选一至两名学生的作品进行投屏展示，请作者说一说改了哪里、页面怎么变的，教师只作简练点评，把成就感留给学生。设计意图：本节是原理课而非软件操作课，但原理课也必须让学生“沾手”。三层任务的设计保证人人可完成、学有余力者有事做；刻意选用记事本而非集成开发工具，是为了让学生与浏览器、与源文件直接对话，不被工具界面遮蔽原理；常见的三类错误恰恰是最有价值的教学资源，在纠错中完成操作规范的初步养成。（六）总结提升与情感渗透（约5分钟）教师带领学生回顾课初提出的三个问题，以师生问答的方式逐一给出浓缩回答：网页是什么？一个用HTML书写的纯文本文件。网页由什么组成？文字、图像、超链接、表单等元素，其中图像等媒体以引用方式存在。网页怎么连起来、怎么被看到？靠超链接编织成网，靠浏览器请求、服务器响应、浏览器解析呈现。知识梳理之后，教师话题一转，进行信息伦理的渗透：今天大家学会了查看任何网页的源代码，这意味着网页在技术上是“透明”的。但技术上的可见，不等于法律上的可用。源代码可以学习模仿，他人创作的图片、文字、设计却受著作权保护。真正优秀的网页设计者，敬畏规则也尊重原创。希望将来同学们做出自己网站的时候，也希望别人这样尊重你。最后教师布置课后任务，分两项：必做任务是回家任选一个常去的网站，查看其源代码，找出页面上某句看得到的话在源代码中的位置，下节课用两分钟分享；选做任务是构思“我的个人主页”想放哪些内容，画一张简单的内容草图，作为下次课学习网页设计的起点。设计意图：总结以问题回扣开头，完成认知的闭环；伦理教育不讲大道理，而是从学生当天刚掌握的“查看源代码”这一技能自然生长出来，责任教育因而有了真实的附着点；课后任务一头巩固本课，一头为后续教学蓄力，构成单元学习的连续链条。八、板书设计黑板左侧写课题“走进网页的世界”。中部自上而下分两栏：左栏“源代码——文本、标签、会说话”，右栏“页面——图文、链接、能点击”，中间用箭头连接，箭头上方标注“浏览器（翻译）”。黑板下部画简易流