《Web技术应用与开发》课程设计报告

江南大学教育学院

课程设计报告

课程名称 Web技术与开发

课题名称中国旅游论坛

专业教育技术系

班级教育技术06级 02 班

学号 **

姓名 **

指导教师 **老师

2009年6月6日

一．课程设计目的

课程设计是一项重要的实践性教学环节，在教师的指导下，以学生为中心，充分调动学生的积极性和能动性，重视学生自学能力的培养。

《Web技术应用与开发》是为教育技术学本科专业开设的专业选修课程，课程的主要目标是要求学生掌握基本的Web应用程序开发和设计的流程及相关的技术技能。本课程在讲解相关理论知识的基础上，按照一定的组织原则和现有实验条件安排了一定数量的实验，通过这些实验使学生初步掌握开发和设计Web应用程序的基本方法和基本技能。然而由于这些实验是分时分批按一定的技术种类和实验目的实施的，固然可以有目的地训练和培养学生某个方面技能，但明显的不连续性使学生不能从整体上把握如何系统地开发和设计一个完整Web应用程序。通过本课程设计可以较好地解决这个问题。

通过本课程设计可以使学生充分认识开发和设计Web应用程序的的重要性和复杂性，充分了解Web应用程序的设计和开发的基本过程，掌握常用的Web开发技术，充分把握各项技术的特点和应用领域以及各项技术之间的相互关系，进一步体会各项技术在Web应用程序中地位和作用从而对各种技术有比较清醒的认识，在此基础上习得Web开发技术平台的选择能力。

二．课程设计内容与目标

课题名称：用户注册界面设计

设计目标：利用HTML\CSS\ JavaScript技术制作简洁及交互功能比较强的页面

设计方法：网页制作工具配合相关技术（如HTML、CSS、JavaScript等）

设计要求：利用Web应用程序的客户端开发技术（包括HTML、CSS、JavaScript、BOM、DHTML、XML等）设计一个符合要求的Web应用程序界面，并在此界面的基础上实现用户交互功能的设计，达到Web应用程序可用性和易用性目标。

三．系统分析与设计：

1.总体分析：系统要实现的功能是有效性判断以及相关对象之间的关联关系，涉及到程序的算法，Web技术中的对象的认识；

（1）整体风格

（2）系统所要实现的功能：用户交互功能

（3）控间间的逻辑关系

（4）程序算法

（5）客户端开发技术中对象的认识

2．设计：本课程设计时间为2周，实际有效天数为10天。具体时间安排如下：

1. 第1天：收集资料、准备开发平台和技术、酝酿表单的功能和有关控件的数据

2. 第2天：表单控件设计

3. 第3天：表单外观设计

4. 第4~6天：表单用户交互功能逻辑设计

5. 第7天：Web表单应用程序的调试、修整、完善与定稿

模块划分、内容结构如何组织的方法，对一个Web程序设计的影响是很大的，有效的规划可以为Web程序设计增加美感。其它的模块则有一定的联系性，以下是我Web程序设计的组织框架。

但是所有的模板其并非是层级关系——即一层一层的点下去，他们可以通过导航栏上的链接转到其它WEB程序设计上，由此可形成一个具有Web程序设计的模式，因此这些模块之间可以实现无顺序关系，却仍能感受到该Web程序设计是一个很条理。

3.界面设计：

有效性和交互性设计：

数字输入框的数字有效性；

特定内容的文本框输入的有效性；

四．模块的实现与调试

1．模块的实现：

模块系统可以直接深入到站点及其Web程序设计的所有内容，将Web程序设计中的有效数据采集出来（而不仅是Web程序设计或链接），并保持数据之间的逻辑关系。例如对一个外部西湘旅游息站点，采集系统可以将其每个教育信息的标题、正文、作者、日期等信息单独采集出来，分别作为字段存储在系统中，并无缝组合形成自身的Web程序设计信息。Web程序设计具有强大的批量设置功能，可以显示文章标题、文章作者、文章来源、内容分页方式、配色风格、版面设计模板等信息。

Web程序设计是计算机综合处理图形图像、文字、音频和视频等多种信息及其存储与传输的技术，可以分为Web程序设计硬件技术和Web程序设计技术两大部分。Web程序设计素材的收集与制作，即对文本、图像、动画、声音以及视频影像等各种类型的Web程序设计素材的收集准备与制作，就可以自己构建一个对制作本科教学课件方便而有效的素材库。

另外，在一些电子出版物中有很多优秀的Web程序设计素材，平时应注意收集和整理，这也是提高制作速度与Web程序设计素材库质量的有效途径。以上我们所说的都是素材的采集，接下来我们就要整理素材和进行素材编辑，这样在制作课件时将这些素材输出，就能又快又好地制作出精美的课件。

2．模块的调试：

对所设计的作品进行调试是十分重要的，在制作Web程序设计的过程中可以通过调试的方法查找模块存在的不足，以便更正。我刚开始做Web程序设计的时候没有要合理使用层和表格，也或许是为图方便曾经大量使用层，当做好Web程序设计进行调试时，发现所有的层都走了样，整个Web程序设计几乎残破不堪，后来我重新使用表格才得到了我想要的结果，也是那时候我才发现表格用起来也不是那么麻烦。

3．模块代码：

定义CSS样式，也就是网页样式。

/* CSS Document */

td{

font:normal normal normal 20px "新宋体";

border-width:medium; /*文字边框样式*/

border-top:2px inset #33FF00;

border-right: 2px inset #33FF00;

border-left:2px inset #33FF00;

border-bottom:2px inset #33FF00;

/*border:10px #009900;*/

padding:10px ;

margin:auto}

.label1{ /*字体*/

font:oblique normal bold 48px "新宋体";

color:#000099}

.label2 { /*字体*/

font-size:large;

font-family:"宋体";

background-image:url(images/img1.jpg);

}

.p1{ /*三个问题的样式*/

font:normal normal bold 20px "新宋体";

color:#000099}

.tablestyle{

border-width:thick; /*表格边框样式*/

border-top:8px outset #006600;

border-right: 4px outset #006600;

border-left:4px outset #006600;

border-bottom:4px outset #006600;

border-color:#0000CC;

border-style:double;}

利用HTML语言安排控件

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

＜html xmlns="http://www.w3.org/1999/xhtml"＞

＜head＞

＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /＞

＜title＞中国旅游网＜/title＞

＜link rel="stylesheet" href="style.css" type="text/css"＞

＜/head＞

＜body class="label2"＞

＜form id="form1" ＞

＜table align="center" class="tablestyle"＞＜tr＞＜th＞＜td＞＜table＞

＜tr align="center"＞＜td width="419"＞＜font class="label1"＞中国旅游论坛＜/font＞＜/td＞

＜/tr＞

＜tr＞＜td width="278"＞用户名：＜input type="text" name="use" id="usename" title="请输入用户名,可以输入英文、汉字和字母，最长30个字节,格式为“X00”－“X99”，X可以是任意字母的大小写" ＞＜br /＞

＜hr /＞

证件号码:＜input type="text" name="num" id="number" title="请输入证件号码,可以输入英文、汉字和字母" ＞＜/td＞

＜/tr＞

＜tr＞＜td＞＜font class="p1"＞您最希望前往的旅游地区？＜/font＞＜/td＞＜/tr＞

＜tr＞＜td＞＜input type="radio" name="radio1" id="xhl" value="陕西" onclick="chooseradio();return true;"/＞陕西

＜input type="radio" name="radio1" id="xbj" value="北京" onclick="chooseradio();return true;" /＞北京

＜input type="radio" name="radio1" id="xxz" value="西藏"onclick="chooseradio();return true;" /＞西藏＜br /＞

＜hr /＞

＜input type="radio" name="radio1" id="xhn" value="海南" onclick="chooseradio();return true;"/＞海南

＜input type="radio" name="radio1" id="xsc" value="四川" onclick="chooseradio();return true;"/＞四川

＜input type="radio" name="radio1" id="xsh" value="上海" onclick="chooseradio();return true;"/＞上海

＜/td＞＜/tr＞

＜tr＞＜td＞＜font class="p1"＞您最希望所选旅游地区获得的旅游项目？＜/font＞＜/td＞＜/tr＞

＜tr＞＜td＞＜input type="radio" name="radio2" id="qm" value="骑马" disabled /＞骑马

＜input type="radio" name="radio2" id="ps" value="爬山" disabled /＞爬山

＜input type="radio" name="radio2" id="yy" value="游泳" disabled /＞游泳＜br /＞

＜hr /＞

＜input type="radio" name="radio2" id="hx" value="滑雪" disabled /＞滑雪

＜input type="radio" name="radio2" id="ms" value="美食" disabled /＞美食

＜input type="radio" name="radio2" id="sb" value="散步" disabled /＞散步

＜/td＞＜/tr＞

＜tr＞＜td＞＜font class="p1"＞您平时的兴趣爱好？＜/font＞＜/td＞＜/tr＞

＜tr＞＜td＞＜input type="checkbox" name="checkbox1" id="c1" value="看书" onclick="choosecheck(1);return true"/＞看书

＜input type="checkbox" name="checkbox1" id="c2" value="上网" onclick="choosecheck(2);return true"/＞上网

＜input type="checkbox" name="checkbox1" id="c3" value="下棋" /＞下棋

＜input type="checkbox" name="checkbox1" id="c4" value="看报" /＞看报

＜input type="checkbox" name="checkbox1" id="c5" value="篮球" /＞篮球

＜input type="checkbox" name="checkbox1" id="c6" value="聊天" /＞聊天

＜/td＞＜/tr＞

＜tr＞＜td＞＜font class="p1"＞您的家庭住址？＜/font＞＜/td＞＜/tr＞

＜tr＞＜td＞省/市: ＜select name="select" id="select1" style="color:#3169B5;" onchange="choosepla();return true;"＞

＜option value="0" selected="selected"＞＜/option＞

＜option value="1"＞湖南省＜/option＞

＜option value="2"＞上海市＜/option＞

＜option value="3"＞浙江省＜/option＞＜/select＞

县/市：

＜select id="select2" title="选择所在县/市" style="color:#3169B5;" ＞

＜option selected="selected"＞＜/option＞

＜/select＞

＜/td＞＜tr＞

＜tr＞＜td＞＜font class="p1"＞请说说您的旅游感想＜/font＞＜/td＞＜/tr＞

＜tr＞＜td＞＜textarea cols="60" name="t1" id="beizu" rows="8"title="请填写备注内容,可以输入英文、汉字和字母"＞＜/textarea＞＜/td＞＜/tr＞

＜tr＞＜td align="center"＞＜input type="submit" value="提交" title="提交注册" onClick="submitit();"style="color:#FF0000;"＞

＜input type="reset" value="重置" title="重新设置"＞＜/td＞＜/tr＞

＜/table＞＜/td＞＜/th＞＜th＞＜td valign="top"＞＜img src="images/1.jpg" width="200" height="200" id="pic" onload="setTimeout('chT(1)',1000)" /＞＜hr/＞

＜input name="submit2" type="button" onclick="chT1()" value="开始" /＞

＜input name="submit1" type="button" onclick="chT2();" value="停止" /＞＜/td＞＜hr/＞

＜/th＞

＜/form＞

＜/body＞

＜/html＞

JavaScript交互功能的实现

＜script language="javascript"＞

var imgs=new Array();

var n=0;

var isif=1;

for(i=1;i＜5;i++)

{

imgs[i]=new Image();

imgs[i].src="images/"+i+".jpg";

}

var arr_Ln_Check="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

function LoginName(){

var j=1;

var k=0;

var l=0;

var t=0;

var v=0;

if(document.mainBody.loginName.value != ""){

if(document.mainBody.loginName.value.length==3){

for(l=0;l ＜ arr_Ln_Check.length;l++){

if(document.mainBody.loginName.value.charAt(0)==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";}

}

function chechmima() //证件号码判断

{

var getv=document.form1.number.value;

alert("证件号码不能为空，请重新输入！");

if(getv=="")

{

alert("证件号码不能为空，请重新输入！");

document.form1.number.focus();

return false;

}

for(var i=0;i＜getv.length;i++)

{

var ischar=getv.charAt(i);

if(!(ischar＞="0" && ischar＜="9"))

{

alert("证件号码只能由数字组成！请重新输入！");

document.form1.number.select();

return false;

}

function chT(num) //变换图片

{

if(num==1 && isif==1)

{

n++;

if(n＞4) n=1;

document.all("pic").src=imgs[n].src;

}

function chT1()

{

isif=1;

setTimeout('chT(1)',1000);

}

function chT2()

{

isif=0;

}

function choosecheck(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;}

}

else if(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;}

}

else if(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;}

}

function chooseradio()

{

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").disabled=false;document.all("sb").disabled=false;}

if(document.all("xsc").checked) {

document.all("qm").disabled=false;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("xsh").checked) {

document.all("qm").disabled=true;document.all("ps").disabled=true;

document.all("yy").disabled=false;document.all("hx").disabled=true;

document.all("ms").disabled=false;document.all("sb").disabled=false;}

}

function choosepla()

{

var snum1=new Array("长沙市","株洲市");

var snum2=new Array("浦东区","崇明区");

var snum3=new Array("杭州市","舟山群岛");

var num=document.all("select1").options(document.all("select1").selectedIndex).value;

var tem=" ";

var xx=document.all("select2").lastChild.value;

for(j=0;j＜=xx;j++)

{

document.all("select2").options.remove(1);

}

if(num==1)

{

for(i=1;i＜6;i++)

{ tem=snum1[i-1];

var opton=new Option(tem,i);

document.all("select2").options.add(opton);

}

if(num==2)

{

for(i=1;i＜6;i++)

{ tem=snum2[i-1];

var opton=new Option(tem,i);

document.all("select2").options.add(opton);

}

if(num==3)

{

for(i=1;i＜5;i++)

{ tem=snum3[i-1];

var opton=new Option(tem,i);

document.all("select2").options.add(opton);

}

function checkyhm()

{

if(document.form1.usename.value=="")

{

alert("用户名不能为空，请重新输入！");

document.form1.usename.focus();

}

function submitit()

{

if(document.all("usename").value==""){alert("用户名不能为空!");document.all("usename").focus();return false;}

if(document.all("number").value==""){alert("证件号码不能为空!");document.all("number").focus();return false;}

if(document.all("xhl").checked==false && document.all("xbj").checked==false&& document.all("xsh").checked==false&& document.all("xxz").checked==false&& document.all("xsc").checked==false&& document.all("xhn").checked==false){alert("请选择您最希望前往的旅游地区！");return false;}

if(document.all("qm").checked==false && document.all("ps").checked==false&& document.all("yy").checked==false&& document.all("hx").checked==false&& document.all("ms").checked==false&& document.all("sb").checked==false){alert("请选择您最希望所选旅游地区获得的旅游项目？");return false;}

if(document.all("c1").checked==false && document.all("c2").checked==false&& document.all("c3").checked==false&& document.all("c4").checked==false&& document.all("c5").checked==false&& document.all("c6").checked==false){alert("请选择您平时的兴趣爱好？");return false;}

var ss ="用户名："+document.all("usename").value+"\n";

ss +="证件号码"+document.all("number").value+"\n";

if(document.all("xhl").checked)ss+="最希望前往的旅游地区：黑龙江"+"\n";

if(document.all("xbj").checked)ss+="最希望前往的旅游地区：北京"+"\n";

if(document.all("xxz").checked)ss+="最希望前往的旅游地区：西藏"+"\n";

if(document.all("xhn").checked)ss+="最希望前往的旅游地区：海南"+"\n";

if(document.all("xsc").checked)ss+="最希望前往的旅游地区：四川"+"\n";

if(document.all("xsh").checked)ss+="最希望前往的旅游地区：上海"+"\n";

if(document.all("qm").checked)ss+="最希望所选旅游地区获得的旅游项目：骑马"+"\n";

if(document.all("ps").checked)ss+="最希望所选旅游地区获得的旅游项目：爬山"+"\n";

if(document.all("yy").checked)ss+="最希望所选旅游地区获得的旅游项目：游泳"+"\n";

if(document.all("hx").checked)ss+="最希望所选旅游地区获得的旅游项目：滑雪"+"\n";

if(document.all("ms").checked)ss+="最希望所选旅游地区获得的旅游项目：美食"+"\n";

if(document.all("sb").checked)ss+="最希望所选旅游地区获得的旅游项目：散步"+"\n";

if(document.all("c1").checked)ss+="平时的兴趣爱好：看书"+"\n";

if(document.all("c2").checked)ss+="平时的兴趣爱好：上网"+"\n";

if(document.all("c3").checked)ss+="平时的兴趣爱好：下棋"+"\n";

if(document.all("c4").checked)ss+="平时的兴趣爱好：看报"+"\n";

if(document.all("c5").checked)ss+="平时的兴趣爱好：篮球"+"\n";

if(document.all("c6").checked)ss+="平时的兴趣爱好：聊天"+"\n";

ss +="家庭住址："+document.all("select1").options(document.all("select1").selectedIndex).innerText+" "+document.all("select2").options(document.all("select2").selectedIndex).innerText+"\n";

ss+="备注为："+document.all("beizhu").value+"\n"+"\n";

//ss +="备注内容："+document.form1.beizhu.value+"\n"+"\n";

ss +="如要提交，请选择确定！要重新填表，请选择取消！";

var flag=confirm(ss);

if(flag)

{document.all("form1").submit();}

else{document.all("form1").reset();document.all("usename").focus();}

/*if(flag)

{

document.form1.submit();

}

else {document.form1.reset();document.all("usename").focus();}*/

}

＜/script＞

五．心得与体会

刚拿到web课程设计时，我的心里充满了不安，因为我似乎对于这类程序语言的科目天生有一种不灵敏感，再者以前上课时我的web学的并不是特别好，再加上过了一个暑假，我好像把原来仅剩的一点知识也都还给老师了。为此我特意到图书馆借了几本有关web的书。

这次课程设计给我最深的体会是办事之前应当做一个系统的计划，才能实现时间的合理利用。办事态度不认真对我是最大的教训，我再做图片处理的时候就常因为对图片大几厘米或小几厘米不太在意，以为相差不了多少，结果把它放在Dreamweaver里面时才发现那么一点小差距会使整个Web程序设计显得很难看。其实不光在图片处理上，办所有的事，我都应该保持一颗严谨的心，才能最大限度的节约时间。

Web程序设计作为一门综合的跨学科的交叉技术,它的研究涉及到计算机硬件，Web程序设计和计算机体系结构，图象处理，语音处理，数字信号处理，通信技术等多方面技术.Web程序设计是教育技术学专业一门必修课程。一些基础知识也在向其他专业渗透，逐渐成为各专业大学生需要了解和掌握的一门知识.Web程序设计课程的设置和发展随着Web程序设计的日新月异和互联网的发展其内容正在不断的充实和完善.本课程纲要在教学实践中，根据计算机软硬件的配置不同或知识的更新可做一些部分变动,但基本内容可保持不变；本课程的内容比较多，学生需要掌握的知识也比较多，但本课程的课时太少，因此我觉得学校应该开设更多的Web程序设计课程尤其是实践方面的课。

六．参考文献

1. 吉根林、崔海源《web程序设计》（第二版）电子工业出版社 2005.8

相关推荐

《Web技术应用与开发》课程设计报告

专栏推荐