当前位置:编程学习 > 网站相关 >>

画面分割小技巧

答案:

Frame在浏览器中创造了多重视窗,您可以在视窗中放置不同的网页。Frame还有很多的用途,您可以用一个Frame来显示不会变动的项目,例如工具栏;而用另外一个Frame容纳改变的资讯内容。一个Frame中的任何连结都能以另一个网页打开。
但是,并不是所有的浏览器都支援Frame,而且Frame也不是HTML规格明细的一部份。Frame也会导致较慢的下载时间。但是Navigator 2.0及其以上和IE 3.0及其以上的版本都支援它,而且它们在网路上也越来越被接受。

  读读我们的画面分割小技巧,作为一个好的开始。 假如您需要更多的协助, 看看Netscape网站上面的Frame:初步介绍。

1、画面分割小技巧
  在网页上设定Frame,需要<FRAMESET>标签,它定义了分开的区域;以及<FRAME>标签,它将这些不同区域的HTML网页带出来。<FRAME>标签安排在<FRAMESET>标签的巢状内层,之后才是<HEAD>标签。(<FRAME>没有结束标签,但是<FRAMESET>则有。)
在Frameset中若要设定Frame的数目,必须使用<FRAMESET>标签的ROWS和COLS属性。这些属性可以是数字(以像素为单位)、萤幕百分比、或者是相对大小值;Frame的数目是由属性中所设定的数值来决定。例如下面这个指令设定了并排的两个Frame:

<FRAMESET COLS="20%,80%">

  不管萤幕有多大,左边的Frame占了百分之二十的萤幕,右边的Frame占了百分之八十的萤幕。

  下面是不同写法的程序码,上面的Frame设定了一个实际的像数值,下面的Frame用*(星号)作为定义符号,它代表了浏览器萤幕视窗中剩余的部份:

<FRAMESET ROWS="80,*">

  因为您不知道浏览者视窗的实际大小,所以用星号定义符号比用实际像素值聪明。依Frame的内容而定,这个方法可能比用萤幕百分比的表示来得好。若您已经决定要一个固定大小的Frame(例如一个图形工具箱),只须将Frame设定一组实际的像素值就行了。

  当然,萤幕上不会出现任何东西,直到您在Frameset里面实际设定好Frame的内容。每一个Frame您都需要一个<FRAME>标签,每一个标签都指向它自己的HTML文件,和这个熟悉SRC属性的程序码:

<FRAMESET COLS="20%,80%">
<FRAME SRC="toolbar.html">
<FRAME SRC="index.html">
</FRAMESET>

2、连结目标设定
  一旦您设定好Frame,您就需要了解如何使用它们。最好使用Frame的方法之一,就是利用一个Frame链结在另一个Frame上开启一个新页面。您可以利用<FRAME>标签的NAME属性和<A>标签的TARGET属性,来达到这个目的。
  NAME属性给每个Frame一个指认名称,您可以为它选择任何一个名字。所以如果您有两个Frame--一个是引导工具栏,另一个是一般内容资讯--您可以为它们命名如下:

<FRAMESET COLS="20%,80%">
<FRAME NAME="Toolbar" SRC="toolbar.html">
<FRAME NAME="Content" SRC="index.html">
</FRAMESET>

在toolbar.html文件中,工具列的链结会如下所示:

<A HREF=><A HREF=><A HREF=><A HREF=>

  用这种方法,不管浏览者用滑鼠点选哪一个链结,被链结呼叫的文件将在第二个Frame出现,也就是「Content」这个Frame。

  假如您需要一个链结整个跳出Frames的设定(例如,您要链结到某人网站而不希望它出现在您的Frame中),只要给TARGET属性一个_top的设定--如下:

<A HREF=>http://www.othersite.com/" TARGET="_top">看看其它相关网站,以获得更多资讯。</A>

  注意不要忘记top前面的底横线,否则链结会寻找NAME属性为top的Frame,这就不是您想要的结果啦!

3、外框控制
  Frame在网页编排上,并不总是是最好的方法:它需要很多的载入时间,这也相当困扰浏览者;但最近有一些在这方面的革新出现,例如控制两个Frames之间的外框,或者甚至将整个外框遗移除,使Frame变成更有弹性的网页面编排工具。
  假如您想在Frameset中为所有Frame加入外框,请在<FRAMESET>标签内加入FRAMEBORDER="1"的指示;若要让外框消失,只要将 FRAMEBORDER属性的值设为0(内定值)。假如您想个别控制Frame的外框,只需设定<FRAME>标签中的FRAMEBORDER属性。例如下面这个程序码,可以产生一个左边外框为3像素的Frame,而中间和右边无缝隙外框的Frame的一个Frameset。

<FRAMESET COLS="20%,60%,20%">
<FRAME SRC="toolbar.html" FRAMEBORDER="3">
<FRAME SRC="index.html" FRAMEBORDER="0">
<FRAME SRC="other.html" FRAMEBORDER="0">
</FRAMESET>

  外框看起来没有缝隙的感觉是最近的流行,但请注意:用大萤幕浏览时,大无缝隙的外框效果最棒;但对小型萤幕浏览者,将会看到很多卷轴,而破坏了无缝隙的感觉--这就是为什么设计网页时,要尽量保持较小的Frame和将资料内容缩小配合。

4、微调画面分割
  除了去除外框,还有很多其它方式去设定Frame。看看下面这个程序:
<FRAMESET COLS="20%,60%,20%" FRAMESPACING="4">
<FRAME SRC="toolbar.html" MARGINWIDTH="10" MARGINHEIGHT="10" SCROLLING="no">
<FRAME SRC="index.html" MARGINWIDTH="10" MARGINHEIGHT="10" SCROLLING="auto">
<FRAME SRC="other.html" MARGINWIDTH="10" MARGINHEIGHT="10" SCROLLING="auto" NORESIZE>
</FRAMESET>

<FRAMESET>标签的FRAMESPACING属性(以像素作单位)定义了两个Frame之间的空间,这就和<TABLE>标签的CELLSPACING属性一样。

<FRAME>标签的MARGINWIDTH和MARGINHEIGHT属性(以像素作单位)定义了Frame内容和Frame外框之间的空间(很像是 <TABLE>标签的CELLPADDING属性),以保证Frame的页面不会和外框挤在一块。

SCROLLING属性可以决定Frame是不是需要卷轴:SCROLLING="yes"使卷轴始终出现;SCROLLING="no"是无论如何卷轴都不会出现;SCROLLING="auto"(内定值)则根据Frame中的内容大小,让浏览器自行决定是否有卷轴出现。在上述例子中,第一个Frame将不会有卷轴,第二和第三个Frame只有当资料内容超过Frame才有卷轴出现。

  一般说来,使用者可以用滑鼠改变Frame外框的大小,这个NORESIZE属性的功用正如您所期望:它可以防止Frame被改变大小。在上述例子中,最后一个Frame有设定NORESIZE属性,它代表了和第二个Frame共用使用的外框不能被移动;而第一和第二个Frame共用的外框则可以被移动

5、提供另外一个选择
  并不是每一个浏览器都支援Frame,所以在您使用Frame时,您可能需要准备另外的选择;在结束</FRAMESET>标签以后,加入<NOFRAMES>标签,在这个里面,可以有<BODY>标签的巢状程序码和标准的程序码,没有Frame的HTML文件:

</FRAMESET>
<NOFRAMES>
<BODY>
<H1>欢迎来到我的网站!</H1>
<P>网页文字从这里开始.......
</BODY>
</NOFRAMES>
</HTML>

  不支援Frame的浏览器,会忽略所有<FRAMESET>、<FRAME>、和<NOFRAMES>标签,直接跳到<BODY>标签和它的内容。支援Frame的浏览器会忽略所有在<NOFRAMES>标签内的东西。

上一个:主页制作动态技术
下一个:创建优秀网页的6个好习惯

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,