JavaWeb这三周-FrameSet框架实现新闻后台管理系统
2015-09-11 16:45
501 查看
实验目的：利用frameset框架完成新闻后台管理系统
使用技术类型：frameset、css、form表单提交。
1、新建登录页面login.html:
简单登录表单页面，提交action为index.html
Login.css
2、新建主页顶部页面top.html:
Top.css
3、新建主页左侧页面left.html:
包含导航链接，链接页面至右侧主页面
Left.css
4、新建分隔线页面border.html:
5、新建主页右侧主页面：main.html：
main.css
6、新建主页面index.html:
利用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>
效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Web布局连载——两栏固定布局（五）
- [div+css]晒晒最新制作专题推广页模板
- 【DevOps】为什么我们永远疲于奔命？
- 设计更快的网页（三）：字体和 CSS 调整
- 网络管理之IP地址篇
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 文件的读出 编辑 管理
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ，必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)