编程
您现在的位置:首页 >> 编程

框架使用技巧

在HTML中用<frameset>(分割窗口标记)来分割窗口,在页面中用<frameset>……</frameset>标志页面主体部分的起止位置。而且,<frameset>标记决定了怎样划分窗口,以及每个窗口的位置和大小。其基本语法结构如下:

<frameset cols=n rows=n frameborder=yes|no border=n bordercolor=#n framespacing=n>

其中:

cols和rows是决定页面如何分割的两个参数。分割左右窗口用cols,各帧的左右宽度用占窗口宽度的百分比来表示。比如:cols="30%,40%,*"就表示水平方向分割成三个窗口,各自所占总宽度的百分比依次是30%,40%和30%。"*"表示剩余部分,也就是说"*"对应的小窗口宽度为剩余的宽度。分割上下窗口用rows,同样采用百分比的设定方法。

frameborder是指定各分窗口是(yes)否(no)要加边框;如果加过框的话,则用 border参数指定边框的宽度,bordercolor指定边框的颜色。

framespacing用于设定各分窗口之间的间隔大小,默认值是0。

用<frameset>标记把窗口分割好后,各窗口的属性是用HTML的<frame>标记来定义的,所以<frameset>标记中必须包含<frame>标记,用以定义各分窗口的属性。其语法如下:

<frame align=left|center|right|top|bottom name=framename src=url noresize scrolling=yes|on|auto frameborder=yes|no bordercolor=#n marginheight=n marginwidth=n>

其中:

align设定分窗口的位置是靠左(left)、靠右(right)、居中(center)、靠上(top)还是靠底(bottom)。

name用于指定分窗口的名称,src:则用于指定分窗口所对应的HTML页面地址。

noresize是否允许用鼠标调整修改各分窗口的大小,当<frame>标记中包含此参数的时候,用户就不能用鼠标调整修改各分窗口的大小。

scrolling设定分窗口是否要滚动条。scrolling=no时不要滚动条,scrolling=yes时表示要滚动条,scrolling=auoto时表示根据实际情况自动设置滚动条。

frameborder和bordercolor:是设定分窗口有无边框和边框颜色的。但对象只限于用<frame>标记的分窗口。

marginheight和marginwidth分别用于设定分窗口的上下边缘和左右边缘的宽度。

用上面的两个标记,就能够实现多窗口页面,下面是例子:

1、左小右大两窗口

这种页面一般在左边的窗口放一个网站导航页,右面放网站页面内容。用<frameset>标记并通过设置其cols参数,沿水平方向分割成两个窗口,左边的窗口占20%,右边的窗口取剩余部分,再用<frame>标记分别定义两个窗口的属性。源代码如下:

<html> 

<head> 

<title>分帧窗口示例</title> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

</head> 

<frameset cols="20%,*" >  

<frame name="leftFrame" noresize src="ahtml.htm"> 

<frame name="mainFrame" noresize src="bhtml.htm"> 

</frameset> 

<noframes> 

<body> 

<p>很抱歉!这是一个分帧页面,但由于你的浏览器不支持,所以不能浏览!</p> 

</body></noframes> 

</html> 

以下几点在具体操作时要注意:

1)用<frame>标记定义分窗口属性时,要注意其在<frameset>标记中的顺序,切不要搞乱了;

2)分窗口的名称虽可随意定,但最好是以其所在位置命名比较好;

3)分窗口的scrolling(滚动条)一般取其默认值"auto"比较好;

4)虽然在最终往往不要分窗口的边框,但在设计阶段,还是设置为有边框比较好,这样在编辑时一目了然;

5)上面页面代码中后面那句话一般加上为好,因为有的浏览器版本不支持分帧页面,若没加那名话,用户的浏览器若不支持分帧时,看到的是一片空白,不知是怎么一回事了,有那句话提示一下就明白了。

2、一顶一左一右页面

<frameset rows="20%,*">  

<frame name="topFrame" scrolling="NO" noresize src="toppage.htm" > 

<frameset cols="18%,*">  

<frame name="leftFrame" noresize src="leftpage.htm"> 

<frame name="mainFrame" src="mainpage.htm"> 

</frameset> 

</frameset> 

建立复杂分帧页面的方法是由简到繁,本例中,先用<frameset>定义其“rows”参数,把窗口分成上下两个窗口,再用<frame>标记定义上部窗口,因下部窗口还需再分,所以不用<frame>定义其属性,而是用<frameset>标记设置其cols参数,把它再分成左右两个窗口,因已达目的,所以开始用<frame>标记定义左右两个窗口的属性。

只要记住:先粗分,后细分,cols横向分, rows纵向分,无需再分的窗口用<frame>定义属性,这些基本原则,制作分帧窗口页面就会轻松自如。

3、框架居中的方法

初步设计的代码:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>视频会议后台管理</title>

<head>

</head>

<frameset rows="130,*,40" frameborder="no" border="0" framespacing="0">

   <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />

   <frame src="center.html" name="mainFrame" id="mainFrame" />

   <frame src="bottom.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" />

</frameset>

<noframes>

<body></body>

    </noframes>

</html>

定义中间内容宽度,两边留空白页实现框架居中,改进的代码如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>视频会议后台管理</title>

<head>

</head>

<frameset cols="*,1024,*" frameborder="no" border="0" framespacing="0">

<frame src="about:blank"></frame>

<frameset rows="130,*,40" frameborder="no" border="0" framespacing="0">

   <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />

   <frame src="center.html" name="mainFrame" id="mainFrame" />

   <frame src="bottom.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" />

</frameset>

<frame src="about:blank"></frame> 

</frameset>

<noframes>

<body></body>

    </noframes>

</html>

4、点击头部的链接同时在当前页面打开左右框架两边的网页

这个实例有6个页面:index.html,top.html,left.html,right.html,1.html,2.html

index.html的代码:

<frameset rows="20%,*">  

<frame name="topFrame" scrolling="NO" noresize src="top.html" > 

<frameset cols="18%,*">  

<frame name="leftFrame" noresize src="left.html"> 

<frame name="rightFrame" src="right.html"> 

</frameset> 

</frameset>

top.html的代码:

<a href="javascript:;" onclick="openurl('1.html','2.html')">同时打开链接</a>

<script type="text/javascript">

function openurl(url1,url2){

    top.leftFrame.location.href = url1;        //左框架链接到url1

    top.rightFrame.location.href = url2;        //右框架链接到url2

}

</script>

left.html的代码:

<p>left</p> 

right.html的代码:

<p>right</p>

1.html的代码:

<p>1</p>

2.html的代码:

<p>2</p>

 相关文章