參考：韓順平 輕松搞定網頁設計
網上某網友寫的xscjManage
1.frameset 初級效果：
總共分三個html
all.html
<html>
<head>
</head>
<frameset cols = "50%,50%" frameborder = 0>
<frame src = "menu.html"/>
<frame src = "aa.html"/>
</frameset>
</html>
其中 menu.html
<html>
<head>
</head>
<body bgcolor = "yellow">
周傑倫的歌
</body>
</html>
其中 aa.html
<html>
<head>
</head>
<body >
歌詞。。。
</body>
</html>
2.frameset 中級效果
總共5個html
all2.html
<frameset rows = "30%,*" frameborder = "0" framespacing = "5" bordercolor = "red">
<frame src = "top.html" noresize scrolling = "yes"/>
<frameset cols = "20%,*">
<frame src = "left.html" noresize />
<frame src = "right.html" name = "right"/>
</frameset>
</frameset>
其中 top.html
<img src = "0.jpg" />
其中left.html
<body bgcolor ="pink">
<a href = "right.html" target = "right">aaa1</a><br/>
<a href = "ew.html" target = "right">aaa2</a><br/>
</body>
其中right.html
<body bgcolor ="silver">
right222222
</body>
還有超連結的ew.html
<body>hhhaaaaaaaaaaa</body>
每當在左邊架構中點選超連結，這個超連結指向的頁面就會替換右邊架構裡的内容。
比如，點選right.html.右邊架構頁面内容不發生改變如下圖上半部分
點選ew.html ,右邊架構頁面内容則發生改變。如下圖下半部分
3.frameset在項目中的應用
很久之前我在網上當了一個項目，當時它的主界面設計就是根據這個知識點的，沒有用到css進行界面設計。
效果如下：
主要用到的前台頁面如下：
main.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>學生成績管理系統</title>
</head>
<frameset rows="24%,68%,*" >
<frame src="head.jsp">
<frameset cols="15%,*">
<frame src="left.jsp">
<frame src="right.jsp" name="right">
</frameset>
<frame src="foot.jsp">
</frameset>
<body>
</body>
</html>
其中引用的 head.jsp left.jsp right.jsp foot.jsp,如下
head.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>學生成績管理系統</title>
</head>
<body bgcolor="#D9DFAA">
<img src="/xscjManage/images/head.gif" />
</body>
</html>
foot.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>學生成績管理系統</title>
</head>
<body bgcolor="#D9DFAA">
</body>
</html>
left.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>學生成績管理系統</title>
</head>
<body bgcolor="#D9DFAA" link="#D9DFAA" vlink="#D9DFAA">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="/xscjManage/images/xsInfo.gif" width="184" height="47" />
</td>
</tr>
<tr>
<td>
<a href="addXsView.action" target="_blank" rel="external nofollow" target="right"><img src="/xscjManage/images/addXs.gif" width="184" height="40" /></a>
</td>
</tr>
<tr>
<td>
<a href="xsInfo.action" target="_blank" rel="external nofollow" target="right"><img src="/xscjManage/images/findXs.gif" width="184" height="40" /></a>
</td>
</tr>
<tr>
<td>
<img src="/xscjManage/images/kcInfo.gif" width="184" height="40" />
</td>
</tr>
<tr>
<td>
<a href="addKcView.action" target="_blank" rel="external nofollow" target="right"><img src="/xscjManage/images/addKc.gif" width="184" height="39" /></a>
</td>
</tr>
<tr>
<td>
<a href="kcInfo.action" target="_blank" rel="external nofollow" target="right"><img src="/xscjManage/images/findKc.gif" width="184" height="39" /></a>
</td>
</tr>
<tr>
<td>
<img src="/xscjManage/images/cjInfo.gif" width="184" height="40"/>
</td>
</tr>
<tr>
<td>
<a href="addXscjView.action" target="_blank" rel="external nofollow" target="right"><img src="/xscjManage/images/addCj.gif" width="184" height="40" /></a>
</td>
</tr>
<tr>
<td>
<a href="xscjInfo.action" target="_blank" rel="external nofollow" target="right"><img src="/xscjManage/images/findCj.gif" width="184" height="40" /></a>
</td>
</tr>
<tr>
<td>
<img src="/xscjManage/images/bottom.gif" width="184" height="40" />
</td>
</tr>
</table>
</body>
</html>
每當點選左邊表格的一個action(會自動在背景處理action内部的邏輯，然後通過Struts)，将要跳轉到對應的頁面,替換right.jsp。
比如：點選左邊“課程資訊查詢”圖檔對應的action，會看到如下圖的效果
right.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>學生成績管理系統</title>
</head>
<body bgcolor="#D9DFAA">
</body>
</html>