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

中国旅游论坛——李志红，17010602211江南大学教育学院课程设计报告课程名称Web技术与开发课题名称中国旅游论坛专业教育技术系班级教育技术06级02班学号1701060221姓名李志红指导教师倪玉兴老师2009年6月6日中国旅游论坛——李志红，17010602212一．课程设计目的课程设计是一项重要的实践性教学环节，在教师的指导下，以学生为中心，充分调动学生的积极性和能动性，重视学生自学能力的培养。《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）客户端开发技术中对象的认识中国旅游论坛——李志红，170106022132．设计：本课程设计时间为2周，实际有效天数为10天。具体时间安排如下：①.第1天：收集资料、准备开发平台和技术、酝酿表单的功能和有关控件的数据②.第2天：表单控件设计③.第3天：表单外观设计④.第4~6天：表单用户交互功能逻辑设计⑤.第7天：Web表单应用程序的调试、修整、完善与定稿模块划分、内容结构如何组织的方法，对一个Web程序设计的影响是很大的，有效的规划可以为Web程序设计增加美感。其它的模块则有一定的联系性，以下是我Web程序设计的组织框架。但是所有的模板其并非是层级关系——即一层一层的点下去，他们可以通过导航栏上的链接转到其它WEB程序设计上，由此可形成一个具有Web程序设计的模式，因此这些模块之间可以实现无顺序关系，却仍能感受到该Web程序设计是一个很条理。3.界面设计：有效性和交互性设计：数字输入框的数字有效性；特定内容的文本框输入的有效性；四．模块的实现与调试1．模块的实现：模块系统可以直接深入到站点及其Web程序设计的所有内容，将Web程序设计中的有效数据采集出来（而不仅是Web程序设计或链接），并保持数据之间的逻辑关系。例如对一个外部西湘旅游息站点，采集系统可以将其每个教育信息的标题、正文、作者、日期等信息单独采集出来，分别作为字段存储在系统中，并无缝组合形成自身的Web程序设计信息。Web程序设计具有强大的批量设置功能，可以显示文章标题、文章作者、文章来源、内容分页方式、配色风格、版面设计模板等信息。Web程序设计是计算机综合处理图形图像、文字、音频和视频等多种信息及其存储与传输的技术，可以分为Web程序设计硬件技术和Web程序设计技术两大部分。Web程序设计素材的收集与制作，即对文本、图像、动画、声音以及视频影像等各种类型的Web程序设计素材的收集准备与制作，就可以自己构建一个对制作本科教学课件方便而有效的素材库。另外，在一些电子出版物中有很多优秀的Web程序设计素材，平时应注意收集和整理，这也是提高制作速度与Web程序设计素材库质量的有效途径。以上我们所说的都是素材的采集，接下来我们就要整理素材和进行素材编辑，这样在制作课件时将这些素材输出，就能又快又好地制作出精美的课件。中国旅游论坛——李志红，170106022142．模块的调试：对所设计的作品进行调试是十分重要的，在制作Web程序设计的过程中可以通过调试的方法查找模块存在的不足，以便更正。我刚开始做Web程序设计的时候没有要合理使用层和表格，也或许是为图方便曾经大量使用层，当做好Web程序设计进行调试时，发现所有的层都走了样，整个Web程序设计几乎残破不堪，后来我重新使用表格才得到了我想要的结果，也是那时候我才发现表格用起来也不是那么麻烦。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}.label1{/*字体*/font:obliquenormalbold48px新宋体;color:#000099}.label2{/*字体*/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//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/title中国旅游网/title中国旅游论坛——李志红，17010602215linkrel=stylesheethref=style.csstype=text/css/headbodyclass=label2formid=form1tablealign=centerclass=tablestyletrthtdtabletralign=centertdwidth=419fontclass=label1中国旅游论坛/font/td/trtrtdwidth=278 用户名：inputtype=textname=useid=usenametitle=请输入用户名,可以输入英文、汉字和字母，最长30个字节,格式为“X00”－“X99”，X可以是任意字母的大小写br/hr/证件号码:inputtype=textname=numid=numbertitle=请输入证件号码,可以输入英文、汉字和字母/td/tr/trtrtdfontclass=p1您最希望前往的旅游地区？/font/td/trtrtd inputtype=radioname=radio1id=xhlvalue=陕西onclick=chooseradio();returntrue;/陕西inputtype=radioname=radio1id=xbjvalue=北京onclick=chooseradio();returntrue;/北京inputtype=radioname=radio1id=xxzvalue=西藏onclick=chooseradio();returntrue;/西藏br/hr/ inputtype=radioname=radio1id=xhnvalue=海南onclick=chooseradio();returntrue;/海南inputtype=radioname=radio1id=xscvalue=四川onclick=chooseradio();returntrue;/四川inputtype=radioname=radio1id=xshvalue=上海onclick=chooseradio();returntrue;/上海/td/trtrtdfontclass=p1您最希望所选旅游地区获得的旅游项目？/font/td/trtrtd inputtype=radioname=radio2id=qmvalue=骑马disabled/骑马inputtype=radioname=radio2id=psvalue=爬山disabled/爬山inputtype=radioname=radio2id=yyvalue=游泳disabled/游泳br/hr/ inputtype=radioname=radio2id=hxvalue=滑雪disabled/滑雪inputtype=radioname=radio2id=msvalue=美食disabled/美食inputtype=radioname=radio2id=sbvalue=散步disabled/散步/td/trtrtdfontclass=p1您平时的兴趣爱好？/font/td/trtrtd inputtype=checkboxname=checkbox1id=c1value=看书onclick=choosecheck(1);returntrue/看书inputtype=checkboxname=checkbox1id=c2value=上网onclick=choosecheck(2);returntrue/上网中国旅游论坛——李志红，17010602216inputtype=checkboxname=checkbox1id=c3value=下棋/下棋inputtype=checkboxname=checkbox1id=c4value=看报/看报inputtype=checkboxname=checkbox1id=c5value=篮球/篮球inputtype=checkboxname=checkbox1id=c6value=聊天/聊天/td/trtrtdfontclass=p1您的家庭住址？/font/td/trtrtd省/市:selectname