框架技巧 与 居中方法 转

转自"http://lover8080.blog.163.com/"

"

在HTML中用<frameset>(分割窗口标记)来分割窗口,<frameset>在多窗口页面中的地位就相当于<body>在普通单窗口页面中的地位,在页面中用<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、左小右大两窗口

0144030.gif

  这种页面一般在左边的窗口放一个网站导航页,右面放网站页面内容。制作方法:

  先用<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> 
<p>Sorry!This page uses frames,but your browser doesn't support them .</p> 
</body></noframes> 
</html> 

  从上面的代码看,设计帧窗口页面并没有想象得那么复杂,但以下几点在具体操作时要注意:

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

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

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

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

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

  2、一顶一左一右页面

0144031.gif

  先看这种分帧页面的源代码:

 

<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>定义属性,这些基本原则,制作分帧窗口页面就会轻松自如。

"

加一个框架居中的方法

转自http://chen.yelong.blog.163.com/

"

原来的代码:

<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>

主要做法是定义中间内容宽度,两边留空白页

"

转载于:https://www.cnblogs.com/ndxsdhy/archive/2011/06/14/2080224.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值