题库系统UI设计毕业设计Word文档下载推荐.docx
《题库系统UI设计毕业设计Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《题库系统UI设计毕业设计Word文档下载推荐.docx（23页珍藏版）》请在冰点文库上搜索。
选择通用试题库管理系统研究设计的意义，是试题库管理系统可以为学校教师举行考试提供方便与快捷的方式，拥有与真实考试同样的题型、组卷等功能。
而且，通过JSP、HTML等技术建立具有较高查询效率的试题库系统，使得试卷的自动生成并逐步积累，形成有效的试题库，使试卷管理工作更科学更高效。
1.3UI设计的发展趋势
目前在国内UI还是一个相对陌生的词，即便是一些设计人员也对这个词不太了解。
我们经常看到一些招聘广告写着：
招聘界面美工、界面美术设计师等等。
这表明在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，缺乏对用户交互的重要性的理解；
另一方面在软件开发过程中还存在重技术而不重应用的现象。
许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，这点在人员的比例与待遇上可以表现出来。
但这不是UI设计真正的价值体现，只是UI设计发展的一个必经过程
1.4系统开发的目标
该项目只要是一个UI界面的版本升级，针对已有的河北农业大学题库管理系统进行相关的UI设计。
研究的总体目标是使教师出卷更加方便，管理员的操作更加简洁。
而且在这基础上修改了原来的一些缺陷，比如：
课程排序问题、查找不方便的问题。
1.5相关的研究工作
为了顺利完成题库系统UI的设计与实现，作者在毕业设计期间所做的研究工作如下：
1.分析使用者的各方面需求，使用人群。
2.研究了各个UI界面的设计，从中发现其优点。
3.学习HTML技术，了解TOMCAT的构建，了解了Dreamweaver的使用以及CSS的基础知识。
4.仔细分析了相关的UI界面。
5.设计了题库系统的UI界面。
2开发环境及技术
2.1开发环境介绍
硬件系统：
Intel酷睿i52450M、2G以上内存、500G以上硬盘、光驱。
软件系统：
Windows7版本、Dreamweaver8、tomcat7.0。
2.2HTML开发技术简介
在万维网上的一个超媒体文档称之为一个页面（英语：
page）。
作为一个组织或者个人在万维网上放置开始点的页面称为主页（英语：
Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接）。
所谓超级链接，就是一种统一资源定位器（UniformResourceLocator,英语缩写：
URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。
这也是HTML获得广泛应用的最重要的原因之一。
在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。
是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：
脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。
因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。
超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
超级文本标记语言（英文缩写：
HTML）是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：
文字如何处理，画面如何安排，图片如何显示等）。
浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。
但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
2.3Dreamweaver简介
Dreamweaver是由美国著名的多媒体软件Dreamweaver是由美国著名的多媒体软件开发商Adobe公司（电脑软件公司，Adobe公司开发商Adobe公司（电脑软件公司，位于美国的圣何塞）开发的一个“所见即所得”国的圣何塞）开发的一个“所见即所得”的可视化网站开发工具，Dreamweaver是可视化网站开发工具，Dreamweaver是网页设计三剑客”中的重要成员，“网页设计三剑客”中的重要成员，主要负责网站的创建与管理、网页板式设计、网页责网站的创建与管理、网页板式设计、编辑和排版。
编辑和排版。
2.4Tomcat简介
Tomcat是Apache软件基金会（ApacheSoftwareFoundation）的Jakarta项目中的一个核心项目，由Apache、Sun和其他一些公司及个人共同开发而成。
由于有了Sun的参与和支持，最新的Servlet和JSP规范总是能在Tomcat中得到体现，Tomcat5支持最新的Servlet2.4和JSP2.0规范。
因为Tomcat技术先进、性能稳定，而且免费，因而深受Java爱好者的喜爱并得到了部分软件开发商的认可，成为目前比较流行的Web应用服务器。
2.5JSP技术简介
SP是由SunMicrosystems公司倡导、许多公司参与一起建立的一种动态技术标准。
在传统的网页HTML文件（*.htm，*.html）中加入Java程序片段（Scriptlet）和JSP标签，就构成了JSP网页java程序片段可以操纵数据库、重新定向网页以及发送E-mail等，实现建立动态网站所需要的功能。
所有程序操作都在服务器端执行，网络上传送给客户端的仅是得到的结果，这样大大降低了对客户浏览器的要求，即使客户浏览器端不支持Java，也可以访问JSP网页。
JSP全名为javaserverpage，其根本是一个简化的Servlet设计，他实现了Html语法中的java扩张（以<
%,%>
形式）。
JSP与Servlet一样，是在服务器端执行的，通常返回给客户端的就是一个HTML文本，因此客户端只要有浏览器就能浏览。
Web服务器在遇到访问JSP网页的请求时，首先执行其中的程序段，然后将执行结果连同JSP文件中的HTML代码一起返回给客户端。
插入的Java程序段可以操作数据库、重新定向网页等，以实现建立动态网页所需要的功能。
JSP技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。
网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。
JSP将网页逻辑与网页设计的显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。
JSP（JavaServerPages）是一种动态页面技术，它的主要目的是将表示逻辑从Servlet中分离出来。
JSP页面由HTML代码和嵌入其中的Java代码所组成。
服务器在页面被客户端请求以后对这些Java代码进行处理，然后将生成的HTML页面返回给客户端的浏览器。
JavaServlet是JSP的技术基础，而且大型的Web应用程序的开发需要JavaServlet和JSP配合才能完成。
JSP具备了Java技术的简单易用，完全的面向对象，具有平台无关性且安全可靠，主要面向因特网的所有特点。
3系统功能分析与设计方法
3.1系统功能分析
根据河北农业大学题库管理系统的相关信息，作者发现一些有待升级的地方。
对于题库系统的UI设计有：
第一部分：
课程浏览页面。
原有的页面可以实现删除课程信息，但是当点击删除按钮以后显示的是“确定删除该课程吗？
”当实际操作的时候用户可能忘记自己选的是哪门课程，要是再确定信息就要点取消，这样浪费时间，而且管理员的操作量也比较大。
所以作者认为该页面存在一定的问题，我尝试给与修改。
第二部分：
试题维护页面。
试题维护，里面的课程信息相比比较多，有1049个知识点，而且不是按照顺序排列的，当用户需要修改或者浏览该试题的话，需要查找很长时间，页面的字体很紧凑，长时间的工作容易产生疲劳。
根据相关问题，我尝试修改。
第三部分：
知识点浏览页面。
知识点浏览页面同样有信息量大这一特征，同样存在不存在排序的问题，页面上有查找功能，但是我们习惯课本式的目录，对于同一门课程的相关知识点，我想做出相关修改
3.2系统功能的设计方法
根据页面点击“删除课程信息”按钮出现“确定要删除该课程吗？
”的问题，我做出的修改是：
当用户点击该按钮时，返回用户的是“确定删除XX课程吗？
”这样就能让用户清楚的了知道自己是否要删除该课程了。
“修改课程”按钮也是同样的设计。
试题维护页面体现出来的问题是信息量大，查找不容易。
修改、浏览消耗用户大量的时间。
根据这个缺点我做出的修改是：
对知识点名称、题型名称、重点等级、参考分数、试题性质、难度、实体精确描述、当前状态这些表头添加效果，效果就是当用户点击该表头的时候，表头下的一列数据会自动排列，默认是升序，再次点击是降序。
这样方便用户的操作，节省大量的时间。
课程知识点浏览页面。
对于课程在知识点浏览，同样存在信息量大的问题，我参照教科书的目录，做出了如下修改：
针对知识点名称如：
绪论我对绪论添加一个动作，当点击“绪论”的时候，可以展开绪论的所有章节。
其章也是同样的效果。
这样修改使用户操作更有目的性。
同样节省了时间，后台的管理员也没有那么大的操作量。
4功能的实现
4.1课程浏览的UI设计
此操作可以实现的是：
以“成本管理会计”课程为例点击“删除课程信息”按钮出现的是“确认删除成本管理会计吗？
”而不是“确认删除该课程吗？
”并且光标默认在取消的按钮上，这样就防止了一些连带操作，不会出现点击“删除课程信息”时不注意按了回车键，导致课程被误删。
图4.1
图4.1-a图4.1-b
实现代码：
<
scripttype="
text/javascript"
>
functionvalidate（name）{
if（confirm（"
确认要删除"
+name+"
吗？
"
））{
}
else{
returnfalse;
这是在函数中做出的修改。
TD>
3<
/TD>
<
成本管理会计<
&
nbsp;
课程描述暂无<
FORMaction=EditSubject.actionmethod=post>
INPUTtype=hiddenvalue=23
name=sid>
INPUTtype=hiddenvalue=成本管理会计name=sname>
INPUTtype=hidden
value=0name=substate>
INPUTtype=submitvalue=修改课程信息name=submit>
/FORM>
FORMonsubmit="
returnvalidate（'
成本管理会计'
）"
action=DeleteSubject.action
method=post>
INPUTtype=hiddenvalue=23name=sid>
INPUTtype=submitvalue=删除课程信息name=submit>
根据要求，作者在这里写出了“成本管理会计”修改的代码。
实现了点击“删除课程信息”按钮出现的忘记已选课程和连带操作导致的按回车按钮直接删除课程的问题。
4.2试题维护页面的UI设计
由于修改的表头比较多，我就以“难度”这一列为例子。
如图4.2-1原来版本的表头是固定的，由于课程比较多用户查找比较繁琐。
通过设计，此操作实现了点击“难度”这一表头，难度这一列可以对难度等级进行升序、降序排列。
图4.2-2大大节省了查找的时间。
图4.2-1图4.2-2
//开始排序num根据第几列排序aord逆序还是顺序
startArray:
function（aord,num）{
varafterSort=this.sortMethod（this.T2Arr,aord,num）;
//排序后的二维数组传到排序方法中去
this.array2Td（num,afterSort）;
//输出
},
//将受影响的行和列转换成二维数组
_td2Array:
function（）{
vararr=[];
for（vari=（this.startRow-1）,l=0;
i<
（this.endRow）;
i++,l++）{
arr[l]=[];
for（varn=0;
n<
this.rows[i].cells.length;
n++）{
arr[l].push（this.rows[i].cells[n].innerHTML）;
}
returnarr;
//根据排序后的二维数组来输出相应的行和列的innerHTML
array2Td:
function（num,arr）{
this.colClassSet（num,this.selectClass）;
for（vari=（this.startRow-1）,l=0;
this.Tags.length;
this.rows[i].cells[n].innerHTML=arr[l][n];
//传进来一个二维数组，根据二维数组的子项中的w项排序，再返回排序后的二维数组
sortMethod:
function（arr,aord,w）{
//vareffectCol=this.getColByNum（whichCol）;
arr.sort（function（a,b）{
x=killHTML（a[w]）;
y=killHTML（b[w]）;
x=x.replace（/,/g,'
'
）;
y=y.replace（/,/g,'
switch（isNaN（x））{
casefalse:
returnNumber（x）-Number（y）;
break;
casetrue:
returnx.localeCompare（y）;
}）;
arr=aord==0?
arr:
arr.reverse（）;
/*-----------------------------------*/
functionaddEventListener（o,type,fn）{
if（o.attachEvent）{o.attachEvent（'
on'
+type,fn）}
elseif（o.addEventListener）{o.addEventListener（type,fn,false）}
else{o['
+type]=fn;
functionhasClass（element,className）{
varreg=newRegExp（'
（\\s|^）'
+className+'
（\\s|$）'
returnelement.className.match（reg）;
functionaddClass（element,className）{
if（!
this.hasClass（element,className））
{
element.className+="
"
+className;
functionremoveClass（element,className）{
if（hasClass（element,className））{
element.className=element.className.replace（reg,'
'
varBind=function（object,fun）{
returnfunction（）{
returnfun.apply（object,arguments）;
//去掉所有的html标记
functionkillHTML（str）{
returnstr.replace（/<
[^>
]+>
/g,"
}
以上是对表头实现点击以后对数据排序的代码。
4.3课程知识点浏览页面的UI设计
之前版本的知识点浏览是把所有的知识点全部展开，这样容易产生视觉疲劳，而且容易出现错误，因为每章的知识点名称都相似。
本功能实现的是点击章节名称，可以在下方展开和收起该章节的详细知识点，如图4.3-1类似教科书的目录，用户可以单独的查找相关课程。
如图4.3-1
如图4.3-2
此操作实现的是表头章节的关于旗下章节的展开和收起。
类似教科书的目录。
/script>
-->
scriptsrc="
js/jquery-1.4.1.js"
type="
//$（"
td:
gt（4）"
）选择td元素中序号大于4的所有td元素
//$（"
ll（4）"
）选择td元素中序号小于4的所有的td元素
$（function（）{
$（"
.child1"
）.hide（）;
#parent1"
）.toggle（function（）{
）.fadeIn（）;
},function（）{
）.fadeOut（）;
}）;
.child2"
#parent2"
.child3"
#parent3"
},function（
升级会员 