码迷,mamicode.com
首页 > Web开发 > 详细

HTML高级标签(2)————窗口分帧(2)————后台管理页面

时间:2014-07-12 19:02:55      阅读:289      评论:0      收藏:0      [点我收藏+]

标签:html   标签   分帧   后台管理页面   

使用frameset进行窗口分帧,构建简易的后台页面。这篇博客就作为一个简易后台管理页面的实战演练。

bubuko.com,布布扣

1  首先,需要一个页面,使用<frameset>按比例划分为适合的三个区域:头部,菜单,主体。

<frameset>不能放在<body>中编写。

给每一个<frame>进行命名,便于后面链接时target属性可以直接指向指定位置。

代码如下(文件名自定义,我写的是 frameset.html):

<html>
	<head>
		<title>后台管理页面</title>
	</head>
	
	<frameset rows="100,*">
		<frame src="head.html" name="top">

		<frameset cols="180,*">
			<frame src="menu.html" name="left" noresize scrolling="no">
			<frame src="main.html" name="right">
		</frameset>
	</frameset>

</html>

2 我们需要在三个帧中指定不同的URL,需要编写几个html文件:head.html; menu.html; menu1.html; menu2.html; menu3.html; menu4.html; main.html

head.html:

四个选项,每个选项链接到不同的菜单,target指向菜单位于的窗体。

<center><h3>后台管理页面头部</h3></center><br>
<a href="menu1.html" target="left">第一项</a>
<a href="menu2.html" target="left">第二项</a>
<a href="menu3.html" target="left">第三项</a>
<a href="menu4.html" target="left">第四项</a>

menu.html:

九个选项,每个选项链接到不同的的内容,target指向主体位于的窗体。

由于所使用的方法与头部链接菜单时的完全相同,故URL就均为空,不一一编写了。

<center><h2>菜单部分</h2></center>

menu1.html:

<center><h2>菜单部分1</h2></center>
<a href="" target="right">第一页</a><br>
<a href="" target="right">第二页</a><br>
<a href="" target="right">第三页</a><br>
<a href="" target="right">第四页</a><br>
<a href="" target="right">第五页</a><br>
<a href="" target="right">第六页</a><br>
<a href="" target="right">第七页</a><br>
<a href="" target="right">第八页</a><br>
<a href="" target="right">第九页</a><br>

menu2.html:

<center><h2>菜单部分2</h2></center>
<a href="" target="right">第一页</a><br>
<a href="" target="right">第二页</a><br>
<a href="" target="right">第三页</a><br>
<a href="" target="right">第四页</a><br>
<a href="" target="right">第五页</a><br>
<a href="" target="right">第六页</a><br>
<a href="" target="right">第七页</a><br>
<a href="" target="right">第八页</a><br>
<a href="" target="right">第九页</a><br>

menu3.html:

<center><h2>菜单部分3</h2></center>
<a href="" target="right">第一页</a><br>
<a href="" target="right">第二页</a><br>
<a href="" target="right">第三页</a><br>
<a href="" target="right">第四页</a><br>
<a href="" target="right">第五页</a><br>
<a href="" target="right">第六页</a><br>
<a href="" target="right">第七页</a><br>
<a href="" target="right">第八页</a><br>
<a href="" target="right">第九页</a><br>

menu4.html:

<center><h2>菜单部分1</h2></center>
<a href="" target="right">第一页</a><br>
<a href="" target="right">第二页</a><br>
<a href="" target="right">第三页</a><br>
<a href="" target="right">第四页</a><br>
<a href="" target="right">第五页</a><br>
<a href="" target="right">第六页</a><br>
<a href="" target="right">第七页</a><br>
<a href="" target="right">第八页</a><br>
<a href="" target="right">第九页</a><br>

main.html:

<center><h1>主体内容部分</h1></center>

编写好所有文件之后,保存在相同的目录下面。打开frameset.html文件,就可以看到如下效果:

bubuko.com,布布扣

点击头部第二项后:

bubuko.com,布布扣

好了,一个后台最基本的功能也就实现了。若编写出现bug,请耐心调试。




HTML高级标签(2)————窗口分帧(2)————后台管理页面,布布扣,bubuko.com

HTML高级标签(2)————窗口分帧(2)————后台管理页面

标签:html   标签   分帧   后台管理页面   

原文地址:http://blog.csdn.net/wzqnls/article/details/37710679

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!