站长论坛

标题: 新手学习老知识（十）HTML用好帧窗口标记 [打印本页]

作者: superadmin 时间: 2007-10-5 18:04
标题: 新手学习老知识（十）HTML用好帧窗口标记
帧窗口是一种复杂的页面技术，应用帧窗口使得用户可以在同一个浏览器窗口中浏览不同网站的内容，可以在一个小窗口中发出查询命令而在另一个小窗口中接收查询结果。实现帧窗口的思路是将浏览器窗口按照功能分割成多个小窗口。每个窗口都对应有自己的HTML页面，按照一定的组合方式组合在一起，以实现特殊的效果。

　　在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：是指定各分窗口是（ye）否（no）要加边框；如果加过框的话，则用 border参数指定边框的宽度，bordercolor指定边框的颜色。

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

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

<frame
align=left|center|right|top|bottomv 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、左小右大两窗口

作者: superadmin 时间: 2007-10-5 18:05
　这种页面一般在左边的窗口放一个网站导航页，右面放网站页面内容。制作方法：

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

欢迎光临站长论坛 (http://tzlink.com/bbs/)