一．frameset實現
導航欄在web開發中必不可少，其中利用frameset來實現是一種比較常見的方法。
frameset通過target可將相關的頁面連接起來，實現導航。實際開發中注意target的對應關系即可。
效果圖如下：
| 主導航區top.jsp |
|
| 左側分導航 left.jsp |
內容區 main.jsp |
| 頁腳down.jsp |
|
1.index.jsp
縱向：主導航，主頁面，頁腳三塊.
橫向：主頁面又分左導航，內容兩塊
<frameset rows="98,*,5" frameborder="no">
<frame src="top.jsp" name="topFrame" id="topFrame"/>
<frameset cols="168,*" frameborder="no">
<frame src="left.jsp"id="leftFrame" />
<frame src="main.jsp" id="mainFrame" scrolling="yes"/>
</frameset>
<frame src="down.jsp" name="bottomFrame"id="bottomFrame" />
</frameset>
2.top.jsp
利用表格或div、css將相應文字布局成橫向顯示即可.
根據target的指向，即可對應到左側導航，主要代碼如下：
<a href="left_data.jsp"target="leftFrame"> 數據管理</a>
<a href="left_web.jsp" target="leftFrame"> 網站管理</a>
<a href="left_user.jsp"target="leftFrame"> 用戶管理</a>
3.left.jsp
利用表格或div、css將相應文字布局成樹向顯示即可.
左側導航根據target的指向，即可顯示內容區，主要代碼如下：
<a href="land_add.jsp" target="mainFrame"> 錄入土地信息</a>
<a href="land_manage.jsp" target="mainFrame">管理土地信息</a>
<a href="building_add.jsp" target="mainFrame">錄入新房信息</a>
<a href="building_manage.jsp" target="mainFrame">管理新房信息</a>
二．table鑲嵌iframe實現
Iframe的實現原理與frameset類似，其可將其他頁面引入當前頁面，本文利用最簡單的表格布局展示其使用方法。
樣例圖如下：
| 網站標志 主導航區 |
|
| 左側分導航
|
內容區
|
| 頁腳 |
|
1.index.html
利用簡單的表格布局
縱向：主導航，主頁面，頁腳三塊.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<html>
<body>
<tablewidth=
"100%"
height=
"100%"
border=
"1"
cellspacing=
"0"
>
<tr height=
"10%"
>
<td width=
"30%"
>左上角網站標志</td>
<td>
<a href=
"data.html"
target=
"main"
>數據管理</a>
<ahref=
"web.html"
target=
"main"
>網站管理</a>
<ahref=
"user.html"
target=
"main"
>用戶管理</a>
</td>
</tr>
<tr height=
"90%"
>
<td>
<!—加左導航的內容頁 -->
<iframe name=
"main"
src=
"main.html"
width=
"100%"
height=
"100%"
>
</td>
</tr>
<tr>
<td>頁腳</td>
</tr>
</body>
</html>
|
2.data.html（web.html, user.html相同）
橫向：主頁面又分左導航，內容兩塊
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<html>
<body>
<tablewidth=
"100%"
height=
"100%"
border=
"1"
>
<tr>
<tdwidth=
"30%"
>
<a href=
"land_add.jsp"
target=
" content"
> 錄入土地信息</a>
<a href=
"land_manage.jsp"
target=
" content"
>管理土地信息</a>
<a href=
"building_add.jsp"
target=
" content"
>錄入新房信息</a>
<a href=
"building_manage.jsp"
target=
" content"
>管理新房信息</a>
</td>
<td width=
"70%"
>
<!--左側導航指向的內容頁-->
<iframe name=
"content"
src=
"content.html"
width=
"100%"
height=
"100%"
>
</td>
</tr>
</body </html
|
3.land_add.jsp、land_manage.jsp等為自定義頁面