網(wǎng)頁(yè)制作課程設(shè)計(jì)報(bào)告總結(jié)

引言課程設(shè)計(jì)是一塊“試金石”，是加深對(duì)自我能力認(rèn)識(shí)的重要途徑。大學(xué)的學(xué)習(xí)基本上都是理論的接受，而缺少能力的熟練與加強(qiáng)，我們?nèi)鄙俚牟⒉皇侵R(shí)的儲(chǔ)備，而是能力的積蓄。但由于大學(xué)特殊的學(xué)習(xí)模式和環(huán)境，缺少實(shí)際情景的見證和實(shí)踐活動(dòng)的參與，同學(xué)之間缺乏必要的交流和比對(duì)，使得我們很多時(shí)候很難對(duì)自身的能力有明晰的認(rèn)識(shí)，能力缺陷往往被遮蔽起來。而課程設(shè)計(jì)“前所未有”地考驗(yàn)著我們的知識(shí)遷移和運(yùn)用能力、適應(yīng)環(huán)境的能力、應(yīng)對(duì)突發(fā)事件的能力以及如何處理人際關(guān)系等各方面的能力，為我們提供了不可多得的見證的機(jī)遇和平臺(tái)。通過這次課設(shè)，我們可以新的思考維度有效發(fā)現(xiàn)自己能力上的缺陷。綜合運(yùn)用所學(xué)理論知識(shí)、方法和技能，開展實(shí)際工作，鞏固專業(yè)技能，培養(yǎng)和強(qiáng)化社會(huì)溝通能力；樹立新的發(fā)展起點(diǎn)和目標(biāo)，通過課設(shè)，認(rèn)識(shí)社會(huì)的需要，發(fā)現(xiàn)自身的差距，培養(yǎng)面對(duì)現(xiàn)實(shí)的正確態(tài)度和獨(dú)立分析解決問題的基本能力；培養(yǎng)良好的職業(yè)精神，適應(yīng)畢業(yè)以后的實(shí)際工作需求。課程設(shè)計(jì)目的掌握HTML格式語(yǔ)言，能使用網(wǎng)頁(yè)設(shè)計(jì)工具，理解動(dòng)態(tài)頁(yè)面技術(shù)的工作原理三、課程設(shè)計(jì)任務(wù)用HTML或網(wǎng)頁(yè)設(shè)計(jì)工具設(shè)計(jì)網(wǎng)頁(yè)用IE瀏覽器瀏覽所設(shè)計(jì)的網(wǎng)頁(yè)，要求頁(yè)面美觀，包含常見的HTML格式元素包含動(dòng)態(tài)頁(yè)面技術(shù)（有腳本代碼或后臺(tái)邏輯代碼）四、設(shè)計(jì)方案選擇：選擇動(dòng)態(tài)頁(yè)面和靜態(tài)頁(yè)面相結(jié)合，取長(zhǎng)補(bǔ)短。設(shè)計(jì)分工：

谷加林：主頁(yè)、留言板、主頁(yè)動(dòng)態(tài)效果的代碼編寫協(xié)助所有組員完成代碼的編寫杜春吉：主頁(yè)設(shè)計(jì)、留言板設(shè)計(jì)、總體排版、協(xié)助所有組員完成設(shè)計(jì)。蔡旺：注冊(cè)網(wǎng)頁(yè)代碼編寫和學(xué)校風(fēng)貌網(wǎng)頁(yè)設(shè)計(jì)及相關(guān)資料收集處理。

姜文粹：登錄網(wǎng)頁(yè)代碼編寫和學(xué)校簡(jiǎn)介網(wǎng)頁(yè)設(shè)計(jì)及協(xié)助素材收集整理。具體設(shè)計(jì)內(nèi)容作用：美化網(wǎng)站，提高網(wǎng)頁(yè)的瀏覽效率，頁(yè)面以簡(jiǎn)單風(fēng)格為主，背景以白色為主。頁(yè)面右上角邊有網(wǎng)站導(dǎo)航條，背景以半透明白色為主。沖該頁(yè)面可以看出，該網(wǎng)站主要是宣傳學(xué)校，所以要簡(jiǎn)潔大方，不要太花哨。界面如圖所示主頁(yè)面部分代碼如下：頭部

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml">Flash—js//首頁(yè)焦點(diǎn)圖特特效$(function(){ varsWidth=$(".flash").width();//獲取焦點(diǎn)圖的寬度（顯示面積） varlen=$(".flashulli").length;//獲取焦點(diǎn)圖個(gè)數(shù) varindex=0; varpicTimer; //以下代碼添加數(shù)字按鈕和按鈕后的半透明長(zhǎng)條 varbtn="<divclass='btn'>"; for(vari=0;i<len;i++){ btn+="<span>"+"</span>"; } btn+="</div>" $(".flash").append(btn); $(".flash.btnBg").css("opacity",0.5); //為數(shù)字按鈕添加鼠標(biāo)滑入事件，以顯示相應(yīng)的內(nèi)容 $(".flash.btnspan").mouseenter(function(){ index=$(".flash.btnspan").index(this); showPics(index); }).eq(0).trigger("mouseenter"); //本例為左右滾動(dòng)，即所有l(wèi)i元素都是在同一排向左浮動(dòng)，所以這里需要計(jì)算出外圍ul元素的寬度 $(".flashul").css("width",sWidth*len); //鼠標(biāo)滑上焦點(diǎn)圖時(shí)停止自動(dòng)播放，滑出時(shí)開始自動(dòng)播放 $(".flash").hover(function(){ clearInterval(picTimer); },function(){ picTimer=setInterval(function(){ showPics(index); index++; if(index==len){index=0;} },3000);//此3000代表自動(dòng)播放的間隔，單位：毫秒 }).trigger("mouseleave"); //顯示圖片函數(shù)，根據(jù)接收的index值顯示相應(yīng)的內(nèi)容 functionshowPics(index){ varnowLeft=-index*sWidth;//根據(jù)index值計(jì)算ul元素的position $(".flashul").stop(true,false).animate({"left":nowLeft},500);//通過animate()調(diào)整ul元素滾動(dòng)到計(jì)算出的position $(".flash.btnspan").removeClass("on").eq(index).addClass("on");//為當(dāng)前的按鈕切換顯示效果 }});Scroll--js//圖片滾動(dòng)調(diào)用方法imgscroll({speed:30,amount:1,dir:"up"});$.fn.imgscroll=function(o){ vardefaults={ speed:40, amount:0, width:1, dir:"left" }; o=$.extend(defaults,o); returnthis.each(function(){ var_li=$("li",this); _li.parent().parent().css({overflow:"hidden",position:"relative"});//div _li.parent().css({margin:"0",padding:"0",overflow:"hidden",position:"relative","list-style":"none"});//ul _li.css({position:"relative",overflow:"hidden"});//li if(o.dir=="left")_li.css({float:"left"}); //初始大小 var_li_size=0; for(vari=0;i<_li.size();i++) _li_size+=o.dir=="left"?_li.eq(i).outerWidth(true):_li.eq(i).outerHeight(true); //循環(huán)所需要的元素 if(o.dir=="left")_li.parent().css({width:(_li_size*3)+"px"}); _li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone()); _li=$("li",this); //滾動(dòng) var_li_scroll=0; functiongoto(){ _li_scroll+=o.width; if(_li_scroll>_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.amount); } //開始 varmove=setInterval(function(){goto();},o.speed); _li.parent().hover(function(){ clearInterval(move); },function(){ clearInterval(move); move=setInterval(function(){goto();},o.speed); }); });};網(wǎng)站簡(jiǎn)介作用：介紹網(wǎng)站概況，用文字介紹網(wǎng)站戰(zhàn)略、業(yè)務(wù)、團(tuán)隊(duì)、案例的具體情況。頁(yè)面設(shè)計(jì)簡(jiǎn)約但不簡(jiǎn)單，淺色背景為主。界面截圖如下：頁(yè)面部分代碼如下：<divclass="about-us"><h1><center>南京工程學(xué)院概況</center></h1><p>南京工程學(xué)院坐落于歷史文化名城南京，是江蘇省屬普通高校，是全國(guó)應(yīng)用型本科院校專門委員會(huì)主任委員單位，全國(guó)服務(wù)特需碩士專業(yè)學(xué)位研究生培養(yǎng)單位聯(lián)盟副理事長(zhǎng)單位和中國(guó)產(chǎn)學(xué)研促進(jìn)會(huì)常務(wù)理事單位，也是國(guó)家“卓越工程師教育培養(yǎng)計(jì)劃”首批試點(diǎn)高校和國(guó)家“CDIO工程教育模式改革研究與實(shí)踐”試點(diǎn)高校之一和江蘇省協(xié)同創(chuàng)新中心培育建設(shè)單位。</p>。</p><p>今后一段時(shí)期，學(xué)校明確提出了“圍繞一個(gè)目標(biāo)、狠抓兩個(gè)創(chuàng)建、突出三大重點(diǎn)、實(shí)施五大戰(zhàn)略”的發(fā)展思路，加快提升辦學(xué)實(shí)力、辦學(xué)水平和品牌特色，為早日把學(xué)校建成特色鮮明的高水平應(yīng)用型工程大學(xué)而努力奮斗！</p></div>會(huì)員注冊(cè) 作用：用戶的注冊(cè)和登錄。界面截圖如下：頁(yè)面部分代碼如下：<head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>無標(biāo)題文檔</title><ScriptLanguage="JavaScript">functioncheck(){varvalid=true;varn=document.myform1.uname.value;varp1=document.myform1.psw1.value;varp2=document.myform1.psw2.value;if(n==""){window.alert("您好，用戶名不能為空!");valid=false;}elseif(p1.length<6){window.alert("您好，密碼不能為空且長(zhǎng)度不能少于6個(gè)字符!");valid=false;}else { if(p1!=p2){window.alert("您好，密碼與確認(rèn)密碼不一致!");valid=false;} }if(valid)returntrue; returnfalse;}</Script></head><bodybackground="67665d70jw1dslia4zpowj.jpg"><formname="myform1"action="chuli.asp"method="post"onsubmit="javascript:returncheck();">用戶名：<inputtype="text"name="uname"><br>密碼：<inputtype="password"name="psw1"><br>確認(rèn)密碼：<inputtype="password"name="psw2"><br><p><inputtype="submit"value="確認(rèn)注冊(cè)"> <ahref="denglu.asp">返回</a></Form></body></html>登陸界面作用：實(shí)現(xiàn)已注冊(cè)的用戶能登錄。頁(yè)面截圖如下：頁(yè)面部分代碼如下：<head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>無標(biāo)題文檔</title></head><bodybackground="67665d70jw1dslia4zpowj.jpg"><Formaction="yanzheng.asp"method="post"><p>用戶名：<inputtype="text"name="uname"><br>密碼：<inputtype="password"name="psw1"><br></p><p><inputtype="submit"value="登錄">   <ahref="zhuce.asp"target="_self">注冊(cè)</a></Form></body></html>客戶留言頁(yè)的實(shí)現(xiàn)作用：將用戶的留言提交到數(shù)據(jù)庫(kù)（同上），表名為db4.mdb。界面截圖如下：客戶留言頁(yè)面部分代碼如下：<html><head><title>簡(jiǎn)易留言板</title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><styletype="text/css"><!--body{ background-color:#FFFF99; background-image:url(67665d70jw1dslia4zpowj.jpg);}.STYLE2{ font-size:50px; font-weight:bold;}.STYLE3{ font-size:40px; color:#99CC99;}.STYLE5{ font-size:23px; font-weight:bold;}.STYLE6{ font-size:20px; font-weight:bold;}--><%Dimdb,strConn Setdb=Server.CreateObject("ADODB.Connection") strConn="Provider=Microsoft.Jet.OLEDB.4.0;DataSource="&Server.MapPath("db4.mdb") db.OpenstrConnsetrs=server.createobject("adodb.recordset")dimsqlsql="Select*Fromliuyanban"rs.opensql,db,3rs.pagesize=10ifrequest("page")<>""thenepage=cint(request("page"))ifepage<1thenepage=1ifepage>rs.pagecountthenepage=rs.pagecount elseepage=1endifrs.AbsolutePage=epage%></p><palign="center"><spanclass="STYLE3">留言板</span></p><palign="center"> </p><%fori=0tors.pagesize-1ifrs.boforrs.eofthenexitfor%><ul><%=rs(0)%>樓</ul><lh>留言人：<%=rs(1)%></lh><br><lh>留言標(biāo)題:<%=rs(2)%></lh><br><lh>留言內(nèi)容:<%=rs(3)%></lh><br></p><formaction="chulizai.asp"method="post"><p>昵稱<inputtype="text"name="uname">     </p><inputtype="text"name="title">  </p><p>   </p><textareamaxlength="1500"name="textarea"cols="50"rows="6"wrap="hard"></textarea><br> <inputtype="submit"name="submit"value="提交留言"></p></form></body></html>實(shí)驗(yàn)結(jié)果網(wǎng)頁(yè)頁(yè)面美觀，動(dòng)態(tài)頁(yè)面無異常，運(yùn)行穩(wěn)定，包含常見的HTML常見元素課程設(shè)計(jì)總結(jié)首先，對(duì)于自己的課設(shè)，我覺得還有很多值得改進(jìn)的地方，這個(gè)表格層次分明，工整簡(jiǎn)潔，游客在瀏覽的時(shí)候不會(huì)覺得繁瑣。我的網(wǎng)頁(yè)區(qū)域可以在兩邊加上其他的內(nèi)容，比如增加一些超鏈接和鉚點(diǎn)，增加一些按鈕與游客進(jìn)行互動(dòng)，或者可以在頁(yè)面嵌入幾首歌曲，使頁(yè)面看起來內(nèi)容更加豐富。其次，在這次課設(shè)中，我體會(huì)到了CSS比HT