继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JSP+Servlet培训班作业管理系统[2]

程序员大阳
关注TA
已关注
手记 357
粉丝 1.5万
获赞 1523

上一篇中,我们实现了登录功能,本篇主要关注点是不同用户登录后,根据用户角色不同(校长、教师、学生)进入到不同的页面。为了便于理解,猫哥贴下当前的项目结构图:
图片描述
task2-1,首先要理解不同的页面,所谓不同的页面,是指校长或者教师或者学生登录进来,看到的菜单、功能、显示是有所不同的。但是对于程序设计者来说,有多重方式可以实现这种不同。
最容易理解的,就是根据登录角色的不同,跳转到不同的页面,然后根据角色对应的功能设计,不同页面显示不同的内容。好的,我们就先来实现这一点。

首先是校长这个角色,我们希望他登录成功后,进入一个后台界面,这个界面上方有我们的系统名称和登录用户的信息,左边有菜单可以选择对应的操作,右边是具体的文字、按钮等功能显示区域。那么我们应该简单的设计为:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>   
    <title>schoolmaster.jsp</title>
  </head>
  <body>
    <div id="top">
    </div>
    <div id="left">
    </div>
    <div id="right">
    </div>
  </body>
</html>

task2-2,参考猫哥的前文《猫哥带你去战斗——Java Web开发——网页篇[6]——布局 》,简单设计一下布局如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>   
    <title>schoolmaster.jsp</title>
    <style type="text/css">
    /*星号表示选择全部,设置外边距0,内边距0,字体大小12px,宋体*/
    *{
        margin:0px;
        padding:0px;
        font-size:12px;
        font-family:"宋体";
    }
    /*整个body区域背景色为#F5F5F5,这个很简单,自己下载个取色器,找个漂亮的网页,取个颜色就行*/
    body {
        background-color: #FCFCFC;
    }
    /*在top、left、right外面套用一层main是为了控制宽度,并且整体居中*/
    #main{
        width:1000px;
        margin:0px auto;
    }
    /*宽度占满它爹的宽度,高度64px是瞎试的,不好看再调整,猫哥喜欢用16px、32px、64px、128px这些,你懂的。
    背景色猫哥继续取色器,文字颜色取色器,标题部分啊文字用微软雅黑,大气!
    line-height表示文字占用的高度,它也是64那就是文字占用高度跟top区域高度是一样的嘛,所以文字就居中了*/
    #top{
        width:100%;
        height:64px;
        background-color:#000000;
        color:#FFFFFF;
        font-family:"微软雅黑";
        line-height:64px;   
        font-size:36px;
    }
    /*宽度占200px差不多了吧
    float表示漂浮,left的话就是靠左了,所以这个left区域就得靠左飘飘了
        内部的东西跟边距有点距离好看点,暂时定为10px,上下左右都是哦*/
    #left{
        width:200px;
        height:536px;/*猫哥认为600-64=536*/
        float:left;
        background-color:#EEEEEE;
        padding:10px;
    }
    /*同理right向右飘*/
    #right{
        width:760px;/*1000-200-10*4=760,此处一定要注意padding的内容会拓宽div整体宽度,有志于前端的可以专门去研究下*/
        min-width:600px;
        height:536px;/*猫哥认为600-64=536*/
        float:right;
        background-color:#FFFFFF;
        padding:10px;
    }
    </style>
  </head>
  <body>
    <div id="main">
        <div id="top">
            猫哥培训班作业管理系统
        </div><!-- top部分是标题栏 -->
        <div id="left">
            这边是菜单
        </div><!-- left部分是菜单栏 -->
        <div id="right">
            这边是内容
        </div><!-- right部分是具体内容显示区 -->
    </div>
  </body>
</html>

预览下界面,大体还可以,凑合着用吧。

task2-3,咱们再把左边菜单栏弄上。如下:

<div id="left">
            <ul>
                <li>菜单1</li>
                <li>菜单1</li>
                <li>菜单1</li>
                <li>菜单1</li>
                <li>菜单1</li>
            </ul>
</div><!-- left部分是菜单栏 -->

对应css也调整下

 /*调整id=left的div中的ul标签下的li标签的样式为上边距10px,左边距15px*/
    #left ul li{
        margin:10px 0px 0px 15px;
    }

好的,感觉自己棒棒哒,大体样子出来啦:
图片描述
本篇到此为止,下一篇还得继续完善下,完善的内容还有:

1,顶部标题栏,分为左右两侧,左侧系统名称,右侧登录信息提示
2,左侧菜单栏菜单内容改为超级链接形式
3,研究左侧点击按钮后,右侧跳转到不同的内容

这些还是属于schoolmaster.jsp内容,所以下一篇依然是task2-x

打开App,阅读手记
6人推荐
发表评论
随时随地看视频慕课网APP