标题标题  显示论坛会员列表名单  搜索论坛搜索  HelpHelp
  注册注册  登入登入
ASP教学区
 DoReMe : ASP教学区
主题 话题: 第七章 高级HTML 回复发表新主题
作者
贴子内容 << Prev Topic下一个主题 >>
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:10下午 | IP记录 引用 friend

本章讲述标准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,10 0定义的矩形区相关联。这个坐标指明了图象上的一个区域,左上角坐标为(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.comhttp://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中,你不能定义一个缺省文件用来当用户点击在定义区域之外时读入。然而,还有别的办法来实现这一效果,如果你让最后一个& lt;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的是不同的。

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:11下午 | IP记录 引用 friend

本章讲述标准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的网页

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:11下午 | IP记录 引用 friend

服务器端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,10 0定义的矩形区相关联。这个坐标指明了图象上的一个区域,左上角坐标为(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.comhttp://www.tucows.com

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

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:12下午 | IP记录 引用 friend

使用窗口和框架

使用窗口和框架,你可以同时在屏幕上显示多个HTML文件。使用窗口,你可以建立多个浏览器窗口的实例;使用框架,你可以将一个 浏览器窗口分成多个部分,并在每一部分中显示一个HTML文件。

例如,使用框架,你可以将浏览器窗口分成左右两个部分,在左半部分显示Netscape的主页,而在右半部分显示Microso ft的主页,来自两个网点的网页可以同时在一个浏览器窗口的两个框架中和平共处(见图7.3)。

 

图7.3 处于同一个浏览器窗口中的Netscape和Microsoft的网页

通常,使用框架是想让用户浏览网点时窗口上的部分内容一直保持不变,即一个框架中的内容保持不变,而另一个框架中的内容在变化。

假如你想在网站上提供一本书的全部内容,在这种情况下,你可以在一个框架内显示这本书的目录,而在另一个框架内显示某一章节的内 容。如果用户想跳到某一章节中去,他只需点击目录框架中相应章节的名字就可以了。

框架也可用来显示广告,如果你想在每一个网页的底部都显示同一个广告,你可以建立一个广告框架,当用户在另一个框架中浏览你网点 的不同网页时,广告框架的内容可以保持不变。

最后,使用框架可以在每一个网页的顶部显示一幅标准的公司标志。通过使用标准标题框架,你可以为网点提供一个一致的外观,用户只 要看一眼窗口的顶部,就会记住你的公司的名字。

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:12下午 | IP记录 引用 friend

使用框架的不利和有利之处

在详细介绍怎样建立框架之前,你应该知道某些人是很讨厌框架的。这并不是夸张,要了解对这个HTML标识符的强烈的心理反应,你 需要了解一些框架的不利之处:

框架小偷。缺省情况下,框架是有边框的,这些边框占据了屏幕上可用作别的目的的一些空间,特别是在低分辨率的显示器上,框架可以 占用很多的空间,用户对此很不满。

框架侵犯。一个设计糟糕的框架可以侵犯别的网点的网页,一旦一个框架显示在网络浏览器的窗口之上时,就可能很难将它清除。这个框 架可能一直显示在屏幕上,甚至在你离开了创建这个框架的网点之后。从这一方面来说,一个设计糟糕的框架就和一个粗鲁的拜访者一样 令人讨厌。

框架与糟糕的公司有关。当第一个引入框架时,它们主要用来显示广告牌,这就在网络大众的头脑里建立了一种框架与广告牌的联系。由 于人们一般并不喜欢广告,框架也由于这种联系而令人讨厌了。

框架是不值得信任的。最初Netscape以其特有的HTML扩展引入了框架,Microsoft不久也提供了他们自己的框架工 具。框架标识符的属性还在讨论之中,这使得在不同的浏览器上浏览时会造成不一致的框架行为,而且在许多浏览器上,框架根本就不起 作用。

框架中的页很难被标识。对于显示在框架中的网页,你不能放置书签,如果你这样做,你将不能为其它的网页放置书签(设置框架的网页 ),这使得浏览网站上使用框架的某一特定的页变得很困难。

使用框架的网点会很慢。任何事都是公平的,浏览器读入两个HTML文件总是比一个要慢,因为框架允许你在同一个浏览器窗口里显示 多个HTML文件,因此要完全显示出这一页要花费较长的时间。

因此,看上去使用框架似乎是很糟糕的,但实际上,大部分的Internet网站设计者都应该因不正确地使用框架而受到批评。通常 框架是不必要的,你可以使用表格来代替它。

正如第六章「中级HTML」中所讨论的,你可以使用表格将一个网页分割成几个子页。表格不具有框架的那些缺点,因而表格框架模拟 框架的大部分效果。当你要使用框架时,你应当考虑用表格来代替它们。

例如,考虑图7.4和7.5中所示的网页,这两个网页看上去几乎相同,只是图7.4所示的网页是用表格创建的,而图7.5是用框 架的。由于使用表格创建的网页读起来会快些,你应当用表格来创建这一页。

 

图7.4 使用表格创建

 

 

图7.5 使用框架创建

因为有上述的种种缺陷,你可能认为我会建议你再也不要使用框架,不是的。

事实上,框架有一些独特的特性,通常在三种特殊情况下,你应当使用框架而不是表格。

首先,当你需要滚动条时,你必须使用框架。当你滚动一个表格中的目录时,实际上你必须滚动整个网页,但在框架中你就可以仅仅滚动 目录。

考虑一个包含一本书的网点的例子,通过使用框架,你可以在同一时间显示目录和特定章节的内容(见图7.6)。因为你可以滚动目录 框架,因此即使你在阅读一段很长的章节时,目录表也可以保留在屏幕上。在这种情况下使用框架,你可以在同样大小的屏幕空间中比通 常情况下显示更多的目录。

 

图7.6 具有滚动条的框架

 

第二,如果你想让窗口的一部分保持不变,而另一部分改变的话,你也要使用框架。例如,假定你想让一幅广告在任何时刻都显示在浏览 器窗口中(见图7.7),你不想让用户滚动网页内容时把广告也滚出屏幕,要想让浏览器窗口上的一部分总是显示在屏幕上,你就得使 用框架。

最后,你想显示另一个网点的网页时,你必须使用框架。有时你想与别的网站链接,让更多的人来参观自己的网点一直是网站管理者最大 的心愿,一旦有人来参观你的网点,你一定不想让他离开,然而你要在你的网页中加入与其它网点的超链接,因此怎样才能让人们可以浏 览其它的网点而不离开你的网点呢?可以将别的网点的网页显示在一个窗口或是一个框架中(见图7.8)。

因此,这些情况下框架是很有用甚至是必需的。但是,要照顾到那些憎恨框架的人,你应当提供一个网点的无框架的版本,你会发现在任 何情况下这都是必须的,因为并不是所有的浏览器都支持框架。

 

图7.7 使用框架显示固定的广告

 

 

图7.8 在自己的网页中显示别的网页

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:13下午 | IP记录 引用 friend

建立一个新窗口

框架包含在浏览器窗口中,通常所有的HTML内容都显示在一个缺省的浏览器窗口中──即你运行浏览器软件后显示的那个窗口──但 你也可以建立额外的窗口。通过建立多个浏览器窗口,你可以同时显示多个HTML页。

建立一个新窗口的过程是非常简单的,你可以使用<A>的一个附加属性TARGET来实现,如下所示:

<HTML>

<HEAD> <TITLE> New Window </TITLE> </HEAD>

<BODY>

<A HREF=「mypage.cfm」 TARGET=「mywindow」> Click Me! </A>

</BODY>

</HTML>

当这个HTML文件在浏览器上显示时,超链接Click Me!出现在屏幕上,如果你点击它,一个新的浏览器窗口就会显示在屏幕上。这个新窗口与你刚运行浏览器软件时显示的那个缺省窗口 的功能是完全一样的。

在这个新窗口中,HTML文件mypage.cfm被调入,<A>标识符的所有属性工作起来没有什么不同。在此例中 ,这个标识符行为的唯一一个不同之处在于它创建了一个新的窗口。<A>的TARGET属性建立了新窗口,它的值指定 了新窗口的名字,在此例中,新窗口的名字是mywindow。

只要TARGET属性的值是一个不存在的窗口名,一个新的窗口就会建立。然而如果已经存在了一个具有同样名字的窗口,HTML文 件就会读入到那个窗口中。在同一个文件或不同文件中可以使用多个<A>的TARGET属性来指定同一个窗口。

警告

不要把窗口名与HTML文件的标题混淆,窗口名并不出现在浏览器窗口的顶部。实际上,窗口名根本就不会在网络浏览器上出现,窗口 需要一个名字的唯一理由是HTML标识符可以用此来识别它。

你可以根据你的需要打开任意多的新窗口,但是做这样的事你必须要谨慎。参观你网点的人可能不会立即发现已经建立了一个新窗口。当 建立了一个新窗口,它通常会覆盖其它所有的窗口,这可能会引起混淆。当你打开一个新窗口时,你应当通知用户你正在做什么。

注意

现在你明白了如何建立一个新窗口,但是如何关闭它呢?使用标准HTML你是无法做到这一点的。通常只有网络浏览器的用户可以关闭 一个窗口,然而,如果你在你的网页中加入一些Java Script,那么当这个窗口不是唯一打开的窗口时,你有可能关闭它。下面就是用于此目的的Java Script代码:

这个script关闭任何一个现已打开的窗口。根据不同的浏览器,一个确认对话框可能会出现在屏幕上。

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:13下午 | IP记录 引用 friend

将窗口分成多个框架

你应当将框架视为窗口中的不同区域,框架是浏览器窗口中特定的部分。一个浏览器窗口可以根据你的需要分成任意多的框架,一个单个 的框架也可以分成其它多个框架,即所谓的嵌套框架。

要在浏览器窗口中建立框架,你必须创建一个特殊的HTML文件称作frameset文件。frameset文件本身并不在网络浏 览器中出现,它只是指明其它的网页是怎样显示在浏览器中的。下面是一个简单的frameset文件的例子:

<HTML>

<HEAD>

<TITLE> Simple Frames </TITLE>

</HEAD>

<FRAMESET ROWS=「100%」 COLS=「50%,50%」>

<FRAME SRC=「mypage1.cfm」>

<FRAME SRC=「mypage2.cfm」>

</FRAMESET>

</HTML>

当这个frameset文件读入浏览器中时,浏览器会显示两个HTML文件mypage1.cfm和mypage2.cfm,它 们都是普通的HTML文件,frameset文件通知浏览器这两个文件应当分别显示在两个框架中,如图7.9所示。

 

图7.9 显示在两个框架中的HTML文件

你应当注意这个frameset文件中的一些特点,与一般的HTML文件不同,它没有<BODY>标识符。在fra meset文件中,<FRAMESET>代替了<BODY>,实际上,你不需要在frameset文件 的主体部分中使用<BODY>,如果你使用的话,浏览器就会将frameset文件解释成一个普通的HTML文件。

<FRAMESET>标识符指定了框架在浏览器窗口中显示的方式,这个标识符将浏览器窗口分成多行和多列。在此例中 ,浏览器窗口被分成一行和两列,属性ROWS=「100%」,使框架具有整个浏览器窗口的高度;属性COLS=「50%,50% 」使框架分成两列,每列都具有窗口宽度的一半。

你可以根据需要将窗口分成多个行和列,每次分割的结果都产生一个新的框架,但是你应当记住太多的框架会让浏览器窗口变得很混乱─ ─特别是在低分辨率的屏幕上显示时(见图7.10)。

 

图7.10 太多的框架

在此例中,<FRAMESET>使用屏幕的百分数来分割窗口,当然你也可以指定绝对的象素宽度。下面的frames et文件建立了一个有200个象素的框架:

<HTML>

<HEAD>

<TITLE> Simple Frames </TITLE>

</HEAD>

<FRAMESET ROWS=「100%」 COLS=「200,*」>

<FRAME SRC=「mypage1.cfm」>

<FRAME SRC=「mypage2.cfm」>

</FRAMESET>

</HTML>

当这个frameset文件被网络浏览器解释时,它看起来就如图7.11所示,左边的框架具有200个象素宽。然而要注意,当使 用绝对值时你应当小心,因为你的网页可能会在各种分辨率的屏幕上显示。

 

图7.11 使用绝对像素宽度的框架

注意此例中是如何使用星号(*)的,属性COLS=「200*」指定了浏览器窗口应当被分成两列。这个属性的第一个值指明了第一 个框架应该是200个象素宽,第二个值星号指明了第二个框架占据屏幕的剩余空间。

你可在ROW或COL属性中使用不止一个星号,每一个多出的星号都会将屏幕等分。来看在下面的例子中是怎样使用星号的:

<HTML>

<HEAD>

<TITLE> Simple Frames </TITLE>

</HEAD>

<FRAMESET ROWS=「*」 COLS=「*,*,*」>

<FRAME SRC=「mypage1.cfm」>

<FRAME SRC=「mypage2.cfm」>

<FRAME SRC=「mypage3.cfm」>

</FRAMESET>

</HTML>

当这个frameset文件被网络浏览器解释时,屏幕上会显示出如图7.12所示。属性ROWS=「*」告诉浏览器框架将占据整 个窗口的高度,属性COLS=「*,*,*」告诉浏览器将窗口宽度等分成三部分,每一个部分是一个框架。

 

图7.12 具有相同宽度的框架

<FRAME>标识符指明哪里个HTML文件被读入框架,SRC属性指向一个本地或Internet上任何地方的一个 HTML文件。特定的HTML文件依据它们出现的次序与某个框架相关联,因此在此例中,文件mypage1.cfm出现在第一列 中,而文件mypage2.cfm出现在第二列中,而mypage3.cfm则出现在第三列中。

<FRAME>标识符有很多有用的属性,例如,缺省情况下当框架的内容太大时,框架会显示一个竖直或水平滚动条,你 可以使用SCROLLING=「NO」属性来覆盖这种行为。当你想通过不显示框架滚动条来保护屏幕空间时,这个属性是很有用的, 但是使用它要小心,因为使用它可能会造成一部分网页内容永远也无法看到。

<FRAME>的另一个有用的属性是NORESIZE,缺省情况下浏览器的用户可以改变屏幕上框架的尺寸,然而有时 你不想让用户破坏你精心设计的布局,使用NORESIZE你就可以实现这一点。但是再一次提醒你,使用这个属性要小心,如果你禁 止人们在他们的浏览器上改变框架的大小,可能会造成许多不便,一个具有NORESIZE属性的小框架可能会使框架的内容无法被人 浏览。

使用<FRAME>的FRAMEBORDER属性你可以控制一个框架是否具有边框,如果你使用属性FRAMEBOR DER=0,则框架的边界将会消失。你也可以用<FRAME>的这个属性来指定是否在frameset文件中定义的 所有框架都具有一个边界。

最后, 你可以用MARGINWIDTH和MARGINHEIGHT属性来控制框架的边距,这两个属性对于在框架和其内容之间保留一些空 间是很有用的,它们在框架内容周围设置了一些空白。

下面的frameset文件使用了刚刚讨论的这些属性(见图7.13):

<HTML>

<HEAD>

<TITLE> Frames </TITLE>

</HEAD>

<FRAMESET ROWS=「*」 COLS=「*,*,*」>

<FRAME SRC=「mypage1.cfm」 NORESIZE>

<FRAME SRC=「mypage2.cfm」 FRAMEBORDER=0 SCROLLING=「YES」

NORESIZE MARGINWIDTH=50 MARGINHEIGHT=50>

<FRAME SRC=「mypage3.cfm」 FRAMEBORDER=0 SCROLLING=「NO」>

</FRAMESET>

</HTML>

图7.13 复杂的框架

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:13下午 | IP记录 引用 friend

框架和早期的浏览器

框架是在Netscape Navigator 3.0中引入的,早期的浏览器不能识别任何有关框架的标识符,通常这不会造成任何问题。如果一个浏览器不能识别一个标识符或一个 属性,它就仅仅忽略它,但是框架却在这一方面有一些特殊的问题。

frameset文件产生了一个与早期浏览器的兼容性问题,因为frameset文件不是一个普通的HTML文件,如果你在这个 文件中加入一般的HTML标识符,就会产生不可预料的结果。例如,在Netscape的浏览器中,框架就不会起作用了。

这就产生了一种困境,你想让frameset文件与能识别框架的浏览器和不能识别框架的浏览器都兼容,如果你在frameset 文件中只使用有关框架的标识符,这个文件将与早期的浏览器不兼容。另一方面,如果你使用了非框架的HTML标识符,这个文件就不 会像一个正确的frameset文件那样工作,因此我们该怎么办呢?

很幸运,有一个特殊的标识符可以解决这个问题,使用<NOFRAMES>你可以建立一个即与支持框架的浏览器兼容也 与不支持框架的浏览器兼容的frameset文件。下面的例子说明了怎样使用这个标识符:

<HTML>

<HEAD>

<TITLE> Simple Frames </TITLE>

</HEAD>

<FRAMESET ROWS=「100%」 COLS=「50%,50%」>

<FRAME SRC=「mypage1.cfm」>

<FRAME SRC=「mypage2.cfm」>

</FRAMESET>

<NOFRAME>

<BODY BGCOLOR=「green」>

I can only be seen by ancient, pre-frame browsers!

</BODY>

</NOFRAME>

</HTML>

 

图7.14 支持框架的浏览器将显示框架

当这个frameset文件被支持框架的浏览器解释时,浏览器会忽略包含在<NOFRAMES>标识符之间的任何内 容,见图7.14。但是,如果在不支持框架的旧版浏览器上显示时,除了包含在<NOFRAMES>中的内容,浏览器 会忽略其余的任何东西(见图7.15)。你可以在<NOFRAMES>中包含任何你需要的HTML标识符。

 

图7.15 不支持框架的浏览器不会显示框架

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:13下午 | IP记录 引用 friend

框架和链接

假设你想建立一个网点包含一本书的全部内容,你建立了两个框架,在左边框架中,你建立了一个指向书中章节的超链接列表;在右边框 架中,你显示特定章节的内容。你可以使用表7.1和7.2所示的两个HTML文件来建立frameset文件和目录表文件。

表7.1 frameset文件

<HTML>

<HEAD>

<TITLE> A Great Book On Active Server Pages </TITLE>

</HEAD>

<FRAMESET ROWS=「100%」 COLS=「50%,50%」>

<FRAME SRC=「toc.cfm」>

<FRAME SRC=「chapter1.cfm」>

</FRAMESET>

</HTML>

表7.2 目录表文件

<HTML>

<HEAD>

<TITLE> Table Of Contents </TITLE>

</HEAD>

<BODY>

<UL>

<LI> <A HREF=「chapter1.cfm」> Chapter 1: </A>

Everything You Need To Know About Active Server Pages

<LI> <A HREF=「chapter2.cfm」> Chapter 2: </A>

Even More Information On About Active Server Pages

</UL>

</BODY>

</HTML>

 

当这个frameset文件在浏览器中显示时,你可看到如图7.16所示,效果看起来还不错,目录表和章节内容都显示在它们应该 呆的地方。然而,如果你点击到第二章的链接,你不会得到正确的结果,问题在于第二章的网页被读进了错误的框架(见图7.17)。

 

图7.16 看上去似乎正确

缺省情况下,当你在一个框架中点击一个超链接时,新的网页会读进同一个框架中,有时这是你所希望的,但更多情况下,你希望网页被 读进另一个框架中。在这个例子中,你希望章节内容被读进右边的框架中,而不是左边的,这可通过指定特定的框架名来实现这一点。

 

图7.17 链接将文件读入到错误的框架中

与窗口类似,框架也可以有名字,显然你可以用<FRAME>的NAME属性来为一个框架起名,一旦你为框架起了名字 ,你可以用<A>的TARGET属性来指定它,表7.3和7.4中的两个文件是修改后正确的文件。

表7.3 新的frameset文件

<HTML>

<HEAD>

<TITLE> A Great Book On Active Server Pages </TITLE>

</HEAD>

<FRAMESET ROWS=「100%」 COLS=「50%,50%」>

<FRAME SRC=「toc.cfm」 NAME=「TOC」>

<FRAME SRC=「chapter1.cfm」 NAME=「CHAPTER」>

</FRAMESET>

</HTML>

 

表7.2 新的目录表文件

<HTML>

<HEAD>

<TITLE> Table Of Contents </TITLE>

</HEAD>

<BODY>

<UL>

<LI> <A HREF=「chapter1.cfm」> Chapter 1: </A>

Everything You Need To Know About Active Server Pages

<LI> <A HREF=「chapter2.cfm」> Chapter 2: </A>

Even More Information On About Active Server Pages

</UL>

</BODY>

</HTML>

 

NAME和TARGET属性强制超链接和网页正确工作,当用户在名为TOC的框架中点击一个超链接时,相应章节的内容就会读入名 为CHAPTER的框架中。<A>的TARGET属性使超链接定位于正确的框架。

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:14下午 | IP记录 引用 friend

正确从框架中退出

框架不流行的一部分原因是它在许多浏览器上糟糕的执行结果,我们都有过不愉快的经历:为了仅仅发现没有框架隐藏在背后,我们不得 不离开一个网站,这是令人讨厌的。然而,你可以做得更好:你会学习到怎样控制你的框架。

控制框架的秘密在于TARGET标识符的四个特殊的值。通过使用这些值「_blank」、「_parent」、「_self」和 「_top」,你可以从不同级别的框架中跳出来。

这四个值中最常用的是「_top」,它使浏览器窗口摆脱所有的框架。下面的例子说明了如何使用这个值:

<HTML>

<HEAD>

<TITLE> Table of Contents </TITLE>

</HEAD>

<BODY>

<UL>

<LI> <A HREF=「home.cfm」 TARGET=「_top」> HOME </A>

<LI> <A HREF=「chapter1.cfm」 TARGET=「CHAPTER」> Chapter 1: </A>

Everything You Need To Know About Active Server Pages

<LI> <A HREF=「chapter2.cfm」 TARGET=「CHAPTER」> Chapter 2: </A>

Even More Information On Active Server Pages

</UL>

</BODY>

</HTML>

这个HTML文件被用来建立一个目录表,它有一个超链接,这个超链接指向网站的主页。当你用鼠标点击这个超链接时,你不想让主页 被读入目录表的框架中,你也不想让主页被读入章节内容的框架中,你想所有的框架都消失,让主页占据整个屏幕空间。在此例中,属性 TARGET=「_top」完成了这一功能。

当你需要将浏览器窗口中的所有框架都消除时,可以使用「_top」值。当你要与外部的网站链接时,这个值是很有用的。如果你不想 让外部网站的网页显示在一个框架中的话,就必须使用「_top」值。最后,如果你想不通过框架来提供你网站的版本(这通常是很好 的),你应当在你指向版本的链接中使用「_top」值。

TARGET属性的另一个有潜在价值的值是「_parent」,你可以通过在一个frameset文件将<FRAME&g t;标识符的SRC属性指向另一个frameset文件来建立一个框架。当你建立具有一定复杂程度的屏幕布局(见图7.18)时 ,你就需要用这种方法来建立框架。「_parent」值允许你从当前一级的框架中返回到当前frameset文件的父框架中。

图7.18 复杂的屏幕布局

 

注意

你可能想知道在一个frameset文件中构建它本身时会发生什么。例如,下面的名为myself.cfm的frameset文 件在一个错误的循环中引用了自己:

<TITLE> Vicious Frames </TITLE>

<FRAMESET ROWS=「*」 COLS=「*」>

<TARGET SRC=「myself.cfm」>

</FRAMESET>

我很遗憾地告诉大家,计算机对此无法识别,屏幕上什么也没有发生,只显示一个空白的页。

TARGET属性的「_blank」值打开一个新的、空白的窗口。当你想打开一个新窗口时,这个值是很有用的,但不必操心给它一 个名字。然而,如果你将来想链接进同一个窗口的话,你应当为这个窗口提供一个名字(见前面的章节「建立一个新窗口」)。

最后,TARGET属性的「_self」值是这个属性的缺省值,你可能从来也不需要这个值。当你点击个链接时,缺省情况下,这个 链接所指向的网页将被读入当前的框架中。如果窗口中没有框架,新的网页就被读入当前的窗口中。

对框架的最后考虑

使用框架要小心,你应当时刻注意那许多的网络迷们对框架所报的厌恶态度。当你要使用框架时,你应该考虑是否可以用表格来代替它。

如果你要使用框架,就得小心谨慎地处理它们。当你有一个指向你网点外部的网站的超链接时,不要忘记使用TARGET=「_top 」属性来使所有的框架消失。而且,你应当在低分辨率的屏幕上测试你的网页来确定框架没有影响一些重要的内容。

最后,如果你决定要使用框架,可以考虑提供一个网页的非框架的版本。你可以在你的主页上包含一个No Frame的超链接来允许参观者不使用框架就能浏览你网点的内容。在任何情况下,你都需要建立一个网页的非框架版本,因为并不是 所有的浏览器都支持框架。

综上所述,框架在某些情况下确实能改善你的网站,某些特殊的效果只有使用框架才能获得。你可能会冒险疏远一些用户,但网页设计就 是充满著冒险的。

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 

of 4 下一页 >>
  回复发表新主题
显示可打印的页面 显示可打印的页面

论坛跳转
不能 张贴新论题在这个讨论版
不能 回应论题在这个讨论版
不能 删除你的发言在这个讨论版
不能 编辑你的发言在这个讨论版
不能 新增投票标题在这个讨论版
不能 在这个讨论版投票

Edit by doreme Forums version 2004
Welcome ©2001-2004 doreme Guide

This page was generated in 0.1865 seconds.

 
保养品
保养品, Skin Care
www.elady.tw
美材批发
美材, Cosmetic
www.elady.tw/beauty_org
保养品批发
名牌保养品、保养品批发
gb.perfume.com.tw/skincare
饰品批发
饰品、饰品批发
gb.perfume.com.tw/ornament