一．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等为自定义页面