web开发----jsp中通用模版的引用 include的用法

1、静态引入的示例

　　通过对两种用法的了解之后我们现在使用静态引入

　　因为上述原因我的模版页中只有div 不会有 path等定义也不会有html标签如下:

　　我的header.jsp 全部内容如下:

<div id="banner">
   <img src="img/logo.jpg"></img>
  <img src="img/contactTitle.png"></img><img src="img/contactContent.gif" /> 
  </div>
<table width="910" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td width="92" class="nav" ><a href="#">HOME</a></td>
 
    <td width="111" class="nav">Hair De Vera</td>
 
    <td width="128" class="nav">About us</td>
 
    <td width="135" class="nav">Contact Us</td>
    <td  width="350"><div style="position:relative;" class="search_back"><div id="123">
    
    <div class="bar">
        <div>Search:
            <input  type="text" /> 
            <input type="image" src="img/dyimage.png" style="border-0px;" />
        </div>
    </div>
   </div>
    </div>
 
</td>
  </tr>
</table>

　　header中用到的样式我们也独立出来这样在引用页面同时引用即可

　　新建已经header.css

#banner {
 100%;
left: 0;
right: 0;
top: 0;
height: 100px;
}
.nav{
 background:#0E0D0D;
92px;   
 text-align: center;     
 white-space:nowrap;
color:#ffffff;
cursor:pointer;
line-height:37px;
}
.nav a {
        display:block; /* 把行内元素 变成 块级元素 */
        92px; /* 盒子 宽度 */
        height:37px; /* 盒子 高度 */
        text-decoration: none;
        vertical-align: middle;
        
    }
 .nav    a:link {color: #ffffff}		/* 未访问的链接 */
 .nav  a:visited {color: #ffffff}	/* 已访问的链接 */
  .nav  a:hover {color: #CC00FF}
.nav:hover{
	background:#ffffff;
	color:#CC00FF;
}
div.bar { /* styles for horizontal top bar */
	height: 37px;
	font-size: 110%;
	color:#ffffff;
	 text-align: center;     
}
div.bar div {
	padding:  7px 20px 3px 20px;
}
a.bar {
    text-decoration: none;
}
 
a.bar:hover {
    text-decoration: underline;
}
.search_back { background:#0E0D0D; height:37px;}
 
input {
vertical-align: middle;
}

如果使用到js的话也独立新建这里就不记录了

我依次建了 header.jsp left.jsp footer.jsp三个模版以及它们各自的css和用到的js

然后开始在index.jsp中引用如下(完整index.jsp页面代码参考最后的ps):

 <body>
   <div class="center">
 <%@ include file="header.jsp"%> 
 <%@ include file="left.jsp"%> 
 <%@ include file="footer.jsp"%>
		</div>
  </body

　　同时引用模版用到的css js

<link rel="stylesheet" type="text/css" href="css/header.css"/>
	<link rel="stylesheet" type="text/css" href="css/footer.css"/>
		<link rel="stylesheet" type="text/css" href="css/left.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/left.js"></script>