《网页中使用超链接》由会员分享，可在线阅读，更多相关《网页中使用超链接（14页珍藏版）》请在金锄头文库上搜索。
1、第五章网页中使用超链接超链接是WWW的魅力所在。为了把Internet上众多分散的网站的网页联系起来，构成一个有机的整体，就是在网页上加入链接。通过点击网页上的链接，才能真正实现网络无国界，我们才可以在信息海洋中尽情遨游。Macromedia Dreamweaver 8提供多种创建超文本链接的方法，可创建到文档、图像、多媒体文件或下载软件的链接，可以建立到文档内任意位置的任何文本或图像（包括标题列表、表、层或框中的文本或图像）的链接。本章主要介绍利用Dresmweaver 创建的编辑各种超链接的方法。通过本章的学习，读者应该掌握以下内容；l 认识超链接l 掌握利用Dreamweaver创建各种
2、超链接的方法l 掌握利用Dreamweaver编辑各种超链接的方法l 管理超链接下的方法5.1超链接基础511超链接的种类超链接为畅游网络提供了方便，它是网页制作中使用比较多的一种技术。超链接是用预先准备的好文本、按钮、图像等对象与其他对象建立的一种链接，也就是源端和目标端点之间的建立一种链接。源端点是超链接的超始端点，也称为源锚；目标端点是链接的像，也签名为目标锚。超链接按源端点的链接划分，可分为超文本链接和非超文本链接两类。超文本链接的源锚文本下方有下划线，而非超文本链接是用除文本之外的其他对象构建的链接，其源锚可以是图像、表格、列表、表单、多媒体等对象。超链接按目标端点的链接划分，可分为
3、外部链接、内部链接、电子邮件链接、局部链接、脚本链接等。512文档路径类型掌握从作为链接起点的文档到作为链接目标文档之间的文件路径，对于创建链接至关重要。文档路径类型有绝对路径和相对路径两种。1.绝对路径绝对路径是包括服务器协议（本例中为 ）的完全路径，比发如“洪恩在线电脑乐园”，完全路径为如果要链接当前站点之外的文档，就必须使用绝对路径。每个网页都有一个惟一的地址，称为统一资源定位器(URL)。绝对路径提供链接文档的完整URL，包括使用的协议(对于网页通常是 :/ )。例如就是一个绝对路径。必须使用绝对路径来链接其他服务器上的文档。对本地链接（文档在相同的站点中）也可使用绝对路径链接，钽并不
4、赞成这种用法，如果将站点移到另一个域中，所有的本地绝对路径链接都有将打断。当创建本地链接（即从一个文档到同一站点上另一个文档的链接）时，通常不指定要链接到的文档的完整URL，而是指定一个从当前文档或站点根文件开始的相对路径。2.相对路径相对路径包括根相对路（Site Root）和文档相对路径(Document)两种。在本地磁盘上编辑网页时，需要选定一个文件夹来定义本地站点，模拟服务器上的根文件夹，系统就根据这个文件夹来确定所有链接的本地文件位置，而根相对路径中的根就是指这个文件夹。使用相对路径链接为在本地站点内移动文件提供了很大的灵活性。（1）根相对路径以（也称相对根目不暇接录）“/”开头，路
5、径是从当前站点的根目录开始计算。如时D盘my web目录就是名为“my web ”的站点，这时“/index.htm”路径就表示文件位置为D:my webindex.htm.根相对路径适用于链接内容频繁更换的文件，这样即使站点中的文件被移动了，其链接仍可经生效。如果目录结构过深，在引用根目录下有文件时，用根相对路径会更好些。比如某一个网页文件中引用根目录下img目录中的一个图片文件”a.gif”时，在当前网页中用文档相对路径表示为：././././img/a.gif,而用要根相对路径只要表示为”/img/a.gif”就行了.图5-1 将站点所在目录虚拟为一个盘注意：在预览文件时，用根相对路径链
6、接的内容在本地浏览器中不会显示出来，这是因为浏览不会承认站点的根文件夹服务器。这时可以将站点的根目录虚拟不为一个盘。比如要浏览D:my web下的文件，可以选择Windows“开始”菜单中的“运行”，弹出运行对话框，输入“substh:d:my web”，如图：5-1所示，D盘下的My we文件夹就被虚拟为H盘，在浏览器中查看H盘下网页，用根相对路径链接的内容都可以正常显示了。（2）文档相对路径文档相对路径对于大多数WEB站点的本地链接来说，是最合适的路径。在当前文档与链接的文档在同一文件夹中，而且很可能长久保留在一起时，文档相对链接是尤其有用的。文档相对路径还可用来链接到其他文件夹中的文档，
7、方法是利用文件夹层次结构指定从当前文档到所链接的文档的路径。文档相对路径的基本思想是省略当前文档和链接的文档都有相同的绝对URL部分，而只提供不同的那部分路径。若要链接的文件与当前文档处在同一文档夹中，只需输入文件名即可。若要链接的文件夹位于当前文档所在文件夹的父文件夹中，提供文件夹名，然后加上正斜线（/）和文件名。若要链接的文件位于当前文档所在文件夹的父文件夹中，文件名前加./ (其中”.”表示”文件夹分层结构中的上一级文件夹”)文档相对于路径就是指包含当前文档所在文件夹，也就是当前网页所在文件夹为基础开始计算路径。比如：当前网页所在位置为D:my webmypic,那么：“a.htm”就表
8、示D:my webmypica.htm;“./a.htm”相当于D:my weba.htm;，其中”./”表示当文件夹上级文件夹。“img/a.gif”是指D:my webmypicimga.gif, 其中“img”意思是汉前文件夹下名为文件夹。文档相对路径是最简单的路径，一般多用于链接保存在同一文件夹中的文档。5.2 利用Dreamweaver 8创建超链接521 创建文字超链接如果想在Dreamweaver 8中为页面中的文本对象创建超链接，可以在文本“属性”面板中按如下方法进行操作。1.使用“浏览文件”图标（1）选中欲设置超级链接的文本对象。（2）在菜单栏中单击“窗口”“属性”（或按Ct
9、rl+F3键），打开如图5-2所示的文本“属性”面板。图5-2 文本“属性”面板（3）在“属性”面板上单击“链接”文本框右侧的“浏览文件”图标，打开图5-3所示的“选择文件”对话框。图5-3 “选择文件”对话框（4）设置“选择文件”对话框的参数。该对话框中具体参数的含义如下所述。URL（URL地址）：在选定“相对于”后，该处即会显示将出现在文本“属性”面板中“链接”文本框的地址。相对于：在该下拉列表中你可以选择链接路径的形式，有“文档”和“站点根目录”两个选项。参数：单击“参数”按钮，可以打开如图5-4所示的链接参数设置窗口，不过需要注意的是该项只对数据库中链接的文档有效。图5-4 “参数”对
10、话框在“选择文件”对话框中选择文本链接目标文件，单击“确认”按钮，则图5-2中“链接”文本框中将出现链接目标文件名。2.使用“指向文件”图标（1）选中欲设置超级链接的文本对象。（2）如果链接目标文档已经打开，则直接将“指向文件”图标拖动到目标文档窗口，拖动过程有一条从“指向文件”图标出发的箭头线，将其拖动到指定区域即可完成该链接，如图5-5所示。图5-5 拖动“指向文件”图标到目标窗口（3）如果目标文档没有打开，也可以将“指向文件”图标拖动到站点窗口中相应的位置，如图5-6所示。图5-6 拖动“指向文件”图标到站点文件（4）拖放到目标地址后，释放鼠标即可在属性“面板”的“链接”文本框中看到链接
11、目标端文档的URL地址。图5-7 “超级链接”对话框3.使用“超级链接”对象（1）把光标置于欲设置超级链接的地方，选择“插入”“超级链接”菜单命令，或者直接单击“插入”面板上“常用”选项卡下的“超级链接”图标，弹出“超级链接”对话框，如图5-7所示。（2）“超级链接”对话框中各项参数的含义如下。文本：欲设置超级链接的文本对象。链接：文本对象链接的目标地址。目标：从目标的下拉列表框中选择文档的打开位置。若要使所链接的文档出现在当前窗口或框架以外的其他位置，可以从下拉列表框中选择一个选项。l _blank在一个未命名的新浏览器窗口中载入所链接的文档。l _parent在该链接所在框架的父框架或父窗
12、口中载入所链接的文档。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。l _self在链接所在的同一框架或窗口中载入所链接的文档。l _top在整个浏览器窗口中载入所链接的文档，但它会删除所有框架。标题：当鼠标指针指向超链接的文本对象时的提示文字。在“超级链接”对话框中设置参数，如图5-7所示。（3）设置具体的链接信息后单击“确定”按钮，即可在所需区域插入文本超级链接了，按F12键即可在浏览器中预览其效果，如图5-8所示。图5-8 当鼠标指针指向超文本链接后浏览器中所见的结果522 创建锚点超链接当一个网页的主题或文字较多时，可以在网页内建立多个标记点，将超链接指定到这些标记
13、点上，能够使浏览者快速找到要阅读的内容，这些标记点称为锚记。在网页设计中，要创建某个网页的指定位置的超链接被称为创建网页的锚点超链接。创建网页的锚点链接可分为两步完成：首先在网页的某个指定位置创建链接的目标端点（即锚记），并为其命名。源端点处建立该锚记的超链接。在浏览网页时，用鼠标单击源端点，光标就会马上移到锚记的位置上。1.命名锚记在文档窗口的设计视图中，将插入点放在需要命名锚记的地方。在菜单栏中单击“插入”“命名锚记”命令，打开如图5-9 所示的以话框。图5-9 创建命令锚记在“锚记名称”文本框中输入该锚记的名称（名称区分大小写），单击“确定”按钮。这时，锚记标记将在插入点处出现。若看不到
14、锚记标记，则选择“查看”“可视化助理”“不可见元素”命令。在命名锚记时，应遵循以下规则。（1）只能使用字母和数字，锚记的命名不支持中文。虽然在“命名锚记”对话框中可以输入中文，但在“属性”面板中显示的则是一堆乱码，并且在为锚记添加链接时，也无法工作。（2）锚记名称的第一个字母最好是英文字母，一般不要以数字作为锚记名称的开头。（3）锚记名称区别英文字母的大小写。（4）锚记名称间不能含有空格，也不能含有特殊的字符。注意：锚点不能放在层中。2链接到命名锚记在文档窗口的设计视图中，选择要从其创建链接的对象（文本，图像等）。在属性面板的“链接”文本框中输入一个数字符号（）和锚记名称。例如：如果要链接到当
15、前文档中名为“bottom”的锚记，要键入bottom。如果要链接到同一文件夹内其他名为“bottom”的锚记，可键入filename.htmlbottom,如图5-10所示。图5-10 在属性面板中链接到命令锚记如果要使用指向到文件方法链接到命名锚记，可打开所需命名锚记的文档。在文档窗口的设计视图中，选择要从其创建链接的对象（文本、图像等）。单击属性面板中“链接”文本框右侧的“指向文件”图标，然后将其拖动到要链接的锚记（可以是同一文档的锚记或其他文档的锚记）上。创建电子邮件链接在网页上创建邮件链接,可以方便地让访问者反馈意见。访问者只需单击页面上的电子邮件链接即可打开一个新的空白邮件窗口（使用的是与用户浏览器相关联的邮件程序）。在电子邮件消息窗口中，“收件人”域自动更新为显示电子邮件链接中指定的地址。在Dreamweaver 8中，可以使用如下方法在页面中创建电子邮件链接。1.插入电子邮件链接（1）在“文档”窗口的“设计”视图中，将插入点放在希望出现电子邮件链接的位置，或者选择要作为电子邮件链接出现的文本或图像。选择“插入”“电子邮件链接”命令，将出现“电子邮件链接”对话框，如图5-11所示。图5-11 “电子邮件链接”对话框（2）完成此对话框的相关内容。单击“确定
