绝对路径名
7
设置绝对路径
绝对路径是指文件的完整路径，即在进行超链接 时使用了URL，例如： /index.php /teach/index.php 绝对路径通常会在网站的友情链接中使用
8
6.2.2 设置相对路径
6
绝对和相对路径名
C:\html 目录
Doc1.htm Doc3.htm
C:\example目录
Doc2.htm Doc4.htm
相对路径名
要链接到同一目录 (C:\html) 下的页面，可编写 <A HREF = “Doc3.htm”> 或 <A HREF = “C:\html\Doc3.htm”> 要链接到另一目录 (C:\example) 下的页面，可编写 <A HREF =“..\example\Doc2.htm”> 或 <A HREF =“C:\example\Doc2.htm”>
19.1.9 设置图片热区链接
• 语法说明
<img>标记用来插入图片和引用映射图片名称，即用usemap属性来 引用在<map>标记中所定义的映射图片名称，并且要在名称前加上 #号。 <map>标记只有一个name属性，用来定义映射图片的名称。 <area>标记有三个属性，shape属性、coords属性和href属性。 shape属性用来定义热区的形状，又有3个属性值，具体取值见 表19-2 coords属性用来定义热区的坐标，不同的形状其coords属性的 设置方式也不同，具体可以参见表19-3 href属性，用来定义超链接的目标地址。
为达到这种跳转效果，需在 HREF 参数 中使用该标记
<A HREF= “#marker”>热点文字</A>
13
链接到同一文档的某个部分2-1
锚记标签用于使用户“跳”到文档的某个部 分HTML 的 NAME 属性用于创建锚标记
<A NAME = “marker”>主题名称</A>
为达到这种跳转效果，请在 HREF 参数中使 用该标记 <A HREF= “#marker”>主题名称</A>
19.1.9 设置图片热区链接
• 示例 <img src="19-1-9.jpg" border=0 usemap="#hh" alt="插入图片"> <map name="hh"> <area shape="rect" coords="60,50,100,95" href="19-1-8-2.html" alt="荷花"&左右两部分，左面占据20%，框 架边框间距为4像素，颜色为红色（38.htm）（若是上下分割呢？） 代码如下：
<html><head><title>框架的应用 </title></head> <frameset rows="190,*" bordercolor=red framespacing=4> <frame > 此处指定上侧框架窗口为190px， <frame> *代表剩下的宽度 </frameset> 34 </html>
14
链接到同一文档的各个部分2-2
... <BODY> <A HREF = #Lion>狮子</A> <BR> <A HREF = #Zebra>斑马</A> <BR> <A HREF = #Cheetah>印度豹</A> <BR> <A NAME = Lion>狮子</A> <P>狮子的吼声从八公里之外就能听到！雄狮（很 容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌 狮则要轻得多，只有 180 公斤。 <BR> <A NAME = Zebra>斑马</A> <P>没有任何两匹斑马的斑纹完全一样，因此每匹 斑马都是独一无二的。斑马也称为黑白条纹相间的 马......
27
下载链接
在图象、文字链接的地方，将压缩文件做为链 接地址 脚本链接：
javascript:window.close()
作业
制作页面-continent/index.html 体现以下技术的几种：
内部链接建立 外部链接建立 锚点链接 图像链接 图像映射
29
框架
广告栏 顶部框架(top.htm)
href="/view/2812.htm" alt="福建 "/> </map>
电子邮件链接
用户可从网页发送电子邮件
<HTML> <HEAD> <TITLE>海豚</TITLE> </HEAD> <BODY> <H3>充分交流，密切配合</H3> <BR> <P>据说，海豚的交流模式几乎与人类的一样复杂！ <BR> <BR> <A HREF="mailto:thisperson@">请将 您的疑问发送至 David Fernandez</A> </BODY> </HTML>
框架主要包括两部分：框架集和框架。
框架集是在一个文档内定义一组框架结构 的HTML网页，它定义了在一个窗口中显示 的框架数、框架的尺寸和载入到框架中的 网页等 框架指在网页上定义的一个显示区域。
32
框架集语法及属性
<html>
<head>…</head> <frameset cols||rows=“” framespacing=“” bordercolor=“”> </frameset>
15
19.1.8 设置图片链接——<a>
• 基本语法 <a href=”URL” target=”目标窗口的打开方式”> <img src=”图片地址”> </a> • 语法说明
href属性是用来设置图片的链接地址URL， target属性用来设置目标窗口的打开方式 img标记中还可以添加其他的属性，如height、hspace 、border等。
超级链接
<HTML> <HEAD> <TITLE>有趣的动物</TITLE> </HEAD> <BODY> <H1>会弹琴的狗狗</H1> <A HREF = “dog.htm”>单击此处查看</A> </BODY> </HTML>
4
超链接概述
链接是超文本的“超”的部分，链接，又称位置点 anchor，将文本或图形标识指向其他文档、图形、 小程序、多媒体效果或文档中特定位置。 链接由以下两个部分构成： 位置点标签<a>，将文本或图形标识为链接 属性href，用于指定要链接的文件
19.1.9 设置图片热区链接
• 表19-2 shape属性取值说明
• 表19-2 shape属性取值说明
19.1.9 设置图片热区链接
• 示例 <img src=“19-1-9.jpg” border=0 usemap=“#hh”> <map name=“hh”> <area shape=“rect” coords=“60,50,100,95 “ href=“19-1-8-2.html”> 手形所在的矩形区域就是定义好的热区链接。 选择矩形热区 </map> 通过单击该区域即可打开链接地址19-1-8-2.html
网页制作综合技术教程
第三章 超链接
第四课 超链接
学习目标
超链接概述 链接路径 内部链接建立 外部链接建立 锚点链接 图像链接 图像映射
2
超链接概述
链接是超文本的“超”的部分，链接，又称位置点 anchor，将文本或图形标识指向其他文档、图形、 小程序、多媒体效果或文档中特定位置。
3
厦大漳州校区地图
/gcampus/index.html#
厦大漳州校区地图
/gcampus/index.html#
中国地图
<img src="chinamap.gif" width="654" height="520" border="0" usemap="#Map" alt="china map"/> <map name="Map" id="Map"> <area shape="poly" coords="504,363,502,366,498,369,494,368,492,366,489,366,489,370,489,375,489,378,486,380,483,383,480,
10
实例演练
实例演练
images/logo.gif
../images/logo.gif
genres/rock/pinkfloyd .html
锚点链接
锚点链接是指点击链接后跳转到同一文档 的不同部分，链接的目标点必须定义为 锚标记。 <a>标签中 的 NAME 属性用于创建锚标 记
