JavaWeb这三周-FrameSet框架实现新闻后台管理系统

程序员文章站 2022-07-14 20:47:27

...

实验目的：利用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>

/* 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日&nbsp;星期四</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这三周-FrameSet框架实现新闻后台管理系统

博客分类： HTML开发 css框架管理java web

查看图片附件

相关标签： css 框架管理 java web

上一篇：《机器学习实战》chapter05 Logistic回归

下一篇：数据平台之企业营销管理与分析平台建设 FineReport报表管理分析平台