本章讲述标准HTML中的一些高级标识符，你将学习怎样建立image map来使你的网点易于浏览，你还会学习怎样使用窗口和框架来同时显示多个网页，最后你将学习怎样通过cascading style sheets来更好地控制你网页的布局。

使用image map

许多网点的主页都有一幅图象，你可以点击它的不同部位来进入网点的不同部分（见图7.1）。例如，这幅图象可以包含一些图标，指定为新闻部分。对话部分及下载部分，如果这个网点的参观者想从主页立即进入新闻部分，他就可以简单地点击一下新闻的图标，包含有这些图标的图象就被称为image map。

图7.1 一个image map的例子

image map的另一个用途是在网点的每一页的顶部建立导航条，导航条包含了这个网点主要部分的菜单。同样，用户可以用导航条快速而简单地进入他所感兴趣的部分。例如，Netscape的网点上许多网页都有一个导航条（见图7.2）。

这是image map的两个主要用途，然而只要我们去想，它还有很多别的用途。例如，你可以使用image map来搜集信息，假如你想知道参观你网点的人是来自世界的哪个角落，你就可以建立一幅世界地图的image map，参观者可通过点击地图来指出他们来自哪个国家。如果你想在一幅图象上显示一系列选择，就要使用image map。

有两种类型的image map：服务器端的及客户端的，当你使用服务器端image map时，服务器会在用户点击了图象上某一部位时决定采取什么行动；而在客户端image map中，则是由浏览器决定采取什么行动。服务器端image map与更多的浏览器有更好的兼容性，但是客户端image map更快。两种image map都很容易建立，下面的两节将分别介绍这两种类型。

图7.2 具有导航条的Netscape的网页

服务器端image map

如果你想让你的image map在更多的浏览器上都能正确运行的话，就使用服务器端image map，它甚至能很好地与早期的浏览器兼容。它唯一的一个不利之处是它比客户端image map要慢许多。

建立一个服务器端image map需要以下三步：

> > 建立图象

> > 在HTML文件中使用正确的标识符

> > 建立image map

> 下面将对此进行详细的讨论。

你可以在image map中使用任何类型的图象，一般使用GIF，但你也可以使用JPEG或PNG格式的图象，这对于image map来说没有什么差别。你可以用任何一种支持网页图象格式的作图软件来建立你的图象。

在建立图象时，要确保它的尺寸足够大，能使用户轻松地用鼠标点击不同的部位。如果你建立的图象太小，用户点击正确的区域会很吃力，这会降低用户的兴趣。同时也不要使图象太大，否则图象调入浏览器会非常地慢。Internet上有很多网点在它们的主页上都放置了过大的image map（社团的网点更是这样）。你的图象很具有艺术性，但如果要花几个小时来读入它的话，就没有人愿意去看它。

建立服务器端image map的第二步是在HTML文件中包含必需的HTML标识符，你可以使用<IMG>的ISMAP属性来指定一幅图象为服务器端image map。下面是个例子：

<HTML>

<HEAD> <TITLE> Server-Side Image Map </TITLE> </HEAD>

<BODY>

<A HREF=“/somedirectory/mymap.map”> <IMG SRC=“myimage.gif” ISMAP> </A>

</BODY>

</HTML>

这个例子假设你已经建立了一幅名为myimage.gif的GIF图象，这幅图象是用来作为image map的。ISMAP属性通知浏览器将这幅图象解释为image map而不是一般的图象。

你可以使用<IMG>标识符的所有属性，例如，你可以用BORDER＝0属性来防止在Netscape Navigator上显示时在图象周围画一个边框。

建立一个服务器端image map的最后一步是建立一个地图文件。地图文件是具有扩展名为 .map的一般文本文件，你可以使用任何一种普通的文本编辑软件来建立地图文件。在上例中，注意图象是包含在<A>标识符中，然而HREF属性不是通常那样指向一个HTML文件，而是指向一个名为mymap.map的文件，这就是个地图文件。

一个地图文件将图象中不同的区域与不同的网络地址（URL）关联起来。例如，假设你的图象上有一个报纸的图标，还有一个聊天室的图标，如果有人点击了报纸图标，你希望浏览器调入新闻的网页，如果点击了聊天室的图标，你希望调入聊天室的网页。要建立这种图象与网页间的联系，你必须使用地图文件。

Internet Information Server（本书假定你在使用的Web服务器）能识别NCSA和CERN格式的地图文件。下面的例子是一个NCSA格式的地图文件：

# WWW NCSA Image Map file for

‘myimage.gif ’

default /home.cfm

rect /news.cfm 0,0 100,100

rect /chat.cfm 101,0 200,100

在这个地图文件中，符号＃表明一句注释的开始，你可以在＃号后输入任何你想要的文字。在此例中，注释中说明了与地图文件相关的图象文件名。当你有多幅image map时，这是个好的习惯，通过在地图文件中指明图象的名字，你可以记住哪个图象与哪个地图文件相关。

代码rect用来将图象中的一个矩形区与一个HTML文件地址相关联，例如，news.cfm文件与坐标为0，0和100，100定义的矩形区相关联。这个坐标指明了图象上的一个区域，左上角坐标为（0，0），右下角坐标为（100，100）。当用户点击了图象上的这个区域后，HTML文件news.cfm就会被调入浏览器。

最后，代码default指明了当用户点击image map上未被定义的区域时，浏览器应当调入的HTML文件。在此例中，如果用户点击了上述定义的两个矩形区域之外，浏览器就会调入

home.cfm文件。

在这个地图文件中，定义的区域是矩形的，但是你也可以使用别的形状，例如圆形、多边形，甚至是单独的点（如果你觉得有必要的话）。下面的例子使用了所有这四种形状的区域：

# WWW NCSA Image Map file for

‘myimage.gif ’

default /home.cfm

rect /news.cfm 0,0 100,100

circle /chat.cfm 50,50 20

poly /help.cfm 200,0 400,0 400,100 200,100 200,0

point /NeverGetHere.cfm 500,6

在这个地图文件中，代码circle在地图上定义了一个圆心在（50，50），半径在20的圆形区域，poly定义了一个由一系列的点（给出X、Y坐标）组成的多边形区域，最后point定义了一个单独的点，要想调入HTML文件NeverGetHere.cfm，用户必须点击图象上坐标为（500，6）的单个点。

注意

使用多边形在image map上定义区域时要小心，早版本的Internet Information Server不能处理超过100个点组成的多边形（这将会造成禁止进入的错误）。现版的服务器能处理多达160个点的多边形，但多于这些的点就会被忽略。

你可能已经注意到在上述地图文件中由rect和circle定义的区域是重叠的。在两个区域重叠的情况下，在地图文件中首先定义的区域会起作用，因此在此例中，重叠区域会执行矩形区的功能，news.cfm文件将会与矩形和圆重叠的区域相关联。

注意

一些作图软件，如Fractal Design Painter，可以自动地为你产生地图文件。另外，许多共享软件和免费软件可以用来建立地图文件，可浏览

http://www.shareware.com或http://www.tucows.com。

当你画好了图象，包含了必需的HTML标识符，并建立了地图文件后，你就有了一个服务器端image map，你可以在一个网页上包含任意多的image map，而且你也可以在多个网页上反复使用同一幅图象和地图文件。例如，如果你想在多幅网页上包含同一个导航条时，就可以这样做。

客户端image map

客户端image map与服务器端image map的功能完全一样，但客户端image map会快许多，它的唯一一个缺点是它在早期到浏览器上不被支持。

在客户端image map上，用HTML标识符来指定一个地图文件，你可以使用<MAP>和<AREA>标识符来完成这一切，下面是个例子：

<HTML>

<HEAD> <TITLE> Client-Side Image Map </TITLE> </HEAD>

<BODY>

<MAP NAME=“mymap”>

<AREA SHAPE=“rect” COORDINATES=“0,0,100,100” HREF=“/news.cfm”>

<AREA SHAPE=“rect” COORDINATES=“101,0,200,100” HREF=“/chat.cfm”>

</MAP>

</BODY>

</HTML>

<MAP>标识符用来包含<AREA>并为地图提供一个名字，每一个<AREA>在图象上定义了一个区域，并与一个地址（URL）相关联。

在此例中，在图上定义了两个矩形区域，第一个区域从图象的左上角开始，并有100个象素的宽和高，如果用户在这个区域内点击鼠标，就会调入news.cfm文件；第二个矩形从坐标（101，0）开始，并在坐标（200，100）结束，这个区域与HTML文件chat.cfm相关联。

注意

根据HTML 3.2规范，你可以使用百分数来提供区域的坐标，然而，并不是所有的浏览器都支持这一特性，所以你最好不要用它。

你也可以在SHAPE属性中指定圆形和多边形，下面的例子使用了三种形状：

<HTML>

<HEAD> <TITLE> Client-Side Image Map </TITLE> </HEAD>

<BODY>

<MAP NAME=“mymap”>

<AREA SHAPE=“rect” COORDINATES=“0,0,100,100” HREF=“/news.cfm”>

<AREA SHAPE=“circle” COORDINATES=“50,50,20” HREF=“/chat.cfm”>

<AREA SHAPE=“poly”

COORDINATES=“200,0 400,0 400,100 200,100 200,0” HREF=“/help.cfm”>

<AREA SHAPE=“rect” COORDINATES=“0,0,10,10” NOHREF>

</MAP>

</BODY>

</HTML>

在此例中，通过给出圆心的坐标x、y及圆的半径定义了一个圆形区域，而多边形的定义是通过提供一系列表明多边形顶点的x、y坐标而完成的。

注意在最后一个<AREA>中出现的NOHREF属性，它用来定义image map上的无效区域，如果用户点击了这个区域，将不调入任何文件。在此例中，最后一个<AREA>标识符用来在第一个<AREA>中定义的矩形区中挖出一个洞（当你想要在image map上定义一个复杂的形状时，这个属性是很有用的）。

注意第一个矩形和圆形重叠的区域，第一个<AREA>将有优先权，因此在此例中，如果用户点击了重叠区域，将会读入news.cfm文件。

在客户端image map中，你不能定义一个缺省文件用来当用户点击在定义区域之外时读入。然而，还有别的办法来实现这一效果，如果你让最后一个<AREA>作用于整个图象，这个标识符就会为整个image map指定一个缺省文件。

这个HTML文件不很复杂，你还要指定一个图象用在你的image map中，你可以用<IMG>的USEMAP属性来将一幅图象与一个地图文件相关联，就象下面的例子所示：

<HTML>

<HEAD> <TITLE> Client-Side Image Map </TITLE> </HEAD>

<BODY>

<MAP NAME=“mymap”>

<AREA SHAPE=“rect” COORDINATES=“0,0,100,100” HREF=“/news.cfm”>

<AREA SHAPE=“rect” COORDINATES=“101,0,200,100” HREF=“/chat.cfm”>

</MAP>

<MAP SRC=“myimage.gif” USEMAP=“#mymap”>

</BODY>

</HTML>

在此例中，地图mymap与图象myimage.gif相关联，如果你需要，你可以把一个地图文件与同一网页上的多幅图象相关联，这是很有用的。例如，如果你想在一个网页的顶部和底部都加上同一个导航条。

通常，客户端image map一般使用GIF图象，但你也可以使用JPEG甚至是PNG图象。如果你想在image map中使用照片，JPEG图象可能是较好的选择（见第五章“初级HTML”了解何时使用JPEG要比GIF好）。

你可以使用<IMG>标识符的所有常用属性。例如，你应当指定图象的WIDTH和HEIGHT属性，这样读入图象时会快些。另外，你也可以使用<IMG>的BORDER＝0属性，这样在显示出来的图象的周围没有边框出现。

当指定地图文件名时要小心，在<IMG>标识符中指定时一定要在地图名前加上＃号，而且，地图文件名是区别大小写的，名为Mymap的地图与名为mymap的是不同的。