下面通过一个后台管理的部分设计来说明窗口分帧
frameset.html代码
1 <!-- 2 <frameset>标签（常用来做后台管理界面） 3 属性：rows（行）、cols（列）、可以使用固定值，百分比和*三种 4 border;确定边框的宽度 5 frameborder：确定是否有边框 6 7 <frame>标签 8 属性：src 9 name 10 scroling：是否有滚动条 11 noresize：是否可以调整尺寸 12 13 <a href="">的属性 14 四个内置属性：_blank、_parent、_self、_top 15 16 <noframes>标签 17 作用：使用它，如果浏览器中不带分帧窗口，显示这里面的内容 18 19 <iframe>标签 20 属性和frameset的属性相同 21 22 23 注意：分帧不能和body标签及内容体共存 24 --> 25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 26 <html xmlns="http://www.w3.org/1999/xhtml"> 27 <head> 28 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 29 <title>HTML窗口分帧</title> 30 </head> 31 <frameset rows="18%,*" frameborder="yes"> 32 <frame src="header.html" name="top" noresize="noresize"/> 33 <frameset cols="15%,*"> 34 <frame src="menu1.html" name="left" noresize="noresize"/> 35 <frame src="main.html" name="rigth"/> 36 </frameset> 37 </frameset> 38 <noframes> 你使用的是不带分帧的浏览器，请使用有分帧的浏览器，后转向不使用分帧的页面访问</noframes> 39 </html>
header.html代码
1 <center><h3>后台管理界面头部</h3></center> 2 <a href="menu1.html" target="left">第一项</a>|| 3 <a href="menu2.html" target="left">第二项</a>|| 4 <a href="menu3.html" target="left">第三项</a>|| 5 <a href="menu4.html" target="left">第四项</a>
menu1.html代码
1 <center><h4>菜单部分一</h4></center> 2 <a href="">第一页</a><br /> 3 <a href="">第二页</a><br /> 4 <a href="">第三页</a><br /> 5 <a href="">第四页</a><br /> 6 <a href="">第五页</a><br /> 7 <a href="">第六页</a><br />
menu2.html代码
1 <center><h4>菜单部分二</h4></center> 2 <a href="">第一页</a><br /> 3 <a href="">第二页</a><br /> 4 <a href="">第三页</a><br /> 5 <a href="">第四页</a><br /> 6 <a href="">第五页</a><br /> 7 <a href="">第六页</a><br />
menu3.html代码
1 <center><h4>菜单部分三</h4></center> 2 <a href="">第一页</a><br /> 3 <a href="">第二页</a><br /> 4 <a href="">第三页</a><br /> 5 <a href="">第四页</a><br /> 6 <a href="">第五页</a><br /> 7 <a href="">第六页</a><br />
menu4.html代码
1 <center><h4>菜单部分四</h4></center> 2 <a href="">第一页</a><br /> 3 <a href="">第二页</a><br /> 4 <a href="">第三页</a><br /> 5 <a href="">第四页</a><br /> 6 <a href="">第五页</a><br /> 7 <a href="">第六页</a><br />
main.html代码
1 <center><h4>主体内容部分</h4></center>
以上的代码是后台制作用到分帧的代码示例
下面是前台用到分帧的代码示例
1 <!-- 2 iframe可以和body体一起使用 3 --> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head> 7 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 8 <title>iframe标签</title> 9 </head> 10 <body> 11 ##############<br /> 12 ##############<br /> 13 ##############<br /> 14 ##############<br /> 15 <a href="../1/1.html" target="ie">1.html</a><br /> 16 <a href="../2/2.html" target="ie">2.html</a><br /> 17 <a href="../3/3.html" target="ie">3.html</a><br /> 18 <iframe src="../1/1.html" name="ie"></iframe><br /> 19 @@@@@@@@@@@@@@<br /> 20 @@@@@@@@@@@@@@<br /> 21 @@@@@@@@@@@@@@<br /> 22 @@@@@@@@@@@@@@<br /> 23 @@@@@@@@@@@@@@<br /> 24 </body> 25 </html>
在后台中用分帧一般用<frameset>标签，前台的一般用<iframe>