实验目的：利用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课程设计--注册登录系统--用SSH框架整合实现注册登录系统.pdfJAVAWeb课程设计--注册登录系统--用SSH框架整合实现注册登录系统.pdfJAVAWeb课程设计--注册登录系统--用SSH框架整合实现注册登录系统.pdfJAVAWeb...
JavaWeb课程设计---客户管理系统.pdf
基于javaweb的课程设计--奶茶销售管理系统源码+数据库.zip 95分以上高分必过项目，下载即用无需修改，项目完整确保可以运行。 基于javaweb的课程设计--奶茶销售管理系统源码+数据库.zip 95分以上高分必过项目，...
基于JavaWeb的推荐数据后台管理系统的设计与实现.docx基于JavaWeb的推荐数据后台管理系统的设计与实现.docx基于JavaWeb的推荐数据后台管理系统的设计与实现.docx基于JavaWeb的推荐数据后台管理系统的设计与实现.docx...
Javaweb图书管理系统--完整项目，整个项目完整打包。
JAVAWeb课程设计报告--注册登录系统--用SSH框架整合实现注册登录系统.doc
基于javaweb的管理系统-航空管理系统源码+数据库（课程设计大作业）.zip 90分以上高分项目，必过啊。本项目基于javaweb的管理系统-航空管理系统源码，主要针对计算机相关专业的正在做毕设的学生和需要项Java学习者。...
JavaWeb-Maven框架-黑马旅游网源码和文档
1Javaweb-后台管理系统-管理员管理 练习专用，难度系数3个星
javaweb期末作业--JavaWeb 学生信息管理系统.zip
湖科大javaweb课程设计--图书管理系统，基于mybatis,jsp,servlet,jquery,echarts,bootstrap 代码简单易懂，快速上手，基于MVC架构分模块设计
JavaWeb期末大作业--在线相册管理系统源码+数据库文件.zip主要针对计算机相关专业的正在做课程设计和期末大作业的学生和需要项目实战练习的学习者。包含全部项目源码、该项目可以直接使用、项目都经过严格调试，下载...
毕业设计-JavaWEB项目基于SSM+mysql框架实现的在线商城系统源码.zip毕业设计-JavaWEB项目基于SSM+mysql框架实现的在线商城系统源码.zip毕业设计-JavaWEB项目基于SSM+mysql框架实现的在线商城系统源码.zip毕业设计-...
JavaWeb课程设计---客户管理系统方案.doc
毕业设计论文-IT计算机-JavaWeb图书管理系统-源码.zip
本科毕业设计--基于javaweb人事管理系统的设计与实现.docx本科毕业设计--基于javaweb人事管理系统的设计与实现.docx本科毕业设计--基于javaweb人事管理系统的设计与实现.docx本科毕业设计--基于javaweb人事管理系统...
JavaWeb课程设计汇本---客户管理系统.doc
JavaWeb课程设计--客户信息管理系统
javaweb课程设计项目：基于ssm框架实现的教师科研信息管理系统 javaweb课程设计项目：基于ssm框架实现的教师科研信息管理系统 javaweb课程设计项目：基于ssm框架实现的教师科研信息管理系统 javaweb课程设计项目：...