jsp实现导航栏
一.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等为自定义页面
posted on 2017-06-01 15:29 alex5211314 阅读(3930) 评论(1) 编辑 收藏 举报