今天来讲一下后台管理的实现。主要是界面。

首先来看一下跳转到后台管理界面的过程，最开始是在社区首页的右上角点击“管理”选项，这会发出userShow请求，跳转到userShow.jsp，在该界面中再点击右上角的“后台管理”选项，会发出adminMain请求，跳转到adminMain.jsp即后台管理的首页。

adminMain.jsp中主要就是一个frameset，其中左边放adminLeft.jsp，右边放adminIndex.jsp。先来看adminLeft.jsp。为了能更清楚地看到后台管理中的侧边栏是如何实现的，我做了如下的小实验，代码如下：

          
    			
    
						
        
 1 
					
						
        
 2 
						
        
 2.1 
 2.2 
 2.3 
					
		
     

其实现了侧边栏的展开效果如下：

其中要注意的是：

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