HTML高级标签(2)————窗口分帧(2)————后台管理页面
2014-07-12 01:22
435 查看
使用frameset进行窗口分帧,构建简易的后台页面。这篇博客就作为一个简易后台管理页面的实战演练。
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文件,就可以看到如下效果:
点击头部第二项后:
好了,一个后台最基本的功能也就实现了。若编写出现bug,请耐心调试。
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文件,就可以看到如下效果:
点击头部第二项后:
好了,一个后台最基本的功能也就实现了。若编写出现bug,请耐心调试。
相关文章推荐
- HTML高级标签(2)————窗体分帧(2)————后台管理页面
- HTML高级标签之窗口分帧(后台管理页面)
- 解释hy(Xcms)内容管理系统中,后台manager文件夹中所有ftl页面中指令标签的调用,全部都用@ms.打头的原因
- 前端武器库系列之html后台管理页面布局
- javaEE01-使用很HTML的排版标签编写“网站信息页面”,使用图片标签编写“图面显示页面”,使用列表标签编写“友情链接页面”,使用表格标签编写“首页”,框架标签表现“后台页面”
- 用html、jquery、php编写新闻后台管理页面,动态添加新闻数据并实现数据的增删改查功能
- HTML后台管理页面布局
- WEB前端-HTML-CSS-后台管理页面布局小例
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建
- [置顶] ajax请求到后台数据,前台不用拼接字符串append追加HTML标签,一样显示到页面 (使用空模板)
- HTML高级标签(2)————窗口分帧(1)————分帧演示
- HTML 后台管理页面布局
- HTML入门(三)后台系统显示页面_框架标签
- [置顶] ajax请求得到后台数据,前台页面,使用table模板然后clone,显示表格,,不用append拼接 “字符串和HTML表格标签”
- ajax请求到后台数据,前台不用拼接字符串append追加HTML标签,使用空模板一样显示到页面
- Java后台去除前台传递数据中的页面标签(HTML,Javascript,Style),获取文本内容!
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建
- 如何在Joomla!管理后台中实现标签页面的效果(tabs.js) 【转】
- 用JavaScript来验证Struts的html页面标签
- 【原】HTML页面元素加载顺序研究报告(5)----Script标签在Firefox下对背景图片的影响