web开发----jsp中通用模版的引用 include的用法
2014-12-28 21:39
281 查看
web开发中常常会有一些代码需要多个页面使用,比如 banner nav导航 还有 footer等.
ASP.NET开发中 有母版页的说法,也就是写一些通用的模版页,然后其他页面可以引用。
jsp中 当然也有这样的用法 也就是 include的用法
说明标签是静态引入,动作标签是动态
静态引入是把b.jsp的源码拼接到a.jsp中,在一块编译,这样两者代码是加到一起的
而动态引入则是分开编译两个jsp,把行成的html再加到一起
比如 我们jsp页面中经常都会有 path的定义
如果 a.jsp页面中 定义了path, b.jsp页面中也定义了path
在a.jsp页面中<%@ include file="b.jsp"%> 这时候 a.jsp静态引入 b.jsp页面 就会报错 path重复定义
因为 静态引入是把 a.jsp和b.jsp页面融合后再编译 这样就有两个path了
但是 动态引入则不会报错
在a.jsp中 <jsp:include page="b.jsp"/> 是ok的 因为它们是分开编译后 再融合起来
因为上述原因 我的模版页中 只有div 不会有 path等定义 也不会有html标签 如下:
我的header.jsp 全部内容如下:
header中用到的样式 我们也独立出来 这样在引用页面 同时引用即可
新建已经header.css
如果使用到js的话 也独立新建 这里就不记录了
我依次建了 header.jsp left.jsp footer.jsp三个模版 以及它们各自的css和用到的js
然后开始 在index.jsp中引用如下(完整index.jsp页面代码参考最后的ps):
同时引用 模版用到的css js
效果如图:
ps:index.jsp页面完整代码
ASP.NET开发中 有母版页的说法,也就是写一些通用的模版页,然后其他页面可以引用。
jsp中 当然也有这样的用法 也就是 include的用法
两种用法
一种是说明标签<%@ include file="xxx.jsp"%>,一种是动作标签<jsp:include page="xxx.jsp"/>说明标签是静态引入,动作标签是动态
静态引入是把b.jsp的源码拼接到a.jsp中,在一块编译,这样两者代码是加到一起的
而动态引入则是分开编译两个jsp,把行成的html再加到一起
比如 我们jsp页面中经常都会有 path的定义
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
如果 a.jsp页面中 定义了path, b.jsp页面中也定义了path
在a.jsp页面中<%@ include file="b.jsp"%> 这时候 a.jsp静态引入 b.jsp页面 就会报错 path重复定义
因为 静态引入是把 a.jsp和b.jsp页面融合后再编译 这样就有两个path了
但是 动态引入则不会报错
在a.jsp中 <jsp:include page="b.jsp"/> 是ok的 因为它们是分开编译后 再融合起来
静态引入的示例
通过对两种用法的了解之后 我们现在 使用静态引入因为上述原因 我的模版页中 只有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-width:0px;" /> </div> </div> </div> </div> </td> </tr> </table>
header中用到的样式 我们也独立出来 这样在引用页面 同时引用即可
新建已经header.css
#banner { width: 100%; left: 0; right: 0; top: 0; height: 100px; } .nav{ background:#0E0D0D; width:92px; text-align: center; white-space:nowrap; color:#ffffff; cursor:pointer; line-height:37px; } .nav a { display:block; /* 把行内元素 变成 块级元素 */ width: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>
效果如图:
ps:index.jsp页面完整代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
<!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>
<base href="<%=basePath%>"/>
<title>My JSP 'vera.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
<meta http-equiv="description" content="This is my page"/>
<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>
<style type="text/css">
html {
margin: 0px;
padding: 0px 0px 0px 5px;
}
body {
color: #3C3C3C;
background-color:#FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
div{
display: block;
}
div.center{
max-width:1140px;
min-width:960px;
margin:0pt auto;
z-index:99
}
div.center{
width:910px;
min-width:800px;
}
</style>
</head>
<body>
<div class="center">
<%@ include file="header.jsp"%>
<%@ include file="left.jsp"%>
<%@ include file="footer.jsp"%>
</div>
</body>
</html>
相关文章推荐
- web开发----jsp中通用模版的引用 include的用法
- web开发----jsp中通用模版的动态引用其它页面
- web开发----jsp中通用模版的动态引用其它页面
- Tomcat JSP Web 开发中的乱码问题小结
- java学习基础篇之WEB开发中常用Jsp/Bean相关技术总结(转)
- 解决JSP开发Web程序中的中文问题
- JSP中的include的两种用法 (转发)
- Web开发中一种用sql语句完成分页的高效率方法,以jsp/asp为例
- jsp web项目开发详述
- 繁体解决方案一,ASP,JSP,PHP,DotNet任何开发通用
- Tomcat JSP Web 开发中的乱码问题小节
- JSP中的include的两种用法
- 团队开发中,如何处理一个站点不同Web应用通用Session
- 【转自csdn】Web开发中一种用sql语句完成分页的高效率方法,以jsp/asp为例
- Tomcat 与java web 开发技术详解笔记(三)----JSP
- 解决JSP开发Web程序中的中文问题
- 团队开发中,如何处理一个站点不同Web应用通用Session
- 团队开发中,如何处理一个站点不同Web应用通用Session
- 解决JSP开发Web程序中的中文问题
- 畅游[AJAX]、[JSP]及[.NET]专业WEB开发设计_博客_.net 知识点滴