超级链接的使用

超级链接的使用第1页，共28页，2023年，2月20日，星期四本课学习目标

理解超级链接的作用及类型理解链接路径及各类型的使用掌握文本和图片链接的创建方法掌握Email、锚点链接的创建方法第2页，共28页，2023年，2月20日，星期四7.1超级链接概述

7.1.1超级链接的概念及作用超级链接（超链接或链接）是从源端点到目标端点的一种跳转，可以看作是一种文件的指针。它提供了相关联文件的路径，以指向目标端点的文件，并可跳转到相应的文件；

它是文档与文档之间的链接，当单击它时，超链接可指向另外一个页面或文件。链接目标通常是另外一个网页，但也可以是一幅图片、一个电子邮件地址或其他文档。在浏览器中，超链接通常在鼠标指向它的时候，会变成手形，单击即可打开超链接。第3页，共28页，2023年，2月20日，星期四7.1.2超文本链接标记在HTML语言中，超文本链接标记通过锚标记<a>和</a>来实现。此标记需成对出现，以<a属性定义>开始，</a>结束。常用的属性有：href：定义链接目标。title：定义当鼠标移动到链接上时出现的提示文字。target：设定链接目标显示的窗口，如target="_bank"表示在新窗口中打开目标。例如：

<ahref=""target="_bank“title=”搜狐”>搜狐主页</a>

这段代码表示：当鼠标移动到“搜狐主页”上要显示“

”当单击“搜狐主页”这几个文字时，将

中打开“

”网站主页。第4页，共28页，2023年，2月20日，星期四“目标(R)”的各选项作用如下：

_blank：将链接的文档在一个新的、未命名的浏览器窗口中打开。

_parent：将链接的文档在该链接所在框架的父框架或父窗口中打开。如果包含链接的框架不是嵌套框架，则所链接的文档在整个浏览器窗口中打开。

_self：将链接的文档在链接所在的同一框架或窗口中打开，此目标为默认值，即不指定目标，则在同一框架或窗口打开文档。

_top：将链接的文档在整个浏览器窗口中打开，从而取代当前窗口的所有框架。l

第5页，共28页，2023年，2月20日，星期四在一个文档中可以创建几种类型的链接(链接到其它文档或文件（如图形、影片、PDF或声音文件）的链接)：

(1)文本、图片、热点链接

(2)命名锚记链接，此类链接跳转至文档内的特定位置。

(3)电子邮件链接，此类链接新建一个收件人地址已经填好的空白电子邮件。

(4)空链接和脚本链接，此类链接使您能够在对象上附加行为，或者创建执行JavaScript代码的链接。注意：创建链接之前，一定要清楚文档相对路径、站点根目录相对路径以及绝对路径的工作方式。

7.1.3超级链接的类型第6页，共28页，2023年，2月20日，星期四链接路径的类型：

1、绝对路径

2、相对路径(1)文档相对路径(2)根目录相对路径7.1.4链接路径第7页，共28页，2023年，2月20日，星期四

1、

绝对地址绝对路径提供了所链接网页的完整URL。例如：/wlzx/index.asp

绝对路径由http://、ftp://等开始的，它不仅提供所链接文档的完整URL，而且包括所使用的协议（如对于Web服务为http://，FTP服务为ftp://）。注意：尽管对本地链接（即到同一站点内文档的链接）也可使用绝对路径链接，但不建议采用这种方式，因为一旦将此站点移动到其它服务器，则所有本地绝对路径链接都将断开。若本地链接使用相对路径还能在需要在站点内移动文件时，提供更大的灵活性。第8页，共28页，2023年，2月20日，星期四2、相对地址相对地址是由文件名及其扩展名组成的，并且假设URL指向位于同一台WEB服务器上的文件。

相对路径的基本思想是省略掉对于当前网页和所链接的网页都相同的绝对URL部分，而只提供不同的路径部分。

第9页，共28页，2023年，2月20日，星期四1．相对路径

(1)文档相对路径在当前网页与所链接的网页处于同一文件夹内，而且可能一直保持这种状态的情况下，文档相对路径特别有用。文档相对路径也可用来链接到其它文件夹中的文档，方法是利用文件夹层次结构，指定从当前网页到所链接网页的路径。文档相对路径有以下三种形式：①链接目标与当前网页在同一文件夹中时，只需提供被链接网页的文件名即可。②链接目标位于当前网页所在文件夹的子文件夹中时，需要提供子文件夹名和文件名，中间用正斜杠(/)分隔。如：“dreamweaver/main.html”。③链接目标位于当前网页所在文件夹的父文件夹中时，要在文件名前加上“../”(“..”表示上级文件夹)。第10页，共28页，2023年，2月20日，星期四①链接目标与当前网页在同一文件夹中时，只需提供被链接网页的文件名即可。如：“herf.html”②链接目标位于当前网页所在文件夹的子文件夹中时，需要提供子文件夹名和文件名，中间用正斜杠(/)分隔。如：“file/herf2.html”。③链接目标位于当前网页所在文件夹的父文件夹中时，要在文件名前加上“../”(“..”表示上级文件夹)。如：“../index.html”第11页，共28页，2023年，2月20日，星期四第12页，共28页，2023年，2月20日，星期四

3、站点根目录相对路径站点根目录相对路径以一个正斜杠(/)开始，该正斜杠表示站点根文件夹。如，/file/herf2.htm是文件(herf2.htm)的站点根目录相对路径，该文件位于站点根文件夹的file子文件夹中。在某些Web站点中，需要经常在不同文件夹之间移动HTML文件，在这种情况下，站点根目录相对路径通常是指定链接的最佳方法。移动含有根目录相对链接的文档时，不需要更改这些链接。第13页，共28页，2023年，2月20日，星期四1、实例创意

下面以实例制作一个简单网页，实例中只用到简单的几个页面元素。各个文件的文件名及位置如图如示。7.2.1实例：创建超级链接（文本和图片）7.2创建超级链接第14页，共28页，2023年，2月20日，星期四方法一：选择文字，然后单击属性面板上“链接”文本框右侧的文件夹图标，弹出“选择文件”对话框，选择文件单击“确定”按钮关闭对话框。方法二：将鼠标光标定位于页面中的文字“关于本站”后，选择主菜单“【插入】→【超级链接】”，弹出“超级链接”对话框，输入相应内容。方法三：打开属性面板，选择“链接(L)”右边的“指向文件”图标“”，拖动该图标至站点目录下的链接文件，即可自动生成链接。方法四：打开属性面板，在“链接(L)”

直接输入链接地址，如要链接到站点内的其他文档，输入目标文件的具体路径与文件名；要链接到站点以外的文档，则输入完整URL，而且包括所使用的协议。

第15页，共28页，2023年，2月20日，星期四7.2.2实例：创建电子邮件链接1、

实例创意电子邮件链接在网页中也经常可见，在网页中添加电子邮件的目的在于可以使网页的浏览者方便发送邮件，点击电子邮件链接即可自动打开MicrosoftOutlookExpress，并自动创建新邮件。第16页，共28页，2023年，2月20日，星期四方法一：选中所要创建电子邮件的文本，“pcj8880289@”，属性面板的“链接(L)”输入mailto:pcj8880289@即可，如图5-1-13所示。

第17页，共28页，2023年，2月20日，星期四方法二：将鼠标光标定位于页面中要显示电子邮件的地方，选择主菜单“【插入】→【电子邮件链接(L)】”，弹出“电子邮件链接”对话框，输入相应内容后单击“确定”按钮，如图5-1-14所示。“电子邮件链接”对话框中，设置以下选项：文本。显示在页面中的文字，可以为Email地址或其它文字。E-mail。邮件地址。第18页，共28页，2023年，2月20日，星期四7.2.3实例：创建锚点链接

1、实例创意锚点即为一个文档中的某一个特定的位置的标记，通过首先创建锚点，可使某个超级链接链接到文档的某个锚点，方便文档之间的跳转。锚点通常放在文档的特定主题处或顶部。然后可以创建到这些锚点的链接，这些链接可快速将访问者带到指定位置。创建到锚点的链接的过程分为两步。首先，创建锚点，然后创建到该锚点的链接。第19页，共28页，2023年，2月20日，星期四注意：1.创建到锚点的链接，会在锚点名称前加一个“＃”号，表示后面为一个锚点的名称。2.若要创建到其他文档的锚点，只要在文档名后加“＃锚点名称”即可。如要链接到abount.htm文档中一个名为aboutme的锚点，只需在链接中输入“about.htm#aboutme”即可。如图所示。3.选中打开的文档中文本或图像，并拖动到所要链接的锚点，也同样可以创建到锚点的链接。

直接输入：about.htm#aboutme第20页，共28页，2023年，2月20日，星期四综合练习

一、选择题

1、以下哪个不是绝对路径？

A）

B）

C）/bobo/index.aspD）../index.asp2、以下哪个不能创建超级链接？

A）文本

B）图片

C）邮件地址

D）视频

二、填空题

1．超级链接路径可分为

、

、

、课后练习：如何在网页中创建文件下载链接？第21页，共28页，2023年，2月20日，星期四本课小结

超级链接是网站及网页的基本元素，要建立一个能够实际应用的网站，必须将网站中的各个网页通过超链接方式联系起来，这样才能够让浏览者在不同的页面之间跳转。主要介绍了Dreamweaver超级链接的概念、类型和使用方法，包括文本链接、图片链接、Email链接、锚点链接。超级链接可以分为多种类型：文字、图片、Email、锚点、热区等,应熟练掌握这些类型。

第22页，共28页，2023年，2月20日，星期四本课学习目标

掌握文本和图片链接的创建方法掌握Email、锚点链接的创建方法掌握热区链接的创建方法

掌握链接效果的编辑方法第23页，共28页，2023年，2月20日，星期四5.1.5实例：创建热区链接

1、实例创意

一张图片内可以创建包含多个链接，图像内不同的区域或文字都可以指向具体链接目标。图像图内创建链接的区域称为“热区”，热区与链接目标逐一对应，单击热区后，即可对链接目标进行跟踪、访问。热区的形状有三种：矩形、圆形与多边形，在Dreamweaver的“设计视图”模式下，这些热区是可见的，但在WEB浏览内这些边框却是不可见的，因此有的必要在图像地图内添加一些文本标识，为浏览者了解热点的确切位置提供帮助。第24页，共28页，2023年，2月20日，星期四第25页，共28页，2023年，2月20日，星期四5.2编辑链接效果

5.2.1实例：自定义链接颜色

链接颜色可分为三种状态：链接颜色（Link）、访问过的链接颜色（Visited）、活动链接颜色（Active），通过CSS设置，链接还有第四种状态，即指向链接时的动态颜色（Hover），默认的文字链接样式都是带下划线的效果。在Dreamweaver中允许用户自定义链接的颜色（如果通过CSS的设置还可以编