在Web开发中，网页代码的重复是一个不可避免的问题。我们做的网站，所有的页面都会有一个比较统一的页面布局，只有和数据有关的部分会不同。如果每一个页面都包含完整的HTML代码，那么就会造成很多的重复代码，而且在修改那些公共部分（如页头和页尾）的时候，要对多个页面进行修改，非常的麻烦。
当然，解决这个问题的办法有很多，在ASP.NET中，有一种叫做母板页的机制可以做到，在Java开发中，也有很多的办法，最简单的就是使用在jsp文件中使用include指令，也可以使用其它很多的第三方模板库。
我这里选用的是Tiles模板引擎，Tiles是Struts的组成部分，因此在SpringSide2.0中使用的时候，不需要下载第三方的组件，也不需要额外配置，直接使用就行了。
比如，在我的网站中，我的welcome.jsp布局图如下：
而我的用户注册页面RegUserStep1.jsp的布局图如下：
它们之间的区别，也就是只有左边的边栏和右边的内容区不同，而页头页脚和菜单栏都是一样的。如果每一个页面都包含完整的HTML代码，则会造成相当大的代码重复。因此，我使用了Tiles模板引擎。我把我的页面分成了以下几个部分：页头、菜单、边栏、内容栏、页尾，其次，网页中还有一些其它不可见的部分也是每个网页之间都有区别的，那就是网页标题、CSS代码和Javascript代码，我也把它们抽取了出来。
首先，写一个layout.jsp文件，如下：
<%@page contentType="text/html; charset=UTF-8" %>
<%@taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>
<tiles:insert attribute="title"/>
</title>
<tiles:insert attribute="style"/>
<tiles:insert attribute="script"/>
</head>
<body>
<tiles:insert attribute="header"/>
<tiles:insert attribute="menu"/>
<tiles:insert attribute="content"/>
<tiles:insert attribute="sidebar"/>
<tiles:insert attribute="footer"/>
</body>
</html>
这就是我的布局页面，这里的每一个<tiles:insert>标签都代表的是页面的一个部分，在具体的页面中，我们可以给这些部分指定相应的jsp文件。我在项目中，为这每一个部分都建立了一个文件夹，每一个文件夹中，都有一个default.jsp文件，这就是这个部分最常用的内容，比如页头和页脚，有可能只需要一个default.jsp就够了，因为所有页面的页头和页脚都是一样的。对于有特殊内容需要显示的页面，它比较特殊的那一部分就放到相应的文件夹中。
不知道我的意思表达清楚了没有，我的项目的文件结构如下：
我的welcome.jsp的代码如下：
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>
<tiles:insert page="layout.jsp" flush="true">
<tiles:put name="title" value="titles/default.jsp"/>
<tiles:put name="style" value="styles/default.jsp"/>
<tiles:put name="scripts" value="scripts/default.jsp"/>
<tiles:put name="header" value="headers/default.jsp"/>
<tiles:put name="menu" value="menus/default.jsp"/>
<tiles:put name="sidebar" value="sidebars/default.jsp"/>
<tiles:put name="content" value="contents/default.jsp"/>
<tiles:put name="footer" value="footers/default.jsp"/>
</tiles:insert>
可以看到，所有的部分都是使用的default.jsp，而我的RegUserStep1.jsp的代码如下：
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>
<tiles:insert page="layout.jsp" flush="true">
<tiles:put name="title" value="titles/default.jsp"/>
<tiles:put name="style" value="styles/default.jsp"/>
<tiles:put name="script" value="scripts/default.jsp"/>
<tiles:put name="header" value="headers/default.jsp"/>
<tiles:put name="menu" value="menus/default.jsp"/>
<tiles:put name="sidebar" value="sidebars/RegUserStep1.jsp"/>
<tiles:put name="content" value="contents/RegUserStep1.jsp"/>
<tiles:put name="footer" value="footers/default.jsp"/>
</tiles:insert>
可以看到，只有sidebar和content的部分不同，其它的都是一样的。
titles/default.jsp的内容如下：
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
曳影网络图文社区
styles/default.jsp的内容如下：
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<link href="styles/default.css" rel="stylesheet" type="text/css" />
scripts/default.jsp的内容如下：
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<script src="scripts/prototype.js"></script>
sidebars/default.jsp的内容如下：
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ page import="com.yumdays.model.Catalog"%>
<%@ page import="java.util.List" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div id="loginView">
<h3>用户登录</h3>
<form name="userForm" id="userForm">
<ul>
<li class="vlist">
用户名：
<input class="textInput" name="name" type="text" id="name" onMouseOut="this.style.backgroundColor='#ffffff'" onmouseover="this.style.backgroundColor = '#E5F0FF'" />
</li>
<li class="vlist">
密 码：
<input class="textInput" name="password" type="password" id="password" onMouseOut="this.style.backgroundColor='#ffffff'" onmouseover="this.style.backgroundColor = '#E5F0FF'" />
</li>
</ul>
<ul>
<li class="hlist">
<input type="checkbox" name="checkbox" value="checkbox" />记住我
</li>
<li class="hlist">
<input type="button" name="Submit" value="登 录" onclick="onSubmit();"/>
</li>
</ul>
<p></p>
<ul>
<li class="hlist">忘记密码？</li>
<li class="hlist"><a href="http://${statistic.currentWebServer}.yumdays.com/RegUserStep1.jsp" target="_self">新用户注册</a></li>
</ul>
<br>
</form>
</div>
<div id="catalog">
<h3>网站分类</h3>
<ul>
<c:forEach var="catalog" items="${catalogs}">
<li>${catalog.name}</li>
</c:forEach>
</ul>
</div>
<div id="statistics">
<h3>统计数据</h3>
<ul>
<li>用户:${statistic.userCount}</li>
<li>文章:${statistic.topicCount}</li>
<li>评论:${statistic.replyCount}</li>
</ul>
</div>
<div id="search">
<h3>Google站内搜索</h3>
</div>
<div id="hotTopics">
<h3>热点图文</h3>
</div>
<div id="hotUsers">
<h3>用户排行[前100名]</h3>
</div>
而sidebars/RegUserStep1.jsp的内容如下：
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<div id="sidebar">
<h3>注册步骤</h3>
<p>
一、阅读并同意协议<br>
二、填写注册资料<br>
三、完成注册
</p>
</div>
其它的页面我就不一一列举了。由此可见，使用Tiles模板引擎，可以把代码重复降低到最低限度。
我页面中元素的显示，都是使用CSS来控制的，有兴趣的朋友，可以看看我的这一篇随笔：
漫谈CSS和页面布局
http://www.blogjava.net/youxia/archive/2006/12/26/90112.html