dreamweaver第六章超链接的建立.docVIP

　　上面做的工作仅仅是使网页中可以显示文本和图像，虽说是“图文并茂”了，但这对于网页来说还很不够，为了使网站中的众多网页构成一个整体，必须使各网页通过超链接的方式联系起来，也就是说，使访问者能够在各个页面之间跳转。　　超链接就是当用鼠标单击一些文字、图片或其他网页元素时，浏览器就会根据其指示载入一个新的页面或跳转到页面的其他位置。与超链接相关的一个概念是定位点（也称锚点），它指明了网页中一个确定的位置，以便超链接跳转时定位。　　　　6.1　从HTML的角度理解超链接　　仍然根据本书的原则，先从HTML语言的角度，来介绍超链接。然后再使用Dreamweaver为网页添加超链接。下面就来介绍各种超链接的制作方法。　　　　6.1.1　文字超链接　　建立超链接所使用的HTML标签为a/a标签。观察下面这段网页文档。　　html　　head　　title超链接/title　　/head　　body　　点击a href=1.html这里/a链接到一个图片网页　　/body　　/html　　　　注意代码中以粗体显示的语句。在这个a/a标签中，href属性是必要属性，用来放置超链接的目标，可以是本机上的某个HTML文件，也可以是URL地址。a/a之间的内容为超链接名称。　　这个页面显示的效果，单击“这里”两个字以后，就会网页就跳转到了链接的“1.html”页面了。　　　　6.1.2　理解“路径”的概念　　路径的作用就是定位一个文件的位置，如果使用过Windows都了解文件夹和子文件夹，这本身就是路径的概念。例如在上面的例子中，链接到的“1.html”就是一个路径，直接使用文件名表示这个文件和原来的网页文件在同一个文件夹中。如果链接到的网页不和原网页在同一个文件夹中，就不能这样写了。　　例如有如图6.1所示的目录结构。　　　　图6.1 调用下一级目录中的文件　　如果希望从Ex1.html链接到1.jpg文件，应该如何设置路径呢？在ch4文件夹中，有一个ch4_1文件夹中，而在ch4_1文件夹中，有一个ex1.html文件，以及一个image文件夹，在image文件夹中有一个1.jpg图像文件。　　如果，ex1.html文件连接到1.jpg文件，那么可以使用两种方法。　　相对于当前文档　　./image/1.jpg（“.”代表当前目录，因此“./image”代表当前目录下的image文件夹，“./”是可以省略的，省略后即image/1.jpg。）　　相对于根目录　　/ch4_1/image/1.jpg（第一个“/”代表根目录，为根目录下的ch4_1子目录中的image子目录中的1.jpg图文件。）　　假如是如6.2图所示的目录，又如何设置相对路径和绝对路径呢？　　　　图6.2 调用不同文件夹中的文件　　image1文件夹中的ex1.html文件要链接到image2文件夹中的1.jpg图文件。　　相对于当前文档　　../image2/1.jpg（“..”代表上一层目录，因此“../image2”代表上层目录下的image2子目录，这是不能省略的。）　　相对于根目录　　/image2/1.jpg（第一个“/”代表根目录，为根目录下的image2子目录中的1.jpg文件。）　　除了上面说的“相对于当前文档”和“相对于根目录”这两种方式之外，还有一种绝对了路径，例如.1.jpg，但是在制作网页的时候，如果是链接到内部的文件，都不使用这种绝对地址。　　下再回到前面的例子中，如果我们把代码改为　　html　　head　　title超链接/title　　/head　　body　　点击a href=sub/1.html这里/a链接到一个图片网页　　/body　　/html　　那么，就说明，要链接到的1.html这个文档，在当前的文档的sub子文件中。因此，制作超链接的时候，一定要保证链接目标的路径要正确，否则就会出现错误。就是如果访问者点击了一个不正确的链接后，浏览器显示的结果，告知未找到文件。　　　　6.1.2　设置文字链接的颜色　　超链接可以通过设置链接的颜色来表示链接是否已经点击，但这是在body标签中设置的，而不是在a标签中。下面来看一个具体的例子。　　html　　head　　title链接颜色的变化/title　　/head　　body text=blue alink=red vlink=yellow link=green　　注意a href=1.html颜色/a的变化　　/body　　/html　　注意代码中以粗体显示的语句。在body标签中，link属性是设置从未单击过的超链接的文字颜色，alink属性是设置单击时的超链接文