JavaWeb这三周-FrameSet框架实现新闻后台管理系统
来源：互联网 发布：中准会计师事务所 知乎 编辑：程序博客网 时间：2024/05/19 22:58
实验目的：利用frameset框架完成新闻后台管理系统
使用技术类型：frameset、css、form表单提交。
1、新建登录页面login.html:
简单登录表单页面，提交action为index.html
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="Style/Login.css" rel="stylesheet" type="text/css" /><title>主页</title></head><body> <div id="wrapper"> <form id="form1" name="form1" action="index.html" > <div class="login"> <div> <label for="username">用户名</label> <input type="username" name="username" id="username" /> </div> <div> <label for="password">密 码</label> <input type="password" name="password" id="password" /> </div> <div class="button"> <input type="submit" name="Submit" value="登录" /> <input type="reset" name="Submit" value="重置" /> </div> </div> </form> </div> </body></html>Login.css
/* CSS Document */* { margin: 0px; padding: 0px;}body { font-family: Arial, "宋体"; color: #FFFFFF; font-size: 12px; line-height: 24px;}a { font-family: Arial, "宋体"; font-size: 12px; color: #FFCC00; text-decoration: underline; margin-right: 5px;}a:hover { text-decoration: none; color: #FFFFFF;}#wrapper { background-image: url(../Images/Bj_Login.jpg); background-repeat: no-repeat; background-position: 0px 0px; height: 218px; width: 670px; margin-top: 150px; margin-right: auto; margin-left: auto;}.login { height: 140px; width: 222px; float: right; margin-top: 53px; margin-right: 11px; padding-top: 10px; padding-left: 15px; display: inline;}.login div { margin-top: 15px; margin-bottom: 15px; height: 22px;}.login #type { font-family: Arial, "宋体"; font-size: 12px;}.login #username { border: 1px solid #0F509F; width: 160px; height: 16px;}.login #password { border: 1px solid #0F509F; width: 160px; height: 16px;}.login .button { padding-left: 55px;}.login .button input { background-color: #FFA73D; height: 20px; width: 60px; font-family: Arial, "宋体"; font-size: 12px; font-weight: bold; color: #FFFFFF; background-image: url(../Images/Bj_loginButton.gif); background-repeat: repeat-x; background-position: 0px 0px; border: 1px solid #DC6B00; line-height: 18px;}#link { text-align: center; height: 16px;}2、新建主页顶部页面top.html:
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="Style/Top.css" rel="stylesheet" type="text/css" /><title>top</title></head><body> <div id="top"> <div id="time">您好，今天是<span id="date">2015年9月10日 星期四</span></div> <script type="text/javascript"> var d=new Date(); document.getElementById("date").innerHTML=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+" 星期"+"天一二三四五六 ".charAt(d.getDay()); </script> </div> <div id="menuBg"> <div id="name">管理员</div> <div id="menu"> <a href="main.html" target="mainFrame" id="home">首页</a></div> </div></body></html>Top.css
/* CSS Document */body { background-color: #FFFFFF; background-repeat: repeat-x; background-position: 999px top; margin: 0px; padding: 0px; border: 0px; background-image: url(../Images/Bj_top.gif);}#top { background-color: #FFFFFF; background-image: url(../Images/Pic_top_img.gif); background-repeat: no-repeat; background-position: left top; width: 999px; height: 76px; font-family: Arial, Helvetica, sans-serif, "宋体"; font-size: 12px; color: #000000;}#time { line-height: 25px; text-align: center; height: 25px; width: 235px; font-family: Arial, Helvetica, sans-serif, "宋体"; padding: 0px; margin-top: 0px; margin-bottom: 0px; margin-left: 702px; margin-right: 0px;}#menuBg { background-image: url(../Images/Bj_menu.gif); background-repeat: repeat-x; background-position: left top; background-color: #0066CC; height: 24px; width: 100%; margin: 0px; padding: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; font-family: Arial, Helvetica, sans-serif, "宋体"; font-size: 12px; color: #FFFFFF; text-align: left; line-height: 24px;}#name { line-height: 24px; height: 24px; width: 70px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; background-image: url(../Images/Pic_iconAdmin.gif); background-repeat: no-repeat; background-position: left center; font-weight: bold; display: block; float: left; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; margin-left: 10px; border: 0px;}#menu { margin: 0px; padding: 0px; float: right; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;}#menu a { margin-right: 16px; font-family: Arial, "宋体"; font-size: 12px; color: #FFFFFF; text-decoration: none;}#menu #home { background-image: url(../Images/Pic_homeIcon.gif); background-repeat: no-repeat; background-position: 0px 1px; padding-left: 20px; width: 30px; height: 24px; display: block; float: left;}#menu #user { background-image: url(../Images/Pic_iconUser.gif); background-repeat: no-repeat; background-position: 0px 1px; padding-left: 22px; width: 50px; height: 24px; display: block; float: left;}#menu #manage { background-image: url(../Images/Pic_iconManage.gif); background-repeat: no-repeat; background-position: 0px 1px; padding-left: 22px; width: 50px; height: 24px; display: block; float: left;}#menu #quit { background-image: url(../Images/Pic_quitIcon.gif); background-repeat: no-repeat; background-position: 0px 1px; padding-left: 20px; width: 30px; height: 24px; display: block; float: left;}#menu #help { background-image: url(../Images/Pic_helpIcon.gif); background-repeat: no-repeat; background-position: 0px 1px; padding-left: 20px; width: 30px; height: 24px; display: block; float: left;}3、新建主页左侧页面left.html:
包含导航链接，链接页面至右侧主页面
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="Style/Left.css" rel="stylesheet" type="text/css" /><script language="JavaScript">//菜单点击用方法--隐藏function hideAll() { if (document.all.list.length==null) { list.style.display="none"; } else { for(i=0;i<list.length;i++) { list[i].style.display="none"; } }}//菜单点击用方法--显示function showobj(num) { if (document.all.list.length==null) { if (list.style.display=="none") { hideAll(); list.style.display="inline"; } else { list.style.display="none"; } } else { if (list[num].style.display=="none") { hideAll(); list[num].style.display="inline"; } else { list[num].style.display="none"; } }}</script><style type="text/css">/*<![CDATA[*/.yincang { display:none;}/*]]>*/</style><title>Left</title></head><body> <div> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="leftMenu"> <tr onclick="showobj(0)"> <td><a target="mainFrame">管理中心</a></td> </tr> <tr id="list" style="display:none;"> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href="News/CategoryList.html" target="mainFrame">类别管理</a></td> </tr> <tr> <td><a href="News/NewsList.html" target="mainFrame">新闻管理</a></td> </tr> </table> </td> </tr> </table> </div> </body></html>Left.css
/* CSS Document */body { margin: 0px; padding: 0px; border: 0px; background-image: url(../Images/Bj_left.gif); background-repeat: repeat-y; background-position: left top; background-color: #3374BE;}.leftMenu { width: 177px; float: left; border: 0px; background-repeat: no-repeat; background-position: 0px 0px; background-image: url(../Images/Pic_left_line.gif); padding: 0px; margin-top: 14px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}.leftMenu td { background-image: url(../Images/Pic_left_line.gif); background-repeat: no-repeat; background-position: left bottom; padding-left: 10px; line-height: 36px; height: 30px; cursor: hand;}.leftMenu a { font-family: Arial, Helvetica, sans-serif, "宋体"; font-size: 14px; font-weight: bold; color: #12247A; text-decoration: none; line-height: 30px; margin-left: 5px; background-image: url(../Images/Pic_arrow.gif); background-repeat: no-repeat; background-position: 0px 10px; display: block; text-indent: 10px; width: 100%;}.leftMenu a:hover { background-image: url(../Images/Pic_arrow.gif); background-repeat: no-repeat; background-position: 0px 10px; /*padding-left: 14px;*/}.leftMenu td table { border: 0px; padding: 0px; margin-left: 12px;}.leftMenu td table td { background-image: url(../Images/Pic_left_line.gif); background-repeat: no-repeat; background-position: left bottom; padding-left: 10px; line-height: 36px; height: 30px; cursor: hand;}.leftMenu td table td a { font-family: Arial, Helvetica, sans-serif, "宋体"; font-size: 12px; font-weight: normal; color: #12247A; text-decoration: none; line-height: 30px; margin-left: 5px; background-image: url(../Images/Pic_arrow.gif); background-repeat: no-repeat; background-position: 10px 10px; display: block; text-indent: 20px; width: 100%;}.leftMenu td table td a:hover { font-weight: bold; background-image: url(../Images/Pic_arrow.gif); background-repeat: no-repeat; background-position: 24px 10px; padding-left: 14px;}#shrink { display: block; height: 40px; width: 5px; padding: 0px; margin-top: 156px; margin-right: 0px; margin-bottom: auto; margin-left: 0px; float: left;}4、新建分隔线页面border.html:
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ margin:0px; padding:0px; border:0px; } body{ background-color:#3374BE; } #tab{ display:block; height:100%; width:5px; padding:0px; margin-top:126px; margin-right:0px; margin-bottom:0px; margin-left:0px; float:left; }</style><title>border</title></head><body> <div id="tab"></div></body></html>5、新建主页右侧主页面：main.html：
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="Style/Main.css" rel="stylesheet" type="text/css" /><title>main</title></head><body> <div id="main"></div></body></html>main.css
/* CSS Document */body { margin: 0px; padding: 0px; border: 0px; background-color: #FFFFFF; text-align: center;}form { margin: 0px; padding: 0px; border: 0px;}#main { background-image: url(../Images/Bj_main_img.gif); background-repeat: no-repeat; background-position: center center; height: 400px; width: 100%;}#wrapper {}#title { font-family: Arial, Helvetica, sans-serif, "宋体"; font-size: 14px; font-weight: bold; color: #000000; width: 90%; line-height: 34px; height: 34px; background-image: url(../Images/Pic_title_icon.gif); background-repeat: no-repeat; background-position: 17px center; padding-left: 40px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #599AE5; text-align: left; margin-top: 15px;}#operation_content { height: 300px; width: 732px; background-color: #F8F8F8; background-image: url(../Images/condition_bg.gif); background-repeat: no-repeat; background-position: right bottom; margin-top: 30px; padding: 20px; text-align: left; font-family: Arial, Helvetica, sans-serif, "宋体"; color: #000000;}#operation_content h3{ font-family: "宋体"; font-size: 14px; line-height: 24px; font-weight: bold; color: #12247A; margin: 0px; padding: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;}#operation_content p{ font-family: "宋体"; font-size: 14px; line-height: 24px; color: #000000; margin: 0px; padding: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; text-indent: 24px;}#operation_content a{ font-family: "宋体"; font-size: 14px; line-height: 24px; color: #000000; margin: 0px; padding: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; text-indent: 24px;}#process_content { width: 732px; background-color: #FFFFFF; margin-top: 30px; padding: 20px; text-align: left; font-family: Arial, Helvetica, sans-serif, "宋体"; color: #000000; height: auto;}.process { padding: 0px; height: 92px; width: 119px; float: left; background-color: #F1F1F1; background-image: url(../Images/processContentBg.gif); background-position: right bottom; background-repeat: no-repeat; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px;}.process h3{ font-family: "宋体"; font-size: 12px; line-height: 24px; font-weight: bold; color: #FFFFFF; padding: 0px; border: 0px; display: block; background-color: #3374BE; background-image: url(../Images/processTitleBg.gif); background-repeat: no-repeat; background-position: right top; height: 24px; width: 119px; text-indent: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px;}.process p{ font-family: "宋体"; font-size: 12px; line-height: 24px; color: #000000; padding: 0px; display: block; height: 24px; width: 107px; text-indent: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 12px; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #8A8A8A; background-image: url(../Images/process_icon.gif); background-repeat: no-repeat; background-position: 1px center;}.process a{ font-family: "宋体"; font-size: 12px; line-height: 24px; color: #000000; padding: 0px; border-bottom-width: 0px; margin: 0px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;}.processArrow { height: 92px; width: 38px; padding: 0px; float: left; background-image: url(../Images/processArrow.gif); background-repeat: no-repeat; background-position: center center; margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px;}#button { text-align: right; margin: 0px; width: 90%; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px;}#search { text-align: left; width: 90%; background-color: #F6F6F6; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #CECECE; border-bottom-color: #CECECE; height: 26px; padding: 0px; font-family: Arial, Helvetica, sans-serif, "宋体"; font-size: 12px; line-height: 26px; color: #333333; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px;}.process_content { font-family: Arial, Helvetica, sans-serif, "宋体"; color: #000000; line-height: 26px;}.process_content td { font-family: Arial, Helvetica, sans-serif, "宋体"; color: #000000; line-height: 26px; margin-top: 12px; font-size: 12px; padding-right: 10px; padding-left: 10px; background-image: url(../Images/dotLine.gif); background-repeat: repeat-x; background-position: left bottom; text-align: left;}.process_content td p { display: block; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding: 0px; line-height: 150%; margin-top: 10px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px;}.content { font-family: Arial, Helvetica, sans-serif, "宋体"; color: #000000; line-height: 26px;}.content td { font-family: Arial, Helvetica, sans-serif, "宋体"; color: #000000; line-height: 26px; margin-top: 12px; font-size: 12px; padding-right: 2px; padding-left: 2px; background-image: url(../Images/dotLine.gif); background-repeat: repeat-x; background-position: left bottom;}.content_bg1 { background-color: #F6F6F6;}.content_bg2 { background-color: #F6F6F6; text-align: right; font-weight: bold;}.contentform { font-family: Arial, Helvetica, sans-serif, "宋体"; color: #000000; line-height: 26px; text-align: left;}.contentform td { font-family: Arial, Helvetica, sans-serif, "宋体"; color: #000000; line-height: 26px; margin-top: 12px; font-size: 12px; padding-right: 2px; padding-left: 2px; background-image: url(../Images/dotLine.gif); background-repeat: repeat-x; background-position: left bottom;}.contentform_bg1 { background-color: #F6F6F6;}.contentform_bg2 { background-color: #F6F6F6; text-align: right; font-weight: bold;}.contentform input { height: 16px; border: 1px solid #8B8B8B; margin: 0px; padding: 0px; width: 80%; font-family: Arial, Helvetica, sans-serif, "宋体"; font-size: 12px; line-height: 16px; color: #000000;}.contentform textarea { width: 80%; border: 1px solid #8B8B8B;}.sortTitle_bg{ background-image: url(../Images/sortTitle_bg.gif); background-repeat: repeat-x; background-position: left top; height: 34px; text-align: center; font-family: Arial, Helvetica, sans-serif, "宋体"; font-size: 12px; line-height: 34px; color: #000000; margin: 0px; padding: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;}.sortTitle_line { background-image: url(../Images/sortTitle_line.gif); background-repeat: no-repeat; background-position: left top;}#page { width: 90%; margin-top: 10px; height: 26px; font-family: Arial, Helvetica, sans-serif, ; font-size: 12px; line-height: 26px; color: #666666;}.pagea { font-family: Arial, Helvetica, sans-serif, ; font-size: 14px; line-height: 26px; color: #666; text-decoration: none; padding: 0px; border: 0px; margin:0px 0px 0px 3px;}.pagea:hover{ font-family: Arial, Helvetica, sans-serif, ; font-size: 14px; line-height: 26px; color: #990000; text-decoration: none; padding: 0px; border: 0px; margin:0px 0px 0px 3px; font-weight: bold;}.pagea1 { font-family: Arial, Helvetica, sans-serif, ; font-size: 16px; line-height: 26px; color: #000000; padding: 0px; border: 0px; margin:0px 0px 0px 3px; font-weight: bold;}#yesno { width: 90%; margin-top: 10px; height: 26px; font-family: Arial, Helvetica, sans-serif, ; font-size: 12px; line-height: 26px; color: #666666;}6、新建主页面index.html:
利用frameset框架集成三个页面
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>index</title></head><frameset rows="100,*" cols="*" frameborder="no" border="0" framespacing="0" > <frame src="top.html" name="topFrame" noresize="noresize" id="topFrame" title="topFrame" /> <frameset name="main_frm" id="main_frm" cols="177,*" frameborder="no" border="0" framespacing="0"> <frame src="left.html" name="leftFrame" id="leftFrame" noresize="noresize" title="leftFrame" /> <frameset name="mainFrame" id="mainFrame" cols="8,*" frameborder="no" border="0" framespacing="0"> <frame src="border.html" name="oc" frameborder="no" scrolling="no" noresize="noresize" id="oc" title="mainFrame" /> <frame src="main.html" name="mainFrame" frameborder="no" scrolling="yes" id="mainFrame" title="mainFrame" /> </frameset> </frameset></frameset><noframes><body></body></noframes> </html>效果图：
0 0
- JavaWeb这三周-FrameSet框架实现新闻后台管理系统
- 基于YIi的三栏frameset框架后台管理页面的实现
- 基于YIi的三栏frameset框架后台管理页面的实现
- 基于YIi的三栏frameset框架后台管理页面的实现
- MVC框架新闻管理系统实现增删改查
- 利用Smarty编写新闻管理后台系统
- frameset框架，多用于后台
- JavaWeb后台管理系统设计与开发(旅游自助系统)
- 今天利用Smarty写了一个新闻管理后台系统
- 新闻发布系统后台
- 新闻发布系统后台
- smarty实现简单的新闻管理系统
- smarty实现简单新闻管理系统
- 新闻管理系统的设计与实现
- android图书管理系统+javaweb后台服务器代码
- 我们后台管理系统SSH框架解析
- Web后台管理系统框架模板
- 后台管理系统的布局框架
- memcpy与memmove的区别及源码
- redhat 6.4安装opencv3.0.0
- 使用 nohup 让进程在后台运行
- c#跨线程操作问题
- 总结八大排序算法的基本思想与代码实现
- JavaWeb这三周-FrameSet框架实现新闻后台管理系统
- Spring学习（十五）使用quartz子框架实现任务调度
- 黑马程序员-----------C语言基础-----------结构体·枚举
- Codeforces Round #319 (Div. 2) ——C. Vasya and Petya's Game（数学题）
- c语言链表-学生成绩管理系统
- Android Studio导入Project、Module的正确方法
- 内存管理与B树
- C#使用Log4Net记录日志
- Java 懒汉式单例 饿汉式单例
