4.1 网页链接概述

链接（Hyperlink），也称为超链接或超级链接，它与路径紧密相连，很多用户定义链接时，在本地能够正常访问，但是上传到远程服务器上就无法正常访问了，原因就在于使用了错误的路径。

4.1.1 熟悉URL

URL（Uniform Resource Locator，统一资源定位器）是对文件名的扩展，主要用于指定网上资源的位置和方式。在本地计算机中，定位一个文件需要路径和文件名，对于遍布全球的互联网，显然还需要知道文件存放在哪个网络的哪台主机中才行。

在本地计算机中，所有的文件都由统一的操作系统管理，因而不必给出访问该文件的方法，但在互联网上，各个网络、各台主机的操作系统可能不一样，因此必须指定访问该文件的方法，这个方法就是使用URL定位技术。一个URL一般由下列3部分组成。

（1）第1部分：协议（或服务方式）。

（2）第2部分：存有该资源的主机IP地址（有时也包括端口号）。

（3）第3部分：主机资源的具体地址，如目录和文件名等。

例如，protocol://machinename[:port]/directory/filename，其中protocol是访问该资源所采用的协议，即访问该资源的方法，它可以是：

（1）http://（超文本传输协议）表示该资源是HTML文件。

（2）ftp://（文件传输协议）表示用FTP传输方式访问该资源。

（3）gopher://表示该资源是Gopher文件。

（4）news:表示该资源是网络新闻（不需要两条斜杠）。

（5）mailto:表示该资源是电子邮件（不需要两条斜杠）。

（6）telnet:使用Telnet协议的互动会话（不需要两条斜杠）。

（7）file://表示本地文件。

Machinename表示存放该资源的主机IP地址，通常以字符形式出现，如www.china.com.port。其中，port是服务器在该主机所使用的端口号，一般情况下不需要指定，只有当服务器所使用的不是默认的端口号时才指定。directory和filename是该资源的路径和文件名。

【示例】

http://news.sohu.com/s2018/hujintaochufang.shtml

上面URL表示搜狐www服务器上的起始shtml文件（文件具体存放的路径及文件名取决于该www服务器的配置情况）。

4.1.2 认识路径

要正确定义链接，必须先了解网页之间的路径。路径包括3种基本类型：绝对路径、相对路径和根路径。

1．绝对路径

绝对路径就是被链接文件的完整URL，包括所使用的传输协议（对于网页通常是http://）。

例如，http://news.sohu.com/main.html就是一个绝对路径。设置外部链接（从一个网站的网页链接到另一个网站的网页）必须使用绝对路径。这与本地计算机中绝对路径、相对路径概念类似。

2．相对路径

当设置网站内部链接（同一站点内一个文件与另一个文件之间的链接）时，一般可以不用指定被链接文件的完整URL，而是指定一个相对于当前文件或站点根文件夹的相对路径。

相对路径是指以当前文件所在位置为起点到被链接文件经由的路径。例如，dreamweaver/main.html就是一个文件相对路径。在把当前文件与处在同一文件夹中的另一文件链接，或者把同一网站下不同文件夹中的文件相互链接时，就可使用相对路径。

（1）若要把当前文件与同一文件夹中的另一文件链接，只要提供被链接文件的文件名即可，如filename。

（2）若要把当前文件与一个位于当前文件所在文件夹中的子文件夹中的文件链接，就需要提供子文件夹名、斜杠和文件名，如subfolder/filename。

（3）若要把当前文件与一个位于当前文件所在文件夹的父文件夹中的文件链接，则要在文件名前加上../（..表示上一级文件夹），如../filename。

如果在没有保存的网页上插入图片或增加链接，Dreamweaver CC会暂时使用绝对路径。网页保存后，Dreamweaver CC会自动将绝对路径转换为相对路径。当使用相对路径时，如果在Dreamweaver CC中改变了某个文件的存放位置，不需要手动修改链接路径，Dreamweaver CC会自动更新链接的路径。

3．根路径

根路径是指从站点根文件夹到被链接文件经由的路径。根路径由前斜杠开头，它代表站点根文件夹。例如，/news/beijing2018.html就是站点根文件夹下的news子文件夹中的一个文件（beijing2018.html）的根相对路径。在网站内链接文件时一般使用根路径的方法，因为在移动一个包含根相对链接的文件时，无须对原有的链接进行修改。

但是这样使用对于初学者来说是具有风险性的，因为要知道这里所指的根文件夹并不是网站的根文件夹，而是网站所在的服务器的根文件夹，因此当网站的根文件夹与服务器根文件夹不同时，就会发生错误。

根路径只能由服务器来解释，当客户在客户端打开一个带有根路径的网页，上面的所有链接都将是无效的，如果在Dreamweaver CC中预览，Dreamweaver CC会将预览网页的路径暂时转换为绝对路径形式，可以访问链接的网页，但这些网页的链接将是无效的。

4.1.3 定义链接注意事项

互联网上的每个网页都被链接技术互相链接在一起，单击包含链接的文本或图像就可以跳转到其他页面（该页面可以是站内，或站外页面）。在默认状态下，链接文本一般带有下画线并显示为蓝色，而链接图像也会带有蓝色线框。

在实际网页制作中，如何设计网页链接，采用什么样的链接结构会直接影响网页布局和网站运行效率。例如，导航条的结构、导航条的布局、网页链接层次、链接的效果和形式等。定义链接的形式多种多样，方法也比较灵活，但需要注意以下问题。

（1）链接层次不要太深，最多不要超过3层。在完善网页结构时，除了特殊情况，如转链接、分项链接或链接内容的细化。一般较合理的设计是3层，即导航链接→列表链接→链接内容。

（2）完善链接，避免出现单向链接。每设计一个链接时，都要考虑如何让用户能够快速返回，避免出现迷路现象。对于详细内容页面不希望返回时，应设计在新窗口中被打开，这样保证用户关闭该浏览器窗口后，还可以找到原来的网页位置，并能够快速返回首页或频道页。

（3）避免出现孤文件。在网站设计时，要思路清晰、考虑完善，避免出现孤文件（孤文件就是没有被任何页面链接的网页），这些文件用户一般很难找到，同时对于网站维护也构成潜在影响。

（4）页面链接不要太多。过多链接可能会影响页面浏览、使文件过大而影响下载速度等不利因素。对于过多的链接可以使用下拉表单或动态菜单等方式间接实现。

（5）页面不要太长。一般网页页面长度不要超过3个屏幕，如果页面较长可以通过定义锚点，让用户能方便、快速地找到页面内具体信息。