1、新建Left.aspx、Right.aspx和Top.aspx页面
2、新建一个index.html页面，使用框架页包含以上3个aspx页面
3、各个页面代码如下
Top.aspx页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Top.aspx.cs" Inherits="Top" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>头部页面</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="pic" height="12" alt="显示/隐藏" hspace="4" src="img/hide_menu.gif" width="15"
border="0" onclick="changeVisible();" /><span id="dir">隐藏快捷栏</span> 头部标题页面
</div>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
function changeVisible() {
if (parent.bottom.cols != '190,*') {
parent.bottom.cols = '190,*';
document.all.pic.src = "img/hide_menu.gif";
document.all.dir.innerHTML = "隐藏快捷栏"
}
else {
parent.bottom.cols = '0,*';
document.all.pic.src = "img/show_menu.gif";
document.all.dir.innerHTML = "显示快捷栏"
}
}
</script>
Left.aspx页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Left.aspx.cs" Inherits="Left" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>左侧导航菜单页面</title>
</head>
<body>
<form id="form1" runat="server">
<div>
左侧导航菜单栏
</div>
</form>
</body>
</html>
Right.aspx页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Right.aspx.cs" Inherits="Right" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>右侧主要显示内容区域</title>
</head>
<body>
<form id="form1" runat="server">
<div>
中间区域显示内容
</div>
</form>
</body>
</html>
index.htm页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>框架页面</title>
</head>
<frameset id="fsTop" border="0" framespacing="0" rows="122,*" topmargin="0" leftmargin="0"
marginheight="0" marginwidth="0" cols="*">
<frame border="1" name="top" marginwidth="0" marginheight="0" src="Top.aspx" frameborder="no"
noResize scrolling="no" topmargin="0" leftmargin="0" bordercolor="#e4e4e4">
<frameset border="1" name="bottom" framespacing="0" frameborder="1" cols="190,*" topmargin="0"
leftmargin="0" rightmargin="0" marginheight="0" marginwidth="0">
<frame border="1" name="menu" marginwidth="0" marginheight="0" frameborder="0" topmargin="0"
leftmargin="0" target="main" scrolling="no" noresize="true" bordercolor="#e4e4e4" src="Left.aspx"
style="BORDER-TOP: #000000 1px solid"/>
<frame style="BORDER-TOP: #000000 1px solid; BORDER-LEFT: #ffffff 2px groove" border="2"
name="main" id="main" bordercolor="#e4e4e4" src="Right.aspx" frameborder="no" scrolling="auto"
marginwidth="0" marginheight="0"/>
</frameset>
</frameset>
<noframes>
</noframes>
</html>
效果图如下：
PS补充说明：
如果想在top页面控制main区域的页面地址，使用：
parent.window.frames['main'].location.href = "sysSecurity/ChangePassword.aspx";
如果想重新加载页面的话
parent.window.frames['main'].location.reload();
