网页设计超链接
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
补充例题
将窗口分割成左右两部分，左面占据20%，框 架边框间距为4像素，颜色为红色（38.htm）（若是上下分割呢？） 代码如下：
<html><head><title>框架的应用 </title></head> <frameset rows="190,*" bordercolor=red framespacing=4> <frame > 此处指定上侧框架窗口为190px， <frame> *代表剩下的宽度 </frameset> 34 </html>
网页制作综合技术教程
第三章 超链接
第四课 超链接
学习目标
超链接概述 链接路径 内部链接建立 外部链接建立 锚点链接 图像链接 图像映射
2
超链接概述
链接是超文本的“超”的部分，链接，又称位置点 anchor，将文本或图形标识指向其他文档、图形、 小程序、多媒体效果或文档中特定位置。
3
15
来自百度文库9.1.8 设置图片链接——<a>
• 基本语法 <a href=”URL” target=”目标窗口的打开方式”> <img src=”图片地址”> </a> • 语法说明
href属性是用来设置图片的链接地址URL， target属性用来设置目标窗口的打开方式 img标记中还可以添加其他的属性，如height、hspace 、border等。
19.1.9 设置图片热区链接
• 语法说明
<img>标记用来插入图片和引用映射图片名称，即用usemap属性来 引用在<map>标记中所定义的映射图片名称，并且要在名称前加上 #号。 <map>标记只有一个name属性，用来定义映射图片的名称。 <area>标记有三个属性，shape属性、coords属性和href属性。 shape属性用来定义热区的形状，又有3个属性值，具体取值见 表19-2 coords属性用来定义热区的坐标，不同的形状其coords属性的 设置方式也不同，具体可以参见表19-3 href属性，用来定义超链接的目标地址。
<frame src=“页面文件名称”> <frame src=“页面文件名称” > 注意：在框架集页面代码中不要使用
</html>
<body>标签，即<frameset>与<body> 不同时使用
<frameset>标签属性如下：
Cols：将窗口纵向划分为几个框架 Rows：将窗口横向划分为几个框架 Framespacing：设置框架边框之间的间隔距离，默认0 33 Bordercolor：设置框架边框颜色（设置的是间距颜色）
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="荷花"> </map>
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
为达到这种跳转效果，需在 HREF 参数 中使用该标记
<A HREF= “#marker”>热点文字</A>
13
链接到同一文档的某个部分2-1
锚记标签用于使用户“跳”到文档的某个部 分HTML 的 NAME 属性用于创建锚标记
<A NAME = “marker”>主题名称</A>
为达到这种跳转效果，请在 HREF 参数中使 用该标记 <A HREF= “#marker”>主题名称</A>
商品导航 左侧 框架 (left.htm)
商品详细介绍 右侧框架 (main.htm)
为何使用框架
在页面的一个固定部分显示徽标或静态信息
在此处显示主要内容。
在另一个固定部分 站点中只有此部分是变化的。 显示导航部分
9.1 框架概述
框架用于将浏览器窗口划分为若干个区域， 每个区域可以分别显示不同的页面内容； 另外框架可以方便地进行网页的导航。 框架集
385,480,388,480,393,479,399,477,401,476,406,476,409,474,412,475,413,479,413,482,413,484,414,488,418,489,421, 489,425,490,429,493,429,498,424,499,419,503,416,506,414,509,411,511,407,515,405,516,402,518,399,520,398,520, 393,515,392,515,389,517,389,519,386,519,383,519,381,522,381,525,378,526,374,527,372,523,372,522,372,520,372, 520,369,518,369,516,371,516,374,513,374,511,372,510,369,505,365,503,361"
框架主要包括两部分：框架集和框架。
框架集是在一个文档内定义一组框架结构 的HTML网页，它定义了在一个窗口中显示 的框架数、框架的尺寸和载入到框架中的 网页等 框架指在网页上定义的一个显示区域。
32
框架集语法及属性
<html>
<head>…</head> <frameset cols||rows=“” framespacing=“” bordercolor=“”> </frameset>
厦大漳州校区地图
http://map.xmu.edu.cn/gcampus/index.html#
厦大漳州校区地图
http://map.xmu.edu.cn/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,
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.8 设置图片链接——<a>
• 实例代码
19.1.8 设置图片链接——<a>
• 网页效果
19.1.9 设置图片热区链接
• 基本语法
<img src=”图片地址” usemap=”#映射图片名称”>
• 热区链接属性的定义如下： <map name=”映射图片名称”> <area shape=”热区形状” coords=”热区坐标” href=”URL”> </map>
绝对路径名
7
设置绝对路径
绝对路径是指文件的完整路径，即在进行超链接 时使用了URL，例如： http://www.jgxy.xmu.edu.cn/index.php http://teach.xujc.cn/teach/index.php 绝对路径通常会在网站的友情链接中使用
8
6.2.2 设置相对路径
相对路径是指相对于当前文件的路径，即 由当前文件如何找到目标文件。采用相 对路径是建立两个文件之间的相对关系， 可以不受站点和所处服务器位置的影响。 相对路径的使用方法：
同一目录：输入要链接的文件名称即可 上一级目录：输入“../文件名” 下一级目录：输入“目录名/文件名”
对于图片文件而言，上面内容同样适用。
href="http://baike.baidu.com/view/2812.htm" alt="福建 "/> </map>
电子邮件链接
用户可从网页发送电子邮件
<HTML> <HEAD> <TITLE>海豚</TITLE> </HEAD> <BODY> <H3>充分交流，密切配合</H3> <BR> <P>据说，海豚的交流模式几乎与人类的一样复杂！ <BR> <BR> <A HREF="mailto:thisperson@yahoo.com">请将 您的疑问发送至 David Fernandez</A> </BODY> </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>没有任何两匹斑马的斑纹完全一样，因此每匹 斑马都是独一无二的。斑马也称为黑白条纹相间的 马......
超级链接
<HTML> <HEAD> <TITLE>有趣的动物</TITLE> </HEAD> <BODY> <H1>会弹琴的狗狗</H1> <A HREF = “dog.htm”>单击此处查看</A> </BODY> </HTML>
4
超链接概述
链接是超文本的“超”的部分，链接，又称位置点 anchor，将文本或图形标识指向其他文档、图形、 小程序、多媒体效果或文档中特定位置。 链接由以下两个部分构成： 位置点标签<a>，将文本或图形标识为链接 属性href，用于指定要链接的文件
27
下载链接
在图象、文字链接的地方，将压缩文件做为链 接地址 脚本链接：
javascript:window.close()
作业
制作页面-continent/index.html 体现以下技术的几种：
内部链接建立 外部链接建立 锚点链接 图像链接 图像映射
29
框架
广告栏 顶部框架(top.htm)
9
6.2.3 使用根路径
根路径的设置也适合内部链接的建立，一般 情况下不使用根路径，根路径以/开头，后 面跟随文件所在位置的详细路径。 例如文件znlj.jpg的根路径为
/example/ch06/image/znlj.jpg
使用根路径明显增加了代码的复杂程度 在动态网页技术(ASP，JSP,PHP等)中通常 会设置全局常量保存重要目录，方便访问 相关文件，$image + “/catelog/bags/p1.jpg”
标签<A>的常用属性
href：指定链接地址 name：给链接点命名 target：指定链接的目标窗口——_self、 _blank、 _top、 _parent
5
6.2 超链接的路径
一个网站的多个页面之间的关系都是通过 超链接实现的，每个页面都有一个存放 位置和路径，了解一个文件与另一个文 件之间的路径关系对建立超链接而言是 非常重要的。 在HTML文件中提供了三种路径：绝对路 径、相对路径和根路径
10
实例演练
实例演练
images/logo.gif
../images/logo.gif
genres/rock/pinkfloyd .html
锚点链接
锚点链接是指点击链接后跳转到同一文档 的不同部分，链接的目标点必须定义为 锚标记。 <a>标签中 的 NAME 属性用于创建锚标 记
<A NAME = “marker”>主题名称</A>