每次增加新的栏目或是对原有栏目的调整，都要对所有的页面更新。刚开始可能还算轻松，因为没几个页面，但当有几十、几百个网页后，这工作量实在太大了！如果偷懒只更新几个主要的网页，访问量就会剧减。
笔者首先想到的是FLASH可以做出漂亮的导航按钮，所有的页都用一样的导航栏，以后只要更新这个FLASH动画就可以使整个网站的页面都得到更新。但实际使用后发现FLASH造成网页的体积过大，在加上网站LOGO，商业BANNER……使网页变的臃肿不堪。
这办法不太好，于是笔者又考虑做个JavaScript的导航栏，体积又很小。假设我们要做一个包含“动漫专栏”、“游戏天地”、“音乐同人”、“交友直通车”四个栏目的导航栏：
首先是便于更新，所以要做个外接的JavaScript脚本，至于用到的语句就只有document.write(“”),新建一个文本文件，打开，输入： document.write(" ");
document.write("<a href=/comics/index.htm>动漫专栏</a>"); /*在“ ”里的是HTML格式的<A>元素，该元素定义了一个锚(Anchor)，也就是把“动漫专栏”作为一个超链接，“HREF”属性指定“动漫专栏”链接到的其他资源上，也就是“”。（以下相同）*/
document.write(" ");/*该行是让链接之间保持一个空格，使链接的下划线不至于连在一起。也可以把空格该成“|”等来制造各种效果*/
document.write("<a href=/game/index.htm>游戏天地</a>");
document.write(" ");
document.write("<a href=/music/index.htm>音乐同人</a>");
document.write(" ");
document.write("<a href=/friend/tuili/index.htm>交友直通车</a>");
完成后，选择“文件”菜单的“另存为”，在对话框的“文件名”中输入“navigation.js”，“文件格式”里选“*.*”，于是，外接的JS脚本就写好了。
接下来就是把JS链接到我们主页的HTML源代码里了。
具体做法：
在<body>和</body>之间，选择想要让导航栏显示的地方，定位，输入：
<Script language=“JavaScript” src=navigation.js></script>
保存退出。随后就是测试的工作了。双击主页，看看效果，导航栏是否出现在我们想要的位置上。效果如下：
动漫专栏 游戏天地 音乐同人 交友直通车
注意：
1．在navigation.js里，除了HTML格式本来就必须有的空格外，更好不要有别的空格（包括全角的空格）或是回车，不然的话，装载网页时可能会提示出错。如果觉得语句太长，想让脚本看得清楚些而使用回车时，可以在每行末用“\”来结束，再打回车。
2．这个navigation.js要和网页放在同一目录下，如果要放在不同的目录，就要在网页里的那段代码里navigation.js的前面加上该文件的路径。
导航栏真的是网站里非常重要的一环，如果少了导航栏，你的站点将会是一个漆黑的、让人摸不到东西南北的大迷宫（大家玩过仙剑吧，和那个迷宫是一样的：）。即使是经验丰富的老鸟，也会被弄得不知所措，说不定还会以为你的站点就这么一页呢。所以为了方便访问者，同时也是为了你的网站能有更多的回头客，首先就必须做出分类明确、位置醒目的导航栏，把你的站点的风采以及你自己的才华完全展现出来。其次还要保持导航栏的便于更新，因为随着时间的推移，你的站点内容会越来越丰富多彩，总得重新整理整理吧，让自己的网页随时保持在更方便访问的位置，而不是层层的链接之下。想想看，要是访问者为了找到自己感兴趣的内容必须点上5、6次鼠标的话，那你肯定就失去他了。
建站全攻略之导航栏设计，希望对您有参考价值。
