第七章 创建超链接
本章要点
超链接的概念
连接标记
使用CSS样式设置书签格式
图片连接
图片映射
目录:
7.1 超链接概述
7.2 超链接标记a及其属性
7.3 利用CSS样式设置书签格式
7.4 图片链接
7.5 图片映射链接
7.1 超链接概述
超链接是一个网站的灵魂。一个网站是由多个页面组成的,创建超链接有利于页面与页面之间的跳转,从而将整个网站中的页面有机地连接起来,它是网页中至关重要的元素。一般情况是将鼠标光标移至超连接处时显示为下划线,单击鼠标即可跳转到超链接的相应页面。
每一个网页都有独一无二的地址,即URL。
7.2 超链接标记a及其属性
超链接标记虽然在网页设计制作中占有不可替代的地位,但是其标记只有一个,那就是<a>标记。本章介绍的超链接应用都是基于<a>标记基础上的。
<a href=”file_url” >链接文字</a>
href指定链接地址
name给链接命名
title给链接提示文字
target指定链接的目标窗口
accesskey链接热键
每一个文件都有自己的存放位置和路径,理解一个文件到要链接的文件之间的路径关系式创建超链接的根本。
URL——统一资源定位器,指的就是每一个网站都具有的独立的地址。同一个网站下的每一个网页都属于同一个地址下,但是,当创建网页时,不可能也不需要为每一个链接都输入完全的地址。我们只需要确定当前文档同站点根目录之间的相对路径关系。因此,链接可以分为以下3种:
绝对路径
相对路径
根路径
1.绝对路径
绝对路径为文件提供完全的路径,包括适用的协议,如http,ftp,rtsp等。一般常见的有:
http://www.163.com
ftp://202.136.254.1
当链接到其他网站中的文件时,必须使用绝对链接。
2.相对路径
相对路径是最适合网站的内部链接的。只要是属于同一网站之下的,即使不在同一个目录下,相对链接也非常适合。
相对链接的使用方法为:
如果链接到同一目录下,则只需输入要链接文档的名称。
如链接到下一级目录中的文件,只需先输入目录名,然后加“/”,再输入文件名。
如链接到上一级目录中的文件,则先输入“../”,再输入目录名、文件名。
3.根路径
根目录相对地址同样适用于创建内部链接,但大多数情况下,不建议使用此种地址形式。它在下列情况下使用:
当站点的规模非常大,放置于几个服务器上时
当一个服务器上同时放置几个站点时
根目录相对地址的书写形式也很简单,首先以一个斜杠开头,代表根目录,然后书写文件夹名,最后书写文件名。
7.2.1 内部链接
所谓内部链接,指的是在同一个网站内部,不同的HTML页面之间的链接关系。在建立网站内部链接的时候,要考虑到使链接具有清晰的导航结构,使用户方便地找到所需内容的HTML文件。
7.2.2 书签链接
建立书签链接分为两步,一是建立书签,二是为书签制作链接。
建立书签:<a name=”name”>文字</a>
书签链接:<a href=”#name”>文字链接</a>
7.2.3 外部链接
所谓外部链接,指的是跳转到当前网站外部,与其他网站中页面或其他元素之间的链接关系。这种链接在一般情况下需要书写绝对地址。
制作外部链接的时候,使用URL统一资源定位符来定位万维网信息,这种方式可以简洁、准确地描述信息所在的地点。
常见的URL格式如表所示。
www http:// 进入万维网
ftp ftp:// 进入文件传输服务器
news news:// 启动新闻讨论组
email mailto: 启动邮件
1.链接外部网站
<a href=”http://”>文字链接</a>
2.链接FTP
<a href=”ftp://”>文字链接</a>
3.链接到news新闻组
<a href=”news://”>文字链接</a>
4.发送e-mail
<a href=”mailto:a@b.c”>发送邮件</a>
<a href=”mailto:a@b.c?subject=content”>邮件主题</a>
<a href=”mailto:a@b.c?cc=a@b.c”>抄送</a>
<a href=”mailto:a@b.c?bcc=a@b.c”>密件抄送</a>
7.2.4 文件(非HTML页面)链接
除了链接到HTML页面的超链接外,还可以制作提供文件下载的链接。如果希望制作下载文件的链接,只需在链接地址处输入文件所在的位置即可。当浏览器用户单击链接后,浏览器会自动判断文件的类型,以做出不同情况处理。
<a href=”file_url”>文字链接</a>
file_url代表文件所在的路径,可以写下相对路径,也可以写下绝对路径。
7.3 利用CSS样式设置书签样式
超链接在默认情况下,链接被显示为带下划线,未被查看过时为蓝色,访问过的为紫色。我们可以通过CSS来设置链接不同状态中的样式 。链接分为5个状态,它们的视觉外观根据当前状态而改变。这些状态如下:
link链接在没有任何操作之前的标准状态
visited链接被单击之后的状态
hover鼠标指针悬停在连接上时的状态
focus链接获得焦点时的状态
active链接正在被单击时的状态
在默认外观中,link为蓝色,visited为紫色,active为红色,三者都带有下划线。
使用CSS可以调节不同状态下链接的字体、大小、颜色、加粗斜体、下划线等格式。
7.4 图片连接
虽然链接主要是基于文本的,但是可以用一个链接来包装一个图像,从而使其变成一个链接。图像的链接标记和文字是相同的。都是<a>标记。
区别在于,文本的链接在超链接标记<a></a>之间输入文本
<a href=”file_url” >链接文字</a>
图片的链接在<a></a>之间输入的是图片的代码。
<a href=”file_url” ><img src=”img_url”></a>
另外,图片默认情况下没有边框,一旦添加链接后会有蓝色边框,想要去掉边框,可在<img>标记中将border属性值设为0,如<img src=”img_url” border=”0”>,或者在CSS样式表中将图片标记img的样式统一设成img{border:0;}。
7.5 图片映射链接
图像映射(image map)使你可以在一个单独图像中定义多个链接。例如,如果你有一个气象图,可以使用一个图像映射链接到各个地区的气象预报。图像映射中可单击的范围可以是基本形状(矩形或者圆形),也可以是复杂的多边形。