高中信息技术选修三网站实现之建立超链接教学设计

高中信息技术选修三网站实现之建立超链接教学设计一、教材与学情分析本节内容选自教科版高中信息技术选修三《网络技术应用》第四章第三节，是网站实现单元的核心环节。学生在前面的学习中已经完成了网站规划、页面布局与静态网页制作，手中有了若干个孤立的HTML页面，但这些页面如同散落的岛屿，彼此不通。超链接正是连接岛屿的桥梁，是万维网得以称为"网"的根本技术。本节课的教学价值不在于让学生记住一条标签语法，而在于理解链接所承载的信息组织思想，即如何用非线性的结构表达多向度的知识关系。授课对象为高二年级学生。从认知基础看，学生已经掌握了HTML基本标签的写法，能够使用记事本或Dreamweaver编辑简单网页，对浏览器中"点击跳转"的行为有丰富的感性经验。从学习困难看，学生容易混淆相对路径与绝对路径，经常在文件移动位置后出现链接失效的问题；对锚点链接、邮件链接等多类型链接缺乏系统认识；部分学生重技术实现、轻设计规划，做出的链接结构混乱，用户在网站中"迷路"。基于以上分析，本课确立三条教学目标。知识与技能层面，学生能说出超链接的构成要素，熟练使用a标签建立文本链接、图像链接、锚点链接、邮件链接和外部链接，正确书写相对路径与绝对路径。过程与方法层面，学生经历"规划链接结构—绘制导航图—编码实现—测试排错"的完整流程，体会信息结构设计先于技术实现的工程思想。情感态度层面，学生在为班级网站添加链接的真实任务中感受技术服务于表达的成就感，养成规范命名、及时测试的良好操作习惯。教学重点是a标签的语法结构与相对路径的正确书写。教学难点是相对路径中"../"的层级理解与锚点链接的实现。二、教学策略与资源准备本课采用任务驱动与问题链引导相结合的策略。整节课以"为班级文化网站接通信息脉络"为总任务，拆解为四个梯度递进的子任务，每个子任务由一个真实问题引发，遵循"体验冲突—分析原理—动手实践—归纳提升"的循环展开。课前准备包括：教师机安装多媒体广播教学软件；为学生机分发半成品素材包，内含首页index.html、栏目页若干、图片文件夹images和子目录文件夹pages；准备一份故意留有四处断链错误的"问题网站"作为导入材料；绘制好空白网站结构图工作单，供学生规划使用。三、教学过程（一）情境导入：一个会"气人"的网站上课伊始，教师通过广播演示打开一个班级网站，首页做得相当漂亮，学生发出赞叹。教师点击"班级风采"栏目，浏览器弹出"无法找到网页"的提示；再点"联系我们"，毫无反应；点击页面上的一张缩略图，依然纹丝不动。教室里的气氛从欣赏转为疑惑。教师顺势提问：这个网站的问题出在哪里？学生很快回答"点不动""没有链接"。教师追问：一个没有链接的网站，和你用画图软件做的一幅画有什么区别？这个问题引发学生思考网页与图片的本质差异——网页是活的，是可以跳转、可以交互的信息节点，链接赋予网页以生命。板书课题：网站的脉络——建立超链接。教师明确本课任务：把我们自己的班级网站从"一堆死页面"变成"一张活地图"。（二）探究一：解剖链接，认识a标签教师不给现成结论，而是让学生打开一个链接正常的范例网页，右键"查看源代码"，找到含有链接的那一行代码，观察它的长相。学生在源代码中定位到如下结构：<ahref="news.html">班级新闻</a>小组讨论两分钟，回答三个问题：这段代码中，哪部分是用户看得见的？哪部分是用户看不见但起作用的？点击之后会发生什么？学生归纳出链接的三要素：链接源（可见的文字"班级新闻"）、链接标记（a标签对）、链接目标（href属性指向的地址）。教师板书核心语法：<ahref="目标地址">链接文字</a>教师强调href是hypertextreference的缩写，意为超文本引用，并指出一个常见误区：链接文字与标签之间、属性与属性值之间的引号不能省略，中英文引号混用是初学者最常见的语法错误之一。随后发放任务一：打开素材包中的index.html，将导航栏中的"班级新闻"四个字与news.html建立链接，保存后在浏览器中验证。学生动手操作，教师巡视，捕捉典型错误进行即时点评。约五分钟后，绝大多数学生完成，第一次体验到"点得动"的快乐。（三）探究二：路径风波，相对与绝对的较量任务一成功后，教师制造第二次认知冲突。广播展示一名"学生"的操作：他把pages文件夹里的activity.html也在导航中加了链接，写法是<ahref="activity.html">，结果点击后报错。教师提问：同样是链接，为什么刚才成功，这次失败？学生观察文件结构后发现，目标文件不在同一目录，而是藏在pages文件夹里。教师借此引出路径的概念：浏览器寻找目标文件，如同快递员送件，必须写清完整"地址"。教师用教室作类比讲解三种情况。同级目录，如同喊同桌的名字，直接写文件名；下级目录，要写"文件夹名/文件名"，如pages/activity.html；上级目录，用"../"表示返回上一层，好比"从我座位走到过道再去找别人"。板书路径书写的三条规则，并配合目录树图示讲解：news.html——同一目录直接书写pages/activity.html——进入下一级../index.html——返回上一级有学生提问：能不能直接写C盘里的完整地址？教师现场演示将带有绝对路径C:\myweb\news.html的网页复制到另一台电脑，链接立即失效。学生恍然大悟：绝对路径把网页"焊死"在某台机器上，网站一旦上传服务器就会全军覆没，所以站内链接一律使用相对路径。这个演示比任何说教都更有说服力。任务二发布：为网站中分散在三个不同目录下的五个页面两两建立返回首页的链接。学生在操作中反复与".."打交道，教师提醒用"数层数"的方法检查路径——目标文件比当前文件深几层或浅几层，决定要写几个"../"。巡视中发现不少学生少写了一级，导致链接指空，教师引导他们观察浏览器地址栏中的路径进行自我诊断，把排错能力的培养融入操作之中。（四）探究三：链接家族的全景图掌握了基本链接和路径之后，教师用一串快速演示打开学生的视野，呈现超链接家族的完整谱系。外部链接。指向其他网站，必须使用完整网址，如href="http://."，强调http://不可省略，否则浏览器会把它当成站内文件。同时介绍target="_blank"属性，让外部页面在新窗口打开，避免访客"一去不复返"。图像链接。把链接文字换成img标签即可，即<ahref="big.jpg"><imgsrc="small.jpg"></a>，实现点击缩略图查看大图的效果。学生看到图片也能"点"，兴趣明显提升。锚点链接。这是本课难点。教师打开一个内容很长的"校史长廊"页面，从头滚到尾要滑很久，提问：能不能做"页内电梯"，一键直达指定楼层？讲解锚点链接分两步走：先在目标位置设置锚点<aname="top"></a>，再用<ahref="top">返回顶部</a>建立指向，井号就是"页内定位"的信号。学生完成"返回顶部"小功能后颇有成就感，教师进一步拓展：跨页面锚点可以写成href="history.htmljieshao"，链接与锚点合二为一。邮件链接。<ahref="mailto:banji@163">给我写信</a>，点击后自动唤起邮件客户端。教师提醒此类链接在公共网页上要谨慎使用，涉及个人信息保护问题，自然渗透信息安全意识。随后发放任务三：完善班级网站，要求至少包含一个外部友情链接、一个图像链接、长页面添加返回顶部锚点、页脚添加邮件联系链接。任务给出评价量规，从功能实现、路径正确、美观适度三个维度各赋分值，学生完成后先自评再互评。（五）探究四：从会做链接到做好链接技术教学不能止于"能跑就行"。教师展示两个对比案例：甲网站栏目之间四通八达但毫无规律，页面深处没有出口，访客如入迷宫；乙网站链接结构清晰，任何页面三步之内必达目标。学生讨论后得出结论：链接不是越多越好，而是要服从信息结构。教师引导学生回到课初发放的空白结构图工作单，用方框代表页面、箭头代表链接，画出本组网站的导航地图，并共同归纳链接设计的四条经验：主导航保持一致，让每个页面都有"回家"的路；层级不宜过深，重要内容三次点击内可达；链接文字表意明确，杜绝"点我""此处"这类无效提示；死链定期检查，维护是网站的日常功课。任务四为综合任务：小组依据导航图检查并优化本组网站的全部链接，填写测试记录表，逐一验证每个链接的可达性。教师强调测试是开发的最后一道工序，也是责任心所在。（六）展示评价与课堂小结选取两个小组通过广播展示作品，全班依据评价量规打分并口头点评。有小组展示了用图片地图做首页导航的创意，教师即兴补充热点链接的写法作为拓展，供学有余力的学生课后探究。小结环节，教师不直接复述知识，而是请学生用一句话回答开课时的那个问题：链接让网页和一幅画有了什么本质区别？学生的回答从"能点"逐步深化到"网页之间建立了关系""信息被组织成了网"。教师提炼：超链接的英文hyperlink中，hyper意为"超越"，它超越了文档的线性限制，让信息按人的思维自由跳跃，这正是万维网改变世界的起点。今天我们写的每一个a标签，都是在编织这张网。（七）分层作业基础层：完成网站全部页面的链接连通与测试，提交测试记录表。提高层：为网站制作图片热点导航或下拉菜单导航。拓展层：查阅资料了解URL的完整结构，思考域名、路径、文件名各承担什么角色，下节课分享。四、板书设计主板书以"建立超链接"为中心，向左延伸出语法骨架<ahref="目标">文字</a>，向右延伸出知识树：路径（同级、下级pages/、上级../）、链接类型（内部、外部、锚点、图像、邮件mailto）、设计原则（可回家、三步达、表意明、勤测试）。整板呈现"一条语法、两种路径、五类链接、四条原则"的知识结构，便于学生形成整体认知。五、教学反思本课以"断链网站"制造的真实冲突开场，学生的学习动机来自解决问题的内需而非教师的要求，全程操作饱满，思维参与度较高。相对路径的教学借助教室