社区首页的界面文件是main.jsp（可以从action-servlet.xml中login请求结果为success时的跳转和login.java中toUrl的设置得知）。
粗看代码和界面，很显然，main.jsp显示的代码主要有两个iframe组成，前一个iframe显示左边的导航栏，链接是nag.jsp的url。后一个iframe显示右边论坛主界面，链接是in.jsp的url。这里我们先不管导航栏和主界面是如何实现的，先看一下main.jsp这个文件是如何实现布局的。
下面的代码，是我修改main.jsp而成的，是为了方便研究界面代码而做的小实验，可以粘贴到记事本里，后缀改名html，用浏览器直接打开。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>社区首页小实验</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
if(self!=top){
top.location=self.location;
}
function switchSysBar(){
if (switchPoint.innerHTML=='<'){
switchPoint.innerHTML='>'
document.getElementById("frmTitle").style.display="none";
}
else{
switchPoint.innerHTML='<'
document.getElementById("frmTitle").style.display="block";
}
}
</script>
<style type="text/css">
.td2 { width: 10pt;background-color:#ABBCDC}
.switchbarfont { font-family: Tahoma, Verdana; font-size:12px; color:#ffffff; }
.navPoint { color: #000000; cursor: hand;font-family: "宋体",Tahoma, Verdana; font-size: 9pt }
.div1{background-color:Red;}
.div2{background-color:green;}
</style>
<table border="0" cellPadding="0" cellSpacing="0" height="100%" width="100%">
<tr>
<td align="middle" noWrap vAlign="center" id="frmTitle" height="100%" width="20%">
<div class="div1">侧边导航栏</div>
</td>
<td class="td2">
<table border="0" cellPadding="0" cellSpacing="0" height="100%">
<tr>
<td onclick="switchSysBar()">
<font class="switchbarfont">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<span class="navPoint" id="switchPoint" title="关闭/打开左栏"><</span>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
屏幕切换
</font>
</td>
</tr>
</table>
</td>
<td align="middle">
<div class="div2">主界面</div>
</td>
</tr>
</table>
</body>
</html>
main.jsp的主体部分就是一个一行三列的表格构成，其中中间的一列又嵌套了一个表格。
问题：<span class="navPoint" id="switchPoint" title="关闭/打开左栏"><</span>中的<是什么意思？
“<”在html代码中是特殊字符（尖括号），在html代码中要打<在网页中会相应地显示为”<”。这里span的title属性指的是鼠标在标签体内时显示的提示内容。
问题：为什么中间那条那么窄，而且字还是竖着显示的？
<td class="td2">，中间这一列的样式定义在叫td2的class中。.td2
{ width: 10pt;background-color:#ABBCDC}，其中规定了宽度会10pt，所以中间这列会这么窄。由于太窄了，一行只能放下一个字，所以文字会竖着显示，td2中同时规定了这一列的背景色。
问题：下面这段javascript代码的作用？
if(self!=top){
top.location=self.location;
}
HTML DOM top
属性：top 属性返回最顶层的先辈窗口。该属性返回对一个顶级（在最上层的）窗口的只读引用。如果窗口本身就是一个顶级窗口，top属性存放对窗口自身的引用。如果窗口是一个框架，那么 top属性引用包含框架的顶层窗口。所以这两句代码的意思就是如果当前的窗口不是顶层窗口，则把当前窗口设为顶层窗口。
问题：侧边栏打开/关闭效果是如何实现的？
看switchSysBar()这个javascript函数：先会调换<span>标签中显示的箭头方向，<表示”<”，>表示”>”，然后设置最左边导航栏这一列的style.display属性。
display属性设为none，则元素隐藏（不显示），由此实现了侧边栏的关闭效果；设为block，则此元素将显示为块级元素，此元素前后会带有换行符，由此实现了侧边栏的打开效果（此处其实也可以用inline）；inline是display属性的默认值，此时元素会被显示为内联元素，元素前后没有换行符。
其他：
.navPoint { color: #000000; cursor: hand;font-family: "宋体",Tahoma, Verdana; font-size: 9pt }，在样式表中可以通过cursor属性来设置鼠标放在元素上时所显示的样式。
main.jsp的分析到此