©2016-2024 Matools All rights reserved,
粤ICP备17059708号
框架
框架技术可以实现对静态页面的互相引用，提高静态页面的重用性，因为并不是所有的浏览器都能很好的支持，而且对搜索引擎可能也不是很友好，所以一般网页使用并不多，但是对一些管理系统而言，框架还是很实用的，因为管理系统的布局比较简单。每一个页面的效果都差不多，一般使用下面这种布局。
这个布局头部，菜单和尾部的内容都是不会变化的，经常变化的就是中间的操作页面，所有可以把头部，菜单和尾部以及主页分别使用四个页面设计，然后在定义一个框架页面进行引入即可。
1、frame页面
top.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body bgcolor="#46D0DA">
</body>
</html>
leftmenu.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body bgcolor="#1D7A17">
<ul>
<li><a href="main.html" target="main">主页</a></li>
<li><a href="register.html" target="main">注册</a></li>
</ul>
</body>
</html>
footer.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body bgcolor="#940407">
</body>
</html>
main.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body bgcolor="#1461C8">
</body>
</html>
2、总页面frame.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<base href="<%=basePath%>">
</head>
<frameset rows="20%,65%,*" border="1">
<frame src="top.html">
<frameset cols="25%,*">
<frame src="leftmenu.html">
<frame src="main.html" >
</frameset>
<frame src="footer.html">
</frameset><noframes></noframes>
<body>
</body>
</html>
效果如下：
3、在main中加载新页面
运行上面代码发现超链接是在新的窗口中打开了，如果需要在主框架中显示，要先给这个主框架定义name的属性，然后在修改leftmenu.html的超链接的target属性值，写上主框架的name的值，下面更改frame.html中的frameset代码如下：
<frameset rows="20%,65%,*" border="1">
<frame src="top.html">
<frameset cols="25%,*">
<frame src="leftmenu.html">
<frame src="main.html" name="main">
</frameset>
<frame src="footer.html">
</frameset>
<body>
补充register.html代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<h1>注册页面</h1>
</body>
</html>
然后在frame.html中点击注册效果如下：
热门工具 换一换