《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第9课 使用HTML5添加超链接_第1页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第9课 使用HTML5添加超链接_第2页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第9课 使用HTML5添加超链接_第3页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第9课 使用HTML5添加超链接_第4页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第9课 使用HTML5添加超链接_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第课使用HTML5第课使用HTML5添加超链接的基基本本PAGE1293193219321使用HTML5添加超链接第课PAGE1393212使用HTML593212使用HTML5添加超链接第课PAGE1

课题使用HTML5添加超链接课时2课时（90min）教学目标知识技能目标：（1）学习URL的使用（2）掌握在HTML5中添加普通链接与内容块链接的方法（3）掌握在HTML5中添加图像链接与下载链接的方法（4）掌握在HTML5中添加锚点链接、电子邮件链接和图像热点链接的方法思政育人目标：通过对HTML5中超链接的使用，培养学生的逻辑思维、辩证思维和创新思维能力，引导学生养成独立思考和深度思考的良好习惯教学重难点教学重点：学习HTML5中超链接的使用方法教学难点：在HTML5网页中添加超链接教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：知识讲解（23min）第2节课：导入新知（2min）知识讲解（23min）

上台演示（16min）（2min）

作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况问题导入

（4min）【教师】提出问题，引出新知识点【学生】思考、发言【教师】总结发言用户之所以能够使用电脑或手机穿梭在各个网页之间，都是通过超链接实现的。超链接相当于各个网页之间的桥梁，使用它可以从一个网页跳到另一个网页通过问答的方式，让学生主动思考,如何使用HTML5中的超链接，加快对信息的浏览知识讲解

（23min）【教师】讲述URL的使用超链接是通过引用目标地址链接到某个目标的，这就要用到URL。URL全称uniformresourcelocator，即统一资源定位器，用于指定资源的地址，一般由3部分组成，分别为通信协议、存有目标资源的主机域名和目标资源的路径。通信协议指明目标资源的类型；主机域名一般用于引用外部网站，如百度的域名为“”；目标资源的路径就是它的具体位置，可以使用相对路径或绝对路径。其中的通信协议一般有以下几种。（1）“http://”。用于从服务器传输超文本到本地浏览器的超文本传输通信协议。（2）“ftp://”。用于从服务器复制文件或从本地计算机上传文件的文件传输通信协议。（3）“maillo:”。表示目标资源是电子邮件。【学生】聆听、思考【教师】分析教材给出的URL案例/company_profile.php【学生】聆听、观察、思考【教师】讲解普通链接与内容块链接1．普通链接在HTML5中，使用<a>标签添加超链接，具体格式为：<ahref="目标地址">载体</a>其中，href表示目标资源的引用地址，属性值为URL或相对路径。<a>标签必须设置href属性，如果没有指向的目标资源，可使用“#”作为属性值，表示指向当前页面的空链接。【教师】演示【例5-1】操作流程，实现图5-2的效果设置普通链接（部分代码），页面效果如图5-2所示。<ahref="">超链接（百度首页）</a>图5-2普通链接的页面效果<a>标签还有一个常用的属性target，表示打开目标资源的方式，属性值“_self”是默认值，表示在当前标签页中加载目标资源；“_blank”表示在新的标签页中加载目标资源。【教师】演示【例5-2】操作流程，实现图5-3的效果设置在新的标签页中打开的超链接（部分代码），页面效果如图5-3所示。<ahref=""target="_blank">超链接（百度首页）</a>图5-3在新的标签页中打开超链接的页面效果2．内容块链接<a>标签中的载体可以为文本、图像或内容块等，但不能为其他链接、音频、视频等交互式内容。内容块链接在移动页面中应用较多，便于触摸交互。【教师】演示【例5-3】操作流程，实现图5-4的效果设置内容块链接（部分代码），页面效果如图5-4所示。<ahref=""target="_blank"> <imgsrc="images/p1.jpg"width="200px"/> <p>百度一下，你就知道（百度首页）</p></a>图5-4内容块链接的页面效果【学生】聆听、思考、记录【教师】讲解图像链接与下载链接1．图像链接除了链接到网页之外，<a>标签还可以链接到图像，这种链接称为图像链接，鼠标单击图像链接后可在浏览器中全屏查看所链接的图像文件。【教师】多媒体演示参考案例，运行程序设置图像链接（部分代码），页面效果如图5-5所示<ahref="images/p2.jpg"> <imgsrc="images/p2.jpg"width="150px"/> <p>查看原图</p></a>图5-5图像链接的页面效果2．下载链接除网页和图像外，超链接还可以链接到文档、邮件地址和应用程序等。当链接的文件不能被浏览器解析时，如压缩文件，单击超链接后将直接下载链接的文件至本地计算机中，这种链接就是下载链接。对于能够被浏览器解析和识别的文件，如“.jpg”“.png”“.gif”“.txt”等，也可以使用HTML5新增属性download强制浏览器执行下载操作。download属性值可以为下载文件的名称，也可以省略。【学生】观察、思考、理解【教师】演示【例5-5】操作流程，实现图5-6的效果设置下载链接，页面效果如图5-6所示图5-6下载链接的页面效果（火狐浏览器）【学生】观察、思考、理解通过讲解知识点，让学生了解HTML5中超链接的使用课堂练习

（16min）【教师】布置课堂练习复现图像的下载链接，并将下载内容进行另存为操作【教师】分析课堂练习内容<ahref="images/p2.jpg"><imgsrc="images/p2.jpg"width="150px"alt="松鼠"/><p>在线预览</p></a><ahref="images/p2.jpg"download="松鼠">下载图片</a><ahref="images/test.rar">下载压缩包</a>【学生】完成课堂练习【教师】公布完成代码【学生】对照答案，修改内容【教师】讲解课堂练习利用练习法，强化对HTML5中超链接的理解第二节课新知导入

（2min）【教师】列举HTML5中其他超链接的方式上一节课，主要讲述网页中最常见的几种超链接方式，像普通链接与内容块链接等，除了以上几种常见的超链接外，还有很多其他的链接方式，比如锚点链接、电子邮件链接以及图像热点链接等【学生】聆听、思考、理解通过列举HTML5中其他超链接的方式，激发学生对HTML5中超链接的兴趣知识讲解

（23min）【教师】讲述锚点链接和电子邮件链接锚点链接锚点链接是指向同一页面或其他页面中特定元素的链接。例如，在篇幅较长的网页底部设置一个返回顶部的锚点链接，可以通过单击链接快速回到网页顶部，省去移动滚动条的麻烦。在网页中添加锚点链接需要执行两步操作。（1）创建锚点。锚点就是锚点链接所指向的元素位置，为元素设置了id属性后，其属性值即可作为该元素的锚点。（2）添加链接。锚点链接的href属性值为“#锚点名”，锚点名即目标元素的id属性值，如“href="#p5";”表示链接至当前页面中id属性值为p5的元素。当指向其他页面中的某个元素时，需要在“#”符号前加上页面的名称，如“href="test.html#p1";”。【教师】演示【例5-6】操作流程，实现图5-7的效果制作分类相册，页面效果如图5-7所示。图5-7分类相册的页面效果（1）创建HTML5文档，在<body>标签中输入以下代码，构建分类相册的结构。<h1>分类相册：<ahref="#m1">动物</a>  

<ahref="#m2">植物</a>  <ahref="#m3">风景</a></h1><!--分别设置图像类别的锚点链接--><h1id="m1">动物</h1> <!--设置“动物”标题的锚点--><imgsrc="images/p2.jpg"/><imgsrc="images/p3.jpg"/><imgsrc="images/p4.jpg"/><imgsrc="images/p5.jpg"/><imgsrc="images/p6.jpg"/><imgsrc="images/p7.jpg"/><h1id="m2">植物</h1> <!--设置“植物”标题的锚点--><imgsrc="images/a2.jpg"/><imgsrc="images/a3.jpg"/><imgsrc="images/a4.jpg"/><imgsrc="images/a5.jpg"/><imgsrc="images/a6.jpg"/><imgsrc="images/a7.jpg"/><h1id="m3">风景</h1> <!--设置“风景”标题的锚点--><imgsrc="images/b2.jpg"/><imgsrc="images/b3.jpg"/><imgsrc="images/b4.jpg"/><imgsrc="images/b5.jpg"/><imgsrc="images/b6.jpg"/><imgsrc="images/b7.jpg"/>（2）在<head>标签中添加<style>标签，在其中输入以下代码，设置图像元素的宽度与高度。img{width:500px;height:300px;}电子邮件链接使用电子邮件链接可以打开客户端浏览器默认的电子邮件应用程序，收件人的邮件地址由电子邮件链接指定，无须手动输入。电子邮件链接的href属性值为“mailto:电子邮件地址?subject=邮件主题”，如“mailto:test@163.com?subject=suggest”，其中，subject表示邮件主题，可以省略。【教师】演示【例5-7】操作流程，实现图5-8的效果设置电子邮件链接（部分代码），页面效果如图5-8所示。图5-8电子邮件链接的页面效果【学生】思考、理解【教师】讲述图像热点链接图像热点链接图像热点链接是在图像上创建多个热点区域并分别为这些区域设置不同的超链接，鼠标单击热点区域后可跳转到不同的目标文件。使用这种方法可以为图像的局部区域设置链接，或根据需要为一个图像设置多个链接。制作图像热点链接一般需要三步操作（1）在页面中添加一个图像文件。需要注意的是，要为<img/>标签设置usemap属性，属性值为图像热点链接作用区域的名称。（2）在<img/>标签下方添加<map>标签，表示添加图像热点链接的作用区域，该标签需设置id属性（有的浏览器需设置name属性，为了兼容各个浏览器有时需同时设置这两个属性），属性值为对应<img/>标签的usemap属性值。（3）在<map>标签中添加<area>标签设置图像映射的热点区域，该标签一般包含表示替换文本的alt属性，表示具体坐标值的coords属性，表示链接地址的href属性，表示区域形状的shape属性，表示打开超链接方式的target属性。制作图像热点链接的重点是设置<area>标签。直接设置坐标属性值不仅耗费时间也不够精准，此时可以使用DW提供的可视化工具自动生成准确的坐标代码。【教师】演示DW快速制作图像热点链接在DW中打开本书配套素材“项目5”→“foodmap.html”文档，该文档中只有一个图像，此时页面效果如图5-9所示。图5-9“foodmap.html”页面效果（1）选中第8行代码，按“Ctrl+F3”组合键打开“属性”面板（见图5-10），使用该面板可为图像添加热点区域，并为这些区域设置链接。图5-10“属性”面板（2）在DW界面上方单击“实时视图”右侧的实心三角按钮，在展开的列表中选择“设计”选项，切换到设计模式，如图5-11所示。图5-11切换到“设计”模式（3）单击“属性”面板左下角的矩形热点工具，在图像上按下鼠标并拖动绘制矩形热点区域，绘制完成后代码自动同步，如图5-12所示。图5-12绘制矩形热点区域使用同样方法为左侧的两道菜绘制两个矩形热点区域。（4）单击“属性”面板左下角的圆形热点工具，在图像上绘制3个圆形热点区域，如图5-13所示。图5-13绘制圆形热点区域（5）代码自动生成完毕，其中<area>标签的href属性值默认为“#”（空链接），如图5-14所示。图5-14热点区域的代码（6）根据images文件夹中的图像文件及其名称补全第一个矩形热点区域的href属性值，修改代码如下。<areashape="rect"coords="318,188,445,356"href="images/豹子金钱蛋.jpg">（7）参照步骤8补全剩余热点区域的href属性值，为各个热点区域设置图像链接，最终页面效果如图5-15所示。图5-15“foodmap.html”的最终页面效果【学生】思考、理解【教师】询问学生，是否有不理解的地方【学生】回顾课堂内容，提出疑问【教师】回答学生疑问通过讲解知识点，让学生进一步了解HTML5中超链接的使用上台演示

（16min）【教师】随机抽取小组【学生】做好上台准备【教师】布置上台演示内容为“网上书店”页面添加超链接本任务实施制作“网上书店”页面的“重磅推荐”区域，并通过为其中的图像与文本设置超链接，练习超链接在实际网页制作中的应用【学生】小组讨论，分析题目【教师】参与小组讨论，给予提示和帮助在DW中打开本书配套素材“项目5”→“任务5.1”→“bsonline”→“main.html”文档，此时“网上书店”页面的效果如图5-17所示。图5-17“网上书店”页面的效果在<divid="main_bt"></div>标签中输入以下代码，制作“重磅推荐”区域第一本图书的简介内容（添加列表及第一个列表项，相关样式在样式表文件中已经给出），此时页面效果如图5-18所示。<ulid="zbtj"> <li> <imgsrc="images/p1.jpg"/> <p>《活着》</p> <p>余华著</p> <p><span>¥14.00</spa

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论