搜索
Dreamweaver8中文版网页制作基础主讲人:王雪峰第五讲超级链接1.路径2.超链接的属性3.链接的种类4.图像地图超链接•什么是超链接：所谓的超链接是指从一个对象指向另一个对象的链接关系，源对象可以是文本、图像、按钮等，目标对象可以是一个页面、一张图片、一个文件、一个邮件地址或者一个应用程序等等。•当鼠标光标移到添加了超链接的对象上时，光标就变成了小手状如图1，在超链接对象上单击后，链接目标将被打开或者运行，如图2。在默认状态下，如果为文本添加了超链接后，那么该文本就显示为蓝色字体且带有下划线，用于与普通文本区别，单击后文本的颜色又会发生改变。用户也可以在页面属性里修改链接的显示状态。超链接（Hyperlink）可以看作是一个“热点”，它可以从当前Web页定义的位置跳转到其他位置，包括当前页的某个位置、Internet或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。浏览Web页是超链接最普遍的一种应用，通过超链接还可以获得不同形态的服务，如文件传输、资料查询、电子函件、远程访问等。当Web页包含超链接时，Web页中的外观形式为彩色（一般为蓝色）且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显示文本或图片时，将变成手形。超文本链接使用热点标记A来定义。1.路径路径的作用就是定位一个文件的位置，文件和文件夹本身就是路径的概念。分为相对路径和绝对路径。①相对于当前目录./image/beijing.jpg(“.”代表当前目录，因此“./image”代表当前目录下image的文件夹,“./”是可以省略的）mysitesub1imageIndex.htmlbeijing.jpg②相对于根目录/mysite/image/beijing.jpg(第一个“/”代表根目录，因此“/image/beijing.jpg”代表根目录下image文件夹下的beijing.jpg文件)mysitesub1imageIndex.htmlbeijing.jpg③相对于上级目录../image/beijing.jpg(“../”代表上级目录，因此“/image/beijing.jpg”代表上级目录下image文件夹下的beijing.jpg文件)mysitesub2imageIndex.htmlbeijing.jpgsub11.1.热点(超链接)标记热点由A标记定义，它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源（目标资源），这个目标资源有唯一的地址（URL）。具有以上特点的词、句或图片就称为热点。A标记的格式为：Ahref=地址name=字符串target=打开窗口方式热点/A说明：①href为超文本引用，它的值为一个URL，是目标资源的有效地址。在书写URL时要注意，如果资源放在自己的服务器上，可以写相对路径。否则，应写绝对路径。href不能与name同时使用。②name指定当前文档内的一个字符串作为链接时可以使用有效的目标资源的地址。③target设定链接被按后结果所要显示的窗口。可选值为：_blank，_parent，_self，_top，框架名称。其说明见表2-6。取值说明target=_blank或target=new将链接的画面内容，开在新的浏览器窗口中。target=_parent将链接的画面内容，显示在直接父框架窗口中。target=_self将链接的画面内容，显示在当前窗口中（默认值）。target=_top将框架中链接的画面内容，显示在没有框架的窗口中（即除去了框架）。target=框架名称只运用于框架中，若被设定则链接结果将显示于该“框架名称”指定的框架窗口中，框架名称是事先由框架标记所命名的。表2-6target属性的取值2、超链接默认属性•默认情况下，带超链接的文本显示为蓝色，且带有下划线，用户可以自行设置不同的显示状态。在【属性】面板单击按钮，打开【页面属性】对话框，在【分类】栏单击【链接】项，然后在右侧具体的项目中进行具体的设置，如下图所示。2.1文本超链接•首先选中文本，在【常用】插入栏单击插入超链接按钮，打开【超级链接】对话框，在【文本】文本框中输入超链接文本，在【链接】选项框输入目标网页名称或者单击按钮选择目标文件，在【目标】选项框的列表中选择打开目标的位置，在【标题】文本框输入相关文本，如下图所示【超级链接】对话框中需要设置的各项的含义。【文本】文本框：在页面中显示的带有超链接的文本，【链接】选项框：单击超链接后将要跳转到的目标对象。【目标】选项框：目标对象的打开位置：_bank代表在一个新的窗口中打开链接对象；_self表示在当前窗口打开链接对象，它是系统的默认值；_parent和_top都表示在一个完整的窗口打开链接目标。【标题】文本框：鼠标光标移到超链接文本上时显示的文字2.2．图像超链接•单击选中一个图片，在【属性】面板中单击【链接】文本框后的按钮，如图1，打开【选择文件】对话框，如图2，找到目标文件“Description001.html”，然后单击“确定”按钮，为图像创建超链接完成，最终的【属性】面板显示如图3所示。3、超链接的种类1．按路径分类2．按性质分类3.锚记链接4．热点链接5.电子邮件链接3.1．按路径分类根据链接对象的路径不同，可以分为：内部链接、外部链接和锚记链接。•内部链接：链接到当前网站内的其他网页，上一节所列举的两个例子都是内部链接。•外部链接：链接到网站外的其他网页，在【链接】文本框输入完整的地址，如链接到搜狐网站首页，则要输入“”。•锚记链接：链接到当前打开的网页中某个指定位置。•内部链接创建指向其他页面的链接，就是在当前页面与其他相关页面间建立超链接。无论目标文件与当前文件的目录关系如何，其格式为：Ahref=目标文件的路径/目标文件名.html热点/A根据目标文件与当前文件的目录关系，有4种写法：①链接到同一目录内的网页文件，其格式为：Ahref=目标文件名.html热点/A目标文件名是链接所指向的文件。②链接到下一级目录中的网页文件，其格式为：Ahref=子目录名/目标文件名.htm热点/A③链接到上一级目录中的网页文件，其格式为：Ahref=../目标文件名.html热点/A其中“../”表示退到上一级目录中。④链接到同级目录中的网页文件，其格式为：Ahref=../子目录名/目标文件名.html热点/A表示先退到上一级目录中，然后再进入到目标文件所在的目录。•外部链接•链接到网站外的其他网页，在【链接】文本框输入完整的地址，如链接到搜狐网站首页，则要输入“”。根据链接对象的性质不同，链接又可分为：文本链接、图像链接、电子邮件链接、多媒体文件链接和空链接等。其中的文本链接和图像链接是大家比较常用的链接，需要特别说明一点的是图像链接的一个特例：热点链接。①热点链接：链接指向一张图片的某一部分。②电子邮件链接：链接指向一个E-mail地址。③多媒体文件链接：链接指向一个多媒体文件。④空链接：链接不指向任何目标文件，一般用“#”代替。3.2．按性质分类3.3．锚记链接通过建立锚记链接，直接跳转到指定的位置。•命名锚记要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为：Ahref=#记号名热点/A单击热点文本，将跳转到“记号名”开始的文本。书签就是用A标记对该文本作一个记号。如果有多个链接，不同目标文本要设置不同的书签名，书签名在A的name属性中定义。格式为：Aname=“记号名”目标文本附近的字符串/A3.4．热点链接•热点链接又叫图像映射，它是指将一个图片划成多个区域，每个区域链接到不同的对象上去。当浏览者单击映射图时，浏览器会自动判断鼠标单击在哪个热点上，并根据判断跳转到相应的对象上去。3.5．电子邮件链接电子邮件链接是指连接到E-mail地址的链接。如果用户的机器已经安装了Outlook、Foxmail等邮件软件，在浏览网页时单击一个E-mail地址链接就会自动打开一个邮件发送窗口，并且地址栏已经自动添加了链接的E-mail地址。先选中目标，在属性面板添加电子邮件地址。单击含有电子邮件链接的目标，自动打开邮件软件