《建立网页超链接》教学设计

九年级信息技术第三册第二章第5节《建立网页超链接》教学设计学习者分析本节课的教学对象是九年级的学生，通过之前对网页和网站知识的学习，学生学会了创建站点和网页，学会了用表格布局网页和编辑网页，能排版制作图文并茂的网页作品，为本节学习超链接奠定了基础。建立网页超链接是《网页制作与发布》这章中比较重要的内容，本节课的学习是运用超链接把多张网页连接起来，使网页形成一个整体，方便网页之间的来回跳转。教材内容分析本节的主要内容及在本书中的地位《建立网页超链接》是广州市信息技术教科书九年级(2015.8版，2019.8重印）第二章第5节的内容，本节的主要内容有：超级链接的概念，建立内部链接、锚点链接和电子邮件链接。教学重点、难点：重点：建立超链接的方法难点：建立锚点链接三、教学目标1.知识与技能（1）理解超链接在网页设计中的重要作用（信息意识）。（2）理解超链接的概念，了解链接的种类（数字化学习与创新）。（3）学会建立内部链接、外部链接、锚点链接和电子邮件链接（数字化学习与创新）。2.过程与方法（1）通过讲解了解网页中超链接的类型（数字化学习与创新）。（2）通过听讲和探究，学会一般建立超链接的方法（数字化学习与创新）。情感态度价值观在制作过程中激发学生的兴趣和创造力；培养学生观察能力、欣赏美创造美的能力。培养学生观察归纳总结问题的能力（计算思维）。认识到信息技术发展对社会进步和人们的生活带来影响（信息社会责任）。让学生养成在日常生活和学习中应用网页技术解决问题、为学习生活服务的基本态度和基本能力，以提高学生的信息素养。四、教学理念和方法以学生的学习和发展为中心，基于真实情境，采用发现式、探究式的教学方法。借助微课导学的方式，方便学生有针对性地学习；运用信息技术培养学生的情感价值观。五、教学过程设计1.教学内容的组织与呈现方式教学环节教师活动学生活动设计目的导入师：前几节课，我们已经学会了制作网页，现在我们要翻阅和查找网页的内容，一张张地打开网页的方法是很低效率的。那有什么办法能解决这个问题呢？对了，就是用超链接。那这节课我们要学习这个新的知识“超链接”，运用超链接能把网页连接起来，使网页形成一个整体，方便我们实现来回跳转。思考解决方法通过实际生活中的例子，引导学生思考，采用信息技术手段解决问题。新课学习我们先来看一下本节课的学习目标：（1）理解超链接在网页设计中的重要作用（2）理解超链接的概念，了解链接的种类（3）学会建立内部链接、外部链接、锚点链接和电子邮件链接学生了解本节课学习目标讲解新课的学习目标，让学生对知识的总体脉络有所了解。超链接的概念（一）超链接的概念超链接是指从一个网页指向一个目标的连接关系，它可以建立在文字、图片或者图片的某个位置上，链接跳转的目标可以是另一个网页（内部链接）、另一个网站（外部链接）、同一网页内的其他地方（锚点链接）、一个邮件地址（电子邮件链接）、一个文件等。跳转的目标是另一张网页的，叫做内部链接；跳转的目标是另一个网站的，叫做外部链接；跳转的目标是同一网页内的其他地方的，叫做锚点链接；跳转的目标是一个邮件地址的，叫做电子邮件链接；我们怎样判断一个地方是否有“超链接”呢？对了，有“手”形的地方就证明有建立了超链接的。学生听讲并回答问题通过对超链接概念的讲解，引出超链接的四种不同类型，方便学生理解概念之间的联系与差异。超链接的分类（二）超链接的种类内部链接、外部链接、锚点链接和电子邮件链接。下面我们就逐个看看吧！学生听讲并思考为下一步逐个链接类型讲解做准备。内部链接1.内部链接是把同一网站内的网页连接起来。下面我们通过微课来学习建立内部链接的方法，和内部链接的效果。播放微课：【内部链接】（1）建立内部链接的方法；（2）内部链接的效果；学生观察并学习内部链接通过微课导入，让学生了解内部链接。外部链接2.外部链接就是不同网站网页之间的链接。外部链接能给浏览者更广阔的阅读空间，那我们一起来学习建立外部链接的方法吧！播放微课：【外部链接】（1）建立外部链接的方法；（2）链接的“目标”设置；播放微课【目标下拉列表】下面老师讲解一下超链接“属性”面板中的“目标”下拉列表。刚才我们学了“目标”下拉列表有四个选项，而这四个选项中最常用的是_blank和_self。_blank:在新的窗口中打开链接_self:在当前窗口中打开链接，默认状态就是这个我们通过实际的例子，了解一下这两者的区别吧！待会，老师会在“发展历程”和“风格式样”这里建立超链接，分别使用_blank和_self，看看有什么不同。第一步，建立超链接，方法：选中“发展历程”这四个字，在链接旁边打开“develop.html”。这样也可以建立超链接。第二步，在下拉列表框中“_blank”。用同样的方法，建立另一个链接。选中“风格式样”这四个字，在链接打开“style.html”。建立好超链接。在下拉列表框中选择”_self”,什么都不选默认状态也是这个。好，我们保存文件，按小电脑或者F12测试一下文件。学生观察并学习外部链接通过微课导入，让学生了解外部链接。锚点链接3.使用锚点链接能快速的定位到同一网页中的指定位置，让我们一起来看看建立锚点链接的方法吧！播放微课：【锚点链接】1、锚点链接的方法；2、建立锚点链接的效果；学生观察并学习锚点链接通过微课导入，让学生了解锚点链接。电子邮件链接4.单击电子邮件链接，可以发送电子邮件到指定邮箱，一般来说网站上的电子邮件链接设计是发送邮件给网页的建立者，这样就可以有效地实现网页的使用者和建立者的互动。【电子邮件链接微课】1、建立电子邮件链接的方法；2、电子邮件链接的效果；学生观察并学习电子邮件链接通过微课导入，让学生了解电子邮件链接。超链接的代码（三）我们学完四种不同的超链接方法了，现在来看下他们各自的代码。第一行是内部链接的代码，我们看到是以<ahref>开头</a>结束，这行代码就可以在“发展历程”这几个字上面，实现超链接到develop.html这个页面了。第二行的代码，可以实现外部链接到百度，这行代码比上一行多了链接目标是<_blank>，表示在新的页面中打开百度。具体这行代码的含义是：在“链接到百度”这几个字上面，实现超链接到百度，并且是在新的页面中打开。第三行代码，可以实现电子邮件链接到学校的邮箱，这行代码比上一行多了mailto这个词，表示启动电子邮件程序发送邮件。最后看一下，这页共两行的代码，可以实现锚点链接。第一行是命名锚点的名称为m1，第二行是实现在“仿哥特式”这几个文字上建立锚点链接到m1这个位置。<aname="m1"id="m1"></a><ahref="#m1">仿哥特式</a>学生观察并学习四种超链接的代码通过讲解对比的方法，让学生了解四种超链接的代码构成。超链接的字体颜色（四）在默认状态下，网页超链接的字体会有下划线，设置超链接后也会改变颜色，有没有办法来解决这个问题呢？我们一起看看实践题，要求设置超链接后改变颜色的字体还原回本来的颜色。这题应该怎么做呢？第一步：我们点击网页的属性，找到“页面属性”这项。第二步：在左边“分类”选项中选择“链接”第三步：通过修改“链接颜色”，“已访问链接”和“下划线样式”，这三项可以修改超链接的外观设置。这里运用的是CSS原理，使网页所有的链接颜色得到统一的控制。CSS中文名是层叠样式表，不单可以静态修饰网页，还可以配合各种脚本语言动态的对网页各个元素进行精确的控制。其中代码的含义为：a:linka:hovera:visiteda:active学生观察并学习CSS控制页面颜色的方法，及阅读CSS代码。通过讲解对比的方法，让学生了解CSS控制超链接颜色的方法。课堂检测我们一起做几道单选题来巩固今天所学的知识。【单选题1】网站是一个包含多个网页的集合，这些网页由()连在一起。正确答案C超链接。解析：多个网页能通过超链接连接在一起，形成一个整体。【单选题2】在网页中，下列对象不能插入超链接的是()。正确答案D表格。解析：超链接可以建立在文字、图片或图片中的某个区域上，但不能建立在表格上的。【单选题3】小明制作了一个“2022年新年彩灯”网页，通过点击网页上不同的彩灯照片，能自动跳转到本页面中的相应的彩灯简介的位置，他可能使用了()。正确答案D锚点链接。解析：跳转到同一页面某个位置的超链接叫做锚点链接。【单选题4】在网页中,必须使用()标记来完成超级链接。正确答案A。解析：通过代码窗口，可以看到超链接的代码用<a>开始</a>结束。【单选题5】在属性面板设置网页打开的方式中,用新窗口打开超链接的是()。正确答案A_blank。解析：超链接的目标方式_blank表示在新窗口打开超链接。【单选题6】在Dreamweaver中,创建E-mail链接,其正确的语句格式是()。正确答案D。解析：电子邮件链接的语句是mailto。学生完成练习题让学生通过练习，巩固所学知识。课堂小结们来总结一下今天所学的知识。今天我们学习了超链接。超链接，就是指从一个网页指向一个目标的连接关系，它可以建立在文字、图片或者图片的某个位置上。超链接能够使网页形成一个整体，能方便地实现网页之间的跳转。具体说也通过微课学习了建立超链接的方法。还知道了超链接的种类有四种，分别是：内部链接、外部链接、电子邮件链接和锚点链接。最后我们还知道了怎样判断网页有没有超链接的方法，就是将鼠标移到过去看看有没有出现“手”的形状。同学们都掌握好本课的内容了！那我们的课堂到此结束，谢谢大家的观看，再见！跟随老师，回顾本节课的知识点。小结本课知识【学科核心素养】针对给定的任务进行需求分析，明确需要解决的问题。能提取问题的基本特征，进行抽象处理，并用形式化的方法表述问题。利用Dreamweaver数字化工具实现超链接功能。【学业要求】1.理解超链接在网页设计中的重要作用（信息意识）2.理解超链接的概念，了解链接的种类（数字化学习与创新）3.学