资源简介 (共38张PPT)《建立网页的超链接》河北大学版 初中版第二册内容总览学习目标01学习任务02任务分析03操作指南04任务小结05知识链接06目录0708课堂练习课堂总结0910板书设计课后作业教学目标1.信息意识:具有崇尚科学精神、原创精神、具有将创新理念融入网页超链接的学习中的意识;2.计算思维:能够对问题进行分解、用计算的方法提出解决方案;3.数字化学习与创新:具有创新、创造能力,将这种能力运用到超链接的学习里;4.信息社会责任:规范使用网络技术解决问题,形成良好道德准则。新知导入学会编辑网页的内容之后,但是要浏览这些单独的网页,就得像翻书一样,一页一页地看,太不方便了,也不系统,今天我们就来学习一种把这些独立的网页系统串联起来的方法——超链接。新知讲解我们畅游网海时,基本上是通过单击页面上的文字或图片跳转到其他的网页、图片或文件。不同网页之间通过链接进行跳转,体现出网页浏览的超文本阅读特点。新知讲解拓展延伸网页的特性:是图形化的和易于导航的、交互性、与平台无关、是分布式的、是动态的、是可设计的新知讲解学习任务制作好各孤立网页之后,通过设置恰当的超链接建立起联系,为浏览者提供方便、快捷、自由地选择阅读网页的途径。新知讲解任务分析超链接是以文字、图片、按钮等为载体,从一个网页指向另一个目标端的链接。目标端可以是相同网页上的不同位置,或同一个网站的另一个网页,或是另一个网站的一个网页,也可以是一幅图片、一个E-mail地址或者其他文件等。超链接是网站设计中的重要元素。新知讲解首先,检查制作好的独立页面是否都已加入到本网站中。然后,建立主页与各页之间的超链接。超链接是不能随心所欲地设置的,应该事先规划好,然后才能动手设置。一般情况下,主页应该是个节点,从主页应当可以跳转到其他页面。当同一页面内容较多时,可以加入“书签”,以方便浏览。此外,还有热区、邮件、下载等不同形式的超链接,可以根据网页内容进行设置。新知讲解拓展延伸超链接的类型:超链接是超级链接的简称,如果按照使用对象的不同,网页中的链接又可以分为文本超链接,图像超链接,email超链接,锚链接,多媒体文件链接,空链接等。新知讲解拓展延伸超链接的特点:超链接区别于其他媒体的重要特征之一,网页浏览者只要单击网页中的超链接就可以自动跳转到超链接的目标对象,且超链接的数量是不受限制的。新知讲解操作指南1.建立主页到其他页面的超链接(以主页到“红色之旅”页面的超链接为例)(1)设置文字上的超链接。①选中主页导航栏中“红色之旅”文字。②单击鼠标右键打开快捷菜单,选择“超链接”命令。新知讲解③在如图所示的“插入超链接”对话框中,选择要链接到的文件“hongsezhily.htm”(或在“地址”文本框直接输入要链接到的网页文件名)后,单击“确定”按钮。④运用同样的方法,创建“红色之旅”页面返回主页的超链接。(2)建立主页与其他页面的超链接。(3)预览,查看效果。新知讲解2.建立“书签”链接(以“美食之旅”页面为例)当一个网页的内容过多,页面较长时,可以在页面内部创建链接,该类链接称为“书签”链接,便于快速定位到想要浏览的内容。新知讲解(1)打开“美食之旅”页面。(2)点击需要插入书签的位置,执行“插入”“书签”命令,打开“书签”对话框。在“书签名称”文本框中输入书签名称,如图所示,单击“确定”按钮,在相应的文字旁会显示书签图标 。新知讲解(3)插入页面中其他书签。(4)建立链接。①选中网页中需链接到书签的标题文字,打开“插入超链接”对话框。②单击右侧“书签”按钮,打开“在文档中选择位置”对话框。新知讲解③选择相应的书签名,单击“确定”按钮,如图所示。④返回“插入超链接”对话框,在“地址”文本框中出现了“#书签名”,单击“确定”按钮。(5)完成其他书签链接设置,并预览效果。新知讲解思考:在阅读书签链接的内容后,如何返回到网页列出的内容目录处 提示:在具体内容的下面添加“返回”文字,在网页开头插入一个书签,然后建立“返回”文字与此书签的超链接。新知讲解(1)我们可以在合适的位置添加功能按钮,双击文字将其更改为“返回目录”,右侧可更改图标样式和按钮样式。新知讲解(2)给按钮添加“跳转页面”的点击触发事件,页码设置为目录的那一页。新知讲解(3)选中按钮,右键将其复制到除了封面封底以及目录页以外的其他页面,因为复制的按钮位置是统一的,所以排版的时候需要在每一页给按钮留个位置。(4)设置完成之后点击右上角保存即可。新知讲解3.对图片设置热区超链接(以“红色之旅”页面为例)在网页链接中还有这样一种情况:图片比较大,分为几个区,单击不同的区可以打开不同的网页。如示例的“红色之旅”页面中放置了一张河北红色旅游地图,在不同区域处设置超链接,单击它们可以直接打开对应的红色旅游风景介绍页面。以建立“西柏坡红色旅游区”的热区超链接为例:(1)选中图片,单击鼠标右键,在弹出的快捷菜单中选择“显示图工具栏”命令,打开“图片”工具栏,如图所示。新知讲解(2)在“图片”工具栏中选择“多边形热点”工具(根据要创建的热区轮廓,选择不同的形状来制作)。(3)选择热区工具后,拖动鼠标在图片相应位置绘制出多边形。绘制完成后,将会自动弹出“插入超链接”对话框,则可以选择要链接的网页。如图所示。(4)在不同区域建立其他热区。新知讲解4.在主页中建立指向E-mail的超链接(1)双击主页,在主页上插入一个超链接载体,可以是文字(如“联系地址”),也可以是一张图片。(2)选定载体,打开“插入超链接”对话框。(3)选择左侧列表中的“电子邮件地址”选项,如图所示。(4)在“电子邮件地址”文本框中输入E-mail地址(如mailto:jianyi@),单击“确定”按钮。新知讲解5.测试效果超链接建立之后要进行测试。一般在预览环境下,当鼠标指针指向超链接时,出现 光标,单击鼠标即可跳转到此超链接对应的目标端。新知讲解我们一起观看视频,再次学习一下怎么在网页里制作一个超链接。新知讲解任务小结在本节任务中,既有建立页面间的超链接,也有建立同一网页内的超链接,更有建立指向某种服务的超链接。无论哪种超链接,都反映了该网页与目标端的连接关系。特别需要注意的是,建立同一网页内的超链接,首先要建立“书签”作为链接的目标端,然后再选择载体进行链接。一般来说,超链接都是通过“插人超链接”对话框进行设置的。新知讲解知识链接1.设置超链接的文本颜色在网页视图的“设计”显示方式下,右键单击当前网页的任意位置,选择快捷菜单中的“网页属性”命令,在“网页属性”对话框中单击“格式”选项卡,在“超链接”“已访问的超链接”以及“当前超链接”下拉列表框中设置字体颜色。新知讲解2.删除一个超链接(1)若要彻底删除超链接,可选定该超链接,按Delete键。(2)若要保留超链接的载体,但是要删除相应的超链接方式,可选定该超链接,在右键快捷菜单中选择“超链接属性”命令,在“编辑超链接”对话框中单击“删除链接”按钮。新知讲解练习与思考(1)插入超链接后,链接部分的内容在视觉上有什么特点?(2)在浏览网页时注意观察超链接的文本颜色,对网页中所设置的颜色满意吗 若不满意,自己尝试修改颜色。(3)浏览器中的某个页面中的文字可以直接复制到正在编辑的网页中,也可以先复制到记事本中,再从记事本复制到正在编辑的网页中。两种操作有什么区别吗 (4)浏览器中的某个页面中的图片能直接复制到正在编辑的网页中吗 为什么?新知讲解将超链接打开之后,页面显示出更多的信息,在一定程度上节省了网页的空间,可以让浏览者这看到更多的网页内容,提高浏览兴趣和效率。课堂练习请同学们思考一下,可不可以在网页上添加一些按钮,使得浏览者可以随意选择要浏览的网页页数。小组之间一起讨论一下。新知讲解网页的内容,可以直接右击鼠标键,就可以进行复制,如果是图片的话,则可以使用电脑快捷键进行截图保存。课堂总结1.超链接的含义及其类型、作用;2.在网页里添加超链接的方法和步骤;3.完善超链接使用,提高浏览者的使用效率。板书设计超链接的含义超链接的类型超链接的添加方法和步骤作业布置请同学们回去在自己设计的网页上尝试添加锚链接,多媒体文件链接或者空链接,说说这些超链接都是可以放在网页里的吗?如果可以,请带着你的网页制作,下节课一起在班上跟同学们分享你的做法。谢谢21世纪教育网(www.21cnjy.com)中小学教育资源网站兼职招聘:https://www.21cnjy.com/recruitment/home/admin中小学教育资源及组卷应用平台信息技术《建立网页的超链接》教学设计课题 《建立网页的超链接》 单元 一单元 学科 信息技术 年级 八年级教材分析 《建立网页的超链接》这一课旨在让学生对超链接的认识和学习,以及学会使用超链接来丰富页面的内容设计的方法和步骤,教材编排了“学习任务-任务分析-操作指南-任务小结-知识链接-练习与思考”的系列学习活动,引导学生使用各种类的超链接,促进对网站构建的学习和使用,这些学习对于初中学生来说是非常有必要的,不仅可以增加学生知识,同时也能增强学生对信息的感受力、注意力,以及对信息价值的判断力和洞察力,提高学生信息素养。教材编排合理,贴近学生生活实际,符合七年级学生认知特点。学习目标 1.信息意识:具有崇尚科学精神、原创精神、具有将创新理念融入到网页超链接的学习中的意识;2.计算思维:能够对问题进行分解、用计算的方法提出解决方案;3.数字化学习与创新:具有创新、创造能力,将这种能力运用到超链接的学习里;4.信息社会责任:规范使用网络技术解决问题,形成良好道德准则。重点 掌握在网页中添加超链接的方法和步骤难点 学会添加其他种类的超链接教学过程教学环节 教师活动 学生活动 设计意图导入新课 导入:师:学会编辑网页的内容之后,但是要浏览这些单独的网页,就得像翻书一样,一页一页地看,太不方便了,也不系统,今天我们就来学习一种把这些独立的网页系统串联起来的方法——超链接。 学生初步了解本节课的学习内容 由此引出今天的学习内容讲授新课 我们畅游网海时,基本上是通过单击页面上的文字或图片跳转到其他的网页、图片或文件。不同网页之间通过链接进行跳转,体现出网页浏览的超文本阅读特点。拓展延伸网页的特性:是图形化的和易于导航的、交互性、与平台无关、是分布式的、是动态的、是可设计的学习任务制作好各孤立网页之后,通过设置恰当的超链接建立起联系,为浏览者提供方便、快捷、自由地选择阅读网页的途径。任务分析超链接是以文字、图片、按钮等为载体,从一个网页指向另一个目标端的链接。目标端可以是相同网页上的不同位置,或同一个网站的另一个网页,或是另一个网站的一个网页,也可以是一幅图片、一个E-mail地址或者其他文件等。超链接是网站设计中的重要元素。首先,检查制作好的独立页面是否都已加入到本网站中。然后,建立主页与各页之间的超链接。超链接是不能随心所欲地设置的,应该事先规划好,然后才能动手设置。一般情况下,主页应该是个节点,从主页应当可以跳转到其他页面。当同一页面内容较多时,可以加入“书签”,以方便浏览。此外,还有热区、邮件、下载等不同形式的超链接,可以根据网页内容进行设置。拓展延伸超链接的类型:超链接是超级链接的简称,如果按照使用对象的不同,网页中的链接又可以分为文本超链接,图像超链接,email超链接,锚链接,多媒体文件链接,空链接等。超链接的特点:超链接区别于其他媒体的重要特征之一,网页浏览者只要单击网页中的超链接就可以自动跳转到超链接的目标对象,且超链接的数量是不受限制的。操作指南1.建立主页到其他页面的超链接(以主页到“红色之旅”页面的超链接为例)(1)设置文字上的超链接。①选中主页导航栏中“红色之旅”文字。②单击鼠标右键打开快捷菜单,选择“超链接”命令。③在如图所示的“插入超链接”对话框中,选择要链接到的文件“hongsezhily.htm”(或在“地址”文本框直接输入要链接到的网页文件名)后,单击“确定”按钮。④运用同样的方法,创建“红色之旅”页面返回主页的超链接。(2)建立主页与其他页面的超链接。(3)预览,查看效果。2.建立“书签”链接(以“美食之旅”页面为例)当一个网页的内容过多,页面较长时,可以在页面内部创建链接,该类链接称为“书签”链接,便于快速定位到想要浏览的内容。(1)打开“美食之旅”页面。(2)点击需要插入书签的位置,执行“插入”“书签”命令,打开“书签”对话框。在“书签名称”文本框中输入书签名称,如图所示,单击“确定”按钮,在相应的文字旁会显示书签图标 。(3)插入页面中其他书签。(4)建立链接。①选中网页中需链接到书签的标题文字,打开“插入超链接”对话框。②单击右侧“书签”按钮,打开“在文档中选择位置”对话框。③选择相应的书签名,单击“确定”按钮,如图所示。④返回“插入超链接”对话框,在“地址”文本框中出现了“#书签名”,单击“确定”按钮。(5)完成其他书签链接设置,并预览效果。思考:在阅读书签链接的内容后,如何返回到网页列出的内容目录处 提示:在具体内容的下面添加“返回”文字,在网页开头插入一个书签,然后建立“返回”文字与此书签的超链接。1.我们可以在合适的位置添加功能按钮,双击文字将其更改为“返回目录”,右侧可更改图标样式和按钮样式。2.给按钮添加“跳转页面”的点击触发事件,页码设置为目录的那一页。3.选中按钮,右键将其复制到除了封面封底以及目录页以外的其他页面,因为复制的按钮位置是统一的,所以排版的时候需要在每一页给按钮留个位置。4.设置完成之后点击右上角保存即可。3.对图片设置热区超链接(以“红色之旅”页面为例)在网页链接中还有这样一种情况:图片比较大,分为几个区,单击不同的区可以打开不同的网页。如示例的“红色之旅”页面中放置了一张河北红色旅游地图,在不同区域处设置超链接,单击它们可以直接打开对应的红色旅游风景介绍页面。以建立“西柏坡红色旅游区”的热区超链接为例:(1)选中图片,单击鼠标右键,在弹出的快捷菜单中选择“显示图工具栏”命令,打开“图片”工具栏,如图所示。(2)在“图片”工具栏中选择“多边形热点”工具(根据要创建的热区轮廓,选择不同的形状来制作)。(3)选择热区工具后,拖动鼠标在图片相应位置绘制出多边形。绘制完成后,将会自动弹出“插入超链接”对话框,则可以选择要链接的网页。如图所示。(4)在不同区域建立其他热区。4.在主页中建立指向E-mail的超链接(1)双击主页,在主页上插入一个超链接载体,可以是文字(如“联系地址”),也可以是一张图片。(2)选定载体,打开“插入超链接”对话框。(3)选择左侧列表中的“电子邮件地址”选项,如图所示。(4)在“电子邮件地址”文本框中输入E-mail地址(如mailto:jianyi@),单击“确定”按钮。5.测试效果超链接建立之后要进行测试。一般在预览环境下,当鼠标指针指向超链接时,出现 光标,单击鼠标即可跳转到此超链接对应的目标端。我们一起观看视频,再次学习一下怎么在网页里制作一个超链接。任务小结在本节任务中,既有建立页面间的超链接,也有建立同一网页内的超链接,更有建立指向某种服务的超链接。无论哪种超链接,都反映了该网页与目标端的连接关系。特别需要注意的是,建立同一网页内的超链接,首先要建立“书签”作为链接的目标端,然后再选择载体进行链接。一般来说,超链接都是通过“插人超链接”对话框进行设置的。知识链接1.设置超链接的文本颜色在网页视图的“设计”显示方式下,右键单击当前网页的任意位置,选择快捷菜单中的“网页属性”命令,在“网页属性”对话框中单击“格式”选项卡,在“超链接”“已访问的超链接”以及“当前超链接”下拉列表框中设置字体颜色。2.删除一个超链接(1)若要彻底删除超链接,可选定该超链接,按Delete键。(2)若要保留超链接的载体,但是要删除相应的超链接方式,可选定该超链接,在右键快捷菜单中选择“超链接属性”命令,在“编辑超链接”对话框中单击“删除链接”按钮。练习与思考(1)插入超链接后,链接部分的内容在视觉上有什么特点?(2)在浏览网页时注意观察超链接的文本颜色,对网页中所设置的颜色满意吗 若不满意,自己尝试修改颜色。(3)浏览器中的某个页面中的文字可以直接复制到正在编辑的网页中,也可以先复制到记事本中,再从记事本复制到正在编辑的网页中。两种操作有什么区别吗 (4)浏览器中的某个页面中的图片能直接复制到正在编辑的网页中吗 为什么?将超链接打开之后,页面显示出更多的信息,在一定程度上节省了网页的空间,可以让浏览者这看到更多的网页内容,提高浏览兴趣和效率。网页的内容,可以直接右击鼠标键,就可以进行复制,如果是图片的话,则可以使用电脑快捷键进行截图保存。作业布置请同学们回去在自己设计的网页上尝试添加锚链接,多媒体文件链接或者空链接,说说这些超链接都是可以放在网页里的吗?如果可以,请带着你的网页制作,下节课一起在班上跟同学们分享你的做法。 学生了解网页的特性学生了解本节课的学习任务学生了解超链接的类型和种类以及超链接的特点学生掌握制作超链接的步骤和方法学生掌握怎么添加按钮,可以直接跳转页面学生掌握“任务小结”和“知识链接”的学习内容学生完成课堂练习和课后作业 拓展延伸学生知识铺垫后续教学增加学生知识技能,拓展延伸学生知识学生掌握知识的同时,也提高了动手实践能力提高学生动手实践能力增加学生知识,对本节课的知识进行一个总结巩固本节课的学习内容课堂练习 请同学们思考一下,可不可以在网页上添加一些按钮,使得浏览者可以随意选择要浏览的网页页数。小组之间一起讨论一下。 学生完成课堂练习 巩固所学知识课堂小结 超链接的含义及其类型、作用;在网页里添加超链接的方法和步骤;完善超链接使用,提高浏览者的使用效率。 学生总结本节课的学习内容 总结概括本节课的学习内容板书 超链接的含义超链接的类型超链接的添加方法和步骤21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 (共 2 页)HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com) 展开更多...... 收起↑ 资源列表 四、《建立网页的超链接》教案.doc 四、《建立网页的超链接》课件.pptx 超链接的添加.mp4