網頁制作課程設計報告總結_第1頁
網頁制作課程設計報告總結_第2頁
網頁制作課程設計報告總結_第3頁
網頁制作課程設計報告總結_第4頁
網頁制作課程設計報告總結_第5頁
已閱讀5頁，還剩9頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

谷加林：主頁、留言板、主頁動態效果的代碼編寫協助所有組員完成代碼的編寫杜春吉：主頁設計、留言板設計、總體排版、協助所有組員完成設計。蔡旺：注冊網頁代碼編寫和學校風貌網頁設計及相關資料收集處理。

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

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml">Flash—js//首頁焦點圖特特效$(function(){ varsWidth=$(".flash").width();//獲取焦點圖的寬度（顯示面積） varlen=$(".flashulli").length;//獲取焦點圖個數 varindex=0; varpicTimer; //以下代碼添加數字按鈕和按鈕后的半透明長條 varbtn="<divclass='btn'>"; for(vari=0;i<len;i++){ btn+="<span>"+"</span>"; } btn+="</div>" $(".flash").append(btn); $(".flash.btnBg").css("opacity",0.5); //為數字按鈕添加鼠標滑入事件，以顯示相應的內容 $(".flash.btnspan").mouseenter(function(){ index=$(".flash.btnspan").index(this); showPics(index); }).eq(0).trigger("mouseenter"); //本例為左右滾動，即所有li元素都是在同一排向左浮動，所以這里需要計算出外圍ul元素的寬度 $(".flashul").css("width",sWidth*len); //鼠標滑上焦點圖時停止自動播放，滑出時開始自動播放 $(".flash").hover(function(){ clearInterval(picTimer); },function(){ picTimer=setInterval(function(){ showPics(index); index++; if(index==len){index=0;} },3000);//此3000代表自動播放的間隔，單位：毫秒 }).trigger("mouseleave"); //顯示圖片函數，根據接收的index值顯示相應的內容 functionshowPics(index){ varnowLeft=-index*sWidth;//根據index值計算ul元素的position $(".flashul").stop(true,false).animate({"left":nowLeft},500);//通過animate()調整ul元素滾動到計算出的position $(".flash.btnspan").removeClass("on").eq(index).addClass("on");//為當前的按鈕切換顯示效果 }});Scroll--js//圖片滾動調用方法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); //循環所需要的元素 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); //滾動 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); }); });};網站簡介作用：介紹網站概況，用文字介紹網站戰略、業務、團隊、案例的具體情況。頁面設計簡約但不簡單，淺色背景為主。界面截圖如下：頁面部分代碼如下：<divclass="about-us"><h1><center>南京工程學院概況</center></h1><p>南京工程學院坐落于歷史文化名城南京，是江蘇省屬普通高校，是全國應用型本科院校專門委員會主任委員單位，全國服務特需碩士專業學位研究生培養單位聯盟副理事長單位和中國產學研促進會常務理事單位，也是國家“卓越工程師教育培養計劃”首批試點高校和國家“CDIO工程教育模式改革研究與實踐”試點高校之一和江蘇省協同創新中心培育建設單位。</p>。</p><p>今后一段時期，學校明確提出了“圍繞一個目標、狠抓兩個創建、突出三大重點、實施五大戰略”的發展思路，加快提升辦學實力、辦學水平和品牌特色，為早日把學校建成特色鮮明的高水平應用型工程大學而努力奮斗！</p></div>會員注冊 作用：用戶的注冊和登錄。界面截圖如下：頁面部分代碼如下：<head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>無標題文檔</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("您好，密碼不能為空且長度不能少于6個字符!");valid=false;}else { if(p1!=p2){window.alert("您好，密碼與確認密碼不一致!");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>確認密碼：<inputtype="password"name="psw2"><br><p><inputtype="submit"value="確認注冊"> <ahref="denglu.asp">返回</a></Form></body></html>登陸界面作用：實現已注冊的用戶能登錄。頁面截圖如下：頁面部分代碼如下：<head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>無標題文檔</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">注冊</a></Form></body></html>客戶留言頁的實現作用：將用戶的留言提交到數據庫（同上），表名為db4.mdb。界面截圖如下：客戶留言頁面部分代碼如下：<html><head><title>簡易留言板</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>留言標題:<%=rs(2)%></lh><br><lh>留言內容:<%=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>實驗結果網頁頁面美觀，動態頁面無異常，運行穩定，包含常見的HTML常見元素課程設計總結首先，對于自己的課設，我覺得還有很多值得改進的地方，這個表格層次分明，工整簡潔，游客在瀏覽的時候不會覺得繁瑣。我的網頁區域可以在兩邊加上其他的內容，比如增加一些超鏈接和鉚點，增加一些按鈕與游客進行互動，或者可以在頁面嵌入幾首歌曲，使頁面看起來內容更加豐富。其次，在這次課設中，我體會到了CSS比HT

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論