目录树帮助系统，好熟悉的操作
技术与开发
我看到有些网站的帮助系统非常人性化、很好用，就像在电脑中用资源管理器一样，操作没有陌生感。这种效果怎么设计的？
这些帮助系统是由目录树组成的。这种目录树效果可以使用JavaScript和Div组合实现。我们需要把各种帮助主题的描述文字放入多个Div中，并用CSS设置其外观。然后利用JavaScript控制树状结构的伸展与收缩。再用JavaScript控制每个帮助主题前显示“+”图片和“-”图片。
JavaScript脚本语言的功能丰富而又强大，几乎可以用其控制任何网页元素的外观和其他属性。例如本文中用它来控制Div的显示与隐藏，图片的动态更换。我们还可以用JavaScript的这种特性制作图片悬停按钮、网页幻灯片等效果。
第一步 设计目录树外观
我们首先编写控制目录树外观的CSS代码。在编写CSS代码之前我们需要新建一个HTML文件。打开网页编辑软件Dreamweaver，然后按“Ctrl+N”组合键打开“新建文档”对话框。
单击此对话框左上方“类别”下方的“基本页”，然后单击中间偏上的“基本页”字样下方的“HTML”，最后单击右下角的“创建”按钮。这样一个HTML文件就建好了。在＜/head＞上方输入相关代码（代码下载地址：http://www.cpcw.com/bzsoft）。
第二步 编写目录树控制代码
接着，我们要编写控制树状结构伸展与收缩的代码以及控制图片动态更换的代码。在刚才输入的CSS代码的下方、＜/head＞的上方输入代码，其中关键代码如下（完整代码下载地址：http://www.cpcw.com/bzsoft）：
// 如果对象不存在则不执行后面的代码
if(!img) {
return false;
}
if(!div) {
return false;
}
// 若显示内容的 Div 是可见状态
if(div.style.display != "none") {
div.style.display = "none"; // 隐藏之
img.src = "1.gif"; // 将父节点前面的图片更换为显示"+"的图片
} else {
div.style.display = "block";
img.src = "2.gif"; // 将父节点前面的图片更换为显示"-"的图片
第三步 建立完整的树状结构帮助主题
帮助页面左边是树状帮助主题，右边是显示具体帮助内容的子框架。当展开左边目录树的子节点并单击时，将会在右边子框架内显示相应的具体帮助内容。要实现这个效果，要在＜body＞下方输入代码，其中关键代码如下（完整代码下载地址：http://www.cpcw.com/bzsoft）：
＜a href="#" onclick="expand_collapse（'img1', 'div1'）;"＞＜img id="img1" src="1.gif" /＞＜span＞帮助主题1＜/span＞＜/a＞
＜div class="help tree1" id="div1" style="display: none;"＞
＜a href="#" onclick="expand_collapse（'img4', 'div4'）;"＞＜img id="img4" src="1.gif" /＞＜span＞帮助主题4＜/span＞＜/a＞
＜div class="help tree2" id="div4" style="display: none;"＞
＜div class="tree2"＞＜a href="1.html" target="help"＞帮助1＜/a＞＜/div＞
＜div class="tree2"＞＜a href="2.html" target="help"＞帮助2＜/a＞＜/div＞
＜/div＞
＜/div＞＜br /＞
＜a href="#" onclick="expand_collapse（'img2', 'div2'）;"＞＜img id="img2" src="1.gif" /＞＜span＞帮助主题2＜/span＞＜/a＞
＜div class="help" id="div2" style="display: none;"＞
＜div class="tree2"＞＜a href="3.html" target="help"＞帮助3＜/a＞＜/div＞
＜div class="tree2"＞＜a href="4.html" target="help"＞帮助4＜/a＞＜/div＞
＜/div＞＜br /＞
＜a href="#" onclick="expand_collapse（'img3', 'div3'）;"＞＜img id="img3" src="1.gif" /＞＜span＞帮助主题3＜/span＞＜/a＞
＜div class="help" id="div3" style="display: none;"＞
＜div class="tree2"＞＜a href="5.html" target="help"＞帮助5＜/a＞＜/div＞＜br>
＜div class="tree2"＞＜a href="6.html" target="help"＞帮助6＜/a＞＜/div＞
代码输入完毕后，按“Ctrl+S”组合键保存该HTML文件（为方便叙述，假设保存为Tree.html）。保存Tree.html后再建立具体的帮助页面，例如1.html、2.html等，然后将它放到Tree.html文件的目录中，用浏览器打开Tree.html即可看到效果了。
总结
限于篇幅，本文只介绍了制作较少帮助主题组成的树状结构。读者可以根据情况自行扩展、增加更多的帮助主题，还可以利用PHP、ASP等动态语言生成更多帮助主题组成的目录树结构以节省工作量。