实验目的:利用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分以上高分必过项目,...
在这个特定的"1Javaweb-后台管理系统-管理员管理"项目中,我们可以看到重点是管理员的相关功能模块。这个练习可能是为了帮助开发者熟悉JavaWeb开发中的用户权限管理、数据操作以及页面交互等技术。 首先,让我们来...
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) 对于管理员用户,实现管理员的登录认证,标签管理,用户管理和推荐资源的管理等功能。 对于一般用户,实现用户的注册和登录,为资源打标签以及...
基于MVC的Javaweb项目-----简单的唱片管理销售平台 # 初学javaweb,制作简单唱片销售管理平台-附件资源
### 基于JavaWeb的推荐数据后台管理系统的设计与实现 #### 一、项目背景及意义 在互联网时代,随着用户需求的日益多样化以及个性化,推荐系统已成为许多网站和服务提高用户体验的重要工具。为了更好地管理这些推荐...
本系统模拟人力资源管理系统业务开发 运行环境 MyEclipse(idea) + Tomcat7,8 + MySql5.5+jdk7,8 项目技术(必填) Jsp+Servlet+apache dbutils+jdbc+c3p0+bootstrap+jquery http://localhost:8080/hr01_war_exploded/ ...