当前位置:迷你小窝窝/网页制作/Dreamweaver网页制作/创建文字和图片超链接

创建文字和图片超链接

1.什么是超链接?

所谓超链接是指从一个网页指向一个目标的连接关系,这个目标可以是一个网页、也可以是相同网页上的不同位置,还可以是一个图片、一个电子邮件地址、一个文件,甚至是一个应用程序。 在网页中用来超链接的对象,可以是一段文本或一个图片,当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,可根据目标的类型来打开或运行。

按链接路径的不同,网页中的超链接一般分为3种类型:内部链接、锚点链接和外部链接。

按使用对象的不同,网页中的链接又可分为文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接和空链接等。

2.建立文本超链接

文本超链接就是利用文字建立一个指向一个目标的连接关系。例如:

百度      中关村在线      京东商城

3.超链接的分类

网页上的超链接一般分为三种:

一、绝对URL的超链接。
URL(Uniform. Resource Locator)就是统一资源定位符,简单地讲就是网络上的一个站点、网页的完整路径。
即包含服务器协议(对于网页来说,通常是http://或ftp://)的完全路径。绝对路径包含精确地址而不用考虑源文件的位置。但是如果目标文件被移动,刚链接无效。创建外部链接时,必须使用绝对路径。

例如:上面的指向百度、中关村在线、京东商城的超链接都是绝对URL的超链接。其链接代码分别为
<a href="http://www.baidu.com/" target="_blank">百度</a>
<a href="http://www.zol.com.cn/" target="_blank">中关村在线</a>
<a href="http://club.360buy.com/" target="_blank">京东商城</a>

二、相对URL的超链接。
如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去。

例如:Dreamweaver网页制作网页制作 的链接代码分别为
<a href="../index.html">Dreamweaver网页制作</a>
<a href="../../webindex.html">网页制作</a>

其中..表示相对该网页所在文件夹的上一层文件夹

三、同一网页的超链接,即使用到锚点的超链接,一般用#号加上名称链接到同一页面的指定地方。
锚点链接在后面介绍。

4.链接目标

  • blank:在新窗口显示目标网页;

  • parent:框架网页中当前整个窗口位置显示目标网页;

  • self:在当前窗口显示目标网页;

  • top:框架网页中在上部窗口中显示目标网页。

5.图片超链接

图片超链接与文本超链接方法相同,区别在于利用图片建立一个指向一个目标的连接关系。
由于图片可以设计多彩的文字或图形,其视觉效果优于文字,所以在网页设计中经常用到。

例:比较文字与图片超链接
百度            百度

中关村在线     

图片超链接相比文本超链接也是有缺点的,主要表现为:
1.图片制作需要时间多,图片占用网页区域大;
2.文本链接已访问的网页会看到文字颜色等的变化,而图片超链接则无法表现;
3.过多使用图片超链接,会影响网页打开的速度。

6.制作图像映射

以是中国地图为例,制作中国新闻网及分省图像映射。点击相应的省份地图,能打开该省的新闻网。

 

返回
福建 福建 北京 广东 浙江 新疆 中国新闻网