《《Web技术应用与开发》课程设计报告.doc》由会员分享，可在线阅读，更多相关《《Web技术应用与开发》课程设计报告.doc（12页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、江南大学教育学院课 程 设 计 报 告课程名称 Web技术与开发 课题名称 中国旅游论坛 专 业 教育技术系 班 级 教育技术06级 02 班 学 号 姓 名 李志红 指导教师 倪玉兴老师 2009年6月6日一课程设计目的课程设计是一项重要的实践性教学环节，在教师的指导下，以学生为中心，充分调动学生的积极性和能动性，重视学生自学能力的培养。Web技术应用与开发是为教育技术学本科专业开设的专业选修课程，课程的主要目标是要求学生掌握基本的Web应用程序开发和设计的流程及相关的技术技能。本课程在讲解相关理论知识的基础上，按照一定的组织原则和现有实验条件安排了一定数量的实验，通过这些实验使学生初步掌握
2、开发和设计Web应用程序的基本方法和基本技能。然而由于这些实验是分时分批按一定的技术种类和实验目的实施的，固然可以有目的地训练和培养学生某个方面技能，但明显的不连续性使学生不能从整体上把握如何系统地开发和设计一个完整Web应用程序。通过本课程设计可以较好地解决这个问题。通过本课程设计可以使学生充分认识开发和设计Web应用程序的的重要性和复杂性，充分了解Web应用程序的设计和开发的基本过程，掌握常用的Web开发技术，充分把握各项技术的特点和应用领域以及各项技术之间的相互关系，进一步体会各项技术在Web应用程序中地位和作用从而对各种技术有比较清醒的认识，在此基础上习得Web开发技术平台的选择能力。
3、二课程设计内容与目标课题名称：用户注册界面设计设计目标：利用HTMLCSS JavaScript技术制作简洁及交互功能比较强的页面设计方法：网页制作工具配合相关技术（如HTML、CSS、JavaScript等）设计要求：利用Web应用程序的客户端开发技术（包括HTML、CSS、JavaScript、BOM、DHTML、XML等）设计一个符合要求的Web应用程序界面，并在此界面的基础上实现用户交互功能的设计，达到Web应用程序可用性和易用性目标。三系统分析与设计：1.总体分析：系统要实现的功能是有效性判断以及相关对象之间的关联关系，涉及到程序的算法，Web技术中的对象的认识；（1）整体风格（2）
4、系统所要实现的功能：用户交互功能（3）控间间的逻辑关系（4）程序算法（5）客户端开发技术中对象的认识2设计：本课程设计时间为2周，实际有效天数为10天。具体时间安排如下：. 第1天：收集资料、准备开发平台和技术、酝酿表单的功能和有关控件的数据. 第2天：表单控件设计. 第3天：表单外观设计. 第46天：表单用户交互功能逻辑设计. 第7天：Web表单应用程序的调试、修整、完善与定稿模块划分、内容结构如何组织的方法，对一个Web程序设计的影响是很大的，有效的规划可以为Web程序设计增加美感。其它的模块则有一定的联系性，以下是我Web程序设计的组织框架。但是所有的模板其并非是层级关系即一层一层的点下
5、去，他们可以通过导航栏上的链接转到其它WEB程序设计上，由此可形成一个具有Web程序设计的模式，因此这些模块之间可以实现无顺序关系，却仍能感受到该Web程序设计是一个很条理。3.界面设计：有效性和交互性设计：数字输入框的数字有效性；特定内容的文本框输入的有效性；四模块的实现与调试1模块的实现：模块系统可以直接深入到站点及其Web程序设计的所有内容，将Web程序设计中的有效数据采集出来（而不仅是Web程序设计或链接），并保持数据之间的逻辑关系。例如对一个外部西湘旅游息站点，采集系统可以将其每个教育信息的标题、正文、作者、日期等信息单独采集出来，分别作为字段存储在系统中，并无缝组合形成自身的Web
6、程序设计信息。Web程序设计具有强大的批量设置功能，可以显示文章标题、文章作者、文章来源、内容分页方式、配色风格、版面设计模板等信息。Web程序设计是计算机综合处理图形图像、文字、音频和视频等多种信息及其存储与传输的技术，可以分为Web程序设计硬件技术和Web程序设计技术两大部分。Web程序设计素材的收集与制作，即对文本、图像、动画、声音以及视频影像等各种类型的Web程序设计素材的收集准备与制作，就可以自己构建一个对制作本科教学课件方便而有效的素材库。另外，在一些电子出版物中有很多优秀的Web程序设计素材，平时应注意收集和整理，这也是提高制作速度与Web程序设计素材库质量的有效途径。以上我们所
7、说的都是素材的采集，接下来我们就要整理素材和进行素材编辑，这样在制作课件时将这些素材输出，就能又快又好地制作出精美的课件。2模块的调试：对所设计的作品进行调试是十分重要的，在制作Web程序设计的过程中可以通过调试的方法查找模块存在的不足，以便更正。我刚开始做Web程序设计的时候没有要合理使用层和表格，也或许是为图方便曾经大量使用层，当做好Web程序设计进行调试时，发现所有的层都走了样，整个Web程序设计几乎残破不堪，后来我重新使用表格才得到了我想要的结果，也是那时候我才发现表格用起来也不是那么麻烦。3模块代码：定义CSS样式，也就是网页样式。 /* CSS Document */tdfont:
8、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 #;*/padding:10px ;margin:auto.label1 /*字体*/font:oblique normal bold 48px 新宋体;color:#.label2 /*字体*/font-
9、size:large; font-family:宋体; background-image:url(images/img1.jpg);.p1/*三个问题的样式*/font:normal normal bold 20px 新宋体;color:#.tablestyleborder-width:thick;/*表格边框样式*/border-top:8px outset #;border-right: 4px outset #;border-left:4px outset #;border-bottom:4px outset #;border-color:#0000CC;border-style:dou
10、ble; 利用HTML语言安排控件中国旅游网中国旅游论坛 用户名：证件号码: 您最希望前往的旅游地区？ 陕西北京西藏 海南四川上海您最希望所选旅游地区获得的旅游项目？ 骑马爬山游泳 滑雪美食散步您平时的兴趣爱好？ 看书上网下棋看报篮球聊天您的家庭住址？省/市: 湖南省 上海市 浙江省 县/市： 请说说您的旅游感想 JavaScript交互功能的实现var imgs=new Array();var n=0;var isif=1;for(
11、i=1;i5;i+)imgsi=new Image();imgsi.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;
12、l+)if(document.mainBody.loginName.value.charAt(0)=arr_Ln_Check.charAt(l)v=1;break;if(v)for(j=1;j3;j+)for(k=0;k10;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;elsed
13、ocument.mainBody.tiShi4.value=错误！格式为“X00”“X99”，X是任意大小写字母！;document.mainBody.tiShi4.style.color=red;elsedocument.mainBody.tiShi4.value=错误！格式为“X00”“X99”，X是任意大小写字母！;document.mainBody.tiShi4.style.color=red;elsedocument.mainBody.tiShi4.value=错误！格式为“X00”“X99”，X是任意大小写字母！;document.mainBody.tiShi4.style.col
14、or=red;function chechmima()/证件号码判断var getv=document.form1.number.value;alert(证件号码不能为空，请重新输入！);if(getv=)alert(证件号码不能为空，请重新输入！);document.form1.number.focus();return false;for(var i=0;i=0 & ischar4)n=1;document.all(pic).src=imgsn.src;function chT1()isif=1;setTimeout(chT(1),1000);function chT2()isif=0;f
15、unction 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=t
16、rue; 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).che
17、cked) 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; docume
18、nt.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).d
19、isabled=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) d
20、ocument.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(y
21、y).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).v
22、alue;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;i6;i+) tem=snum1i-1; var opton=new Option(tem,i); document.all(select2).options.add(opton); if(num=2)for(i=1;i6;i+) tem=snum2i-1;var opton=new Option(tem,i);document
23、.all(select2).options.add(opton); if(num=3)for(i=1;i5;i+) tem=snum3i-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=)ale
24、rt(用户名不能为空!);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).
25、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(请选择您最希望所选旅游地区获得的
26、旅游项目？);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 +=证件号码
27、+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).che
28、cked)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(do
29、cument.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;s