网页制作与开发第4章建立超链接.ppt

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