今天继续分析社区首页中侧边导航栏，也就主要是nag.jsp。
先看一下nag.jsp的主要框架，显然，主要由三个div构成，如下：
第一个div：bnag0 是社区首页和个人中心。
（水平线）
第二个div：bnag1 是个人珍藏和版块(论坛)列表
第三个div：bnag2 退出社区
为了更好地理解这个框架，我修改其代码做了一个小实验，如要是研究侧边栏的导航树是如何实现的，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> nag导航栏小实验</title>
<style type="text/css">
.nag ul {
font-family: Verdana, Tahoma, "宋体";
font-size: 14px;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.nag ul li {
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
background-color:white;
width:100px
}
.nagbody {
background-color: #F2F2FB;
}
</style>
<script language="JavaScript" type="text/javascript">
function loadUserCenter() {
var obj = document.getElementById("userCenterDiv");
var imgObj = document.getElementById("imgUserCenterSet");
if (obj.style.display == "none") {
obj.style.display = "block";
imgObj.src="images/collapse.gif";
}
else {
obj.style.display = "none";
imgObj.src="images/expand.gif";
}
}
</script>
</head>
<body class="nagbody">
<div class="nag" id="bnag0">
<ul style="background-color:blue">
<li>
<img id="imgIn" src="images/signalnode.gif" alt="" width="25" height="15" border="0" align="absmiddle"/>社区首页
</li>
<li><a href="javascript:loadUserCenter();"><img id="imgUserCenterSet" src="images/expand.gif" alt="" width="25" height="15" border="0" align="absmiddle"/>个人中心</a></li>
<div id="userCenterDiv" class="nag" style="display:none">
<ul style="background-color:red">
<li><img id="imgSignSet" src="images/node.gif" alt="" border="0" align="absmiddle"/>修改签名</li>
<li><img id="imgNickNameSet" src="images/node.gif" alt="" border="0" align="absmiddle"/>修改昵称</li>
<li><img id="imgUserConfig" src="images/node.gif" alt="" border="0" align="absmiddle"/>个人参数</li>
<li><img id="imgFriendSet" src="images/node.gif" alt="" border="0" align="absmiddle"/>编辑好友</li>
<li><img id="imgNote" src="images/node.gif" alt="" border="0" align="absmiddle"/>悄悄话</li>
<li><img id="imgBookMark" src="images/node.gif" alt="" border="0" align="absmiddle"/>书签管理</li>
<li><img id="imgFace" src="images/node.gif" alt="" border="0" align="absmiddle"/>编辑头像</li>
<li><img id="imgUserDetailSet" src="images/node.gif" alt="" border="0" align="absmiddle"/>个人资料</li>
<li><img id="imgCpasswd" src="images/node.gif" alt="" border="0" align="absmiddle"/>修改密码</li>
<li><img id="imgboardSaveManage" src="images/node.gif" alt="" border="0" align="absmiddle"/>珍藏管理</li>
</ul>
</div>
</ul>
</div>
</body>
</html>
其中用到的图片为放在与上述代码所在文件同目录的image文件夹中，所用到的图片
collapse.gif: expand.gif: node.gif: signalnode.gif:
我们也可以修改社区首页分析(二)中的小实验代码，把其中的第一个div，改为iframe如下：
<iframe id="nagFrame" name="nagFrame" frameBorder="0" scrolling="auto" src="nag导航栏小实验.html" class="iframe1"></iframe>
来把两个小实验结合起来，显示效果如下：
本次小实验：
与上次的结合后：
为了便于研究样式中padding，margin等属性产生的影响，在这里设置了<ul> <div>的背景色以及<li>的宽度。
对于上述代码：
首先导航树中的+，-图样就是图片，展开折叠还是用display属性来实现的，如修改签名等个人中心的操作放在usercenterdiv中，其display一开始是为none，onclick是loadUserCenter方法，其中进行了usercenterdiv的display属性的切换和个人中心前的图片的更换。这就是展开吧 和折叠效果的实现。
代码中css样式表的表的写法及其属性学习：
.nag ul li中的margin-top规定的是该元素中的ul中的li元素的上边距，margin-bottom,margin-right和margin-left类似。注意这种css样式表写法规定的不是赋该样式的元素本身，而是该元素的子元素。比如这里使用样式nag的是usercenterdiv而样式作用于的对象是其子元素ul元素中的子元素li元素。
问题：.nag ul中规定了属性margin和padding，magin和padding的区别？
这里magin是指ul与其四周元素的间距：外边距（即四周要留出空白的距离），包括和其父容器。w3c上的定义是元素边框和内容区之间的区域，但是这里所说的元素的内容区还不太明确。
padding是指ul本身就作为父元素，与其内容（包括其内部的子元素和文本）要保持的内边距。
为了测试这两个属性我们可以修改上述代码中定义的样式，比如把nag ul中的margin或padding改为50px看看，来体会两者的不同。
元素的width属性指的是元素内容区的宽度，并不包括元素的内边距，外边距和边框。而background-color所指定的元素背景色会覆盖内边距的区域。所以如果想以颜色来划分内容区可能会偏多，但除此之外关于元素内容区的定义，我还是不清楚。
如果把边距只设为一个值，理论上上下左右的边距都会是这个值，但若无法同时满足，直观地来看，html似乎会优先满足上边和左边的边距值。
html中把每个元素所占的区域看成一个方块。
html中的元素，在没有设置width和height属性的情况下，默认为高度包裹内容，宽度填充父元素
为什么和第一个小实验结合以后（看上面第二张效果图），左边的导航栏会在iframe中这样显示，只占那么刚好的一条，且不会出现滚动条？
因为在iframe中规定了精确的宽度为135px，并且在上述代码中的div ul等标签中都没有定义width属性，也就是默认的填充父容器。但页面在iframe中显示时，它们的父容器就是iframe，宽度填充父容器，所以看起来页面的宽度刚刚吻合iframe的宽度，不会出现滚动条。
问题：树中父元素和子元素（比如个人中心和其下面的条目）之间缩进的距离是如何产生的？
一开始我以为是样式表中的margin，padding等设置产生了这一缩进间距。其实不是，那段缩进是由图片本身造成的！node.gif的左边本来就有一段空白的部分，并不是由于设置边距造成的，因为你可以看到上面效果图中li元素所占的那个块和它的父元素之间并没有间距。
问题：<a>属性 href="javascript:;"是什么意思？
href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。
这里本该要写的是点击链接后要执行的JavaScript 表达式、方法和函数的列表，但是由于后面指定了onclick的方法所以这里:后什么也没有。事实上去掉href属性或者去掉onclick属性且指定href属性为"javascript:loadUserCenter();"都可以达到同样的效果。
问题：<base target="mainFrame"/>这句什么意思？
为页面上的所有链接规定默认目标即规定点击链接后产生的页面在mainFrame中打开，而mainFrame指的就是在main.jsp中定义的iframe，这样就产生了社区首页中在左边导航栏点击条目，在右边主界面部分显示内容的效果。
另外<base>的href属性用来规定默认的基本URL，规定以后，浏览器将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。
问题：<img>中的alt属性是干嘛的？
设置图像的替代文本，当图像无法显示时会显示图像的替代文本。这里设置为空字符串。
下面简要分析一下个人珍藏和版块列表是如何进行显示的：
大体思路就是用<s:iterator>从值栈中取出action对象的属性进行迭代，配合<ul>来在页面上输出个人珍藏的列表和版块的列表。
个人珍藏用到的是Nag类的boardSaveList属性，在Nag.java文件中可以看到boardSaveList的值通过BoardService的findBoardsInIDs方法得到。
版块列表用到的是Nag类的boardList和boardMap属性，其中boardList属性是所有版块对应的board对象的list。boardMap是键值对集合，其中键是每个board的id，值是该id对应的board的子board的list。
要注意的是这里onclick属性的赋值中，loadChild中参数的写法：
由于这里要传递的参数在ognl上下文中，所以采用<s:property>标签来输出参数，又因为参数（参数是字符串型的）要加引号而外面又有引号了，所以用单引号代替。不知道可不可以ognl表达式%{}来代替<s:property>标签？可以做小实验试试！
关于Nag.java中所使用到的服务的内部代码，在这里就不深入分析了。
侧边导航栏分析到此。