是不是每个页面都得要导入导航条？

   是不是点一下某个菜单，就直接进入了那个菜单对应的页面了，并不是将这个子菜单的内容显示在了主页面？？因为每个页面都引用了一个导航栏的页面，所以看起来只是在一个页面里操作一样？？
   
在静态页面里，我将js代码抽取出来让所有页面引用，但是我不知道怎么把html代码抽取出来，html页面能导入其它的hml页面吗？ 我将页面改成jsp页面，将js，还有相应的html代码抽取出来，然后在jsp中导入这两个文件，但是运行不了，即使我不将js，html代码抽取出来，而且也做了乱码处理，但是那些菜单的汉字总是乱码，而且似乎连样式（css）都走样了，把编码一改成中文就什么都不显示，不知道是为什么？问题有点多，以前都没真正做过web项目，现在要做毕业设计了HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../css/leftmenu.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style>
@import url(../css/ie.css); 
</style>
<![endif]--><script src="../js/jquery-1.2.1.js" type="text/javascript"></script> 
<!--将jQuery引用进来-->
<script type="text/javascript">
$(document).ready(function(){        $(".left_common > li").mousedown(function(){ 

                //如果鼠标移到class为stripe的表格的tr上时，执行函数
$(".left_common > li").removeClass("select");
$(".left_common > li").addClass("noselect");
$(this).removeClass("noselect");
$(this).addClass("select");})



 $("#tagtitle > #tag").mousedown(function(){ 
 
 if ($("#tags").css("display") == "none") {
        $("#tagtitle").css("background" , "url(../images/left_menu_top_1.gif) no-repeat");
        $("body > #tags").removeClass("hide");
$("body > #tags").addClass("left_common");
 } else {
                //如果鼠标移到class为stripe的表格的tr上时，执行函数
                $("#tagtitle").css("background" , "url(../images/left_menu_top_2.gif) no-repeat");
$("body > #tags").removeClass("left_common");
$("body > #tags").addClass("hide"); }
})


 $("#tagclasstitle > #tagclass").mousedown(function(){ 
 
 if ($("#tagsclass").css("display") == "none") {
        $("#tagclasstitle").css("background" , "url(../images/left_menu_top_1.gif) no-repeat");
        $("body > #tagsclass").removeClass("hide");
$("body > #tagsclass").addClass("left_common");
 } else {
                //如果鼠标移到class为stripe的表格的tr上时，执行函数
                $("#tagclasstitle").css("background" , "url(../images/left_menu_top_2.gif) no-repeat");
$("body > #tagsclass").removeClass("left_common");
$("body > #tagsclass").addClass("hide"); }
})


$("#first > #second").mousedown(function(){ 
 
 if ($("#third").css("display") == "none") {
        $("#first").css("background" , "url(../images/left_menu_top_1.gif) no-repeat");
        $("body > #third").removeClass("hide");
$("body > #third").addClass("left_common");
 } else {
                //如果鼠标移到class为stripe的表格的tr上时，执行函数
                $("#first").css("background" , "url(../images/left_menu_top_2.gif) no-repeat");
$("body > #third").removeClass("left_common");
$("body > #third").addClass("hide"); }
})

//链接
         $("#tags > #newtag").mousedown(function(){ 


   parent.frames["mainFrame"].location.href="C:\Documents and Settings\Administrator\桌面\demo\demo\menu\newtag.html"; })        $("#tags > #oldtag").mousedown(function(){ 
               parent.frames["mainFrame"].location.href="../app/mytag/oldtag.html"; })  
               

}); </script>
</head><body style="overflow-x:hidden;overflow-y:yes; ">
<div id="tagtitle" class="left_title">
<li id="tag" class="title">标题一</li>
</div><div id="tags" class="left_common">
<li id="newtag" class="select">子菜单1</li>
<li id="oldtag" class="noselect">子菜单2</li>
<li class="noselect">子菜单3</li>
<li class="noselect">子菜单4</li>
<li class="noselect">子菜单5</li>
</div><div id="tagclasstitle" class="left_title">
<li id="tagclass" class="title">标题二</li>
</div>
<div id="tagsclass" class="left_common">
<li class="noselect">子菜单1</li>
<li class="noselect">子菜单2</li>
<li class="noselect">子菜单3</li>
<li class="noselect">子菜单4</li>
</div><div id="first" class="left_title">
<li id="second" class="title">学校</li>
</div>
<div id="third" class="left_common">
<li class="noselect"><a href="newtag.html" target="_blank">华东</a></li>
<li class="noselect">交通</li>
<li class="noselect">大学</li>
<li class="noselect">软件</li>
</div>
<div class="left_bottom">
<li class="bottom"></li>
</div>
</div>
</body>
</html>
CSS代码：body { 
    margin:0px;
    padding:0px 0px 0px 7px;
    font-family: Arial,"宋体", Helvetica, sans-serif;
background:url(../images/bg.gif) repeat-x ;
}.left_common, .left_bottom{
    width:197px;
margin:0px;
padding:0px;
border-left:1px solid #2fa1c6;
background:url(../images/left_menu_li.gif) repeat-y;
list-style:none;
clear:both;

}
.left_title li, .left_common li{
font-size:12px;
margin:0px;

}
.left_bottom li.bottom{
border-bottom:1px solid #2fa1c6;
width:192px;
height:10px;

}
.left_title{
width:197px;
margin:0px;
padding:12px 0px 0px 0px;
height:28px;
border-left:1px solid #2fa1c6;
background:url(../images/left_menu_top_1.gif) no-repeat;
list-style:none;
clear:both;
cursor:pointer;

}
.left_title li.title{
    float:left;
padding:3px 0px 0px 35px;
width:152px;
height:22px;

}.left_common li.noselect{
    width:167px;
cursor:pointer;
height:18px;
padding:5px 0px 0px 30px;
}
.left_common .select{
    padding:5px 0px 0px 30px;
    width:167px;
cursor:pointer;
height:18px;
background:url(../images/left_menu_select.gif) repeat-y;}
.hide{
    display:none;
}运行图片：