今天来讲一下后台管理的实现。主要是界面。
首先来看一下跳转到后台管理界面的过程，最开始是在社区首页的右上角点击“管理”选项，这会发出userShow请求，跳转到userShow.jsp，在该界面中再点击右上角的“后台管理”选项，会发出adminMain请求，跳转到adminMain.jsp即后台管理的首页。
adminMain.jsp中主要就是一个frameset，其中左边放adminLeft.jsp，右边放adminIndex.jsp。先来看adminLeft.jsp。为了能更清楚地看到后台管理中的侧边栏是如何实现的，我做了如下的小实验，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 后台管理界面小实验 </title>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<style type="text/css">
.table2 { background-color:#ffffff }
.table3 { background-color:#ebeadd }
.table4 { background-color:#cfcdaf }
.item { font-size:14px; color:#000000; background-color:#ffffff; }
.title { font-size:14px; font-weight:bold; color:#ffffff; cursor:hand; cursor:pointer; }
</style>
<script language="javascript" type="text/javascript">
function showMemu(i) {
Element.toggle("t" + i);
}
function over(tid)
{
tid.style.backgroundColor="#ebeadd";
}
function out(tid)
{
tid.style.backgroundColor="#ffffff";
}
</script>
<!-- <table width="160" border="0" cellspacing="2" cellpadding="0" class="table2">
<tr>
<td> -->
<table width="160" border="0" cellspacing="3" cellpadding="0" class="table3">
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" class="table4">
<tr>
<td class="title" height="21">
1
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" class="table4">
<tr>
<td class="title" height="21" onClick="showMemu(1)">
2
</td>
<tr>
</table>
<table width="100%" border="0" cellspacing="1" cellpadding="0" style="display:none" id="t1" class="table4">
<tr>
<td class="item" height="21" align="center" onMouseOver="over(this);" onMouseOut="out(this)">
2.1
</td>
</tr>
<tr>
<td class="item" height="21" align="center" onMouseOver="over(this);" onMouseOut="out(this)">
2.2
</td>
</tr>
<tr>
<td class="item" height="21" align="center" onMouseOver="over(this);" onMouseOut="out(this)">
2.3
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- </td>
</tr>
<table> -->
</body>
</html>
其实现了侧边栏的展开效果如下：
其中要注意的是：
1 侧边栏的框架基本上由三种层次的table标签来构成，第一个层次就是包含整个导航栏的table，第二个层次是包含某一个主题的table，第三个层次是包含某一个主题中所有子项目的table。
2 在每个主题之间以及主题中子项目之间可以看到有间隔，这个间隔的产生并不是table的边框（border）属性产生的效果（可以看到所有table的border属性都设为0）。而是table的cellspacing属性产生的效果，该属性规定了单元格之间的空间(顺便提一下，cellpadding 属性规定的是单元边沿与单元内容之间的空间)。由于每个table都通过样式表定义的class指定了背景色，单元格间的空隙处显示的是其下面一层table的背景色，所以看起来会像单元格有边框一样。
3 在.title这个class的定义中，cursor属性既指定为hand，又指定为pointer。其实这两个值都是指定鼠标的样式是“手”的样子。写两个是因为hand在FireFox中不被支持，IE完全支持。而pointer在IE5之前的版本中不支持，FireFox支持。
4 在showMemu(i)这个JavaScript函数中，用了Element.toggle方法。在DOM的Element对象中并没有toggle方法。这个方法的定义在prototype.js中，作用是切换元素的可见性。所以要让上面的小实验能正确运行，必须要引用prototype.js文件，prototype.js可以在下面的网址中下载：
http://prototypejs.org/download