高中信息技术选修3《网络技术应用》4.3.3建立超链接教学设计

高中信息技术选修3《网络技术应用》4.3.3建立超链接教学设计一、教学基本信息本课题选自教科版高中信息技术选修3《网络技术应用》第四章“建立主题网站”第三节“网页制作”中的第三部分“建立超链接”。授课对象为高二年级学生，课时安排为1课时（45分钟），后续作业的完善与互评延伸至课余时间完成。本课是网站建设的枢纽环节：此前学生已完成网站规划、站点建立、首页制作、图文混排与表格布局，网页已经“有形”，但各页面彼此孤立，尚不成体系。超链接正是将孤立页面编织成网状信息结构的关键技术，也是理解万维网“超文本”本质的核心切口。二、学情分析高二学生经过必修模块与本选修前面章节的学习，已经具备以下基础：能够熟练使用Dreamweaver建立站点、新建网页、插入文本与图像、运用表格进行页面布局；对浏览器、网址、网页之间的关系有直觉层面的认识。同时，学生作为互联网的重度使用者，每天都在“点击跳转”，对超链接有丰富的生活经验。但学情的另一面同样清晰。其一，学生的经验停留在“消费者”层面，对链接背后的路径机制，尤其是相对路径与绝对路径的区别，几乎毫无概念，这是本课最大的认知障碍。其二，学生容易把“会做”误认为“会做对”——首页上做出一两个链接并不难，难的是规划一个结构清晰、方向合理、无死链断链的整站导航系统。其三，部分学生存在“为链接而链接”的倾向，装饰性链接、无效链接、链接文字含混（如满页“点击这里”）等问题在历届学生作品中反复出现。基于上述分析，本课将技能操作与结构思维并重：技能层面，掌握文本超链接、图像超链接、邮件链接、锚点链接四种常见类型的建立方法；思维层面，引导学生从用户视角审视链接的可达性与可预期性，形成“链接设计即信息架构”的初步意识。三、教学目标（一）知识与技能1.理解超链接的基本原理，能用自己的语言解释“URL”“绝对路径”“相对路径”的含义及适用场景。2.熟练掌握在Dreamweaver中建立文本超链接、图像超链接、电子邮件链接和页内锚点链接的方法。3.学会在浏览器中测试链接，能快速定位并修复断链、错链。（二）过程与方法1.经历“诊断问题页面—分析路径关系—建立并测试链接—互评优化”的完整过程，体会从用户视角审视作品的思维方式。2.通过对比“站内链接用相对路径、站外链接用绝对路径”的实例，归纳路径选择的规则，发展归纳与迁移能力。（三）情感态度与价值观1.在补全网站导航的过程中体会“互联互通”是万维网的精神内核，理解一个小小的链接标签如何支撑起整个信息世界。2.树立对用户负责的作品观：链接指向要明确、文字提示要准确、页面之间要“进得去、出得来”。四、教学重点与难点教学重点：各类超链接的建立方法与链接测试。选定为重点的理由是，链接操作本身步骤简单，但“建立—测试—修正”的闭环习惯必须在初次学习时就养成，否则后续整站调试将付出成倍代价。教学难点：相对路径与绝对路径的理解及正确选用。突破策略是借助“家庭住址”与“从我家往左第三家”的生活类比，配合教师机上演示“把网页文件移动文件夹后链接失效”的现场实验，让抽象概念可视、可感。五、教学方法与教学准备教学方法采用任务驱动法、对比实验法与同伴互评法相结合。教师精讲控制在15分钟以内，学生实践不少于25分钟。教学准备方面：教师提前在每台学生机部署半成品站点“校园文化节”，该站点包含首页index.html及“活动剪影”“节目单”“历届回顾”“联系我们”四个子页面，页面内容与版式已完成，唯独所有导航与链接全部缺失；准备一个故意设置了断链和路径错误的反面示例站点用于诊断环节；机房广播系统、投影设备调试正常。六、教学过程（一）情境导入：一座没有门的展览馆（约5分钟）教师打开“校园文化节”半成品站点，现场演示：首页做得图文并茂，但无论怎么浏览，都看不到“节目单”和“活动剪影”的内容——除非回到文件夹里一个一个双击打开。教师提问引导方向：这个网站漂亮吗？漂亮。它好用吗？如果你把这个网站的地址发给一位外校同学，他能看到子页面吗？学生很快发现问题所在：页面之间是孤岛，访问者被困在首页。教师顺势点题：今天我们做一件事——给每一间展厅装上门，并且装好路标，让来访者走得进去、逛得顺畅、回得出来。这件事的技术名称，就是建立超链接。板书课题后，教师补充一句定位性话语：HTML因超链接而生，"超文本"三个字，超就超在链接上。学会这一课，你们的页面才真正连成了“网站”。（二）新知建构：链接的本质与路径的选择（约10分钟）1.解剖一个链接教师用拆分方式讲解超链接的三要素：链接的载体（用户看到并点击的对象，可以是文字或图像）、链接的目标（指向哪里，即URL）、链接的打开方式（当前窗口还是新窗口）。强调载体与目标的分离是超链接思想的精妙处——点击的是“节目单”三个字，到达的却是另一个文件。2.路径之争：绝对路径与相对路径教师不急于给出定义，而是先做对比实验。演示一：在页面中插入指向新闻网站的链接，输入完整网址，测试成功。演示二：在页面中链接到站内的“节目单”页面，刻意输入本机硬盘的完整路径，在教师机上测试成功；随后将整个站点文件夹改名并整体移动到另一个分区，再次测试，站内链接全部"404"，而外网链接安然无恙。实验结果摆在眼前，教师组织学生讨论原因，进而归纳出规则：指向站外资源，必须用绝对路径（完整的协议加域名地址），因为它在万维网的任何角落都成立；指向站内资源，应当使用相对路径（相对于当前页面的文件位置），因为站点是一个整体，今后要上传到服务器、要拷贝到他人计算机，站内页面之间的“相对位置关系”不变，链接就不会失效。为帮助理解，教师给出口诀化的类比：绝对路径是身份证上的家庭住址，全世界都认；相对路径是“我家出门左拐第三个门”，对自家人够用、更灵活。站内用相对，站外用绝对。（三）示范引领：四类链接的建立（约8分钟）教师在半成品站点上边操作边讲解，每类链接只示范一次核心动作，操作要点同步投影提示。1.文本超链接：选中导航文字“节目单”，在属性面板的链接栏通过“指向文件”图标拖拽至文件面板中的目标页面，或用文件夹图标浏览选择。提醒学生观察链接栏中自动生成的是相对路径。2.图像超链接：选中首页的“活动剪影”缩略图，以同样方式链接至对应页面。强调图像链接必须设置“替换文本”，既照顾无法显示图片的情形，也是信息无障碍的基本素养。3.锚点链接：以“历届回顾”长页面为例，先在页面顶部“返回顶部”按钮目标位置插入命名锚点，再在底端文字处链接到该锚点（链接栏输入“锚点名”）。指出锚点链接解决的是“同一页面内部快速定位”的问题。4.电子邮件链接：在“联系我们”页选中联系邮箱文字，链接栏输入“mailto:邮箱地址”，演示点击后自动唤起邮件程序的效果。示范过程中教师反复强调一个动作：每建一个链接，立即保存、按F12在浏览器中预览测试。“做一下就验一下”，是比任何操作技巧都重要的习惯。（四）任务实践：装上门，装好路标（约17分钟）学生打开本机半成品站点，完成分层任务。基础任务（人人必达）：补全首页导航栏四个文本链接；为“活动剪影”页的三张缩略图建立图像链接；在“历届回顾”长页设置顶部锚点与页底“返回顶部”链接；在“联系我们”页建立邮件链接。完成后逐页测试，确保无断链。提高任务（学有余力）：检查并修复素材中预留的两个错误链接（一个是误用了绝对路径的站内链接，一个是拼写错误的文件名）；为站点统一增加“返回首页”链接，实现任何页面都能一键回到起点。挑战任务（选做）：为导航栏设计简单的鼠标经过效果（利用属性面板中的行为或修改CSS），让链接在交互反馈上更友好。实践期间教师巡视，重点关注三类典型问题并即时干预：一是把文件拖出站点文件夹导致链接指向本机绝对路径；二是链接目标选错页面后不知如何修改（右键或直接在属性面板改链接栏）；三是只建“去”的链接、忘记建“回”的链接，教师借此强化“进得去、出得来”的导航完整性意识。对共性问题，教师用广播教学集中点拨一次，控制在两分钟以内。（五）展示互评：做一次挑剔的用户（约3分钟）随机展示两份学生作品，请学生互换角色扮演“第一次访问本站的访客”，按三条标准评价：每个想去的地方都能到达吗？每个页面都能回到首页吗？链接文字能让人准确预期点击后看到什么吗？互评中提炼出链接文字的设计原则：禁用“点我”“点击这里”这类空洞表述，链接文字本身就要说明去向。这一细节看似微小，却是专业作品与业余作品的分水岭。（六）小结与延伸（约2分钟）师生共同回顾：链接三要素；站内相对、站外绝对；四类常用链接的建立方法；测试与修复的闭环习惯。教师收束全课：今天我们做的看似是几个跳转，实则是亲手实践了万维网最根本的发明——用一个地址把全世界的信息缝合在一起。课后请大家思考：搜索引擎的爬虫，正是沿着链接爬遍整个网络；如果你希望自己的校园文化节网站被更多人发现，链接结构还能做哪些优化？这个问题，留到我们学习网站发布与推广时回答。七、板书设计主板书区居中书写课题“4.3.3建立超链接”。左侧竖排三要素：载体、目标、打开方式。中部对比书写：站内——相对路径（我家左拐第三家），站外——绝对路径（身份证住址）。右侧列四类链接：文本链接、图像链接、锚点链接、邮件链接。底部一行横写工作闭环：建立——保存——预览——测试——修复。八、作业设计必做作业：完善个人主题网站的全部页面间链接，形成完整导航，另附一段文字说明自己站点中一处链接的设计理由。选做作业：在个人网站中为一张缩略图设置“点击放大至原图页”的链接，并