《HTML5与CSS3网页设计》-《HTML5与CSS3网页设计》-HTML5 与CSS5 网页设计（第二版）第八章

第8章超链接与导航8.1超链接概述8.2内部链接8.3外部链接8.4书签链接8.5其他链接8.6使用CSS设置链接样式8.7图像与链接8.8使用列表制作导航栏8.9综合实例返回8.1超链接概述8.1.1绝对路径与相对路径网页中的超链接按照链接路径的不同，可以分为绝对路径和相对路径。1.绝对路径绝对路径是完全路径，是指主页上的文件或目录在硬盘上的真正路径。使用绝对路径，不管目标文件在什么位置，都可以非常精确地找到，但如果该文件被移动了，就需要重新设置所有的相关链接。2.相对路径相对路径是指以当前文件为起点，即相对当前文件与所链接的目标文件之间的简化路径，它利用的是构建链接的两个文件之间的相对关系，不受站点文件夹所处位置的影响，在书写形式上省略了两个文件绝对地址中的相同部分。这种链接方式非常适合网站的内部链接，只要处下一页返回8.1超链接概述于站点文件夹之内，都可以自由地在文件之间建立链接。注意:使用绝对路径还是相对路径，有一个通用规则:链接存储在同一路径下或相近位置的文档时使用相对路径，而链接到其他地方(其他计算机、其他硬盘或其他网站)的文档时，应使用绝对路径。8.1.2超链接标记及其属性建立超链接所使用的标记为<a></a>。<a>标记是一个行内元素，可以成对出现在文档的任何位置。其基本语法为<ahref=”链接地址”>链接内容</a>用<a>作为链接标记，是源于英文中的anchor。href属性的意思是超文本引用，这个属性的值指定了链接的目标。<a>标记的属性值见表8-1。上一页下一页返回8.1超链接概述其中target属性用来指定链接的目标窗口，在默认情况下超链接会在原来的浏览器窗口中打开，也可以通过target属性修改，这个属性只能在href存在时使用。target属性的取值见表8-2。上一页返回8.2内部链接内部链接是指在同一个网站内部，不同的HTML页面之间的链接关系。在建立网站内部链接的时候，应使链接具有清晰的导航结构，让浏览页面的用户可以方便地找到自己需要的HTML文件。我们来看一个实例。首先创建一个站点文件夹MySite，以index.html作为起始页面，在此文件夹中包含一个webs文件夹，其中有若干个HTML文件，通过index.html与webs中的HTML文件进行链接来说明网站的内部链接。在该文件中通过列表建立了网页间的链接，在链接时需要在链接地址中加入目录和文件名称，其运行效果如图8-2所示。返回8.3外部链接外部链接是指跳转到当前网站外部，与其他网站中的页面或其他元素之间的链接关系。这种链接在一般情况下需要使用绝对的链接路径。常用的包括HTTP协议链接、FTP链接、E-mail链接、Telnet链接、下载文件链接。1.使用HTTP协议外部链接经常使用HTTP协议实现链接，其基本语法为:<ahref="http;//网站地址”>链接文字</a>在该语法中，http;//表明这是关于HTTP协议的外部链接，在其后输入网站的网址即可。2.FTP链接HTTP是超文本传输协议，在网络上还有一种应用广泛的FTP协议。下一页返回8.3外部链接FTP是文件传输协议，是实现计算机之间相互通信的协议。假设两台计算机通过FTP协议对话，并且都能访问工nternet，那么它们就可以用FTP命令来传输文件。FTP链接的基本语法如下:<ahref=”ftp://网站地址”>链接文字</a>在该语法中，ftp：//表示这是关于FTP协议的外部链接，后面输入的是链接网站的网址。3.创建E-mail链接在网页上创建E-mail链接，可以让网页浏览者快速地与设计者进行联系。当浏览者单击E-mail链接时，能自动打开当前计算机系统中默认的电子邮件客户端软件，如OutlookExpressFoxmail等。使用方法如下:上一页下一页返回8.3外部链接<ahref=”mailto:电子邮件地址”>链接文字</a>mailto其实就是mailto的连写，意思是“发送邮件到”。在这行代码中，还可以给新邮件填好邮件的主题和正文，这通过subject和body属性来实现，使用时需要将其放在两个问号之间。mailto标签的参数见表8-3。4.Telnet链接远程登录Telnet是指一台计算机远程连接到另一台计算机，并在远程计算机上运行自己系统的程序，从而达到共享计算机软件和硬件资源的目的。其基本语法为:<ahref=”telnet://地址”>链接文字</a>上一页下一页返回8.3外部链接它的链接方式与前面三种类似，不同的是登录的是Telnet站点。5.下载文件链接如果要在网站中提供下载资料，就需要为文件提供下载链接。当单击下载链接后，浏览器会自动判断文件的类型，如果链接指向的不是一个网页，而是zip,mp3,exe等类型的文件，这时就会下载相应文件。其基本语法为:<ahref”文件地址”>链接文罕</a>在文件地址中设置文件的路径时，可以用绝对地址，也可以用相对地址。上一页返回8.4书签链接书签链接即锚点链接。在浏览网页的时候，如果内容比较多会导致页面过长，需要不断地拖拉滚动条才能看清所有内容，很不方便。这时可以在该网页上建立书签目录，单击目录上的项目就能自动跳到网页相应的位置，就像我们在看书的时候夹入书签，能很快地找到阅读的地方。实现书签链接有两个步骤。(1)创建链接的书签。其语法格式为:<aname=”书签名称”></a>书签名称可以是数字或英文，也可以是中文。同一个网页中可以有多个书签，但是不能有相同名称的两个书签。下一页返回8.4书签链接(2)创建书签后，再设定需要的链接。其语法格式为<ahref="#书签名称”>链接内容</a>在“#”符号的后面输入页面中创建的书签名称，就可以链接到页面的不同位置了。(3)不同页面的书签链接。书签链接不但可以在同一页面实现，也可以在不同的页面中设置。其基本语法为<ahref=”链接的文件地址莽书签名称”>链接内容</a>在这个链接中，书签名称前要加上另一个页面文件所在的位置。上一页返回8.5其他链接除了常见的内部链接、外部链接、书签链接等，在页面中还可以使用脚本链接和空链接。1.脚本链接在链接语句中，可以通过脚本来实现HTML语言本身完成不了的某些功能。下面以JavaScript脚本为例说明脚本链接的使用方法。其基本语法为:<ahref=”javascript:脚本语言”>链接文字</a>在该语法中，javascript后面编写的就是具体的脚本语言。2.空链接在链接中，可以通过“#"符号实现空链接。所谓空链接，是指光标指向链接后变成手形，但单击链接后，仍然停留在当前页面。其基本语法为:<ahref=”#">链接文字</a>返回8.6使用CSS设置链接样式8.6.1链接状态网页链接处于什么状态、呈现出什么效果，对整个页面的样式起着举足轻重的作用。通常个链接过程可以分解为以下4个步骤，以对应不同的链接状态。(1)链接还未被访问。(2)链接被选中。(3)鼠标划过链接。(4)链接被访问后。CSS针对不同的链接状态，设置了伪类别(AnchorPseudoClasses)，其属性设置见表8-4。下一页返回8.6使用CSS设置链接样式8.6.2使用CSS设置不同链接状态的样式使用CSS设置链接样式，可以直接针对<a>标记进行定义，也可以在a;link、a;visited,ahover、a;active伪类别中设置链接样式，通常添加两个基本属性:colo:属性修改文本的颜色，text-decoration属性选择是否显示下划线。使用CSS设置链接样式有以下两点需要说明:(1)不仅是颜色和下划线，其他如背景、边框以及排版的CSS样式都可以加入到链接的几个伪类别的样式规则中，从而得到各式各样的效果。(2)“激活”时超链接的样式a;active一般被显示得非常少，因此很少使用。因为当用户点击一个超链接之后，焦点很容易就会从这个链接转移到其他地方，那么此时该链接就不再是“当前激活”状态了。上一页返回8.7图像与链接图像链接的使用频率和文本链接一样高，给图像添加超链接的方法和给文本添加超链接的方法类似。8.7.1为图像添加超链接在需要产生链接效果的图片代码前加入链接标记<a>，基本语法如下<ahref=”链接地址”><imgsrc”…”></a>8.7.2图像映射所谓图像映射是指将图像划分成不同的区域，为每个区域指定一个不同的超链接，当单击不同的区域时便可以跳转到相应的目标页面。这种链接方式也常称作图像热点区域链接。要实现这种链接，首先需要在图像文件中设置映射图像名，即在图像属性中使用<usemap>标记添加图像要引用的映射图像的名称，其语法如下:下一页返回8.7图像与链接<imgsrc=”图像地址”usemap=”映射图像名称”></a>然后定义热区图像及热区的链接属性，其语法如下：<mapname=”映射图像名称”><areashape="热区形状"coords="热区坐标"href="链接地址"></map>在<area>标记中定义了热区的位置和链接，其中shape定义热区形状，可以取值为rect(矩形区域)、circle(圆形区域)、poly(多边形区域);coords参数用来设置热区坐标，对于不同形状，coords设置的方式也不同。对于矩形区域rect来说，coords包含4个参数，分别为left、top、right和bottom，也可以将这4个参数看作矩形两个对角的点坐标;对上一页下一页返回8.7图像与链接于圆形区域circle来说，coords包含3个参数，分别为center-x、center-y和tadius，也可以将其看作圆形的圆心坐标(x,y)与半径的值;对于多边形区域poly，设置坐标参数比较复杂，与多边形的形状有关。coords参数需要按照顺序(可以是逆时针，也可以是顺时针)取各个点的x、y坐标值。由于定义坐标比较复杂，所以我们借助Dreamweave:软件来进行这种参数的设置。Dreamweave:是可视化的网页设计软件，通过它的属性窗口便可直观地完成对不同形状热点区域的设置。我们来看一个实例，本例是在中国地图上设置热点区域。首先创建两个网页文件，把中国地图的图像放到其中一张网页中，将文件命名为8-7-2.html，将另一个网页文件命名为8-7-3.html，作为链接的目上一页下一页返回8.7图像与链接标。通过DreamweaverCS6打开8-7-2.html网页文件，在其“设计”状态下，可以看到如图8-16所示的效果图。操作步骤如下:(1)在属性面板中设置“地图”的值为map，即定义图像要引用的映射图像名;(2)单击选中的图像来选择热区形状，比如选择“矩形热点工具”选项，拖动鼠标左键在“北京”的位置上绘制出一个矩形区域，如图8-17中左图所示;然后在链接文本框中添加链接地址“8-7-3.html#beijing";(3)用同样的操作方法，选择“圆形热点工具”，在图像上绘制出“上海”的热点区域，设置链接地址为“8-7-3.html#shanghai";再选择“多边上一页下一页返回8.7图像与链接形热点工具”，设置“武汉”的链接，链接地址为“8-7-3.html#wuhan";(4)保存文件，使用浏览器运行8-7-2.html文件，当鼠标点击不同的热点区域时，将会自动跳转到对应的目标地址。上一页返回8.8使用列表制作导航栏在第7章有关列表的知识中，已介绍过用列表制作行内导航的方法，本节将介绍使用列表制作基本的竖直排列导航菜单。当项目列表的list-style-type属性值为“none”时，通过CSS属性的变化可以制作出各式各样的菜单和导航栏。下面来看一个实例，其操作过程如下:(1)首先建立HTML相关结构，将导航栏的各项用项目列表<ul>表示。此时页面的效果如图8-19所示，这只是普通的项目列表。(2)然后开始设置CSS样式，首先把页面的背景色设置为浅色。(3)设置整个<nav>的宽度及字体，设置项目列表<ul>的属性，将项目符号定义为不显示，这时的浏览效果如图8-20所示。(4)为<li>标记添加下边框线，使各个超链接能分隔开，并且对超链接下一页返回8.8使用列表制作导航栏