第五单元站点导航超链接.docx

第五单元站点导航超链接.docx

《第五单元站点导航超链接.docx》由会员分享，可在线阅读，更多相关《第五单元站点导航超链接.docx（51页珍藏版）》请在冰点文库上搜索。

第五单元站点导航超链接

第五单元站点导航--超链接

[学习目标]

超链接是HTML超文本文件的命脉，HTML通过超链接标记符来整合分散在世界各地的图、文、影、音等信息。

本单元主要讲解4种常用的超链接的建立及图像超链接的建立。

WWW如此流行，一个重要的原因就是引入了超文本和超链接。

超文本就是包含有超链接的字符串，而超文本的精华就在于超链接（Hyperlink），超链接为快速查找所需的信息提供了方便，在浏览网页时，通过单击超链接，可以从一个网页转到另一个网页，从网页的一处转到另一处，或转到不同的站点，所有这些，都是超链接标记符...起的作用。

另外为了使网站的各网页风格统一，使用CSS技术是一种非常简捷的方式，CSS提供了80多种属性，弥补了HTML控制标记符将数据格式变化有限的缺陷。

[学习要点]

●文字导航

●图形导航

●文档上下文导航

●电子邮件导航

●CSS的简介

[任务介绍]

主页（HOMEPAGE）：

是指单位或个人的因特网“首页“，当浏览者进入某个网站时，屏幕所显示的首页就是主页，相当于书的总目录，因而主页使用超链接是最多的。

制作如图５-1所示的主页，并使该主页能够实现不同页面的链接。

图５-1

5.1建立超链接

超链接是Html语言的一大特色，正因为有了它，浏览者对内容的浏览才能够具有灵活性和网络性。

创建一个超链接需要使用超链接标记符...，a是单词Anchor（锚点）的首字母，鼠标指针指向超链接热点（文本或图形）时，将变成手形。

通过单击热点文字或图形，可以从此处转到另一处（目标资源），这个目标资源有惟一的地址（URL地址）。

...标记符的格式如下：

热点

属性的功能如表5-1所示：

属性

功能

href=地址

href是不可缺少的。

用以指定超链接所连接的文件的相对或绝对位置

name=书签名

指定文档内的“书签名”作为链接时可以使用的有效的目标资源的地址

target=打开窗口方式

此属性用来指明浏览的目标网页，当浏览者单击了超链接之后将在原来的浏览器窗口中浏览新的HTML文档。

target=_blank或new：

将会打开一个新的浏览器窗口

target=_parent：

将链接的页面内容显示在父框架中

target=_self：

将链接的页面内容显示在当前窗口中（默认值）。

target=_top：

将框架中链接的页面内容显示在没有框架的窗口中（即除去了框架）

target=框架名称：

链接的页面内容显示在指定的“框架名称”的窗口中

表5-1

根据所链接到的内容的不同，常见的超链接可以分为4种：

指向本地网页的链接、指向其他网页的链接、指向E-MAIL地址的链接及指向页面中特定部分的链接（也叫书签链接）。

一、指向本地网页的链接

利用...可以从一个页面链接到另一个页面。

在为超链接编写HTML文件时，如果目标资源放在本地机器上，可以用相对路径；否则，应写绝对路径。

对于目标资源放在本地机器上的文件，根据该文件与当前文件目录的关系，有如下的四种写法，如表5-2所示：

网页文件放在G:

\html_vbscript里，列出几种目标资源mb.htm放在G:

盘不同目录的情形

Html文件的位置

目标资源的位置

写法

情形说明

G:

\html_vbscript

G:

\html_vbscript

…

图文均在同一目录

G:

\html_vbscript

G:

\html_vbscript\img

…

图在网页下一层目录

G:

\html_vbscript

G:

\

…

图在网页上一层目录

G:

\html_vbscript

G:

\img

…

图文在同一层但不同目录

表5-2

二、指向其他网页的链接

对于其它机器上或INTERNET上的目标资源（即外部资源），只能用绝对路径（使用完整的路径名，即需要以“http:

//”开头。

）

例如：

将index.htm网页中的文字“链接到网易”设成链接至网易站点的超链接，则应使用HTML语句为：

链接到网易。

链接到外面去，可以扩充网站的实用性，也正因这功能，才造就了www五彩缤纷的世界。

由于网络上的服务五花八门，所以不同的服务有不同的链接方法，表5-3列出了指向其他网页的链接的情况。

网站链结

网站

//sunspot-">网站

电子邮件链结

请写信给我

zxwook@.tw">请写信给我

ftp链结

下载档案

//ftp.ntu.edu.tw">下载档案

News链结

seednetnews服务

.tw">seednetnews服务

Gopher链结

seednetgopher服务

//.tw/">seednetgopher服务

Bbs链结

seednetgopher服务

//.tw/">seednetbbs服务

表5-3

[注意事项]

如果链接到的文件不是HTML文件，则该文件通常将作为下载文件；即单击热点后，会打开“文件下载”对话框。

三、指向E-MAIL地址的链接

正如表5-3中所列，网页中允许进行E-MAIL地址的链接，即当浏览者单击电子邮件地址、信箱之类的链接信息时，就可以自动启动缺省的电子邮件编辑程序（OutlookExpress），且自动写上收件人的电子邮件地址，编辑邮件内容后，即可进行邮件的发送。

例如：

将INDEX.HTM网页中的文字“请写信给我”设成链接至发送E-MAIL地址的超链接，则应使用HTML语句为：

>请写信给我。

试想一下：

将INDEX.HTM网页中的文字“”设成链接至发送E-MAIL地址的超链接，则应使用HTML语句应是什么？

[注意事项]

设置指向E-MAIL地址的链接应注意：

1、利用href属性指定收件人的电子邮件地址。

2、在电子邮件地址之前加上mailto:

通信协议。

3、链接的文本可以是文字、图片及电子邮件地址。

四、指向页面中特定部分的链接（也叫书签链接）

当网页超过一定的长度，或具有很多不同的页（超过一定的长度）时，则可以对同一页（或不同页）的不同部分进行链接，这种链接就象书签起的作用。

例如：

可以在长文档的顶部以超链接的方式显示一个目录，这些目录的内容链接到本页各自所指的具体内容上去，当浏览者要查看不同的内容时，只要点一下链接到该内容的目录链接即可。

这就象阅读一本书一样，书的前面有目录，根据目录所标的页数，就可以翻到书相应的内容处。

建立书签超链接分两个步骤：

1、首先应为页面中需要跳转到的位置（即书签的终点）指定书签的名称，命名时应使用。

在标记符与之间可以不用任何文字，也可以写有意义的文字，这样就建立好了书签的名称，完成了第一步。

2、设置好书签后，再到书签的起点用标记符的href属性指向这些具有书签标记位置（锚点），从而实现书签链接。

例如：

如果在第1步文件的末尾设置了名为“END”的书签（即在文件的最后写上HTML的语句为：

），而想在文件最开始处单击文字“到文件尾”就一下子转到文件的最后，则应使用HTML语句为：

到文件尾。

当浏览者在浏览器中单击文字“到文件尾”时，将跳转到以标记书签的页尾部分。

[注意事项]

1、标记要结合标记使用才有效果。

标记用来在Html文档中创建一个书签（即做一个记号），属性name是不可缺少的。

表示单击有书签链接后所访问页面的书签名对象。

2、href属性赋的值若是书签的名字，必须在书签名前边加一个“#”号。

链接文本，单击链接文本则将使浏览器跳到“书签名”处。

即链接文本表示要用鼠标单击的对象。

5.2建立图形超链接

鼠标指针指向超链接热点，可以是文本，也可以是图形。

鼠标指针指向超链接热点为图形时，其方法是：

将标记符放在...标记符之内。

一、整个图形作为链接源

文字作链接源具有下划线，一看就比较明显。

用图形作为超链接源时，乍看其与一般图形没有什么区别，只有将鼠标移到图形上，鼠标指针变成手形时，才会知道该图形被定义了链接。

案例一：

整个图形作为链接源

[案例说明]

使整个一个图形作为超链接源，当单击该图形任何地方后，浏览器将显示所链接的内容。

效果如图5-2所示：

图5-2

[代码实现]

打开记事本，在其中输入如下代码

图形链接的例子

将该文本另存为eg5-1.htm，然后在浏览器中浏览，显示如图5-2所示

[代码分析]

在……之间插入图形标记符（img）就可以实现将整个图形作为链接源。

插入图形标记符为：

二、图形热点（图形区域）链接

上面所讲的图形作为链接源是将整个图形作为热点链接。

一个图形的不同区域也是可以作为链接源而链接至不同的网页；只要给图形的不同部分建立热点区域，然后再给热点区域加入超链接，这种链接叫做热点链接，也叫图形映射。

“联想”机器上赠送的“我的办公室”软件的界面一定见过吧！

在那幅办公室的图形上用鼠标点一下办公桌上的键盘，就启动一个“五笔字型”打字练习软件；点一下办公桌上的记事本就打开一个记事本软件；如此等等，即形象又方便。

这种效果实质是把一幅图形划分为不同的区域，再让不同的区域链接到做不同事情的软件上去，在HTML中也有一个具有把图形划分成多个区域，并链接到不同网页的标记。

实现图形热点链接，可以利用和…..标记符实现。

其具体操作步骤如下：

1、要建立一个图形热点链接，首先应在图形上标记出热点区域（用…..标记符）

标记符主要用于图形地图，通过该标记符可以在图形地图中设定作用区域（热点），这样当鼠标移到指定的作用区域点击时，会自动链接到预先设定好的网页。

其基本语法结构如下：

其中：

class和id：

是分别指定热点的类型和id号。

alt：

用于设定热点的替代性文字。

href：

用于设定该热点所链接的url地址。

shape和coords：

是两个主要的参数，用于设定热点的形状和大小。

shape和coords基本用法如表5-4所示：

定义形状

 – shape

定义区域 -- coords

shape=rect：

矩形

必须使用四个数字，前两个数字为左上角坐标，后两个数字为右下角坐标

例：

shape=circle：

圆形 

必须使用三个数字，前两个数字为圆心的坐标，最后一个数字为半径长度

例：

shape=poly：

多边形 

将多边形图形之每一转折点坐标依序填入

例：

表5-4

2、标记符是在图形地图中划分作用区域的，因此其划分的作用区域必须在图形地图的区域内，所以在用标记符划分作用区域前必须用HTML的另一个标记符。

同一“图形地图”中的所有热点区域都要在图形地图的范围内，即所有标记符均要在之间。

　　3、在标记符不要忘记设置usemap参数，且usemap的参数值必须与

热点链接（图形映射）的格式如下：

案例二：

图形热点（图形区域）链接

[案例说明]

用热点链接（图形映射）的格式把一幅图形划分为不同的作用区域，再让不同的区域链接到不同的网页。

效果如图5-3所示：

图5-3

[代码实现]打开记事本，在其中输入如下代码

align="left"usemap="#newbook"border="0">

alt="这里收集十万多个网址。

"title="这里收集十万多个网址。

">

alt="网站设计师的启蒙读本。

"title="网站设计师的启蒙读本。

">

alt="网页制作者不可不读的书。

"title="网页制作者不可不读的书。

">

将该文本另存为eg5-2.htm，然后在浏览器中浏览，显示如图5-3所示。

[代码分析]

　插入图形，并设置好图形的有关参数，且在标记符中设置参数usemap="newbook"，以表示对图形地图（newbook）的引用；用

newbook；分别用标记符针对三本书的位置划分出三个矩形作用区域，并设定好其链接参数href（当鼠标点“网址大全”这本书的矩形区域时，新开一窗口，显示eg3-1.htm网页；当鼠标点“网站设计攻略”这本书矩形区域时，新开一窗口，显示eg3-2.htm网页；当鼠标点“网页技巧大全”这本书矩形区域时，新开一窗口，显示eg3-3.htm网页。

）

[注意事项]

　　1、在标记符不要忘记设置usemap参数，且usemap的参数值必须与

　　2、同一“图形地图”中的所有热点区域都要在图形地图的范围内，即所有标记符均要在之间；

　　3、在标记符中的cords参数设定的坐标格式要与shape参数设定的作用区域形状配套，避免出现在shape参数设置的矩形作用区域，而在cords中设置的却是多边形区域顶点坐标的现象出现。

5.3CSS简介

在当今的网页制作中，几乎所有漂亮的网页都用了CSS，有了CSS的控制，网页便会给人一种赏心悦目、工工整整的感觉，同时字体的色彩变化也使主页变得更加生动活泼。

CSS技术是一种格式化网页的标准方式，主要的用途是定义网页数据的编排、显示、格式化及特殊效果，它扩展了HTML的功能。

因为HTML提供的、、

、^{等控制标记符虽然可以将数据格式化，但能做到的格式化是有限的，而CSS就字体、颜色、字号、定位、间隔及特殊效果等格式提供了80多种属性，弥补了HTML控制标记符将数据格式变化有限的缺陷。}

一、CSS简介

1、什么是CSS

CSS与HTML一样，是一套特殊语言标记符，可以在HTML文档使用或外部调用。

CSS是英语CascadingStyleSheets的缩写，中文翻译为”层叠样式表”。

其主要的用途是定义网页数据的编排、显示、格式化及特殊效果，以克服HTML方式的缺陷，因为它可以就某个特定的标记符设置格式。

2、CSS语法的基本格式

CSS语法的基本格式如下：

……

选择符{属性名称1:

属性值1;属性名称2:

属性值;……}

……

CSS代码是以标记符开始，以标记符结束，CSS的基本语句的结构都是这样的，选择符{属性名称1:

属性值1;属性名称2:

属性值;……}。

选择符可以是HTML语言中的各种标识符，比如p，div，img,，a，tr，td甚至是body，也可以是自己定义的名称；CSS代码可以直接放在HTML文档中的与标记符之间；也可以将CSS写成一个文件（CSS文件可直接在记事本中编辑，保存文件的扩展名为.css），然后在HTML文档头通过文件引用来进行样式使用。

二、CSS的选择符

在CSS中有5种合法的选择符（HTML标记符、用户自定义的类CLASS、用户自定义的ID、伪类、伪元素）。

使用选择符可以使文档的结构清楚，便于维护，下面主要对前4种类别的选择符进行详细的说明。

1．HTML标记符

HTML标记符是最典型的选择符类型。

任何一个HTML标记符都可以是一个CSS的选择符。

一旦为某一个HTML标记符定义了样式，在网页中这个被定义的标记符所标记的内容就按照猫画虎所定义的样式来显示了。

例如：

h1{font-family:

楷体;color:

red}则将标记符h1的字体定义为楷体，字体的颜色定义为红色。

在使用样式表的过程中，经常会有几个标记用到同一个属性，例如将标记符h2,h3,h4,h5,h6设置与标记符h1的字体都定义为楷体，字体的颜色都定义为红色。

按照上面的定法可以写成如下6行：

h1{font-family:

楷体;color:

red}

h2{font-family:

楷体;color:

red}

h3{font-family:

楷体;color:

red}

h4{font-family:

楷体;color:

red}

h5{font-family:

楷体;color:

red}

h6{font-family:

楷体;color:

red}

这样书写显然在分麻烦，可以用逗号分隔各个HTML标记符，把上面的6行合并成一行为：

h1,h2,h3,h4,h5,h6{font-family:

楷体;color:

red}

2．用户自定义的类CLASS

按照上面介绍的样式表定义方法，每种HTML标记符只能为其定义一种样式。

使用用户定义的类CLASS可以为一个HTML标记符创建多种样式。

要想将一个类包括到样式定义中，可将一个句点和一个类名称添加到选择符之后，其格式为：

选择符．类名{属性名称1:

属性值1;属性名称2:

属性值;……}。

可以使用任何名称命名类，类名前面的选择符也可省略。

在HTML中引用类的方法是：

3、用户自定义的ID

当在整个网页上有许多想以相同样式显示的标记符时，除了使用上面介绍的用户自定义的类CLASS的方法外，同样可以使用用户自定义的ID的方法来同一标记符的不同样式。

顾名思义，ID就是为标记符颁发身份证，以保证在网页中某个标记符具有唯一可用的值。

要将一个ID包括在样式有定义中，应用一个井号（#）作为ID名称的前缀（区别于CLASS的“.”号）。

注意：

虽然用CLASS和ID都可以为同一个标记符定义不同的样式，而且在效果上也没有什么区别，但最好只使用其中一种方式，以免造成混淆。

4、CSS伪类——动态链接

伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。

它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。

伪类的语法格式是：

选择符:

伪类{属性:

值}

伪类和类不同，伪类是CSS已经定义好的，不能象类选择符可以随意定义类名，伪类可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。

例如：

最常用的是a（锚）标记符有4种不同状态（伪类：

link、visited、active、hover），它表示动态链接的4种不同状态：

link、visited、active、hover（未访问的链接、已访问的链接、激活链接和鼠标停留在链接上）。

可以把它们分别定义如下不同的效果：

a:

link{color:

#FF0000;text-decoration:

none}/*未访问链接时的颜色是红色并无下划线*/

a:

visited{color:

#00FF00;text-decoration:

none}/*已访问的链接是绿色并无下划线*/

a:

hover{color:

#FF00FF;text-decoration: