HTML网页制作：[12]使用框架结构之frameset

1. 首先，我希望在你的目录下，有4个网页，各自显示不同的内容。

   如图所示：

   1.html显示“火影忍者”

   2.html显示“英雄联盟”

   3.html显示“嵌入式开发、网页开发、安卓开发”

   4.html显示“alsp”

   
2.  

   OK，来介绍下frameset的语法

   <frameset rows="第一个框架窗口的高度，第二个框架窗口的高度......"

     cols="第一个框架窗口的宽度，第二个框架窗口的宽度"......>

   所谓框架集属性frameset，其目的就是用来将网页分成什么样子。如图所示，通过frameset将整个页面分成三个部分：1）上面是头部，用来放置logo等2）左侧是目录架构，用来放置目录3）右侧是要显示内容懂了吧，frameset的作用，就是用来将整个页面分成你想要的模块和架构；

   
3.  

   这里，又要提到一个窗口属性，frame

   用<frameset>将整个页面分割成N个块，而每一个块，就是用frame来表示，其就是用来表示一个单独的页面。

   其语法：

   <frame src="页面的源地址">

   下面看例子。

    

4.  

   <frameset rows="100,200,800" frameborder="yes" border="1" framespacing="1"><frame src="2.html"/><frame src="3.html"><frame src="4.html"></frame>

   
5.  

   再来看一下效果图

   
6.  

   可以看到，整个页面被分成了3分。

   而用frame指定的页面也显示了出来。

   其中，

   frameborder:用来表示显示边框

   framespacing:表示边框的宽度

    

7.  

   下面再来看一个例子：

   <frameset cols="100,200,900" frameborder="yes" border="1" framespacing="1"><frame src="2.html"/><frame src="3.html"><frame src="4.html"></frame>

    

   
8.  

   看效果图，整个页面也被分成了3分，但是，是横向的。

   
9.  

   再来看最后一个例子。

   <frameset rows="30%,*" cols="*" frameborder="yes" border="1" framespacing="1"><frame src="2.html"/><frameset cols="30%,70%" frameborder="yes" framespacing="1"><frame src="3.html"><frame src="4.html"></frame>

   
10.  

    看效果图

    被分成了3分，但是和之前的都不一样。

    
11.  

    这里，rows="30%,*"的意思是，将页面分成上部分30%,下部分用“*”表示为还没有分配。

    cols也是这个意思。

    然后，通过frame将2.html页面放在其中。

    之后，再用frameset将下部分分成左右两部分，放上3.html页面和4.html页面，就会出现上述的效果了