高中一年级信息技术选修3“建立超链接”教学设计

高中一年级信息技术选修3“建立超链接”教学设计教材分析与学情定位本课选自教科版高中信息技术选修3《网络技术应用》第四章第三节第三课时“建立超链接”。此前学生已经完成网站主题确定、素材收集与网页初步制作的任务，掌握了在网页中插入文字、图像、表格的基本操作，但对页面之间、站点之间如何建立起有机联系的认识仍停留在“在浏览器里点击就能跳转”的经验层面。高一学生思维活跃，动手愿望强，但容易满足于模仿操作步骤，对超链接背后“路径”“锚点”“目标框架”等概念缺乏结构化理解，这正是本课需要突破的认知节点。超链接是互联网区别于传统媒介的本质特征之一。单页网页只是信息孤岛，而通过超链接，文字、图片、按钮乃至整个页面都被编织进一张网，浏览者由此获得非线性获取信息的自由。让学生理解这一点，远比教会点击哪个按钮更接近学科本质。因此本课的教学定位是：以操作为抓手，以概念为骨架，以任务为驱动，让学生在“做链接”的过程中真正理解链接。教学目标知识与技能目标：理解超链接在网页组织中的作用与基本构成要素；掌握文字超链接、图像超链接、电子邮件链接的创建方法；理解绝对地址与相对地址的区别，能为站内页面建立相对路径链接；初步掌握锚点链接的使用场景与设置方法；学会设置链接的打开方式。过程与方法目标：经历“分析跳转需求—选择链接类型—设置链接属性—预览测试修正”的完整流程，形成建立超链接的一般方法；通过对比观察URL变化与文件夹结构，自主归纳相对路径的表达规则。情感态度与价值观目标：体会链接背后信息共享、开放互联的网络精神；在小组协作中形成规范命名、结构文件管理的工程意识；树立负责任地引用网络资源的意识，认识到链接不仅是技术动作，也涉及版权与伦理。教学重点与难点教学重点是超链接的创建方法及相对路径的理解与运用。学生只有真正弄清“链接指向的是一个地址，编辑器只是帮你写下这个地址”这一本质，才能在脱离软件向导后举一反三。教学难点有二：一是相对路径中“../”所表示的上级目录概念，这是学生从直观操作迈向结构化思维的坎；二是锚点链接的双向过程——先命名位置，再建立指向，思维链条比单一链接更长，逻辑要求更高。教学准备教师准备一个结构清晰的半成品网站“家乡风物志”，包含首页index.html和名胜、美食、民俗三个子页面，素材文件夹images按类别分层存放；在每个页面中故意删除所有导航链接，形成“孤岛网站”；另准备一篇超长页面“非遗名录”，作为锚点链接的载体。机房环境安装FrontPage或同类可视化网页编辑器，保证教师机可广播控制，学生机可访问共享服务器上的课堂资源包。课前通过问卷了解学生对已有网页编辑操作的熟练度，据此分层安排小组。教学过程一、情境导入：一个走不出去的网站教师投影打开“家乡风物志”首页，页面图文并茂，第一张巢湖夜景图十分精美。教师提问：“这个网站漂亮吗？请一位同学帮我找到介绍三河米饺的页面。”学生在浏览器中寻找，却发现无论怎么点击图片和文字，页面纹丝不动。疑惑在教室里蔓延，有学生打开“文件”菜单试图找入口，也有人猜测是电脑出了故障。教师顺势在地址栏手动输入“meishi.html”，美食页面出现了。学生恍然大悟：页面其实都在，只是找不到路。教师板书一句话：“信息存在，价值未现。”随后追问：“现实世界里的路靠公路和指示牌，网页世界里的路靠什么？”学生已有上网经验，齐声说出“超链接”。至此，学习的必要性由学生自身的困境自然生成，而非教师告知。教师用一分钟讲清一个观念：超链接不是网页的装饰，而是网页的灵魂。一个网站的可用性，很大程度上取决于链接设计是否合理。今天这节课的任务，就是为这个“孤岛网站”修桥铺路。二、认识超链接：从“怎么点”到“指向哪”教师打开一个正常网站，让学生观察鼠标悬停在链接上时发生的三件事：光标变成小手形状，状态栏显示一串地址，点击后页面跳转。教师指出，超链接由两部分构成：链接源，即承载链接的文字、图像或其他对象；链接目标，即被指向的资源，可以是网页、文件、邮箱，甚至页面内部的某个位置。教师打开一个链接的HTML源代码，向学生展示标签的真实面貌：一对锚标签，href属性里写着目标地址，标签之间是显示给浏览者看的文字。教师强调：“你们点击的那行蓝字只是链接的外壳，真正的灵魂藏在href后面那串地址里。”这短短两分钟的源码窥探是刻意的教学设计——可视化编辑器操作简单，但若只学按钮，学生学到的只是某个软件的面貌而非超链接本身。随后教师抛出其子目概念：超链接最常见的应用情形包括站内链接、站外链接、邮件链接和锚点链接，今天将逐一完成这座链接之桥的四段铺设。三、任务一：架设主通道——站内页面链接与地址的两种写法任务情境：在首页导航区“名胜”“美食”“民俗”三个文字栏上建立指向对应子页面的链接，并给三个子页面添加“返回首页”链接。教师演示第一步的做法：选中“美食”文字，打开“插入超链接”对话框，在文件夹视图中选择meishi.html确定。学生跟着完成。演示只示范一个，其余两个交给学生独立操作，小组内互助。第一个思维挑战随即到来。教师提问：“老师在首页链接meishi.html时，看看编辑器写的地址是什么？如果我把地址写成D盘下文件夹里的完整路径，比如C盘或D盘开头的文件名，网站传到服务器上还能正常工作吗？”学生在源代码中发现当前链接只写了文件名本身。教师引导对比两种写法：写法一：D:\web\meishi.html，这是绝对地址，从磁盘根目录出发一路写到目标，换一台电脑、换一处存储位置，路径立即失效。写法二：meishi.html，这是相对地址，只描述“从当前页面出发”到目标的路线。两个文件同在网站根目录，所以三个字足矣。教师用生活语言类比：“给住在同一小区的朋友指路，你不会说‘从人民广场出发向西……’而会说‘我就在你楼下’。相对路径就是‘从你所在的位置出发’的说法。网站搬家到服务器时，整栋楼一起搬，邻里关系不变，所有相对链接都安然无恙。”学生在笑声中理解了两类地址的本质差异，并记住一个规范原则：站内链接一律使用相对路径。接着布置进阶小任务：在meishi.html中插入“返回首页”链接。学生操作时发现需要选择上级目录中的index.html，部分学生因文件位置判断错误而链接失败。教师不急于纠正，而是让学生切换到预览状态验证结果，失败的链接恰好成为反面教材，引出下一个知识点。教师展示文件夹结构图并板书规则描述：目标与当前页面在同一目录，直接写文件名；目标在上级目录，用“../”表示向上一级，需要上几级就写几个；目标在下级子目录，写出子目录名加斜杠再加文件名。配合“回到楼上拿东西”“下楼去餐厅吃饭”的位置比喻，学生建立从文件夹结构到路径字符串的直觉。教师要求每位学生在自己的网页源代码中找到自己写下的相对路径并口头解释，确保人人过关，这一关是本课的教学难点落点。四、任务二：直通远方——站外链接与负责任的引用任务情境：在首页“友情链接”板块添加指向巢湖市政府网或安徽旅游网首页的链接。学生很快发现：建立站外链接时，目标不是一个文件而是一个完整网址。教师强调http协议头不可省略，否则编辑器会误认为是站内文件。学生动手操作中，有人用复制粘贴，有人手工输入，教师巡视提醒：网址较长时务必从浏览器地址栏复制，避免敲错字符造成死链。教师趁势插入一段迷你讨论：“看到网上的好文章、好图片，直接把它们复制粘贴到自己的网站，和用超链接指向原页面，这两种做法有什么区别？”学生初步讨论后教师总结：复制内容涉及著作权，可能构成侵权；做链接则是站在自己门口指路，尊重原创，也是互联网的礼节。链接不仅是技术动作，也承载着网络公民的责任。这一环节落点为情感态度层面的浸润，用时控制在五分钟以内。五、任务三：构建反馈渠道——电子邮件链接任务情境：在网站底部添加“联系我们”，点击后自动打开邮件程序发往班级公共邮箱。教师先让学生猜测有现成工具可循：“既然指向网页是链接，指向邮箱能不能也是链接？”学生尝试在插入超链接对话框中寻找，发现类目中有“电子邮件”选项，输入班委会邮箱地址，预览试点后邮件软件自动打开，收件人已填好，学生颇有成就感。教师随后请学生在源代码里查看这个链接的写法，发现href内的地址以mailto开头。教师点明规律：href开头的协议标识告诉浏览器链接的性质——http开头是网页，mailto开头是邮箱，工具在后台帮你写下的其实只有这一行标记。至此学生对“编辑器只是帮你写地址”这一核心观念的认识进一步深化。六、任务四：页面内部的电梯——锚点链接任务情境：打开“非遗名录”页面，这一网页超长，里面有数十个非遗项目的介绍。页面顶部有项目目录，要求学生实现“点击目录条目直接跳到对应介绍，介绍末尾又能一键回到顶部”。教师先抛出问题：“这一次链接指向的不是另一个文件，而是本页面里的某个位置。我们如何让一个位置具有名字？”学生在知识铺垫中寻找答案，教师演示锚点的两步逻辑：第一步，命名目标：光标定位在“花鼓灯”标题处，插入书签命名为huagudeng。这相当于在页面某处插了一面写着名字的旗子。第二步，建立指向：选中顶部目录里的“花鼓灯”，插入超链接时在链接目标里选择书签huagudeng。相当于告诉浏览器：点这里，去有那面旗子的地方。学生分头完成五个条目的锚点链接和底部“返回顶部”链接。有学生只做了第二步漏了第一步，点击后毫无反应。教师抓住这个典型错误在全班剖析：“先立旗，再指路，顺序不可颠倒。命名位置是指向的前提，这和日常找路一个道理——你得知道目的地叫什么，地图才查得到。”经此一例，学生对锚点两步逻辑的理解一次性到位。教师进一步帮助学生把锚点链接放入知识坐标：当页面内容极长时，顶部加锚点导航是通行做法，维基百科的目录跳转正是此原理。学生点击维基词条亲身体验，微观操作与宏观应用完成一次呼应。七、综合演练：五星级网站的链接体检教师发布体检单任务：“以小组为单位，互查网站，诊断对方网站是否存在以下问题——断链（目标文件不存在）、错链（文字指向了错误页面）、死胡同页（没有返回通道）、孤页（首页无法抵达的页面）、路径不规范（误用本地绝对路径）。每发现一项记一颗星，被查出问题最少、链接结构最清晰的小组获五星网站称号。”各小组打开对方网站开始测试，教室里讨论声起伏。教师巡回指导，提醒学生测链接要“不预判、只验证”，以浏览器实际行为为准。十分钟体检结束后，各组汇报发现。共性发现往往集中在两点：有人把子页返回链接误写成D盘绝对路径，有人漏做了孤页的入口。教师借此重申相对路径原则与网站可达性原则：任何页面从首页出发点击不超过三次应可到达，任何页面都能找到回家的路。这两条朴素标准，学生记在心里，远胜背下一串规范条文。八、课堂小结：链接是一种关系教师请四名学生分别用一句话总结一种链接类型，其余同学补充完善。教师最后收束提升，用三句话为课堂定格：第一句，链接由源和目标构成，源是入口，目标是地址，技术动作都会指向一行写地址的代码。第二句，站内用相对路径，地址描述的是关系而不是坐标；网站搬家，关系永存。第三句，链接是信息的通道，更是网络公民的态度；懂得尊重与分享，才能把页面织成真正的网。板书设计以“桥”为隐喻：桥面为四种链接类型横向排列，桥墩为“链接源—链接目标”两根支柱，桥拱写“相对路径”，桥下流过一行源代码示意，一张板书即一张知识地图。分层作业设计基础作业：为自己的个人网站完成全部页面间导航链接，确保无断链、无孤页，所有站内路径均为相对路径，提交站点文件夹及首页截图。提升作业：为一个超长主题页面建立目录式锚点导航，并在页面中至少添加一个站外友情链接与一个邮件联系方式，写出三百字链接设计说明，阐明你的导航逻辑。挑战作业：调查故宫博物院或任意一所大学官方网站的链接结构，画出其首页至三级页面的导航树，分析其链接设计在可达性上的优点与不足，下节课两分钟分享。教学反思（课后补记）本课以“孤岛网站”为问题情景，让学习需求从学生的受挫体验中自然生长，任务推进沿“站内—站外—邮件—锚点”由简到繁、由“指向别的页面”到“指向页面自身”的认知梯度展开，四个任务覆盖全部知识