《网页设计与制作》
第五章网页中超链接的使用
主讲:王兆华
2013年7月22日星期一
内容提要
一、超链接的概念和作用
二、超链接的类型
三、合理安排超连接和文档路径类型
四、HTML超连接标记符A，及属性使用
五、Dreamweaver中超链接的各种操作
六、重点及难点
一、超链接的概念和作用
1.超链接的概念
①所谓的超链接是指从一个网页指向一个目
标的连接关系
②目标可以是
a)另一个网页，
b)相同网页上的不同位置
c)是一个图片
d)一个电子邮件地址
e)一个文件
f)甚至是一个应用程序。
一、超链接的概念和作用
2. 超链接的作用
①超链接是网页中最重要、最根本的元素之
一，如果没有它的存在，网页的一切就失
去了生命。
②在网页中使用超链接能够使每个独立的网
页之间产生一定的相互联系，从而使单独
的网页形成一个有机的整体。
③也就是：联系各个网页，联系各个站点。
内容提要
一、超链接的概念和作用
二、超链接的类型
三、合理安排超连接和文档路径类型
四、HTML超连接标记符A，及属性使用
五、Dreamweaver中超链接的各种操作
六、重点及难点
二、超链接的类型
1.按照链接路径的不同，网页中超链接一
般分为以下3种类型：
①内部链接
a)即在同一个站点内的不同页面之间相互联系的
超链接。
②锚点链接
a)可以链接到网页中某个特定位置的链接。
③外部链接
a)把网页与Internet中的目标相联系的链接。
二、超链接的类型
2. 按照使用对象的不同，网页中的链接又
可以分为：
①文本超链接
②图像超链接
③E-mail链接
④锚点链接
⑤多媒体文件超链接
⑥图像热点超链接
⑦空链接等
内容提要
一、超链接的概念和作用
二、超链接的类型
三、合理安排超连接和文档路径类型
四、HTML超连接标记符A，及属性使用
五、Dreamweaver中超链接的各种操作
六、重点及难点
三、合理安排链接和文档路径类型
1.合理安排超链接的建议(P77)
①避免孤立文件的存在
②在网页中避免使用过多的超链接
③网页中的超链接不要超过4层
④页面较长时可以使用书签(锚点链接)
⑤设置主页或上一层的链接
三、合理安排超链接和文档路径类型
2. 文档路径类型
①绝对路径：是包含服务器协议
（对于网页来说通常是http://或
ftp://）的完全路径。绝对路径包
含的是精确的地址而不用考虑源
文件的位置。（外部链接）
a)例如本地站点做一个连接到学校主页的
超级连接，则要使用绝对路径：
https://www.doczj.com/doc/c06758265.html,
Example5_1
三、合理安排超链接和文档路径类型
2. 文档路径类型
②和根目录相对的路径：是从当前站点的
根目录开始的路径。站点上所有可公开
的文件都存放在站点的根目录下。使
用斜杠告诉服务器从根目录开始。（内
部链接）
a)例如:在myweb站点中D:\myweb\，如果
要超链接到站点下面的
column1\mycollege.htm文件
/myweb/column1/mycollege.htm
Example5_1
三、合理安排超链接和文档路径类型
2. 文档路径类型
③和文档相对的路径：是指和当前文档所在
的文件夹相对的路径。最简单的路径，可
以用来链接和当前文档处于同一个文件夹
下的文档。（内部链接）
a)例如:在myweb站点中D:\myweb\，如果要在
myweb\index.htm超链接到站点下面的
column1\mycollege.htm文件
●相对路径: column1/mycollege.htm
b)从column1\mycollege.htm返回到index.htm
●相对路径: ../index.htm
Example5_1
三、合理安排超链接和文档路径类型
2. 文档路径类型
③和文档相对的路径
内容提要
一、超链接的概念和作用
二、超链接的类型
三、合理安排超链接和文档路径类型
四、HTML超链接标记符A，及属性使用
五、Dreamweaver中超链接的各种操作
六、重点及难点
四、HTML超链接标记符A，及属性使用
1.超链接标记符A及常用属性
①用HTML创建超链接需要使用A标记符
②注意：
a)结束标记符不能省略
b)在和之间可以用任何可单击的对
象作为超链接的源，例如文字或图像等。
③A标记的常用的三属性：
a)href, target, name
四、HTML超链接标记符A，及属性使用
2. 属性的使用
①href属性值
a)href是最基本属性，用于指定超链接的目标。
通过为href指定不同的值，可以创建出不同类
型的超链接。
b)常用属性值:
●“#”：空连接显示内容
●“file:// “: 链接到文件显示内
容
传媒大学
●“mailto:” ;链接到email地址
● 我的信
箱
Example5_2
四、HTML超链接标记符A，及属性使用
2. 属性的使用
②target属性值
a)target表示目标文件的打开方式,属性值
有四个:
●_blank: 空白窗口；
●_parent: 父窗口；
●_self : 在当前窗口；(默认)
●_top: (最高) 在整个浏览器窗口中显示链接
的内容,这样会覆盖当前框架中的所有内容.
Example5_2
四、HTML超链接标记符A，及属性使用
2. 属性的使用
③name属性值
a)如果要设置锚记超链接，首先应为页面中需要
跳转到的位置命名。命名时应使用A标记符的
name属性，在标记符与之间可以包
含内容，也可以不包含内容。
b)目录
c)如果在页面开始处标记了"top"，则可以用以下
HTML语句进行链接：返回目
录
Example5_2Example5_2_2
内容提要
一、超链接的概念和作用
二、超链接的类型
三、合理安排超链接和文档路径类型
四、HTML超链接标记符A，及属性使用
五、Dreamweaver中超链接的各种操作
六、重点及难点
五、Dreamweaver中超链接的各种操作
1.创建文本超链接
2.创建和删除图像超链接
3.创建图像热点超链接
4.创建锚记超链接（书签）
5.创建电子邮件超链接
6.创建下载文件超链接
7.创建空超链接
8.鼠标经过图像