如何制作类似dreamware的框架结构？急！急！急！

本人现在做一个B/S系统，界面拟采用框架结构， 类似DREAMWARE那种， 即左边为菜单栏， 右边为内容栏，左边菜单菜通过一个按钮可以展开或缩进去， 相信类似这种框架结构大家都见过。
我的框架是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<title>垂直拆分框架集</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</head>
<frameset cols="*,*">
<frame name="left" src="">
<frame name="right" src="">
<noframes>
<pre id="p2">
================================================================
关于完成此垂直拆分框架集的说明
1. 为“left”框架添加 src="" 页的 URL。
2. 为“right”框架添加 src="" 页的 URL。
================================================================
</pre>
<p id="p1">
此 HTML 框架集显示多个 Web 页。若要查看此框架集，请使用支持 HTML 
4.0 及更高版本的 Web 浏览器。
</p>
</noframes>
</frameset>
</html>曾见有人如此答复这类问题：
<input type="button" name="btnHide" value="隐藏左框架" onclick="window.top.main.cols='0,*';">
假设左框架的 parent 名字叫 main, 分成左右两个框架。由于本人初学， 不知这些代码放在何处，如何使用及是否正确， 肯请各位大侠们给予帮助。谢谢，谢谢。

解决方案 »

  1.   

    我用过的代码，测试没有问题:
    <HTML><HEAD><script>
    <!--function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    <META content="text/html; charset=gb2312" http-equiv=Content-Type>
    <STYLE>.navPoint {
    FONT-SIZE: 9pt; CURSOR: hand; COLOR: red; FONT-FAMILY: Webdings
    }
    P {
    FONT-SIZE: 9pt
    }
    TD {
    FONT-SIZE: 9pt
    }
    A {
    FONT-SIZE: 9pt; COLOR: #333399; TEXT-DECORATION: none
    }
    A.bold {
    FONT-WEIGHT: bold; FONT-SIZE: 9pt
    }
    A:visited {
    COLOR: #333399
    }
    A:hover {
    COLOR: #ff6600
    }
    </STYLE>
    <SCRIPT>
    function switchSysBar(){
    if (!atleft){
    switchPoint.innerHTML="<a href=\"#\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('Image1','','images/shensuo1.gif',1)\"><img src=\"images/shensuo.gif\" name=\"Image1\" width=\"7\" height=\"50\" border=\"0\"></a>";
    document.all("lft").style.display="none";
    atleft=true;
    }
    else{
    switchPoint.innerHTML="<a href=\"#\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('Image1','','images/shensuoleft1.gif',1)\"><img src=\"images/shensuoleft.gif\" name=\"Image1\" width=\"7\" height=\"50\" border=\"0\"></a>";
    document.all("lft").style.display="block";
    atleft=false;
    }
    }
    var atleft=false;
    </SCRIPT>
    <title>测试</title>
    <style type="text/css">
    <!--
    .navPoint { FONT-SIZE: 9pt; CURSOR: hand; COLOR: #FFFFFF; FONT-FAMILY: Webdings
    }
    -->
    </style>
    </HEAD>
    <BODY style="MARGIN: 0px" onLoad="MM_preloadImages('images/shensuo1.gif')" scroll=no>
    <TABLE border=0 cellPadding=0 cellSpacing=0 height="100%">
    <TBODY><TR> 
    <TD align=middle vAlign=center noWrap bgcolor="#738AD6" id="menu" name="menu">
    <IFRAME frameBorder=0 name=lft src="左页面" style="HEIGHT: 100%;VISIBILITY: inherit; WIDTH:138px; Z-INDEX: 2"></IFRAME></TD><TD>
    <TABLE width="7" height="100%" border=0 cellPadding=0 cellSpacing=0 background="images/shensuobg.gif">
      <TBODY>
        <TR>
          <TD title=关闭/打开左栏 style="CURSOR: hand" onclick=switchSysBar()><SPAN 
                class=navPoint id=switchPoint title=关闭/打开左栏><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/shensuoleft1.gif',1)"><img src="images/shensuoleft.gif" name="Image1" width="7" height="50" border="0"></a></SPAN></TD>
        </TR>
      </TBODY>
    </TABLE></TD>
    <TD style="WIDTH: 100%">
    <IFRAME src="右页面" id=frmright style="Z-INDEX: 1; VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 100%" name=mm frameBorder=0></IFRAME>
    </TD>
    </TR></TBODY></TABLE>
    </body>
    </html>