html文件自动批阅器怎么设计,作业作业提交与批改系统HTML界面.doc

作业作业提交与批改系统HTML界面

作业1-作业提交与批改系统HTML界面

请根据以下需求部分功能或全部全部功能HTML界面代码；

注意HTML代码附在本文后面

一、作业提交与批改系统

系统功能图

基本功能

1．学生注册

2．学生、教师、管理员密码找回功能

3．不同用户登录进入不同的界面

4．学生作业的查看

5．学生作业成绩的查看

6．学生作业上传

7．教师布置作业

8．教师删除作业

9．教师修改作业

10．教师发布成绩

11．教师修改成绩

12．教师下载作业

13．管理员添加教师用户

14．管理员添加管理员用户

15．管理员添加专业

16．管理员添加班级

17．个人资料的查看

18．个人密码的修改

限制条件

学生不可以进行教师与管理员的页面

教师也不可以进入管理员页面，还有学生页面

管理员也不可以进行学生和教师面页

每个学生登录进入之后只能看到自己班级的作业，不可以看到别的班级的作业

每个教师登录只对自己发布的作业进行管理，不可以对别的教师发布的作业进行管理

当学生注册时输入的学号必需与选定的班级匹配。

不同的用户使用修改密码都只能修改自己的密码，无法修改他人的

不同的用户使用个人数据功能时，也是只可以看到自己的信息不可以看到他们的信息

学生上传作业的类型，大小，时间等，受到教师发布作业的约束

特殊功能的原理

管理员添加专业班级的处理原理

以本系为例子，有十多个专业，当某个专业人数比较多时就会分成几个班，如图形图像一班，图形图像二班，ACCP一班，ACCP二班等，而且还分为2004级图形图像一班，2004级图像图像二班，2005级图形图像一班，2005级图形图像二班等。在程序中，首先应该添加专业，而把“图形图像一班”视为一个专业，“图形图像二班”视为一个专业。前面的“2004级”“2005级”当作年份。添加专业的时候不用只需要添加专业的名称，在添加班级的时候只须要选择年份和专业，再输入班级的代号就可以添加班级了。

管理员添加教师管理员的原理

管理员可以添加教师用户，教师用户必须由管理员添加，每次当管理员添加教师用户时就会在网站目录下的一个专门用于存放上传作业的目录(up)“实用软件工程方法第一次作业”班级名通过查询班级表得到为“2004级WEB应用程序设计”。网站上传目录设为“f:\作业\” 作业的存置教师为“TOM”则学生上传作业的时候则会上传到f:\作业\TOM\2004级WEB应用程序设计\实用软件工程方法第一次作业\”这个目录下面，下载的时候也会在这个目录下面下载，上传的文件名为姓名加上教师布置作业时的扩展名。如果有重复上传则会覆盖原来上传的文件。

实现回车换行与空格的原理

使用到的页面有发布作业和修改作业和学生查看作业。(因为在发布作业的时候将回车转换成
存入数据库这样在显示数据时才会显示换行，不然无法实现换行，空格也是必须换成“ ”。

如果不进行字符的替换，则文本框中的回车与空格将会省去，存入数据库中，通过数据库显示到用户界面的时候就无法区分用户的换车和空格，格式不好看，所以在这里进行了简单的替换实现回车与空格的效果。

作业目录的处理原理

在web.xml文件中存放了上传文件的目录默认为(目录一)如：f:\作业，当新建一个教师用户时就会在目录一下面以教师的姓名为目录名建立一个目录如(目录二)如：f:\作业\tom；当老师用户登录之后发布作业的时候要输入作业的标题，还要先择作业的所属班级。每一次发布作业就会新建目录，在目录二的下面建立如下形式的目录“f:\作业\tom \作业的所属班级\作业的标题\”耐用会将“TOM\作业的所属班级\作业的标题\”存入发布作业的一个字段里面。方便以后目录的查找，也就实现了不同的用户上传的作业存放到不同的文件夹，并进行分类存放，也方便了老师对作业目录的管理，方便的下载作业等。这是本系统的一个核心。

密码找回界面与编码

图：

管理员添加用户的界面与编码

图

教师发布修改作业的界面

图

教师批量下载作业的界面与编码

图

学生上传作业的界面与编码

图

二、HTML代码

Css代码.header{

padding:50px;

font:60px 宋体;

color:black;

background:yellow;

text-align: center;

font-weight: bold;

}

.center{

text-align: center;

color:red;

font-size:30px;

font-weight: bold;

padding:40px;

background:blue;

margin-left: 10px;

margin-right: 10px;

}

.inputuser{

width:250px;

height:30px;

font-si