网制作课程设计报告总结

引言课程设计是一块“试金石”，是加深对自我能力认识的重要途径。大学的学习 基本上都是理论的接受，而缺少能力的熟练与加强，我们缺少的并不是知识的储 备，而是能力的积蓄。但由于大学特殊的学习模式和环境， 缺少实际情景的见证 和实践活动的参与，同学之间缺乏必要的交流和比对，使得我们很多时候很难对 自身的能力有明晰的认识，能力缺陷往往被遮蔽起来。而课程设计“前所未有” 地考验着我们的知识迁移和运用能力、适应环境的能力、应对突发事件的能力以 及如何处理人际关系等各方面的能力，为我们提供了不可多得的见证的机遇和平 台。通过这次课设，我们可以新的思考维度有效发现自己能力上的缺陷。综合运用所学理论知识、方法和技能，开展实际工作，巩固专业技能，培养和强化社会 沟通能力；树立新的发展起点和目标，通过课设，认识社会的需要，发现自身的 差距，培养面对现实的正确态度和独立分析解决问题的基本能力；培养良好的职业精神，适应毕业以后的实际工作需求。四、课程设计目的掌握HTML格式语言，能使用网页设计工具，理解动态页面技术的工作原理三、课程设计任务（1）用HTML或网页设计工具设计网页（2） 用IE浏览器浏览所设计的网页，要求页面美观，包含常见的HTML格式（3）包含动态页面技术（有脚本代码或后台逻辑代码）四、设计方案选择：选择动态页面和静态页面相结合，取长补短。设计分工：谷加林：主页、留言板、主页动态效果的代码编写协助所有组员完成代码的编写 杜春吉：主页设计、留言板设计、总体排版、协助所有组员完成设计。蔡旺：注册网页代码编写和学校风貌网页设计及相关资料收集处理。姜文粹：登录网页代码编写和学校简介网页设计及协助素材收集整理。伯呦胆 IKTTTTim aFTWIfflDWGY瞬珂声讯VbUJIM.iad学狡育舁AbfH.Jmww xnpfq M工祀孚昆M于厉左立业主如审. JL铤应宅卫榊氐茂专T吕瓮北珈辭哑土甘业芋直加主曙和吃!Mira吒単2时EftFiHSifi& SW s 1ftSr H国工程嘶芦茁亦阪B亟 工口口工段IKHMEGE fnF力何谕=OSitt轴伍.卑暨TW粗.=Wfla7 F4G目臥JW延片创.亮出三鼻裁 旻也退r tns.J5tt.皿咧肉：茂L如:木干切EM孔 却叵整序嘲邮雅戸期殴沪宜 IWI畔*TOH 轴耳!Si闻填讯那抽fTHMT 供？幵粒的辑stys划twIUUI/M甘盼林工KIWITMJDSKftKzIIanwiSTEDLiWE钿砲丸工raiflS2SJMrtT工子昨期斗“mH 丽!2CJHWH黄mt厅年b?h器丹行宓酒aLuhwi学生春五、具体设计内容作用：美化网站，提高网页的浏览效率，页面以简单风格为主，背景以白色为主。 页面右上角边有网站导航条，背景以半透明白色为主。冲该页面可以看出，该网 站主要是宣传学校，所以要简洁大方，不要太花哨。界面如图所示囁鮎丙字畑瞬 妙闵虫血 凤廉展示打YH.G昭W4F! ijyC4flFWCE主页面部分代码如下:头部v!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Tran siti on al/ENhttp:/www.w3.org/TR/xhtml1/DTD/xhtml1-tra nsitio nal.dtdvmeta http-equiv=C onten t-Type con te nt=text/html; charset=utf-8 /南京工程学院欢迎您v/script 网站首页vphomev/li学校概况vpaboutv/li新闻资讯vpn ewsv/li风貌展示vpviewsv/li招贤纳士j oin&n bsp;usv/li小组介绍c onn ectv/li/导航菜单/divvscript type=text/javascript$(docume nt).ready(fu nctio n()$(.scroll).imgscroll(speed: 40,/图片滚动速度amo unt: 0,/图片滚动过渡时间width: 1,/图片滚动步数dir: left / left或up向左或向上滚动);); 友情链接 v/lixli class=fl 友情链接 v/av/livli class=fl 友情链接 网站首页 |学校概况 | 新闻资讯 | 风貌展示 |在线留言 |人才招聘 |联系我们 学校地址：&n bsp;江宁区科技园弘景大道1号v/htmlFlashjs/首页焦点图特特效$(fun ctio n() var sWidth = $(.flash).width(); /获取焦点图的宽度(显示面积)var len = $(.flash ul li).le ngth; / 获取焦点图个数var in dex = 0;var picTimer;以下代码添加数字按钮和按钮后的半透明长条var btn = ;for(var i=0; i len; i+) btn += + ;btn += $(.flash).appe nd(bt n);$(.flash .bt nBg).css(opacity,0.5);为数字按钮添加鼠标滑入事件，以显示相应的内容$(.flash .bt n spa n).mousee nter(f un cti on() in dex = $(.flash .bt n spa n).i ndex(this); showPics(i ndex);).eq(0).trigger(mousee nter);本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计 算出外围ul元素的宽度$(.flash ul).css(width,sWidth*le n);鼠标滑上焦点图时停止自动播放，滑出时开始自动播放$(.flash).hover(fu nctio n() clearI nterval(picTimer);,fun ctio n() picTimer = setI nterval(fu nctio n() showPics(i ndex);in dex+;if(i ndex = len) in dex = 0;,3000); /此3000代表自动播放的间隔，单位：毫秒).trigger(mouseleave);显示图片函数，根据接收的in dex值显示相应的内容function showPics(i ndex) var nowLeft = -index*sWidth; / 根据 index 值计算 ul 元素的 position $(.flash ul).stop(true,false).animate(left:nowLeft,500); / 通过 animate() 调整ul元素滚动到计算出的position$(.flash .btn span).removeClass(on).eq(index).addClass(on);为当前 的按钮切换显示效果)；Scroll-js/图片滚动 调用方法 imgscroll(speed: 30,amount: 1,dir: up);$.fn.imgscroll = fun cti on( o)var defaults = speed: 40,amount: 0,width: 1,dir: left;o = $.exte nd(defaults, o);return this.each(fu nctio n()var _li = $(li, this);_li.pare nt().pare nt().css(overflow: hidde n, positi on: relative); /div_li.parent().css(margin: 0, padding: 0, overflow: hidden, position: relative, list-style: non e); ul_li.css(positi on: relative, overflow: hidde n); /liif(o.dir = left) _li.css(float: left);/初始大小var _li_size = 0;for(var i=0; i _li_size) _li_scroll = 0;_li.parent().css(o.dir = left ? left : -_li_scroll : top :-_li_scroll );_li_scroll += o.width;_li.parent().animate(o.dir = left ? left : -_li_scroll : top : -_li_scroll , o.am oun t);/开始var move = setl nterval(f un cti on() goto(); , o.speed);_li.pare nt().hover(fu nctio n()clearI nterval(move);,fun ctio n()clearI nterval(move);move = setI nterval(fu nctio n() goto(); , o.speed);););网站简介作用：介绍网站概况，用文字介绍网站战略、业务、团队、案例的具体情况 页面设计简约但不简单，浅色背景为主。界面截图如下：两站ms阮新園罔迅hon-aboilnarni_ h A IMHTTirilLQFTFri-IWMjnQY南京工程学院概况生育里儘為事*里烛和中&产#g保奉址奇理事昼1苏 占鹹 ” 15总工程*1疝竜怕好H划”方抵论占蘆拥口鹼叱am工軽族 彳ef赛与刁跌-a巨禹百疋一 1童齧W区乂补中匚玛亓建圧里位孑村是应两阶州别盘倉?馬丽机秋郃此|丽屯衍訓的胃運示E11S工辛一 4 PifllMfl等辛科宇科啊團匚屯上也辞醤科于椁干零m年窝計且建 而EL 2001# fft.I干国帝快工空即的冉中工业宇栈斗入芋应寿！？rvi柿需萼百科芋代的曲畀是屁.帝医工宇立|阖济玄宇00歼干丄就5年刨殖的聃 设机师目I朝P电力就耳专h宇枝的射昌曇岂lit干ig牝片的：；1苏誉立券也蔦强工业车.业宇杜.号召LK巨年的外学闻趴即啓氏剧京工昨令诧P.R1为一护以工学対于的甚塩工睥口用母靛義.守科害曲疤雷工机 竪济软 管課札 X、厚 乩.丄科tlh期问咋即f 卡捺iW+lEliL农 出九 忙二壮丼和啊1*砒.由鶴5能旳吾丼鞍R才评円聲白勺展劭“WiS 砒丑比強耳妁芯带5-fllfftFsfi柜疤务f曲了刊学订敌矿 的扣*理艺越板总會咋.产手州眸分竄工艮前遥羞蛋如S诗启界的脣明 特亠单创头晟翅瑕fl靜宇悵相孟弔居曲二塢孕福赚探.学联占地而很总Kooffh音矣世诅面秤.刖多厅平万* . 于江宁丸宇塀即蚪蘭?tBW油曲加於征的主态*肌餐仕土敘E：j占Jfi355G快园四華凤:iN曲，Sfln宇帑阵宪出是浜书诸寸苗理爼之地.匸宇 桂能贪产EK近盜尼元！敎宇科号说升E.H近弓E元肯共威企址投A2.53t 生均越莹诽fifliim说音2万击丑 在全国窩昶中电列帕尊学校有車鬥宕业掘牛；含方円120134 .宇警苕全日割在校主2 53万非-C且口工强融十号业H社主冊AM=.fflZ3B00 A. H中百门故什n曲丄.扛中員总富出叫昔的故上I占35用卞叶右皐吩四袴誌璘囱梢!吉宝2人订曲卉冃丸出帀隸曲中Jt範弓爲*A辽 示首段洽容恥丄江芥.if勺阳工甩”膏年孚木辛臥肌訂，：齐我活直工F拿才带4丄.归祎人謝2/, =4垢才齐削折固如.牛迁苏普氓常萃 刊用 W 工亓遷爭事吨世再护工旦口. 辽和i宀亘工直忧再it年宵干英用垢忌人生,目廁.芋齐押有*咽疽規峙邑专:lb H * 呱静色町土!】討斷担存右业建设炬酊话1L此這敕厨話肓就丫卓坦H划网咒兗无竺人:遠越耳审R：门赧厨樓式汝25乜耳:術咀IJ.上萱尸聲设 畔乂占比曲绅 SPlEffl机屯栏制真入才给尊植式剖宅府址住丄外=6机被些人才培界属生刨斷工曲娶毘学牡規自普宴恵St设芋豔竹 耆迢 鹿对宇目胆典*省换高爭芋校也苇朝学団IU个I Sffii学栈已曲砒雷更履幡品遷程!幷占攜品i Lta:-许規i P： ILil.器占韶堀於品朝助3餌 主牡也特邑和憚栋观禺 M中国匣空泄加鞅柚5羽.连誼在羸齐齿為拎I含南总丈学.未障尢貰|佯芒第三. tr+E同二富转序邑麗一：升車以天十虽口国富站专诫臬二算址1,占自和卡成卑世囚喷.羊校IB扯皓严葛审惦工悝愼朮贞用鱼.才绘苒目如，齐宜芋帚伴建设-罠科之強判炉仁 昔带寡也立1叮-卜、極內兀习之UI * -wit .-s 7 n .- -THlI -I Wn-jK +Jt!#T-n Wl -kfe- A *- d： -C f 1TK-Wi -S- i 4e Ji itt .=.lTn Ii-*FM- 4TJ4Ea W-3d 4nZ=jL-页面部分代码如下：南京工程学院概况 v/centervp南京工程学院坐落于历史文化名城南京，是江苏省属普通高校，是全国应用 型本科院校专门委员会主任委员单位，全国服务特需硕士专业学位研究生培养单 位联盟副理事长单位和中国产学研促进会常务理事单位，也是国家“卓越工程师教育培养计划”首批试点高校和国家“ CDIO工程教育模式改革研究与实践”试 点高校之一和江苏省协同创新中心培育建设单位。vp今后一段时期，学校明确提出了“围绕一个目标、狠抓两个创建、突出三大 重点、实施五大战略”的发展思路，加快提升办学实力、办学水平和品牌特色， 为早日把学校建成特色鲜明的高水平应用型工程大学而努力奋斗！v/p会员注册作用：用户的注册和登录。fflPS ：1I褂码：lI确认蓄田：LI界面截图如下：畫况衲岳汛阻|刖断昭葩士 出膨页面部分代码如下：vmeta http-equiv=Content-Type content=text/html; charset=gb2312 /无标题文档function check()var valid=true;var n=docume nt.myform1. un ame.value;var p仁docume nt.myform1.psw1.value;var p2=docume nt.myform1.psw2.value;if(n=)window.alert(您好，用户名不能为空!);valid=false;else if(p1.le ngthvbody backgrou nd=67665d70jw1dslia4zpowj.jpg用 户名：密码：确认密码： 返回 v/Form登陆界面作用：实现已注册的用户能登录。页面截图如下：KVflK-IMnmrn OfTKinKJUMTT他KSm寸咽刑fidioriaiwaMAHijda u cmm用户名:;I密码：an注册页面部分代码如下：vmeta http-equiv=Content-Type content=text/html; charset=gb2312 / 无标题文档vForm action=ya nzhe ng.asp method=post vp用户名：密码：&n bsp ;&n bsp;注册 客户留言页的实现作用：将用户的留言提交到数据库（同上），表名为db4.mdb。 界面截图如下：kaiimg FffnrmcorrmimiUKvJUMA dw 眈* W id ifffw miiR?tSW 44Ki ififlOSffl.艮g 眾 相酣H 讪的卄昭hiarnflrwiwanjan an ranNKl-w BA.: Wfl .啤.tA HHSif-V 4BRS4WTA :砂 H*皿皿吨 Z=WM-H客户留言页面部分代码如下：简易留言板vmeta http-equiv=C on te nt-Type con te nt=text/html;charset=gb2312%Dim db,strC onnSet db=Server.CreateObject(ADODB.Co nn ectio n) strCo nn=Provider=Microsoft .J et.OLEDB.4.0;DataSource=Server.M apPath(db4.mdb)db.Ope n strC onnset rs=server.createobject(adodb.recordset)dim sqlsql=Select * From liuya nbanrs.ope n sql,db,3rs.pagesize=10if request(page) the nepage=ci nt(request(page)if epagers.pageco unt the n epage=rs.pageco untelseepage=1end ifrs.AbsolutePage=epage% 留言板 v/p&n bsp;v%=rs(0)% 楼 留言人：vbr 留言标题:留言内容:vp昵称&n bsp ;&n bsp;&n bsp ;&n bsp;&n bsp;&n bsp ;&n bsp;vp&n bsp ;&n bsp ;&n bsp;rows=6vtextarea maxlength=1500 name=textarea cols=50 wrap=hard v/pv/formv/bodyv/html六、实验结果网页页面美观，动态页面无异常，运行稳定，包含常见的HTML常见元素七、课程设计总结首先，对于自己的课设，我觉得还有很多值得改进的地方，这个表格层次分明， 工整简洁，游客在浏览的时候不会觉得繁琐。我的网页区域可以在两边加上其他 的内容，比如增加一些超链接和铆点，增加一些按钮与游客进行互动，或者可以 在页面嵌入几首歌曲，使页面看起来内容更加丰富。其次，在这次课设中，我体会到了 CSS比HTML更强大的功能。CSS文件的就 像对象与方法里面的方法，把原本冗长的代码分离开，看起来清晰明了。易于对 代码进行修改，只需修改 CSS中的属性即可对网页进行改造和维护；还可以在 程序上完成一些组件依赖CSS进行安全的保护，使有心得到代码技术的人不那 么容易得手。当然这只是为了对程序员的创造性劳动进行一定的保护，不能根本的解决代码易手的可能。经过一周的课程设计，我对我们网络工程专业领域的知识有了更深，更广的认识。以前在课堂上了解的知识太狭窄，只把目光停留在仅学的几门专业课上， 而且仅有的几门专业课学的也不是很精通，我用大把大把的时间来上网，游戏。通过这次课设，我不仅在专业知识上有很大的收获。 而且在对待学习以及生活的 态度上更有了意想不到的收获。首先，在专业知识上有了全面的认识， 进一步增强是实验创造的能力。 作为 工科生，我们学习的内容比较抽象，在学校实验的机会不是很多。这一次，我们 通过理论联系实际，对平日里的知识有了更深的理解。 不仅锻炼了我的实际动手 能力，还培养了我做事情的耐心。其次，增强了同学间的互相帮助及团队合作意识。 这次实习环境很开放，我 们整个小组在一起分析探讨，自从上了大二，由于大家选课有些不同，平日里很 少见面，这几天的课设拉近了我们之间的距离， 我们一起讨论专业知识，互相帮 助。讨论过程中，我们有一个组长，大家互相合作，遇到分歧时，大家一起商量， 听从组长的安排，大家一起努力，最后很快就完成了任务。最后，强化了我心中的责任感的问题。 我是一个喜欢为所欲为的人，随性做 事。在机房课设的几天，虽然很累，但我坚持下来了。感觉要是在平时肯定坚持 不下来了，那时候，感觉我要是走了，我的工作谁来做呢？这就是责任吧！最后非常感谢夏老师、毛老师对于我们的帮助，你们辛苦了！没有你们的帮 助我们就没有今天的进步。八、参考文献TCP/IP协议族清华大学出版社Internet技术课程设计指导书毛云贵 编Web系统与技术南京大学出版社