首先我要说明一下，下面的内容是基于同学们了解frameset和tiles的基础上描述的。
我们布局页面的时候，经常在是采用frameset还是tiles中摇摆。
首先举个布局页面的例子：在这个例子中，有banner、header、main和foot，main又分成menu和content
如果你的 banner、header和foot还有menu基本上就是保持不变，变的只有content，那恭喜你，你可以采用frameset。
但是，如果就像淘宝这样的网站，布局是不变，但是每次访问banner的内容是稍有不同，就是这稍有不同，表明banner也是变化的。这个时候采用frameset就不可能实现这种效果了。那只好选着tiles了，tiles能满足。
问题其实也随之而来，frameset可以实现menu中点击某个选项，content变化，而menu保持不变。但是tile要是做同样的动作，将使menu回到原始状态。原因是frameset把服务器传过来的页面直接放到content中，而tiles，服务器直接传输整个页面到浏览器。
为了解决这个问题，我们自然想到ajax，有了ajax，我们可以只是让服务器传content中的内容，再通过javascript把原来的内容替换掉。
我们拿frameset和tiles来比较，是因为他们再布局上时常被提到，实际上frameset是框架，而tiles是模板，两者是不同的概念。当div＋css＋tiles进行布局的时候，这才真正等价于框架的概念。
经过上面的分析，我们最终得出结论是，布局的最佳选择方案：div＋css＋tiles＋ajax＋javascript。
备注：ajax我们可以用其它框架来代替，比如dwr，同样javascript也可以用jquery框架来替换。但是这些框架的底层都是ajax和javascript；framset相当于在浏览器端预先挖一个洞，而且每次只能挖一个洞，然后从服务器传过来的数据就放在这个洞里面。tiles相当于在服务端挖n个洞，发送前，把洞补上，一起发过来。ajax相当于在浏览器，任何时候，任何地点挖一个洞，然后从服务器传过来的数据就放在这个洞里面，理论上ajax可以挖n个洞，实际应用上一次只挖一个；iframe也是一个框架，相当于在浏览器端预先挖一个洞，这个洞挖的位置就是iframe的位置。
下面是一个简易的代码以帮助理解：
temple.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-tiles" prefix="tiles"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><tiles:getAsString name="title" /> </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">
<style type="text/css">
body {margin: 0px; }
div, td {font-size: 12px; }
.banner {
height: 80px;
background: url(${ pageContext.request.contextPath }/images/bg.jpg);
font-size: 16px;
font-weight: bold;
color: #ffffff;
padding-top: 30px;
padding-left: 40px;
}
.header {
line-height: 25px;
text-align: right;
padding-right: 20px;
background: url(images/bg_menu.jpg);
}
.header a {color: #293C83; }
.menu {}
.menu div{background: #C8D7E3; text-align: center; line-height: 22px; border-bottom: 1px solid #FFFFFF; }
.menu div a{color: #293D6B; }
.menu #selected{background: #98B1C4; }
.menu #selected a {color: #ffffff; }
.footer {color: #ffffff; background: #98B1C4; line-height: 23px; text-align: center; }
</style>
</head>
<body>
<div class="banner"><tiles:getAsString name="banner" /></div>
<div class="header">
<tiles:getAsString name="header"/>
</div>
<table>
<tr>
<td width=136 class="menu">
<tiles:getAsString name="menu" />
<div align=right><img src="images/left-nav-corner.gif"></div>
<br/><br/><br/><br/><br/><br/>
</td>
<td valign=top class="content"><tiles:getAsString name="content" /></td>
</tr>
</table>
<div class="footer">
<tiles:insert attribute="copyright"></tiles:insert>
</div>
</body>
</html>
case.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-tiles" prefix="tiles"%>
<script type="text/javascript" src="scripts/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function(){
$("#ref").click(function(){
alert("div");
$("div[id=content]").css("background-color","#B2E0FF");
$("div[id=content]").empty();
$("div[id=content]").html("nsfao");
});
});
</script>
<tiles:insert page="/template.jsp" flush="true">
<tiles:put name="title" value="读书频道 - 红楼梦"></tiles:put>
<tiles:put name="banner" value="读书频道 - 红楼梦"></tiles:put>
<tiles:put name="header">
<a href="login.do">登录</a> | <a href="register.do">注册</a> | <a href="about.do">关于</a> | <a href="contact.do">联系我们</a>
</tiles:put>
<tiles:put name="menu">
<div id="selected"><a href="#">新闻</a></div>
<div id="ref"><a href="#">常见问题</a></div>
<div><a href="#">下载</a></div>
<div><a href="#">反馈</a></div>
</tiles:put>
<tiles:put name="content" >
<div id="content">
连载 > 小说总馆 > 古典小说 > 红楼梦 <br/><br/>
《红楼梦》，又称《石头记》，被认为是中国最具文学成就的古典小说，是中国长篇小说创作的巅峰之作。本书第一章中说这个故事真正作者已不可考，而由曹雪芹传抄、批阅及增删数次而成，但经过学者的索隐考证后，认为曹雪芹就是本书真正的作者。
</div>
</tiles:put>
<tiles:put name="copyright" value="/WEB-INF/classes/copyright.txt"></tiles:put>
</tiles:insert>
粗浅理解，还望同学们指正。
欢迎阅读相关文章：http://hi.csdn.net/linchengzhi