javaweb课程设计报告用户注册界面设计.docx
- 文档编号:12087646
- 上传时间:2023-04-17
- 格式:DOCX
- 页数:20
- 大小:59.85KB
javaweb课程设计报告用户注册界面设计.docx
《javaweb课程设计报告用户注册界面设计.docx》由会员分享,可在线阅读,更多相关《javaweb课程设计报告用户注册界面设计.docx(20页珍藏版)》请在冰豆网上搜索。
javaweb课程设计报告用户注册界面设计
课程设计
Javawe开发课程设计:
论坛系统用户注册界面的设计
设计目的:
设计内容及目标:
定义CSS样式,也就是网页样式。
4
利用HTML语言安排控件5
JavaScript交互功能的实现8
HtmlcssjspJavaScriptjavaweb
一•课程设计目的
课程设计是一项重要的实践性教学环节,在教师的指导下,以学生为
中心,充分调动学生的积极性和能动性,重视学生自学能力的培养。
《JavaWeb技术实践》是为教育技术学本科专业开设的专业选修课程,
课程的主要目标是要求学生掌握基本的JavaWeb应用程序开发和设计的流
程及相关的技术技能。
本课程在讲解相关理论知识的基础上,按照一定的组织原则和现有实验条件安排了一定数量的实验,通过这些实验使学生初步掌握开发和设计JavaWeb应用程序的基本方法和基本技能。
然而由于这些实验是分时分批按一定的技术种类和实验目的实施的,固然可以有目的地训练和培养学生某个方面技能,但明显的不连续性使学生不能从整体上把握如何系统地开发和设计一个完整JavaWeb应用程序。
通过本课程设计
可以较好地解决这个问题。
通过本课程设计可以使学生充分认识开发和设计JavaWeb应用程序的
的重要性和复杂性,充分了解JavaWet应用程序的设计和开发的基本过程,掌握常用的JavaWeb开发技术,充分把握各项技术的特点和应用领域以及各项技术之间的相互关系,进一步体会各项技术在JavaWeb应用程序中地
位和作用从而对各种技术有比较清醒的认识,在此基础上习得JavaWeb开发技术平台的选择能力。
二•课程设计内容与目标
课题名称:
用户注册界面设计
设计目标:
利用HTML\CSS\JavaScript技术制作简洁及交互功能比较强的
页面
设计方法:
网页制作工具配合相关技术(如HTMLCSSJavaScript等)
设计要求:
利用JavaWeb应用程序的客户端开发技术(包括HTMLCSS
JavaScript、BOMDHTMLXML等)设计一个符合要求的JavaWeb
应用程序界面,并在此界面的基础上实现用户交互功能的设计,达到JavaWeb应用程序可用性和易用性目标。
三.系统分析与设计:
1■总体分析:
系统要实现的功能是有效性判断以及相关对象之间的关联关系,涉
及到程序的算法,JavaWeb技术中的对象的认识;
(1)整体风格
(2系统所要实现的功能:
用户交互功能
(3)控间间的逻辑关系
(4)程序算法
(5)客户端开发技术中对象的认识
2.设计:
本课程设计时间为2周,实际有效天数为10天。
具体时间安排如
下:
1.第1天:
收集资料、准备开发平台和技术、酝酿表单的功能和有关控件的数据
2.第2天:
表单控件设计
3.第3天:
表单外观设计
4.第4~6天:
表单用户交互功能逻辑设计
5.第7天:
JavaWeb表单应用程序的调试、修整、完善与定稿
模块划分、内容结构如何组织的方法,对一个JavaWeb程序设计的影
响是很大的,有效的规划可以为JavaWeb程序设计增加美感。
其它的模块
则有一定的联系性,以下是我JavaWeb程序设计的组织框架
但是所有的模板其并非是层级关系一一即一层一层的点下去,他们可以通过
导航栏上的链接转到其它JAVAWEB程序设计上,由此可形成一个具有JavaWeb程序设计的模式,因此这些模块之间可以实现无顺序关系,却仍能感受到该JavaWeb程序设计是一个很条理。
3.界面设计:
有效性和交互性设计:
数字输入框的数字有效性;
特定内容的文本框输入的有效性;
四•模块的实现与调试
1•模块的实现:
模块系统可以直接深入到站点及其JavaWeb程序设计的所有内容,将JavaWeb程序设计中的有效数据采集出来(而不仅是JavaWeb程序设计或链接),并保持数据之间的逻辑关系。
例如对一个外部西湘旅游息站点,采集系统可以将其每个教育信息的标题、正文、作者、日期等信息单独采集出来,分别作为字段存储在系统中,并无缝组合形成自身的JavaWeb程序设计信息。
JavaWeb程序设计具有强大的批量设置功能,可以显示文章标题、文章作者、文章来源、内容分页方式、配色风格、版面设计模板等信息。
JavaWeb程序设计是计算机综合处理图形图像、文字、音频和视频等多种信息及其存储与传输的技术,可以分为JavaWeb程序设计硬件技术和JavaWeb程序设计技术两大部分。
JavaWeb程序设计素材的收集与制作,即对文本、图像、动画、声音以及视频影像等各种类型的JavaWeb程序设计素材的收集准备与制作,就可以自己构建一个对制作本科教学课件方便而有效的素材库。
另外,在一些电子出版物中有很多优秀的JavaWeb程序设计素材,平时应注意收集和整理,这也是提高制作速度与JavaWeb程序设计素材库质量的有效途径。
以上我们所说的都是素材的采集,接下来我们就要整理素材和进行素材编辑,这样在制作课件时将这些素材输出,就能又快又好地制作出精美的课件。
2•模块的调试:
对所设计的作品进行调试是十分重要的,在制作JavaWeb程序设计的过程中可以通过调试的方法查找模块存在的不足,以便更正。
我刚开始做JavaWeb
程序设计的时候没有要合理使用层和表格,也或许是为图方便曾经大量使用层,当做好JavaWeb程序设计进行调试时,发现所有的层都走了样,整个JavaWeb
程序设计几乎残破不堪,后来我重新使用表格才得到了我想要的结果,也是那时
候我才发现表格用起来也不是那么麻烦。
3•模块代码:
定义CSS样式,也就是网页样式
/*CSSDocument*/
td{
font:
normalnormalnormal20px"新宋体";
border-width:
medium;/*文字边框样式*/
border-top:
2pxinset#33FF00;
border-right:
2pxinset#33FF00;
border-left:
2pxinset#33FF00;
border-bottom:
2pxinset#33FF00;
/*border:
10px#009900;*/
padding:
10px;
margin:
auto}
.Iabel1{/*字体*/
font:
obliquenormalbold48px"新宋体";
color:
#000099}
.Iabel2{/*字体*/
font-size:
large;
font-family:
"宋体";
background-image:
url(images/img1.jpg);
}
.p1{/*三个问题的样式*/
font:
normalnormalbold20px"新宋体";
color:
#000099}
.tablestyle{
border-width:
thick;/*表格边框样式*/
border-top:
8pxoutset#006600;
border-right:
4pxoutset#006600;
border-left:
4pxoutset#006600;
border-bottom:
4pxoutset#006600;
border-color:
#0000CC;
border-style:
double;}
利用HTML语言安排控件
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML10Transitional//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
v/tr> id="usename"title="请输入用户名,可以输入英文、汉字和字母,最长30个字节,格式为 “X00”—“X99”,X可以是任意字母的大小写"> 证件号码: 件号码,可以输入英文、汉字和字母"> onclick="chooseradio();returntrue;"/>陕西 onclick="chooseradio();returntrue;"/>北京 "onclick="chooseradio();returntrue;"/>西藏 onclick="chooseradio();returntrue;"/>海南 onclick="chooseradio();returntrue;"/>四川 v/font> disabled/>爬山 disabled/>滑雪 disabled/>美食 disabled/>散步 v/font> (1);returntrue"/>看书 (2);returntrue"/>上网 vselectname="select"id="select1"style="color: #3169B5;"onchange="choosepla();returntrue;"> voptionvalue="3">浙江省v/option>v/select> 县/市: vselectid="select2"title="选择所在县/市"style="color: #3169B5;"> voptionselected="selected"> vtrxtdxfontclass="p1">请说说您的旅游感想 vtrxtdxtextareacols="60"name="t1"id="beizu"rows="8"title="请填写备注内容,可以输入英文、汉字和字母"x/textarea>v/tdx/tr> #FFOOOO;"> v/tablex/tdx/thxthxtdvalign="top"> height="200"id="pic"onload="setTimeout('chT (1)',1000)"/> vinputname="submit1"type="button"onclick="chT2();"value="停止” /x/td> v/th> v/form> v/body> v/html> JavaScript交互功能的实现 vscriptIanguage="javascript"> varimgs=newArray(); varn=0; varisif=1; for(i=1;iv5;i++) { imgs[i]=newlmage(); imgs[i].src="images/"+i+".jpg"; } var arr_Ln_Check="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; functionLoginName(){ varj=1; vark=0; varl=0; vart=0; varv=0; if(document.mainBody.loginName.value! =""){ if(document.mainBody.loginName.value.length==3){ for(l=0;l if(document.mainBody.loginName.value.charAt(O)==arr_Ln_Check.charAt(l)){v=1;break;}} if(v){ for(j=1;j<3;j++){ for(k=0;k<10;k++){ if(document.mainBody.loginName.value.charAt(j)==str_Ps_Check.charAt(k)) {t=t+1;break;} } } if(t==2){document.mainBody.tiShi4.value="输入正确! ";document.mainBody.tiShi4.style.color="green";in_Txt4=1;}else{ document.mainBody.tiShi4.value=‘错误! 格式为“X00”—“X99”, X是任意大小写字母! "; document.mainBody.tiShi4.style.color="red";} }else{ document.mainBody.tiShi4.value=‘错误! 格式为“X00”—“X99”, X是任意大小写字母! "; document.mainBody.tiShi4.style.color="red";} }else{document.mainBody.tiShi4.value="错误! 格式为“X00”—“X99”,X是 任意大小写字母! "; document.mainBody.tiShi4.style.color="red";} } } functionchechmima()//证件号码判断 { vargetv=document.form1.number.value; alert("证件号码不能为空,请重新输入! "); if(getv=="") { alert("证件号码不能为空,请重新输入! "); document.form1.number.focus(); returnfalse; } for(vari=0;i { varischar=getv.charAt(i); if(! (ischar>="0"&&ischar<="9")) { alert("证件号码只能由数字组成! 请重新输入! "); document.form1.number.select(); returnfalse; } } } functionchT(num)/变换图片 { if(num==1&&isif==1) { n++; if(n>4)n=1; document.all("pic").src=imgs[n].src; } } functionchT1() { isif=1; setTimeout('chT (1)',1000); } functionchT2() { isif=0; } functionchoosecheck(num) { if(num==1) { if(document.all("c1").checked) {document.all("c5").disabled=true;document.all("c6").disabled=true;} else {document.all("c5").disabled=false;document.all("c6").disabled=false;} } elseif(num==2) { if(document.all("c2").checked) {document.all("c5").disabled=true;document.all("c6").disabled=true;} else {document.all("c5").disabled=false;document.all("c6").disabled=false;} } elseif(num==3){ if(document.all("c3").checked) {document.all("c3").disabled=true;document.all("c4").disabled=true;} else {document.all("c3").disabled=false;document.all("c4").disabled=false;} } } functionchooseradio() { if(document.all("xhl").checked){ document.all("qm").disabled=false;document.all("ps").disabled=false; document.all("yy").disabled=true;document.all("hx").disabled=false; document.all("ms").disabled=false;document.all("sb").disabled=false;} if(document.all("xbj").checked){ document.all("qm").disabled=true;document.all("ps").disabled=false; document.all("yy").disabled=false;document.all("hx").disabled=true; document.all("ms").disabled=false;document.all("sb").disabled=false;} if(document.all("xxz").checked){ document.all("qm").disabled=false;document.all("ps").disabled=false; document.all("yy").disabled=true;document.all("hx").disabled=false; document.all("ms").disabled=true;document.all("sb").disabled=false;} if(document.all("xhn").checked){ document.all("qm").disabled=true;document.all("ps").disabled=false; document.all("yy").disabled=false;document.all("hx").disabled=true; document.all("ms").d 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。 copyright@ 2008-2022 冰点文档网站版权所有 经营许可证编号:鄂ICP备2022015515号-1 vtrxtdxfontclass="p1">您平时的兴趣爱好? 省/市: