第5章超链接与浮动框架
本章学习目标
通过对本章超链接和浮动框架等知识的学习，读者能够掌握超链接和浮动框架的语法和创建方法，理解超链接的分类以及路径等相关概念，学会利用超链接设置书签、文件下载、FTP下载、电子邮件链接等，会使用超链接与浮动框架关联设计Web网页导航。
Web前端开发工程师应知应会以下内容：
掌握超链接的基本标记语法和属性设置方法。
理解超链接的分类，以及路径、书签等概念。
学会使用超链接实现文件下载、FTP下载、电子邮件链接、图像链接。
学会使用超链接制作书签。
学会使用浮动框架实现内嵌页面的显示。
5．1超链接概述
有了超链接，各个独立的网页便可以有机地链接在一起构成一个网站。所谓超链接，是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至一个应用程序。用户通过浏览器浏览网页，打开页面上的超链接后，可以访问新的页面上的内容。例如百度首页，如图51所示，单击网页中的“新闻”链接，会跳转到百度新闻的首页。
图51百度首页和百度新闻页面
5．2超链接的语法、路径及分类
5．2．1超链接的语法
在网页文件中，超链接通常使用链接a标记的超文本引用href(HyperText Reference)属性建立目标对象，当前文档便是链接源，href设置的属性值是目标文件。
1. 基本语法
超链接标题
2. 语法说明
超链接a标记以开始，以 结束。其间内容为超链接标题。超链接由目的地址、链接标题、打开位置三部分组成。
3. 属性说明
href： 链接指向的目标文件。
name： 规定锚(anchor)的名称。
title： 指向链接的提示信息。
target： 指定打开的目标窗口，如表51所示。
表51target属性的取值及说明
属性值说明
_self在当前框架中打开链接
_blank在一个全新的空白窗口中打开链接
_top在顶层框架中打开链接，也可以理解为在根框架中打开链接
_parent在当前框架的上一层打开链接
framename在指定的框架或浮动框架内打开链接，框架名称可以自定义
【例521】超链接的应用。
其代码如下，页面效果如图52所示。
1
2
3
4
5超链接应用
7
8
9超链接导航
10百度 中国教育与科研计算机网 新浪
13
14
代码中第10~12行在主体body标记插入3个超链接标记，分别设置了超链接的href、title、target属性。当将光标移到超链接“中国教育与科研计算机网”上时，会弹出提示信息“CERNET”，如图52所示。通常，文本超链接的标题会显示带下画线的蓝色文本。
图52超链接的应用
5．2．2超链接的路径
在网页设计中超链接a标记的href属性定义链接所访问的目标地址，也称为访问路径。每一个网页都有一个相对固定的地址，即统一资源定位符（URL），通过独立的URL可以访问不同网站上的不同页面。在HTML文档中提供了3种路径，分别是绝对路径、相对路径和根路径。
1. 绝对路径
绝对路径指文件的完整路径，包括盘符或文件传输的协议http、ftp等，一般用于网站的外部链接。绝对路径有两种： 一种是从盘符开始定义的文件路径，例如“E:＼web＼index．html”； 另一种是从协议开始定义的URL网址，例如中国教育与科研计算机网的网址“http://www．edu．cn”。
2. 相对路径
相对路径是指相对于当前文件的路径，从当前文件所在位置指向目标文件的路径。采用相对路径是建立两个文件之间的相互关系，相对路径一般用于网站内部链接。相对位置的输入方法如表52所示。
表52相对位置的输入方法
相 对 位 置输 入 方 法代 码 示 例
同一目录输入要链接的文档通知
上一目录先输入“．．/”，再输入目录名首页
下一目录先输入目录名，后加“/”考试通知
3. 根路径
根路径是指从网站的最底层开始，一般网站的根目录就是域名下对应的文件夹，例如E盘上存放一个网站，双击E盘进入E盘看到的就是网站的根目录，这种路径称为根路径，所以根路径以斜杠“/”开头，然后书写文件夹名，接着书写子文件夹名或文件名，以此类推，直到写完路径为止。例如“/web/news/show．html”。
根路径一般用于创建内部链接。通常不建议采用此种链接形式。
根目录路径和相对路径都是以某个位置为起点的相对路径，但是根目录路径一般用于有多台服务器的大型网站，建议对路径的概念不太熟悉的初学者在做链接时采用相对路径。另外，为了避免出现链接错误，不管使用何种类型的链接，站点的建立是必要的。
5．2．3超链接的分类
在HTML文档中，超链接可以分为内部链接和外部链接两种。内部链接是指网站内部文件之间的链接，而外部链接是指网站内的文件链接到网站外的文件。将URL设置为相对路径为内部链接，而将URL设置为文件的绝对路径为外部链接。
【例522】内部链接和外部链接的应用。
其代码如下，页面效果如图53所示。
1
2
3
4
5内部链接和外部链接
7
8
9内部链接：
10通知 指向网站内的页面链接
11外部链接：
12网易 指向网站外的页面链接
13
14
代码中第10行定义访问当前目录下index．html的内部链接，第12行定义访问网易网站的外部链接。
图53内部链接和外部链接的应用
5．3超链接的应用
在网络上能够通过链接访问不同的资源或网页。链接对象多种多样，可分为文件、FTP站点、图像、电子邮件及书签等。
5．3．1创建HTTP文档下载超链接
网站经常提供软件、文件等资料的下载，下载文件的链接指向文件所在的相对路径或绝对路径，文件类型为*．doc、*．pdf、*．exe、*．rar等。其基本语法如下：
链接内容
5．3．2创建FTP站点访问超链接
FTP服务器链接和网页链接的区别在于所用协议不同，浏览网页采用http协议，而访问FTP服务器采用ftp协议。FTP需要从服务器管理员处获得登录的权限，不过部分FTP服务器可以匿名访问，从而获得一些公开的文件。其基本语法如下：
链接的文字
5．3．3创建图像超链接
将链接标题替换为一幅图像，在浏览时单击该图像，就可以打开链接的目标文件。其基本语法如下：
链接内容
邮件地址必须完整，例如intel@qq．com。其参数有cc(抄送)、bcc(密送)、subject(主题)、body。多个收件人用分号“； ”分隔； 多个参数用“&”连接，“&”与关键字之间不能留空格； 空格用“%20”代替。
举例如下：
发送邮件
【例531】超链接的综合应用。
其代码如下，页面效果如图54~图58所示。
1
2
3
4
5超链接的应用
7
11
12
13超链接的应用
14
15
163.图像超链接
17
18
204.邮件超链接-有问题可以给我
21发送邮件
22应该使用%20来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
23
24
图54超链接的应用
图55HTTP下载链接
图56FTP下载链接
图57图像超链接
图58邮件超链接
代码中第14行定义ch5．ppt文件的HTTP下载链接，单击超链接进入文件下载页面，如图55所示。第15行定义访问北京大学FTP站点的FTP下载链接，单击超链接进入FTP站点下载文件页面，如图56所示。第16~19行定义图像超链接，单击图像超链接进入百度搜索页面，如图57所示。第20~21行定义邮件超链接，单击邮件超链接进入邮件设置页面，如图58所示。
5．3．5创建页面书签链接
书签是指到文章内部的链接，可以实现段落间的任意跳转。实现这样的链接要先定义一个书签作为目标端点，再定义到书签的链接。链接到书签分为两种，即链接到同一页面中的书签和链接到不同页面中的书签。
1. 定义书签
通过设置超链接a标记的name属性来定义书签。
书签标题
name属性的值是定义书签的名称，供书签链接引用。超链接书签标题
书签标题
第一种是同一页面内的书签，第二种是不同页面间的书签，其中URL设置HTML文件名称，“#书签名”表示引用名称为“书签名”的书签。
【例532】书签链接的应用。
编写edu_5_3_2．html和edu_5_3_2_1．html，页面效果如图59和图510所示。
edu_5_3_2．html的代码如下：
1
2
3
4
5链接到同一页面的书签
7
8
9
10
16
17 Dreamweaver是美国Macromedia公司(现已被Adobe公司收购，成为Adobe Dreamweaver)开发的集网页制作和网站管理于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
18
19
20 Flash是美国Macromedia公司所设计的二维动画软件，全称Macromedia Flash(被Adobe公司收购后称为Adobe Flash)，主要用于设计和编辑Flash文档。附带的Macromedia Flash Player用于播放Flash文档。
21现在，Flash已经被Adobe公司购买，最新版本为Adobe Flash CS6 Professional，播放器也更名为Adobe Flash Player。
22
23
24 Adobe Fireworks可以加速 Web 设计与开发，是一款创建与优化Web图像和快速构建网站与 Web 界面原型的理想工具。Fireworks不仅具备编辑向量图形与位图图像的灵活性，还提供了一个预先构建资源的公用库，并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和Adobe Flash软件进行集成。在Fireworks中将设计迅速转变为模型，或利用来自Illustrator、Photoshop 和 Flash 的其他资源。然后直接置入Dreamweaver 中轻松地进行开发与部署。
25
26
27
代码中第9行定义根书签名称为"software"，供所有的“返回”书签链接引用； 第10~15行利用无序列表定义4个书签链接，其中前3个为同页面书签链接，最后一个为不同页面书签链接，跳转到edu_5_3_2_1．html页面上访问书签EditPlus； 第16行、第19行、第23行定义3个书签，分别为"dw""fl""fw"，供第11~13行定义的书签链接引用； 第18行、第22行、第25行定义“返回”书签链接，返回根书签所在的位置。单击图59中的“EditPlus［异页］”访问edu_5_3_2_1．html页面上的EditPlus书签，如图510所示。
图59同页面签链接
图510不同页面书签链接
edu_5_3_2_1．html的代码如下：
1
2
3
4
5不同页面之间的书签链接
7
8
9
10 EditPlus(文字编辑器)汉化版是一套功能强大，可取代记事本的文字编辑器，EditPlus拥有无限制的撤销与重做、英文拼写检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。它还有一个好用的功能，就是它有监视剪贴板的功能，能够同步于剪贴板自动将文字粘贴进 EditPlus 的编辑窗口中，让你省去粘贴的步骤。另外它也是一个非常好用的 HTML 编辑器，它除了支持颜色标记、HTML 标记，还支持 C、C++、Perl、Java，另外，它还内建完整的HTML & CSS1 指令功能，对于习惯用记事本编辑网页的朋友，它可帮你节省一半以上的网页制作时间，若你有安装IE 3.0 以上版本，它还会结合IE 浏览器于EditPlus窗口中，让你可以直接预览编辑好的网页(若没安装IE，也可指定浏览器路径)。
11
12
13
14
上述代码中第9行在标题字h4标记内定义书签名称为"EditPlus"，作为edu_5_3_2．html页面的书签链接的目标。第12行定义返回edu_5_3_2．html页面的书签链接，单击“返回首页”返回edu_5_3_2．html页面，如图59所示。
5．4浮动框架
浏览器窗口中含有的孤立的子窗口称为浮动框架，也称为内联框架。在浏览器窗口中嵌入浮动框架可使用iframe标记，该标记为成对标记，必须插入在body标记中，而不能插入在frameset标记中。
1. 基本语法
链接标题
2. 语法说明
属性名称及相关说明如表53所示。
表53浮动框架的属性
属性说明属性说明
src设置源文件属性height设置浮动框架窗口高度
name设置框架名称frameborder设置框架边框
width设置浮动框架窗口宽度scrolling设置框架滚动条
【例541】应用浮动框架。
其代码如下，页面效果如图511和图512所示。
1
2
3
4
5浮动框架应用
7
12
13
14
25
26
图511在浮动框架内显示指定网页的初始图
图512单击超链接后的页面效果图
代码中第17行在div标记中插入一个名称为leftiframe的浮动框架，并为该框架设置了内部显示的网页、宽度、高度； 第19行在div标记中插入一个名称为rightiframe的浮动框架，并为该框架设置了内部显示的网页、宽度、高度、框架的左右边距等属性； 第21行、第22行将浮动框架leftiframe、rightiframe设置为超链接的链接目标。单击超链接在左、右浮动框架中分别显示不同的页面，如图512所示。
5．5思政案例5——公民基本道德规范诠释
本例以“公民基本道德规范诠释”为主题，参照代码完成页面设计，效果如图513和图514所示。设计要求： 采用超链接与浮动框架组合设计，其中每个超链接的href属性值分别为edu_5_5_1_1．html、edu_5_5_1_2．html、edu_5_5_1_3．html、edu_5_5_1_4．html、edu_5_5_1_5．html。单击超链接后，让超链接的href指定的页面在浮动框架内打开。浮动框架内嵌页面中的段落p标记样式统一为首行缩进两个字符，水平分隔线为红色。其中爱国守法内嵌页面的效果如图513所示，其余内嵌页面的效果与其相似，在此省略效果图。
图513公民基本道德规范诠释爱国守法内嵌页面
图514“公民基本道德规范诠释”页面
HTML代码如下：
1
2
3
4
5
17
18
25
26
…
B. …
C. …
D. …
(2) 当链接指向（）文件时，不打开该文件，而是提供给浏览器下载。
A. ASPB. HTMLC. ZIPD. CGI
(3) 下列选项中不是超链接的target属性的取值的是（）。
A. _selfB. _new C. _blankD. _top
(4) 在网页中能够定义超链接的标记是（）。
A. …
C. … D.
(5) text B. text
C. text D. text
(7) 下列在body中插入浮动框架的语句正确的是（）。
A. …
C. 指向someone@mail.com的超链接
(2) 在指定页内超链接的时候，如果在某一位置使用了书签 语句定义书签名为target1，那么当单击超链接书签链接 时能够跳转到同页面中定义的书签target1位置上。
(3) 超链接路径分为、、。网站内部链接一般使用路径，当然路径也可以用于内部链接； 外部链接一般使用路径。
(4) 浮动框架的name属性的值为"leftframe"，在此浮动框架中打开“中国教育网(URL为http://www．edu．cn)”网站正确超链接是。
3. 简答题
(1) 简述什么是绝对路径和相对路径。
(2) 写出制作页面书签的步骤，并举例说明。
(3) 如果想通过单击不同的超链接在浮动框架中打开不同的页面，需要如何设置？
实验5
1． 根据提供的图像和超链接资源完成页面导航设计，资源与对应的超链接如表54所示，效果如图515所示。编写符合以下要求的文档： 在HTML文档中插入一张图片，为图片加上链接，指向它所在的网站。
表54图像与超链接的对应关系
序号图 片 名 称URL
1ipadblank1．gifhttp://www．apple．com．cn/iphone/
2ipadblank2．gifhttp://www．apple．com．cn/iphone/
3ipadblank3．gifhttp://www．apple．com．cn/macbookpro/
4ipadblank4．gifhttp://www．apple．com．cn/supplierresponsibility/
图515图片超链接的页面
2． 按以下要求设计Web页面，效果如图516所示。
(1) 页面标题为“桂林山水风景图片”。
(2) 正文标题为红色的“桂林山水风景图片”，图片分别为image51．jpg、image52．jpg、image53．jpg、image54．jpg； 采用无序列表布局，每一个列表项的内容为图像链接，单击小图可以浏览大图。
(3) 定义样式。img标记的样式为“宽度100px、高度100px、边框0px”； h3标记的样式为“红色、居中”； ul标记的样式为“去除列表项前的符号、内容居中显示”； li标记的样式为“显示方式为行内显示(display:inline)、宽度120px、行高30px”。
图516“桂林山水风景图片”页面
19
18