HTML（四）框架frameset和frame

客官°小女子只卖身不卖艺 2022-05-17 02:38 184阅读 0赞

# 框架 #

框架技术可以实现对静态页面的互相引用，提高静态页面的重用性，因为并不是所有的浏览器都能很好的支持，而且对搜索引擎可能也不是很友好，所以一般网页使用并不多，但是对一些管理系统而言，框架还是很实用的，因为管理系统的布局比较简单。每一个页面的效果都差不多，一般使用下面这种布局。

![70][]

这个布局头部，菜单和尾部的内容都是不会变化的，经常变化的就是中间的操作页面，所有可以把头部，菜单和尾部以及主页分别使用四个页面设计，然后在定义一个框架页面进行引入即可。

## 1、frame页面 ##

top.html

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>&lt;!doctype html&gt;<br> &lt;html&gt;</p> <p>&lt;head&gt;<br> &lt;meta charset="UTF-8"&gt;<br> &lt;title&gt;Untitled Document&lt;/title&gt;<br> &lt;/head&gt;</p> <p>&lt;body bgcolor="#46D0DA"&gt;<br> &lt;/body&gt;<br> &lt;/html&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

leftmenu.html

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>&lt;!doctype html&gt;<br> &lt;html&gt;<br> &lt;head&gt;<br> &lt;meta charset="UTF-8"&gt;<br> &lt;title&gt;Untitled Document&lt;/title&gt;<br> &lt;/head&gt;</p> <p>&lt;body bgcolor="#1D7A17"&gt;<br> &nbsp;&nbsp; &nbsp; &lt;ul&gt;<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&lt;li&gt;&lt;a href="main.html" target="main"&gt;主页&lt;/a&gt;&lt;/li&gt;<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&lt;li&gt;&lt;a href="register.html" target="main"&gt;注册&lt;/a&gt;&lt;/li&gt;<br> &nbsp;&nbsp; &nbsp;&lt;/ul&gt;<br> &lt;/body&gt;<br> &lt;/html&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

footer.html

main.html

## 2、总页面frame.html ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>&lt;!doctype html&gt;<br> &lt;html&gt;<br> &lt;head&gt;<br> &lt;meta charset="UTF-8"&gt;<br> &lt;title&gt;frame&lt;/title&gt;<br> &lt;base href="&lt;%=basePath%&gt;"&gt;<br> &lt;/head&gt;<br> &lt;frameset rows="20%,65%,*" border="1"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;frame src="top.html"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;frameset cols="25%,*"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;frame src="leftmenu.html"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;frame src="main.html" &gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/frameset&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;frame src="footer.html"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;/frameset&gt;&lt;noframes&gt;&lt;/noframes&gt;<br> &lt;body&gt;<br> &lt;/body&gt;<br> &lt;/html&gt;</td> 
  </tr> 
 </tbody> 
</table>

效果如下：

![70 1][]

## 3、在main中加载新页面 ##

运行上面代码发现超链接是在新的窗口中打开了，如果需要在主框架中显示，要先给这个主框架定义name的属性，然后在修改leftmenu.html的超链接的target属性值，写上主框架的name的值，下面更改frame.html中的frameset代码如下：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>&lt;frameset rows="20%,65%,*" border="1"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;frame src="top.html"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;frameset cols="25%,*"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;frame src="leftmenu.html"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;frame src="main.html" name="main"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/frameset&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;frame src="footer.html"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;/frameset&gt;<br> &lt;body&gt;</td> 
  </tr> 
 </tbody> 
</table>

补充register.html代码如下：

然后在frame.html中点击注册效果如下：

![70 2][]

[70]: /images/20220517/4e3381db2eaf4117b0985d4de9a69397.png
[70 1]: /images/20220517/1bc7025f98624453920007bc5f34b7de.png
[70 2]: /images/20220517/33e66eb9125744059db91697242832fa.png