frame（框架）是web上经常会看到的页面结构。使用可视web开发工具（比如Dreamweaver或者frontpage），虽然可以在wysiwyg环境中通过简单的鼠标托拽完成frame的构建，但是要实现真正细致甚至强大的功能，仔细理解frame的代码结构至关重要！你将发现，frame原来是这样的亲切易用。

　　创建基本的frameset  

　　frameset页面与普遍的web页面有些不同。虽然仍旧以＜html＞和包含标题的＜head＞标记以及其他脚本开始，但是其内容仅仅是表示的各个页面的版式设计。因此，不再需要有＜body＞元素，只需要＜frameset＞标记。  

　　通过＜frameset＞标记的＜rows＞和＜cols＞属性，浏览器窗口被分割为一个个格子。＜rows＞和＜cols＞的设置值可以是固定的像素值，可以是总空间的百分比值，还可以是用*以及一个数字相乘表示的分割剩余空间的比例值。比如说：  

cols="80,20%,*" 分为3列，宽度分别为80像素，窗口宽度的20％，以及剩余宽度  
rows="25%,75%" 分为2列，宽度分别为窗口宽度的25％和75％  
rows="*,3*" 与上述第2个表示的一样，分为2列，但表示方法不同：第一列宽度为第二列的1/3  

　　在＜frameset＞和＜/frameset＞之间，用多个＜frame＞标记表示每个分割区。col表示从左到右的列，row表示从上到下的行。每个＜frame＞有一个src属性，给出了这个frame的内容。它可以是浏览器能显示的任何一个合法url，或者是另外一个frameset。为预防递归现象，一个frame不能包含它本身所在的frameset页面。要用name属性定义frame的名字，这样就可以在代码或者脚本程序中引用它。 请看一段基本的frameset代码：  

＜html＞
＜head＞
＜title＞simple frameset＜/title＞
＜/head＞
＜frameset cols="40%,60%" rows="2*,*"＞
＜frame name="topleft" src="red.htm"＞
＜frame name="topright" src="green.htm"＞
＜frame name="botleft" src="blue.htm"＞
＜frame name="botright" src="white.htm"＞
＜/frameset＞
＜/html＞  

   

＜frameset rows="105,*"＞
＜frame name="adbanner" src="ad.html"＞
＜frameset cols="40%,60%"＞
＜frame name="left" src="red.htm"＞
＜frameset rows="*,*"＞
＜frame name="top" src="blue.htm"＞
＜frame name="bottom" src="white.htm"＞
＜/frameset＞
＜/frameset＞
＜/frameset＞  

   

　　frame间的链接  

　　一个frameset结构的页面，新文档只转载进窗口的一部分中，而其他页面则保持静态不变。当用户点击frame中的链接时，新内容就在同一frame内打开。要让新内容在其他frame中打开，可以设置＜a＞标记的target属性值为那个frame的name值。  

　　而且，我们还可以设置打开目标为当前可见的任意一个frame，而不局限于本身的frameset。目标可能是一个嵌套的frameset中的frame，也可能是其他窗口中的frame。但是如果目标frame不存在，就会产生一个带有目标frame名字的新窗口。  

　　下面举个例子说明一下，假设有一个简单含2－frame的frameset，文件名叫做home.html，代码如下：  

＜html＞
＜head＞＜title＞frommco home page＜/title＞＜/head＞
＜frameset cols="115,*"＞
＜frame src="menu.htm"＞
＜frame name="content" src="main.htm"＞
＜/frameset＞
＜/html＞   

　　文件menu.htm在左边的frame中，其中有一系列链接，点击它们后新内容将在右边的叫做content的frame中打开。下面是menu.html的代码：  

＜html＞＜head＞＜/head＞
＜body＞＜p＞＜br＞
＜img src="images/tmp_logo.gif" alt="frommco"＞＜p＞
＜a href="main.htm"  target="content"＞main page＜/a＞＜p＞
＜a href="mission.htm"  target="content"＞our mission＜/a＞＜p＞
＜a href="staff.htm"  target="content"＞our staff＜/a＞＜p＞
＜a href="splash.htm"  target="_parent"＞frommco splash page＜/a＞
＜/body＞＜/html＞  

   

　　请注意最后一个链接中target的定义为_parent，这属于4个特殊的保留值。它们是：  
_parent：在当前frameset位置显示新href。  
_top：在当前整个窗口位置显示新href，比如本身frameset位于另一个frameset中。  
_self：强制在当前frame中显示新href。  
_blank：在新窗口中显示href。
　　表示客户端图形地图的＜area＞标记同样可以应用target属性，比如：  

　　＜area shape=circle coords="75,75,50" href="main.htm" target="content" alt="main page"＞  

　　还有一种经常的情况是：web页面中的大部分或者全部链接都要求在一个特别的frame中打开。这时，可以在页面的＜head＞代码区使用＜base＞标记设置默认的target，然后再分别定义特殊链接的target值。

　　修饰frame  

　　frameset不仅在宽度、高度等方面具有可控制的数值，在美观方面也同样可以精确设置。  

　　默认情况下，frameset的frame间有一个凸起的边沿，表示分割效果。如果不喜欢这个，想营造“无缝连接”的效果，可以在＜frame＞标记中设置frameborder=0来消除它。在3.0及高版本的navigator和internet explorer中，如果在＜frameset＞标记中设置frameborder=0，那么除了设置为frameborder=1的frame外，所有其他frame的边沿都将消失。  

　　虽然设置了frameborder=0，有些浏览器仍旧会在frame间保留一些边沿的颜色痕迹。这时，可以在＜frameset＞标记中添加framespacing=0（对internet explorer）或者border=0（对navigator和opera）实现真正的无缝连接。  

　　请看下面的代码是如何使用这些属性的：  


＜html＞
＜head＞＜title＞frommco home page＜/title＞＜/head＞
＜frameset cols="115,*" framespacing=0 border=0＞
＜frame src="menu.htm" frameborder=0 noresize scrolling=no＞
＜frame name="content" src="main.htm" frameborder=0＞
＜/frameset＞
＜/html＞  

   

　　上面的代码中有2个新的属性：noresize表示锁住frame而不允许使用鼠标改变大小，scrolling=no表示屏蔽frame的滚动条，scrolling=yes表示允许，scrolling=auto表示根据显示内容需要自动显示滚动条。

　　浮动frame  

　　浮动frame是html4.0规范中的一个定义，目前的浏览器都支持它。  

　　不象frameset表示的分割区样子，一个浮动frame作为一个内置对象存在于web页面上，其样式就象一个页面上的一个图形或者一个applet。浮动frame使用＜iframe＞标记，它具有与＜frame＞相同的大多数属性设置，包括：name、src、marginwidth、marginheight、frameborder以及scrolling。同时，它还具有与图形或者applet一样的height、width和align属性。  

　　而且，浮动frame遵循与普通frame一样的target原则：我们可以通过它的name来指向它。本原则适用于在任一类型frame中的浮动frame，反之易然。浮动frame中的没有traget的链接指向它本身，而_parent链接则指向包含＜iframe＞的文档所在的frame或者窗口。比如：  


＜iframe name="floater" src="start.htm" width=150 height=200 hspace=10 align=left＞