新客网WWW.XKER.COM:致力做中国最专业的网络学院!
推荐栏目: 操作系统 - 网络应用 - 服务器 - 网络安全 - 工具软件 - 办公软件 - Web开发 - 数据库 - 网页制作 - 图形图像 - 媒体动画 - 硬件学堂 - 开发 .Net - QQ专区

网页制作基础技巧 框架(帧窗口)技巧

新客网 XKER.COM 时间:2006-10-16来源:  点击:
 帧窗口是一种复杂的页面技术,应用帧窗口使得用户可以在同一个浏览器窗口中浏览不同网站的内容,可以在一个小窗口中发出查询命令而在另一个小窗口中接收查询结果。实现帧窗口的思路是将浏览器窗口按照功能分割成多个小窗口。每个窗口都对应有自己的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、左小右大两窗口

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

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

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

顶一下
(0)
0%
踩一下
(0)
0%
标签(Tags):
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码: