情境五 制作包含超链接的网页（教案）-《网页设计与制作》同步教学（电子工业版）

情境五 制作包含超链接的网页 课程名称 网页设计与制作 学时 授课时间 授课章节 情境五 制作包含超链接的网页 授课班级 授课教师 网页设计与制作课程组 教学目的 专业理论知识 1、 掌握并运用超链接，能够正确的设置链接目标 2、 会在图像中设置热点区域，并创建图像热点链接 实际操作技能 1、 掌握文本链接，锚点链接，图像链接，JS链接的用法 2、 掌握并能运用超链接 思政元素目标 1、 引起学生对祖国大好河山的热爱之情，引导学生将保护生态环境内化于心，外化于行 2、 培养学生精益求精的职业素养 知识、技能重点 1、 网站内部链接和外部链接的创建。 2、 图像热点区域在网页中的创建与使用。 知识、技能难点 1、 超级链接的分类及其创建。 2、 图像热点区域在网页中的创建与使用。 教学方法 课前、课中、课后“三课一体”螺旋渗透教学法 教具 学习通APP、腾讯会议、学习强国APP 教学过程设计 5.1 超级链接在网页中的作用 5.2 模仿型任务讲解 创建并规划站点“绿水青山” 在网页中创建各种形式的链接 5.3 开放型任务制作 教学过程 【组织教学】 1、准备教学设备、软件等； 2、点名检查学生出勤情况，填写教学情况记录表； 3、发布教学资料 【复习旧课、导入新课】 1、提问：知道什么是超级链接吗？它在网页中有什么作用？ 2、展示一个有多种类型超级链接的网页，使学生对超级链接有初步的概念； 3、教学目的：熟练地创建网页的内部链接和外部链接；熟练地在图像中设置热点区域，并创建图像热点链接；熟练地创建命名锚记和到该命名锚记的链接；熟练地更改链接颜色、设置链接的打开方式、设置空地址链接；熟练地测试链接的有效性；理解绝对路径和相对路径，知道链接路径的类型 【讲授新课】 知识储备 1.1学习路线，如图5.1 图5.1 超链接学习路线 1.2 学习小天地 超链接概述及应用 1.2.1 超链接的定义 超链接(Hyperlink)是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一张图片，一个电子邮件地址，一个文件，甚至是一个应用程序。 超链接是一个网站的精髓，超链接在本质上属于网页的一部分，通过超链接将各个网页链接在一起后，才能真正构成一个网站。 超链接除可链接文本外，也可链接各种媒体，如声音、图像和动画等，通过它们可以将网站建设成一个丰富多彩的多媒体世界。当网页中包含超链接时，其外观形式为彩色(一般为蓝色)且带下划线的文本或图像。单击这些文本或图像，可跳转到相应位置。鼠标指针指向超链接时，将变成手形。 1.2.2 超链接的分类 根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超链接等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。 1.2.3 文本链接 文本超链接是指文本中的词、短语、符号、图像、声音剪辑或影视剪辑之间的链接，或者与其他的文件、超文本文件之间的链接，也称为"热链接(hotlink)"。词、短语、符号、图像、声音剪辑、影视剪辑和其他文件通常被称为对象或者称为文档元素(element)，因此超链接是对象之间或者文档元素之间的链接。建立互相链接的这些对象不受空间位置的限制，它们可以在同一个文件内也可以在不同的文件之间，也可以通过网络与世界上的任何一台连网计算机上的文件建立链接关系。其语法格式如下： <a href="url">链接文本</a> 其中url既可以是本网站内部的某个页面，也可以是外部网站，如果跳转到本网站的某个页面，使用相对路径。 【练一练】从当前网站的一个页面跳转到本网站的另一个页面 一个网站有page01.html和page02.html，现从page01.html跳转到page02.html，代码如下。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>链接标签</title> </head> <body> <a href="page02.html">点击跳转到第二个页面</a> </body> </html> 运行效果如下图所示： 图5.2 运行效果 点击链接，可以跳转到第二个页面，如下图所示： 图5.3 跳转后的界面 如果想从当前页面的跳转到外部的某个网站，则只需要将跳转的目标网址作为href的值即可，如要跳转到新浪网，则代码如下： <a href="https://www.sina.com.cn/">点击跳转到新浪网</a> 1.2.4 图像链接 图像也可做为超链接热点，点击图像将跳转到被链接的文本或其他文件。其语法格式如下： <a  herf="url"><img  src="图像文件的地址"></a> 【练一练】点击校徽跳转到学校官网 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图像链接</title> </head> <body> <a href="http://www.jxgzy.cn/"> <img src="img/xh.png" width="200px" /> </a> </body> </html> 运行效果如下图所示： 图5.4 运行效果 点击链接，可以跳转到学校官网，如下图所示： 图5.5 运行效果 1.2.5 锚点链接 锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页。锚点链接是超链接中的一种。锚点的妙处之一在于，你可以使用它链接到文档中的某个特定位置。例如，有些网页内容较多，页面过长，用户需要不停的使用浏览器上的滚动条来查看文档中的内容。这时为了增强用户体验，可以在网页中插入锚点链接。锚点链接的具体使用场景有 2 种： 1.跳转到当前页面的指定位置 2.跳转到其他页面的指定位置 1.使用 <a> 标签设置锚点，href 属性值为#+id属性值。 2.<a href="#锚点的名字">显示的字样</a> 【练一练】中国是茶的故乡，中华茶文化源远流长，制作介绍茶叶种类的网页 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>茶叶介绍</title> </head> <body> <hr color="chocolate" size="5px" /> <h2>目录</h2> <a href="#hc01">什么是红茶</a><br /> <a href="#hc02">生产过程</a><br /> <a href="#hc03">冲泡方法</a><br /> <a href="#">常见的品牌</a><br /> <a href="#">红茶分类</a><br /> <a href="#">原产地介绍</a> <hr color="chocolate" size="5px" /> <h2 id="hc01">什么是红茶</h2> <p>文字内容…</p> <h2 id="hc02">生产过程</h2> <p>文字内容…</p> <h2 id="hc03">冲泡方法</h2> <p>文字内容…</p> <h2>常见的品牌</h2> <p>文字内容…</p> <h2>红茶分类</h2> <p>文字内容…</p> <h2>原产地介绍</h2> <p>文字内容…</p> <a href="#">返回顶部</a> <hr color="chocolate" size="5px" /> </body> </html> 运行效果如下图所示 图5.6 第二个页面代码 当点击“什么是红茶”的时候，能跳转到红茶介绍的位置，如图5.7所示： 图5.7 提示：当href=”#”的时候，有返回网页顶部的功能。 二、模仿型任务讲解 2.1 制作网页中的超链接 链接是网页页面中最重要的元素之一，是一个网站的灵魂。一个网站是由多个页面组成的，页面之间依靠链接确定相互的导航关系。 分析案例效果，根据案例需求，通过相应的工具及渠道收集符合要求的素材，并完成资讯表。 表5-1 资讯单 使用超链接的网页设计与制作资讯单 学习情景 制作绿水青山网站 学习任务 学时 6学时 案例描述 搜集渠道 素材要求 小组成员 参考资料 完成时间 2.2绿水青山网站案例分析 案例学习目标 · 能够熟练建立站点 · 能够熟练使用文本链接、图片链接等 · 能够正确使用超链接 案例知识要点 · 超链接的定义 · 文本链接，图片链接，锚点链接，js链接的语法 随着生活水平提高，人民群众对清新空气、干净饮水、安全食品、优美环境的要求越来越强烈，“绿水青山”不仅是一个生态环保理念，更是我们现实生活的所向往。现在越来越多的人意识到，绿水青山就是金山银山，保护生态环境就是保护生产力，改善生态环境就是发展生产力。 本次绿水青山网的制作，旨在引导学生就树立起环境保护的良好意识，从自己做起，从身边点点滴滴的小事做起，努力做一个爱护环境，保护生态的四有青年。 2.3 案例设计思路 在具体实现过程中，选择大家比较了解的精神作为素材，引起学生的学习兴趣，使学生更加有动力去完成网页的设计与制作；同时，网页整体设计主题要突出，内容要丰富，能给人留下深刻印象。 具体首页设计思路如下： 图5.8 页面设计 【思考】 （1）如何使用在网页中插入超链接？ （2）如何使文本链接和图片链接跳转到同一个页面？ 三、实操示范 操作步骤 打开开发工具“HBuilder X”，选择“文件”------> “新建”------>“项目”，打开如下图5.13所示对话框： 图 5.9 项目创建 写好相应的项目名称后，选择基本的HTML项目，点击创建，即可完成项目的创建。 Step02 将课前搜集好的图片素材，复制粘贴到新建项目的“img”文件夹中，如下图5.10所示 图 5.10 图片存放 Step03 首先制作导航栏，第一个页面的导航栏可以通过插入一行三列的表格实现，每个单元格的内容要实现锚点效果，代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三山五岳-三山</title> </head> <body> <table align="center" width="900px" height="50px"> <caption> <h2>三山五岳-三山</h2> </caption> <tr align="center"> <th bgcolor="aquamarine" width="300px"> <a href="#huangshan" style="text-decoration: none; color: black;"> <big>黄山</big> </a> </th> <th bgcolor="aquamarine" width="300px"> <a href="#lushan" style="text-decoration: none; color: black;"> <big>庐山</big> </a> </th> <th bgcolor="aquamarine" width="300px"> <a href="#yandangshan" style="text-decoration: none; color: black;"> <big>雁荡山</big> </a> </th> </tr> </table> </body> </html> 注意：代码中a标签的style属性取值是什么意思？大家可以回去查阅CSS样式中的行内样式，预习后面将要学习的知识点。 运行效果如下图5.11所示： 图5.11效果图 Step04 接下来插入一个三行两列的表格，注意表格的整体宽度和导航的表格宽度设置一样宽，图片的宽度设置为295像素，可以加入水平线进行单元格的美化。代码如下所示。 <table align="center" width="900px"> <!--第一行 --> <tr> <td id="huangshan"><img src="./img/hs.jpg" width="295px"></td> <td> <h3>| 黄山</h3> 古称黟山，位于安徽省黄山市境内，地处安徽省南部、黄山市北部，地跨歙县、休宁县、黟县和黄山区、徽州区，东起黄狮岭，西至小岭脚，北始二龙桥，南达汤口镇。山境南北长约40千米，东西宽约30千米。总占地面积约1200平方千米，属亚热带季风气候；以奇松、怪石、云海、温泉、冬雪“五绝”及历史遗存、书画、文学、传说、名人“五胜”著称于世，有“天下第一奇山”“天开图画”“松海云川”之称。 <hr size="3" color="green" /> </td> </tr> <!--第二行 --> <tr> <td id="lushan"><img src="./img/ls.jpg" width="295px"></td> <td> <h3>| 庐山</h3> 又名匡山、匡庐，位于江西省九江市庐山市境内。东偎婺源鄱阳湖，南靠南昌滕王阁，西邻京九铁路，北枕滔滔长江，耸峙于长江中下游平原与鄱阳湖畔，介于东经115°52′—116°8′，北纬29°26′—29°41′之间，长约25千米，宽约10千米，主峰汉阳峰，海拔1474米。山体呈椭圆形，典型的地垒式断块山。 <hr size="3" color="green" /> </td> </tr> <!--第三行 --> <tr> <td id="yandangshan"><img src="./img/yds.png" width="295px"></td> <td> <h3>| 雁荡山</h3> 雁荡山以山水奇秀闻名，素有“海上名山、寰中绝胜”之誉，史称中国“东南第一山”，主体位于浙江省温州市东北部海滨，小部在台州市温岭南境。雁荡山形成于1亿2000万年以前，是环太平洋大陆边缘火山带中一座白垩纪流纹质破火山。雁荡山以瓯江自然断裂，分北雁荡山和南雁荡山。以景观区位分有北雁荡山、南雁荡山、西雁荡山、东雁荡山、中雁荡山之称。其开山凿胜始于南北朝，兴于唐，盛于宋。历代文人墨客纷至沓来，谢灵运、沈括、徐霞客、张大千、郭沫若、陈志岁等都留下了诗篇和墨迹。 <hr size="3" color="green" /> </td> </tr> </table> <p align="center"> <a href="page02.html" target="_blank">点击此处跳转到五岳</a> </p> 最终效果图如下图5.12所示 图5.12 效果图 Step05 第二个页面同第一个页面的实现方法，最终效果图如图5.13，请大家自己动手实现第二个页面，并能够实现两个页面之间的跳转。 图5.13 第二个页面效果图 【课堂小结】 通过本次任务我们知道一个网站就是通过各种形式的链接将各种形式的内容联系起来形成的一个整体。通过网页中的链接我们可以找到自己所需的信息。本次任务中主要介绍了外部链接、内部链接、电子邮件链接、锚点链接、图像热点链接、空链接以及脚本链接的创建及使用方法。 【布置作业】 1. 简述创建文本超链接的过程。 2. 如何创建图像热点超链接？ 【创新型任务】 分小组选择科技强国、红色之旅、绿水青山为主题的含有各种超链接的网页。通过推送学习强国学习视频的看自然栏目、看科技栏目、看党史的红色故事栏目，搜集相关表格布局与美化素材，分小组设计科技强国、红色之旅、绿水青山的表格布局与美化网页，渗透革命文化和社会主义先进文化教育、生态文明教育多个“思政元素线”。培养学生爱国情、强国志。 教学评价 考核要点 考核内容 标准分 计分 知识考核 (1)课前观看学习通微视频及完成微课下方进阶练习题 20   (2)会创建文本形式的外部链接和内部链接 (3)会创建图片形式的内容链接 (4)会创建锚点链接和空地址链接 能力考核 (5)能灵活运用各种链接到小组作业科技强国、红色之旅、绿水青山网页中 30   思政考核 (6)过程考核：考查学生的团队合作、创新意识、思维、专业技术能力等方面综合评价 20   (7)网页作品：对设计作品中体现的中国传统文化、生态文明意识、与软件专业有关的最新科技技术、创新性等方面进行评估 30   总计 100   评价方式 自我评价 小组评价 教师评价 考核得分       学科网（北京）股份有限公司 $$