实验目的:利用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>
效果图:
相关推荐
javaweb期末作业--教师学生信息管理系统源码+数据库。网页设计与制作期末作业--html+css,Java设计模式平时作业和期末作业。 javaweb期末作业--教师学生信息管理系统源码+数据库。网页设计与制作期末作业--html+css...
基于javaweb的课程设计--奶茶销售管理系统源码+数据库.zip 95分以上高分必过项目,下载即用无需修改,项目完整确保可以运行。 基于javaweb的课程设计--奶茶销售管理系统源码+数据库.zip 95分以上高分必过项目,...
javaweb期末大作业-甜品店烘焙管理系统源码+数据库(高分项目),javaweb期末大作业-甜品店烘焙管理系统源码+数据库(高分项目)javaweb期末大作业-甜品店烘焙管理系统源码+数据库(高分项目)javaweb期末大作业-...
基于javaweb的管理系统-航空管理系统源码+数据库(课程设计大作业).zip 90分以上高分项目,必过啊。本项目基于javaweb的管理系统-航空管理系统源码,主要针对计算机相关专业的正在做毕设的学生和需要项Java学习者。...
在这个特定的"1Javaweb-后台管理系统-管理员管理"项目中,我们可以看到重点是管理员的相关功能模块。这个练习可能是为了帮助开发者熟悉JavaWeb开发中的用户权限管理、数据操作以及页面交互等技术。 首先,让我们来...
JavaWeb期末大作业--在线相册管理系统源码+数据库文件.zip主要针对计算机相关专业的正在做课程设计和期末大作业的学生和需要项目实战练习的学习者。包含全部项目源码、该项目可以直接使用、项目都经过严格调试,下载...
JavaWeb课程实习项目-基于ssm+mysql的酒店管理系统代码+数据库(高分项目),高分项目课程设计大作业开发的97分高分设计项目,可作为高分课程设计和期末大作业的参考,含有代码注释小白也可看的懂,有能力的小伙伴也...
总的来说,"JavaWeb-Maven框架-黑马旅游网源码"是一个涵盖Web开发基础、项目管理、依赖控制和高级框架应用的综合实例。通过学习这个项目,开发者可以深入了解JavaWeb和Maven在实际项目中的应用,提升自己的开发技能...
【JavaWeb图书管理系统详解】 JavaWeb技术在现代软件开发领域占据着重要的地位,尤其是在构建企业级应用时。湖科大javaweb课程设计中的“图书管理系统”是一个典型的实例,它结合了多种关键技术,如MyBatis、JSP、...
毕业设计-JavaWEB项目基于SSM+mysql框架实现的在线商城系统源码.zip毕业设计-JavaWEB项目基于SSM+mysql框架实现的在线商城系统源码.zip毕业设计-JavaWEB项目基于SSM+mysql框架实现的在线商城系统源码.zip毕业设计-...
JavaWeb课程设计---客户管理系统方案.doc
通过学习和实践这个"Javaweb图书管理系统——完整项目(图书商城)",开发者不仅能深入理解Javaweb的各项核心技术,还能掌握实际项目开发流程,提升问题解决和团队协作能力。这个项目不仅适用于初学者入门,也为有...
JavaWeb后台管理系统是一种基于Java技术构建的企业级应用系统,主要用于管理网站内容、用户权限、数据处理等核心功能。在软件工程领域,这类系统是实现高效、安全和可扩展的网络服务的重要工具。以下是对JavaWeb后台...
新闻发布系统,基于SSM实现的新闻发布系统 运行环境 jdk8+mysql5.7+eclipse+tomcat 项目技术(必填) Spring+SpringMVC+mybatis+EasyUI+jQuery+JSP 项目描述: 系统分为前台新闻阅览和后台新闻管理: 1. 前台新闻...
这是一个纯JavaWeb项目,采用MVC模式,即 模型(model)-视图(view)-控制器(controller),没有使用其他框架,采用的是纯servlet+jsp实现的一个简易选课JavaWeb项目,实现的功能如下:包括 **管理员 教师 学生** ...
综上所述,SSH框架整合实现的注册登录系统是一个典型的JavaWeb应用案例,它涵盖了前端交互、后端处理和数据库操作的全过程,是学习JavaWeb开发的重要实践项目。通过这样的系统设计,学生可以深入理解SSH框架的运用,...
javaweb课程设计项目:基于ssm框架实现的教师科研信息管理系统 javaweb课程设计项目:基于ssm框架实现的教师科研信息管理系统 javaweb课程设计项目:基于ssm框架实现的教师科研信息管理系统 javaweb课程设计项目:...
【标题】中的“JavaWeb期末作业--JavaWeb 学生信息管理系统”表明这是一个基于JavaWeb技术开发的学生信息管理系统的项目。在JavaWeb开发中,学生信息管理系统是一个常见的实践项目,它可以帮助我们理解如何将Web技术...
这份资源主题是Javaweb日记系统,采用的是maven工程,后端用到的技术有,实体层:Lombok注解开发;数据层:mybatis框架,虽然没有用到Spring和SpringMVC技术,但是后续可以改成SSM项目;前端主要采用vue+elementui...
一套基于标签的推荐系统,针对一般用户和管理员,完成以下功能: (1) 对于管理员用户,实现管理员的登录认证,标签管理,用户管理和推荐资源的管理等功能。 对于一般用户,实现用户的注册和登录,为资源打标签以及...