1、超链接使用,项目3 超级链接的运用,项目分解：任务一 创建文本超链接内部链接外部链接Email链接文件链接任务二 创建锚点超链接创建命名锚记链接命名锚记空链接任务三 创建图像超链接一般图像链接图像热点链接,瑜伽网,素材：素材项目3eg效果：素材项目3fina,超级链接是指站点内不同网页之间、站点与Web之间的连接关系，它可以使站点内的网页成为有机的整体，还能够使不同站点之间建立联系。我们可以简单的把它看成是一种“跳跃”。按照链接路径的不同,网页中超链接一般分为以下3种类型: 内部链接、锚点链接和外部链接。 如果按照使用对象的不同，网页中的链接又可以分为：文本超链接、图像超链接、E-mail链接
2、、锚点链接、文件链接、空链接等。,项目3 超级链接的运用,活动1 内部链接活动2 外部链接活动3 Email链接活动4 文件链接,任务一：创建文本超级链接,项目3 超级链接的运用,链接文本 标签表示一个链接的开始，表示链接的结束； 属性“href”定义了这个链接所指的地方； 通过单击“链接文本”可以到达指定的文件。,1.超链接的Html标签：,知识延伸,超链接的HTML语句,2.链接的目标窗口：,知识延伸,_blank：在弹出的新窗口中打开所链接的文档；_parent：如果是嵌套的框架，会在父框架或窗口中打开链接的文档；如果不是嵌套的框架，则与选择top选项的效果相同，在整个浏览器窗口中打开所
3、连接的文档。_self：浏览器默认的设置，在当前网页所在的窗口中打开链接的网页。_top：在完整的浏览器窗口中打开网页。,1. 动手完成首页文本“瑜伽四步曲打造自信女人”和栏目“瑜伽体式”下其他文本的与页面“nr.html”的超链接；2. 动手完成“nr.html”和“nr2.html”页面与首页间的超链接；3. 动手完成首页文本“瘦身瑜伽”和“纯粹瑜伽”的外部网站“http:/ 的超链接；4. 动手完成页面“nr.html”和“nr2.html”页面下方版权信息处的管理员的邮件链接；5. 动手完成首页栏目“瑜伽分类”下文本“健身瑜伽”与“jsyoga.doc”的文件超链接。,小试身手,任务二
4、：创建锚点超链接,活动1创建命名锚记活动2链接命令锚记活动3空链接,项目3 超级链接的运用,（1）设置的name属性创建锚点。要创建锚点标记的文字与之间可以有内容，也可以为空。（2）创建到命名锚点的链接。链接文本,1.锚点链接的Html代码：,知识延伸,锚点标记的HTML语句,2.跳转到其他页面指定位置锚点链接：,如果命名锚记不在当前网页中，需要链接到其他页面的指定位置，可以在号前加上文件的路径，例如 链接文字 表示链接到了同一个目录下文件nr.html里的锚点01。,知识延伸,2.使用锚记名称时要遵循的规则：,（1）同一个网页中可以有无数个锚记，但“锚记名称”是唯一的，不能有相同的两个；（2
5、）锚记名称的大小写是不敏感的，但是同一网页中不能出现拼写相同仅大小写不同的锚记名称，例如名为test和Test的标记就不能同时出现在一个同一页面中。,知识延伸,动手完成“nr.html”页面“2 STEP：山式伸展”、“3 STEP：眼镜蛇式”；“4 STEP：弓式”的锚点链接；2. 动手完成“nr.html”页面所有“返回顶部”文本的锚点链接。3. 动手完成首页“index.html”中“瑜伽分类”栏目下除了“形体瑜伽”和“健身瑜伽”外的其他文本的空链接。,小试身手,活动1一般图像链接活动2图像热点链接,任务三：创建图像超链接,项目3 超级链接的运用, . 来设定图像地图的作用区域，并为指定
6、的图像地图设定名称； 主要用于在图像地图设置热点区域。其中shape和coords：是两个主要的参数，用于设定热点的形状和大小。,1.图像热点链接的Html标签：,知识延伸,图像热点链接的HTML语句,2.怎样调整热点的大小和位置：,直接在网页图像上绘制热点区域，难免会因人为因素绘制不准确，这时用户可以通过指针热点工具 对图像中的热点区域作形状大小和位置上的调整。,知识延伸,动手完成首页“瑜伽分类”栏目下的图像“go.jpg”的空链接；2. 动手完成首页文本“瘦身瑜伽”、“纯粹瑜伽”、“青春瑜伽”上面图像的外部网站“http:/ 的超链接；3. 动手完成首页图像“index_11-11.jpg”下的四个步骤的图像热点超链接。,小试身手,为了把internet上众多的网站和网页联系起来，将其构成一个整体，就要在网页中加入链接。这样一来，可以通过单击网页上的链接找到自己所需的信息。正是由于有了网页之间的链接才形成了这纷繁复杂的网络世界。本课主要讲述了创建文本超级链接、电子邮件链接、锚点链接和图像热点链接等知识点。,归纳与小结,项目3 超级链接的运用,项目实训,原始文件 素材项目3实训3eg最终文件 素材项目3实训3final,香格里拉旅游网,
