第 7 章 超链接
DESCRIPTION
第 7 章 超链接. 在这一章我们引入一个新的概念 —— 超链接（ Hyperlink ）。在网页设计中，超链接的应用非常广泛，熟练地应用超链接是设计网页的基本要求。本章主要讲解的内容是超链接的基本知识，各种超链接的操作方法，以及检查和修复网页中的超链接。. 7.1 超链接概述. 超链接是 Web 页中最吸引人的部分。 Internet 之所以如此受到人们的欢迎，很大程度上是由于在网页中使用了大量的超级链接。在介绍使用 Dreamweaver CS4 在文档中创建超链接之前，我们先来了解一些关于超链接的基本概念和基本知识。. 7.1.1 超链接的基本概念. - PowerPoint PPT PresentationTRANSCRIPT
第 7 章 超链接• 在这一章我们引入一个新的概念——超链接（ Hyperlink ）。在网
页设计中，超链接的应用非常广泛，熟练地应用超链接是设计网页的基本要求。本章主要讲解的内容是超链接的基本知识，各种超链接的操作方法，以及检查和修复网页中的超链接。
7.1 超链接概述• 超链接是 Web 页中最吸引人的部分。 Internet 之所以如此受到人
们的欢迎，很大程度上是由于在网页中使用了大量的超级链接。在介绍使用 Dreamweaver CS4 在文档中创建超链接之前，我们先来了解一些关于超链接的基本概念和基本知识。
7.1.1 超链接的基本概念• 超链接是指从一个对象指向另一个对象的指针，它可以是网页中的
一段文字也可以是一张图片，甚至可以是图片中的某一部分。它允许我们同其它网页、站点、图片、文件等进行连接，从而使Internet 上的信息构成一个有机的整体。
• 根据链接方式的不同超链接可分为：绝对路径链接、相对路径链接两种。而根据链接对象的不同超链接又可分为：超文本链接、命名锚链接、图像链接、电子邮件链接、热区链接，空链接等。
7.1.2 超链接的路径相对路径与绝对路径作为超链接的两种基本连接方式是十分重要的也是
容易混淆的，要想熟练运用超链接我们首先就的弄清什么相对路径什么是绝对路径，它们的区别在哪里。
1 ．绝对路径绝对路径：指明目标端点所在具体位置的完整 URL 地址的链接路径。如： http://www.sohu.com
2 ．相对路径相对路径：指明目标端点与源端点之间相对位置关系的路径称为相对路径。
相对 URL 示例company
productindex.html
news.html
pro2.html
pro1.html1.href=“product/pro1.html"
2
1
2.href="../news.html"3.href=“pro2.html”
3
网站根目录
相对 URL 的优势• 可以看出相对 URL 方式比较简便，不需输入一长串完整
的 URL ；• 另外相对路径还有一个非常重要的特点是：可以毫无顾
忌地修改 Web 网站的域名或网站在服务器硬盘中的存放目录。
7.2 超文本链接• 超文本链接是最普通、最简单的一种超链接。在
Dreamweaver 中根据链接目标的不同，超文本链接可以分为与本地网页文档的链接、与外部网页的链接、空链接等几种类型。下面逐一介绍。
7.2.1 创建与文档的链接• 与本地网页文档的链接，是最常见的超文本链接类型。通过创建与
文档的链接，可以将本地站点的一个个单独的文档连接起来，形成网站。具体操作步骤如下：
7.2.2 创建与外部网页的链接具体操作步骤如下：（ 1 ）选中要创建链接的文本“北京师范大学”；在“属性检查器”的“链接”文本框中直接输入 URL 地址“ http://
www.bnu.edu.cn”，“目标”下拉列表框中选择“ _blank” ，如图 9.5 所示。
（ 2 ）保存文件，在浏览器中预览时，单击文本“北京师范大学”，就会在新窗口中打开北京师范大学网站的主页。
7.2.3 创建空链接• 空链接是指未指定目标文档的链接。使用空链接可以为页面上的对象或文本附加行为。具体操作步骤如下：• （ 1 ）选中要创建链接的文本“更多进入”；在“属性检查器”，“链接”文本框中直接输入 “ #” ，如图 9.6 所示。• （ 2 ）保存文件，在浏览器中预览时，“更多进入”显示为超文本链接的样式，单击后不会跳转到别的页面，如图 9.7 所示。
7.3 命名锚链接• 当用户浏览一个内容较多的网页时，查找信息会浪费大量的时间。
在这种情况下，可以在网页中创建锚链接，放在页面顶部作为书签。锚实质上就是在文件中命名的位置或文本范围，锚链接起到的作用就是在文档中定位。单击锚链接，就会跳转到页面中指定的位置。
7.3 创建锚点和建立锚链接• 在创建锚链接之前，首先要在页面中创建锚点。具体操作步骤如下：• “插入” |“ 命名锚记”• 建立锚链接
7.4 电子邮件链接• 电子邮件链接是一种特殊的链接，在网页中单击这种链接，不是跳转到其他网页中，而是会自动启动电脑中的 Outlook Express 或其他 E-mail 程序，允许书写电子邮件，并发送到指定的地址。具体操作步骤如下： mailto:[email protected]
7.5 图像热区链接• 在 Dreamweaver CS4 中，除了可以给文本添加超链接，还可以给图像添加超链接。图像的超链接包括为整张图像创建超链接和在图像上创建热区两种方式。
7.5.1 为整张图像创建超链接• 这种应用方式很普遍，在网页中经常会用到。当鼠标移到设置了链接的图像上时，会变成“手型”；单击图像，会跳转到指定的页面。具体操作步骤如下：
7.5.2 创建热区• 在 Dreamweaver CS4 中，除了为整张图像创建超链接外，还可以在一张图像上创建多个链接区域，这些区域可以是矩形、圆形或者多变形。这些链接区域就叫做热区。当单击图像上的热区时，就会跳转到热区所链接的页面上。具体操作步骤如下：
7.6 导航条• 导航条是由一个图像或一组图像组成，单击某个图像，就会跳转到
相应的栏目页面。 Dreamweaver CS4 中的导航条功能，可以设置随着鼠标的不同操作，如滑过、按下等，图像的显示内容也会随之变化，效果如图 9.25 所示。具体操作步骤如下：
• “插入” |“ 图像对象” |“导航条”
7.7 检查与修复链接• 对于一个内容繁多的网站来说，通常包含有大量的超链接。使用
Dreamweaver CS4 的检查与修复链接功能，可以对当前网页文档中的所有链接进行检查，报告网页中断掉的链接并进行修复，省去了手工检查的麻烦。
• 步骤为：“窗口” |“结果” |“ 链接检查器”
相关 HTML代码1) 用文本做超链接： <a href="index.htm" target="_blank"> 首页 </a>2) 用图像做超链接：<a href="index.htm"><img src="images/info.gif" title="返回首页 " /></a>3) 文本图像混合做链接：<a href="brand1.htm"><img src="green.gif" /><br />格力空调 1 型 </a>该方法在商品展示的网站上较常用。
4) 热区链接：使用 map 在图像上定义一幅地图，地图上可包含多个热区，每个热区用 area 单标记定义， area 的 shape属性定义了热区的形状， coords定义了热区的坐标点， href定义了热区链接的文件。同时 img 标记用 usemap 指明用了哪幅地图<img src="images/163227.png" width="600" height="518"
border="0" usemap="#Map" /><map name="Map" id="Map"><area shape="rect"
coords="51,131,188,183" href="default.asp" /><area shape="rect" coords="313,129,450,180" href="#h3"
/></map>
相关 HTML代码
超链接的种类－根据 href 的取值1) 链接到其他网页或文件（ exe, rar 等）内部链接 <a href="../index.htm">返回首页 </a>外部链接 <a href="http://www.163.com"> 网易网站 </a>下载链接 <a href="software/wybook. rar"> 点击下载 </a>2) 电子邮件链接<a href="mailto:[email protected]">给我留言 </a>如果 IE不能打开该文件，则会弹出文件下载的对话框
超链接的种类－根据 href 的取值3) 锚链接（链接到页面中某一指定的位置）当网页内容很长，需要进行页内跳转链接时，就需要定义锚点和锚点链接，锚点可使用 name 属性或 id 属性定义。<a id="yyyy">……</a> <!-- 定义锚点 yyyy --> <a href="#yyyy">……</a> <!-- 网页内跳转链接，链接到锚点 yyyy处 --> 也可以链接到其他网页某个锚点处<a href="intro.htm#yyyy">……</a> <!-- 链接到 intro.htm 网页的锚点
yyyy处 -->4) 空链接和脚本链接 :<a href=“#”>……</a> <!-- 相当于没有定义锚点名的锚链接，网页会返回页面顶端 --><a href="JavaScript:alert('确定删除吗 ')">……</a>
超链接的打开方式（ target 属性的取值） • 在本窗口打开： _self （ target 的默认值）• 在新窗口打开： _blank
• 在父窗口打开： _parent 将链接的文件载入到父框架• 在整个窗口打开： _top ：将链接的文件载入到整个浏览
器窗口中，并删除所有框架• _parent 、 _top仅仅在网页被嵌入到其他网页中有效，
如框架中的网页，所以这两种取值用得很少。
超链接的 title 属性• title 属性在很多标记里都有，其作用是在鼠标停留在该元素上时显示设置的说明文字
• 如 <p><a href="定义列表 .html" title="格力太阳能喜获国家免检产品称号 ">格力太阳能喜获 …</a></p>
超链接制作的原则 1) 可以使用相对链接尽量不要使用绝对链接，如 ../index.htm
而不是 http://www.hynu.cn
2) 链接目标尽可能简单如 http://www.hynu.cn ，而不是 http://www.hynu.cn/index.jsp
“链接颜色”：指默认超链接超文本的颜色；“变换图像链接”：当鼠标指向超链接文本时，文本呈现的颜色；“已访问链接”：为已访问过的超链接设置文本的颜色“活动链接”：超链接的文本被激活时（如按下【 Tab】键将焦点切换到该链接上）的颜色
设置链接文字颜色