高中信息技术选择性必修“网络基础”4.3.3建立超链接教学设计

高中信息技术选择性必修“网络基础”4.3.3建立超链接教学设计一、教学背景分析本节内容选自教科版高中信息技术选修模块《网络技术应用》第四章第三节“建立超链接”，是网站制作单元的收官环节。学生在此前的学习中已经掌握了网页的基本结构、文本与图片的插入、表格布局以及CSS样式的初步应用，能够独立完成静态页面的搭建。但此时的网页彼此之间仍是孤立的“信息孤岛”，页面之间缺乏逻辑关联，网站只是一个文件的堆叠，而非真正意义上的作品。超链接是万维网的灵魂。蒂姆·伯纳斯·李在设计万维网时，最核心的创造并不是网页本身，而是让文档之间可以互相指向的链接机制。课程标准在“网络基础”模块中明确要求学生理解超链接在信息组织与表达中的作用，能够根据表达需要合理规划并创建超链接。因此，本节课的教学价值不只在于教会学生书写一段锚点代码，更在于引导学生理解“链接即关系”这一网络时代的基本思维方式。从学情看，高一学生日常频繁接触网页与短视频平台，对“点击跳转”的行为极为熟悉，但绝大多数学生从未思考过跳转背后的技术实现，更谈不上从信息架构的角度规划链接关系。学生容易犯的典型错误包括：链接路径书写混乱导致文件移动后全部失效；链接文字使用“点击这里”等无意义表述；站内导航逻辑混乱，访问者容易“迷路”。这些问题正是本节课需要重点击破的堡垒。二、教学目标理解超链接的概念与工作原理，知道URL、绝对路径与相对路径的区别，能够解释浏览器地址栏中地址变化的含义，形成对网络信息组织方式的整体认识。熟练使用HTML中的锚标记创建各类超链接，包括站内页面链接、站外链接、电子邮件链接、锚点链接与图片链接，能够正确书写相对路径，保证网站文件夹整体迁移后链接依然有效。能够从用户视角规划网站的链接结构，绘制站点导航图，选择恰当的文字作为链接载体，使作品具备良好的可用性与可访问性。在制作班级主题网站的真实任务中体验协作与迭代，体会技术服务于表达的价值观，初步形成信息架构意识与用户体验意识。三、教学重点与难点教学重点：锚标记的基本语法与href属性的用法；相对路径的书写规则；链接文字的选择原则。教学难点：相对路径与绝对路径的本质区别及其工程意义；从“会做链接”上升到“会规划链接结构”的思维跃迁。四、教学方法与策略采用“真实情境驱动、对比体验先行、任务分层递进、作品评审收束”的整体策略。课前教师准备一个“病网站”——链接文字全是“点击这里”、路径全部是本机绝对地址、导航逻辑混乱的示例站点，让学生在体验中主动发现问题，产生认知冲突，再以解决问题为主线组织新知学习。机房环境为每人一机，配备局域网络教学平台，支持作品提交与互评。五、教学过程（一）情境导入：一次糟糕的浏览体验上课铃响，教师在教学平台发布“班级风采网站初版”，请学生用三分钟自由浏览，任务是找到“运动会照片集锦”页面并返回首页。学生操作后普遍反映体验糟糕：有的链接点不动，有的点开是“无法显示此页”，有的进入一个陌生页面后找不到回去的路。教师追问：同样是网页，为什么有的网站让人流连忘返，有的网站让人三分钟就想关掉？问题出在哪里？学生七嘴八舌：链接坏了、找不到入口、文字看不明白。教师顺势揭示课题——这些问题看似琐碎，根子都在同一个技术上：超链接。今天我们就把网站的“经络”接通，让信息真正流动起来。这一导入的设计意图是让学生先当用户、再当作者。只有亲身经历过“迷路”的挫败，学生才会理解本节课每一项规范存在的理由，学习动机由外部要求转化为内在需要。（二）新知建构之一：解剖一个超链接教师在大屏展示一段最简代码并投影其浏览器效果：＜ahref="news.html"＞班级新闻＜/a＞请学生观察并拆解：这对标记由哪几部分组成？学生回答后开始归纳。教师板书锚标记的三个要素：标记名a取自英文anchor（锚），href属性指明链接的目标地址，开始标记与结束标记之间的文字是用户在页面上看到并点击的部分。教师提出关键问题：如果把href里的内容改掉，会发生什么？如果把中间的文字改掉，又会怎样？请学生在练习页面上动手验证，两分钟后交流。学生发现：href决定“去哪”，标记间的内容决定“看到什么、点什么”。教师强调，href是超链接的心脏，而链接文字是面向读者的门面，两者一个都不能马虎。随后教师抛出一个思维含量更高的问题：互联网上几十亿个网页，浏览器凭什么凭一串字符就能找到目标？由此引出URL的概念。教师用“寄信”作类比：URL就是互联网上每一份资源的门牌地址，协议名相当于快递公司的选择，域名是城市与街道，路径是楼栋和门牌号。学生在上一章已接触过域名与IP的知识，此处顺势串联，形成知识的纵向贯通。（三）新知建构之二：绝对路径与相对路径的较量这是本节课第一个真正的难点。教师不直接讲授，而是设计了一个“事故重演”实验。教师请一名学生演示：打开上一节课制作的网页，其中图片与链接的路径写的是C盘下的完整地址，如file:///C:/Users/张三/Desktop/mysite/page2.html。在学生自己电脑上一切正常。接着教师把该同学的网站整个文件夹拷贝到教室服务器，再从另一台电脑访问，所有链接集体“阵亡”。教室里一片哗然。教师抓住这个时机提问：网站没有改过一个字，为什么换个地方就打不开了？学生讨论后逐渐逼近真相：因为链接里写死了某台电脑上的位置，换了环境，地址就成了空中楼阁。教师此时给出绝对路径与相对路径的概念：绝对路径从盘符或协议开始写起，指向一个固定不变的全局位置；相对路径以当前文件所在位置为参照，描述目标文件“相对于我”在哪儿。两位同学约好在教学楼见面，一个人说“我在北京市海淀区中关村大街某号”，另一个人说“我在三楼楼梯口往右第二间”，前者是绝对路径思维，后者是相对路径思维。只要两人整栋楼一起搬走，第一种说法就失效了，第二种说法依然成立。学生恍然大悟。教师随即系统讲授相对路径的书写规则：同目录文件直接写文件名，如href="page2.html"；下一级目录用斜杠进入，如href="images/photo.html"；返回上一级用两个点加斜杠，如href="../index.html"。每一个规则都配一个目录结构示意图，让学生先看着图说出答案，再观察href="news.html"这类代码的实际效果，做到图示、口述、代码三者对应。随后安排针对性练习：给出一张网站目录树，包含首页、news文件夹、images文件夹等多个层级，要求学生写出五种不同位置关系下的相对路径。教师巡视，重点辅导对“../”理解困难的学生，提示其口诀：“目标在上级，两个点回去再下来；目标在身边，直呼其名；目标在里头，报名字再进门。”练习结束后同桌互查，教师再用随机点名方式口答验收，确保人人过关。（四）新知建构之三：超链接的大家族教师指出，href的值不局限于网页文件，网络上一切可寻址的资源都可以成为链接目标。通过四个梯度任务，引导学生逐一探索。任务一，站外链接。请学生在网页中加入指向中国中小学智慧教育平台的链接，href写法为https协议开头的完整URL。教师强调：凡是链出本站，必须使用带协议的完整绝对地址，否则浏览器会把它当作站内文件去查找。同时介绍target="_blank"属性，让外链在新窗口打开，避免访客一去不复返，这是网站留住访问者的基本技巧。任务二，电子邮件链接。href="mailto:banwei@example"，点击后自动唤起邮件客户端。教师提醒学生思考这种链接的适用场景与局限——在没有配置邮件客户端的电脑上它并不好用，因此正式网站往往同时提供明文邮箱地址。任务三，页面内锚点链接。教师展示一个包含“运动会、艺术节、科技节”三个长版块的活动集锦页面，学生在滚动中苦不堪言。教师提出问题：能不能做一个页面顶部的目录，点击即达对应版块？学生带着需求学习：先在目标位置用id属性打下“桩”，如＜h2id="yundong"＞，再让链接href="yundong"指向这个桩。学生亲手体验“一跃而下”的效果后兴致很高。教师点拨：这就是百度百科、长文档网页中无处不在的目录跳转，见到好的设计要能识破其背后的技术。任务四，图片热区与图片链接。将＜img＞标记整体嵌入＜a＞标记内部，图片即可点击。教师展示电商首页的banner图，说明“图即入口”是商业网站的基本手法，但提醒学生图片链接必须配上alt文字，既为搜索引擎考虑，更是对视障用户使用读屏软件的尊重——技术伦理就藏在一行属性里。四个任务完成后，教师引导学生绘制一张“超链接类型地图”，用思维导图归纳各类链接的href写法特征与典型用途，完成知识的结构化整理。（五）新知建构之四：从会做链接到会规划链接技术层面的问题解决了，教师把课堂推向更高处。重新调出课初那个“病网站”，请学生以小组为单位会诊，列出它的全部“病灶”。学生归纳出三类问题：链接文字全是“点击这里”“更多”，不看上下文根本不知所云；导航缺斤短两，深层页面有去无回；栏目之间链接随意交叉，整体结构像一团乱麻。教师借此讲授三条链接设计原则。其一，链接文字要能独立表意，看到“2025年秋季运动会照片”就知道点击后得到什么，这是对所有访问者尤其是使用读屏软件者的基本尊重。其二，每一个页面都应提供回到首页与上级栏目的通道，导航如路标，缺一不可。其三，网站整体结构宜采用树状层级，首页树干、栏目树枝、内容页树叶，层级不宜超过三层，层层有回路。各小组据此为自己即将完善的班级网站绘制站点结构图，用方框表示页面、箭头表示链接关系，画在A4纸上。教师投影两组有代表性的结构图进行点评：一组结构清晰但入口过深，另一组首页直达性好但栏目间存在无效交叉。在比较中学生体会到，规划链接本质上是在设计信息大厦的走廊系统，考验的是换位思考能力。（六）综合实践：让班级网站血脉贯通进入本节课的核心实践环节，时间约十五分钟。任务要求：完善小组前期建设的班级主题网站，做到四个必须——必须使用相对路径，保证文件夹整体迁移后所有链接有效；必须为每个页面配置完整导航条；必须至少包含一个站外链接、一个锚点链接和一个图片链接；所有链接文字必须准确表意。学生投入制作，教师行间巡视，重点关注三类情况：路径中误用盘符开头的绝对地址；中文文件夹名导致的链接异常；锚点id命名与链接中的名称不一致。对共性问题，教师即时调用大屏集中讲解两分钟，再放手继续。进度快的小组进入挑战任务：为网站制作“面包屑导航”，即在页面顶部显示“首页＞班级活动＞运动会”这样的层级路径，进一步加深对网站层级结构的理解。（七）展示互评与课堂小结各组将网站压缩包整体提交到教学平台的另一目录下，模拟“网站搬迁”，互相访问。评价量规聚焦四条：链接全部有效、导航随处可达、链接文字表意清晰、使用了相对路径。每组派代表用一分钟介绍本组最得意的一处链接设计，说明设计理由。学生互评投票，教师点评时特别表彰了用面包屑导航和页面底部“返回顶部”锚点提升体验的做法。课堂最后，教师引导学生回到本课起点重新思考：超链接让孤立的网页连成网站，让无数的网站连成万维网。小到一个href属性的写法，大到整个互联网的组织方式，贯穿着同一条思想——用地址定位资源，用链接表达关系。教师布置分层课后任务：基础任务是检查并修正个人主页的全部链接；拓展任务是调研学校官网的导航结构，写三百字的分析报告，指出其链接设计的一处高明之处与一处改进建议。六、板书设计主板书以一条横轴展开：左端是“一个链接”，分解为a标记、href属性、链接文字三要素；中段是“两种地址”，对比绝对路径与相对路径的写法与命运；右端是“三类素养”，列出路径规范化、文字表意化、结构层级化。副板书区域保留课初“病网站”的病灶清单，与新知形成前后呼应。七、教学评价设计本课采用过程性评价与表现性评价相结合的方式。过程性评价依托路径书写练习的同桌互查与教师抽测，关注知识层面的达成度；表现性评价依托小组网站的四点量规与搬运测试，关注技能迁移与作品质量；课堂问答与结构图点评则承载对思维发展的观察。评价主体涵盖自评、互评与师评，评价结果记入学生的模块学习档案袋