動態(tài)網(wǎng)頁設(shè)計論文-圖文

1、 畢業(yè)設(shè)計（論文）題目專業(yè)：班級：學(xué)生：指導(dǎo)教師： 摘要在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類的活動。它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分。現(xiàn)今的社會，人們已經(jīng)離不開了網(wǎng)絡(luò)，網(wǎng)絡(luò)已經(jīng)成為人與人之間交流的一種形式，它能夠把事情的復(fù)雜化轉(zhuǎn)為簡單化，擺脫了時間和空間的限制。網(wǎng)站為消費者提供了一個網(wǎng)絡(luò)生活空間，通過其網(wǎng)頁展示了企業(yè)介紹、企業(yè)榮譽、產(chǎn)品介紹、招商信息、加盟程序、留言等一系列內(nèi)容的介紹。瀏

2、覽者不僅可以利用留言板經(jīng)濟而又快捷地與外界進行各種信息的溝通，也可以直接在網(wǎng)上申請加盟。本論文還介紹了網(wǎng)頁的結(jié)構(gòu)分析和具體功能實現(xiàn)，網(wǎng)頁的界面和運作方式，盡力模擬近代網(wǎng)頁普遍性形式，成為一個完整的動態(tài)網(wǎng)站關(guān)鍵字Dreamweaver；Php；PhpMyAdmin；動態(tài)網(wǎng)頁 目錄TOC o 1-5 h z HYPERLINK l bookmark4 o Current Document 引言1 HYPERLINK l bookmark6 o Current Document 網(wǎng)頁制作概述12.1網(wǎng)頁的類型錯誤!未定義書簽。靜態(tài)頁面12.1.2動態(tài)頁面錯誤!未定義書簽。2.2網(wǎng)頁開發(fā)技術(shù)錯誤!未定

3、義書簽。2.3網(wǎng)頁布局錯誤!未定義書簽。網(wǎng)頁布局的基本概念錯誤!未定義書簽。2.3.2網(wǎng)頁布局方法錯誤!未定義書簽。2.3.2網(wǎng)頁布局技術(shù)錯誤!未定義書簽。2.4網(wǎng)頁配色錯誤!未定義書簽。TOC o 1-5 h z HYPERLINK l bookmark8 o Current Document 2.5網(wǎng)頁設(shè)計流程2 HYPERLINK l bookmark10 o Current Document 動態(tài)網(wǎng)頁開發(fā)環(huán)境和技術(shù)2 HYPERLINK l bookmark12 o Current Document 了解Dreamweaver開發(fā)工具2Php語言基礎(chǔ)知識23.3開發(fā)環(huán)境介紹錯誤!未定義

4、書簽。設(shè)計及具體代碼實現(xiàn)錯誤!未定義書簽。 HYPERLINK l bookmark14 o Current Document 網(wǎng)頁結(jié)構(gòu)設(shè)計3 HYPERLINK l bookmark16 o Current Document 創(chuàng)建數(shù)據(jù)庫3 HYPERLINK l bookmark18 o Current Document 主要模塊的代碼實現(xiàn)5 HYPERLINK l bookmark20 o Current Document 注冊代碼的實現(xiàn)5 HYPERLINK l bookmark22 o Current Document 登陸及退出登錄代碼的實現(xiàn)7 HYPERLINK l bookmar

5、k24 o Current Document 4.3.3留言代碼的實現(xiàn)9 HYPERLINK l bookmark26 o Current Document 運行測試11 HYPERLINK l bookmark28 o Current Document 4.4.1注冊11 HYPERLINK l bookmark32 o Current Document 登陸12 HYPERLINK l bookmark34 o Current Document 4.4.3留言13 HYPERLINK l bookmark36 o Current Document 遇到的問題及解決方法14結(jié)束語16致謝-1

6、7-參考文獻-18-3. 引言網(wǎng)頁是網(wǎng)站信息發(fā)布與表現(xiàn)的一種主要形式。因此要實現(xiàn)一個網(wǎng)站，必須了解網(wǎng)頁制作的相關(guān)知識。較流行的開發(fā)工具有：Dreamweaver，PhpPhpMyAdmin。網(wǎng)頁制作要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺上的愉悅感。因此在網(wǎng)頁創(chuàng)作的時候就必須將網(wǎng)站的整體設(shè)計與網(wǎng)頁設(shè)計的相關(guān)原理緊密結(jié)合起來。網(wǎng)站設(shè)計是將策劃案中的內(nèi)容、網(wǎng)站的主題模式，以及結(jié)合自己的認(rèn)識通過藝術(shù)的手法表現(xiàn)出來；網(wǎng)頁制作通常就是將網(wǎng)頁設(shè)計師所設(shè)計出來的設(shè)計稿，按照W3C規(guī)范用html語言將其制作成網(wǎng)頁格式。網(wǎng)頁制作概述2.1.1靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁區(qū)別通常，網(wǎng)頁可以分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。靜態(tài)網(wǎng)

7、頁頁面上的內(nèi)容和格式一般不會改變，只有網(wǎng)管可根據(jù)需要更新頁面。動態(tài)網(wǎng)頁的內(nèi)容隨著用戶的輸入和互動而有所不同，或者隨著用戶，時間，數(shù)據(jù)修正等而改變。網(wǎng)頁上的內(nèi)容也可以由用戶通過使用客戶端描述語言(JavaScript,JScript,Actionscript,)來改變。當(dāng)然更普遍的是由服務(wù)器端的描述語言(Perl,PHP,ASP,JSP,ColdFusion,等)進行編譯，從而對動態(tài)網(wǎng)頁的內(nèi)容進行改變。無論是客戶端還是服務(wù)器端的改變都需要使用較為復(fù)雜的應(yīng)用軟件。隨著信息技術(shù)的更加專業(yè)化，越來越明顯的傾向表明，網(wǎng)頁設(shè)計和網(wǎng)站的發(fā)展會逐漸成為兩個不同的領(lǐng)域。網(wǎng)頁是借助于美術(shù)構(gòu)圖與程序互動、動畫等方式

8、向大眾推廣相關(guān)信息的媒體，所以網(wǎng)頁設(shè)計包括了幾大部分：版面構(gòu)圖程序開發(fā)網(wǎng)站內(nèi)容管理2.5網(wǎng)頁設(shè)計流程網(wǎng)頁設(shè)計是一個互動的過程，不僅是設(shè)計師構(gòu)思設(shè)計就可以完成的。從客戶提出需求到最終發(fā)布，期間需要客戶與設(shè)計人員共同參與協(xié)商才可以，具體流程如下：首先，獲取客戶需求和資料。在設(shè)計網(wǎng)站頁面之前，設(shè)計師需要知道客戶的需求，從而確定客戶建立網(wǎng)站的目的。客戶提出網(wǎng)站需求是非常重要的一個環(huán)節(jié)。沒有詳細的需求，設(shè)計人員無法憑空進行設(shè)計制作。在這個步驟中，雙方的溝通與交流是非常重要的。其次，確定網(wǎng)站內(nèi)容。設(shè)計人員選擇適合自己的圖像編輯軟件、動畫制作軟件和網(wǎng)頁制作軟件進行網(wǎng)頁的初步設(shè)計，這中間可能還需要和客戶進行多

9、次溝通才能達到客戶滿意的效果。在具體設(shè)計時，設(shè)計人員應(yīng)該為網(wǎng)站定位一個主題，從而保證所有網(wǎng)頁都圍繞這個主題進行設(shè)計制作，保證風(fēng)格的和諧統(tǒng)一。然后，申請域名和空間。使用該方法能夠有效同步管理文件。還可以通過FTP軟件連接到服務(wù)器空間上，然后上傳發(fā)布文件。最后，后期維護。一般靜態(tài)網(wǎng)站上傳后，如果客戶方?jīng)]有專業(yè)人員維護，這樣就需要設(shè)計人員從客戶方獲取新資料進行定期或不定期的更新。如果是動態(tài)網(wǎng)站，設(shè)計人員需要負責(zé)培訓(xùn)客戶方如何使用后臺管理，這樣客戶就可以自己通過后臺管理添加信息，設(shè)計人員只要及時更正動態(tài)網(wǎng)站的錯誤即可。動態(tài)網(wǎng)頁開發(fā)環(huán)境和技術(shù)3.1了解Dreamweaver開發(fā)工具 4.1網(wǎng)頁結(jié)構(gòu)設(shè)計c

10、ss+div結(jié)構(gòu)目前用的人最多，框架結(jié)構(gòu)現(xiàn)在很少有人使用了，而表格結(jié)構(gòu)目前用的人也不多，但并不意味著已經(jīng)被淘汰，它也有DIV所不能取代的效果一一方便快速的布局，只要不是經(jīng)常改動的小部分就可以用表格。DIV可以與表格一起用，大布局用DIV，而小地方就用表格，效果會很好。比如本次論文所涉及的網(wǎng)頁就用到了表格與css+div相結(jié)合的思想，其上、下、左、右和中間分別是一個單獨的div模塊。具體框架結(jié)構(gòu)如圖4-1。EH-A1R:小畋rar諂圖4-1網(wǎng)頁框架圖4.2創(chuàng)建數(shù)據(jù)庫本論文設(shè)計的網(wǎng)頁，所用到的數(shù)據(jù)庫test是通過數(shù)據(jù)庫管理工具一PhpMyAdmin做的，具體創(chuàng)建過程就不在這介紹了。其包含兩個表分別

11、為：liuyan、test2,如圖4-2和4-3。3Bw.ffrtflfli.0岷1事:平回-ttAHiao-rstrc.fe昭存.首王呼壬hT昶v*4Mfirv4MuffinUX131n#嚴(yán)2*3F1W4J21t_土超H平世&尹口舉HiHMBiaafc-益曲亡：miIu-|T|:liluyani-inna?fihwo囲國叵|圍計啊匸re仃EPWffl.fJtPRiyffl(土空虹忌卜也邛也UCRtATEtfEW圖4-2信息存儲表1本表主要存儲游客名、游客留言內(nèi)容和留言時間等數(shù)據(jù)。:栩I莽RTEIDO1丘様曲貽總王Mil樂”Y-id坪亡迪訴llkrdmartmimanrQK-z1粵23冋拿冊質(zhì)

12、樂電載點岳手也卡4幾睫FIt睥W刁怦201fr*-07zC2hElgi打ntajiinlaQ匚yk2H-.C4-：K23冋ftfl-fiMS+Llt+f!*左0時畫尹LEIM:201H：07OMX3?JSIkR2DTT4齊WBA78TM口加2DTM3聞zX1比而石K22tN計WLUflS吁庁聽VHH章甌1*kn4iqhl?MCnf4Td-血麗zX&M!JK22twi+WLliFISZhSEMAKWW-擊胃udlU4du伍|hmaoms-o?XGR2D計耳也冋!aD吐HuiJ卻Hlfdusuuthf-2D1D-DOD7丿X7畤廠再23坤計理11冋雜OFHf.HTWffl+-吃逞CD至虜印2010

13、03(117i_-mXEK23OFfirIS事力M計|1才：E4E的WUaE昱EtRm2D1EM0DT聲X9舵至R2E計VHSfi.的厲町It事堆哥牯UltFHKrf2D1MX3D7XW弧菱飛*23TWGt審.土JFMH昱相腹，2D1MSD7X11tttffR23its枚星冠住應(yīng)灼就-電暹*書書2D1D-D1D7J承1ZMt:fc23TH*W樂叫Ermniir+w.團決fl商帀edriik2D1M3DI7_zX13期馬5GXti曲H3n+B?Pft詢曲站*2D1MSD7i:XX11its閭WH3I*BSr.a&iwaw*X155Gt#ItHflf航乜是賈律是*迅壯円卡idhiXlsMNi3D1

14、MOD7匚yX301；制財樂eihi+Kffk*irididaid201H：0?圖4-3信息存儲表2本表主要存儲數(shù)據(jù)有：游客注冊名、性別、年齡、學(xué)歷、專業(yè)、愛好、備注、密碼（密碼就是注冊時，所輸入的驗證碼）和注冊時間。4.3主要模塊的代碼實現(xiàn)4.3.1注冊代碼的實現(xiàn)alert(注冊成功，您是第.$hang.位注冊用戶!)；v/SCRIPT;elseechoalert(對不起，您未能注冊成功!);elseechoalert(對不起您未能注冊成功，因為您輸入的驗證碼不正確或右側(cè)的驗證碼已經(jīng)失效。);mysql_close($conn);這段代碼主要是將游客注冊信息插入到test2表，如果游客注冊成

15、功，會彈出一個注冊成功提示框“注冊成功,您是第*位注冊用戶!”。如果沒能注冊成功，則會彈出一個注冊失敗提示框“對不起,您未能注冊成功!”或“對不起您未能注冊成功,因為您輸入的驗證碼不正確或右側(cè)的驗證碼已經(jīng)失效。”,(出現(xiàn)此提示是因為游客在注冊時，由于停留時間過長，對應(yīng)的session已經(jīng)不存在了)如圖4-4所示。斗悴丄曲1詫壬TfI圖4-4注冊界面4.3.2登陸及退出登錄代碼的實現(xiàn)WHEREGETmimaWHEREv?phpheader(Content-Type:text/html;charset=GB2312);include(conn.php);$g=mysql_query(SELECT*

16、FROM、test2name=$_GETusernameandmima=$_GETmima);$h=mysql_query(SELECT*FROMtest2WHEREmima=$andname!=$_GETusername);$j=mysql_query(SELECT*FROMtest2name=$_GETusernameandmima!=$_GETmima);$hang=mysql_num_rows($g);$hang_1=mysql_num_rows($h);$hang_2=mysql_num_rows($j);if($hang)$host=$_SERVERHTTP_HOST;$host=

17、md5($host);$cookie_=$_COOKIE$host.$_COOKIE$host;session_start();$_SESSION$cookie_=$_GETusername;echo歡迎.$_GETusername.登陸！;elseif($hang_1)echo用戶名有誤;elseif($hang_2)echo密碼有誤;elseecho用戶名和密碼都有誤;?這段代碼主要是檢測游客登錄時，所提交的用戶名和密碼。如果表test2中有游客所提交的游客名，但沒有游客所提交的密碼，則會輸出一個錯誤提示信息“密碼有誤”。如果表test2中有游客提交的密碼，但沒有游客提交的用戶名，則會輸出

18、一另一個錯誤信息“用戶名有誤”。如果表test2中既沒有游客提交的游客名，也沒有游客所提交的密碼，則會輸出“用戶名和密碼都有誤”。如果表test2中既包含游客提交的游客名，又包含游客提交的密碼，則輸出“歡迎*登陸！”信息，并把游客的名字存入到一個名為$cookie_的SESSION中。這段代碼主要是將值為要退出的游客名的SESSION設(shè)為空，登陸界面如圖45：圖4-5登陸界面4.3.3留言代碼的實現(xiàn)v?phpheader(Content-Type:text/html;charset=GB2312);include(conn.php);/獲得客戶端和服務(wù)器端的密碼。$host=$_SERVERH

19、TTP_HOST;$host=md5($host);$cookie_=$_COOKIE$host.$_COOKIE$host;session_start();$y=$_SESSION$cookie_;if($y)/*。查詢數(shù)據(jù)庫中的資源個數(shù)。*/$dd=mysql_query(SELECT*FROMliuyan);$hang=mysql_num_rows($dd);$hang=$hang+l;$sql=insertintoliuyanvalues($hang,$y,$_GETliuyan,now();/*oooooooooooooooooo測疋否插入成功。*/if(mysql_query($s

20、ql,$conn)echo$hang;elseecho留言失敗;elseecho還沒登陸;mysql_close($conn);這段代碼主要是將游客提交的留言內(nèi)容插入到表liuyan中，如果游客留言信息被成功插入，則會輸出插入位置(游客是第幾位留言的)。如果插入失敗。則會輸出錯誤提示信息“留言失敗”或“還沒登陸”，(當(dāng)游客還沒登錄時就留言，會輸出此錯誤信息)留言界面如圖4-6。請留言1V1葢交取消圖4-6留言界面4.4運行測試我們以游客張山為例，來測試一下本網(wǎng)頁的幾個主要功能模塊。（游客注冊、游客登錄和游客留言）4.4.1注冊當(dāng)游客張山輸入注冊信息時，界面如圖4-7：請注冊學(xué)丙：大專寺業(yè)：芯片

21、址悒弓門錮工程捉交備注.性格開朗汪廢，熱情好葫！亠去:.：F6ceedc|取:膂圖4-7注冊界面當(dāng)游客張山提交信息成功后，將會彈出一個成功提示信息，如圖4-8：圖4-8提示界面當(dāng)我們查看數(shù)據(jù)庫test中的表test2時，會發(fā)現(xiàn)其多了一條關(guān)于張山的游客信息。如圖4-9:匸冷X卩立28本科地杠開電荻拓曲査傘管尋，2010-03WA1BS-S本科附曲樂滋那氏挪歧，蠱變轉(zhuǎn)讒濟的陌碘的亠2010-03-07-/yis女2S年科s?a吐呂樂脂機Efii&Hidszi”SI.費逹?.松左：MlflHB-WZX29遺得PS關(guān)低的。201D-03-07二JX21衛(wèi)本科an叮孑樂団中計訐妬擔(dān)，卡卡卡師用束了2O1

22、0-flM7X22掙山卑22丈專芯片雀片與陰站工程呼直樂、唱霰牲梏開刪謹(jǐn)，如耐斑2Bceedc2010-4-26如圖4-9注冊后的數(shù)據(jù)庫圖4.4.2登陸當(dāng)張山把名字和密碼輸入時，登陸界面如圖4-10：圖4-10登陸界面當(dāng)張山以正確的名字和密碼登陸后，出現(xiàn)提示，如圖4-11：和用戶登陸圖4-11提示界面4.4.3留言當(dāng)張山寫入留言時，留言界面如圖4-12：請留言很高興來到咱門這牛旅游兩站，謝謝分辜土|取消圖4-12留言界面當(dāng)張山成功將留言內(nèi)容提交后，會彈出一個留言成功提示框，如圖4-13：圖4-13成功留言界面當(dāng)我們查看數(shù)據(jù)庫test中的表liuyan時，會發(fā)現(xiàn)其多了一條有游客張山所寫的留言內(nèi)容

23、，如圖4-14：顯示30行，開始行數(shù)：0乩水平模武顯示，并且在100|單云格后重夏標(biāo)題主鍵排序無*idusernameliuyantimen亠夕X1李腓改革和改革21:42:35B亠夕X2踩謀謀21:43:21夕X3張山很高潯來到咱們邃乍旅游阿站，謝謝分享！00:36.08T全選/全部不選選中或:M圖4-14留言圖4.5遇到的問題及解決方法在本次論文設(shè)計中主要遇到兩個大問題。第一，在輸出注冊框時出現(xiàn)了亂碼。解決方法是：在要輸出的注冊框代碼的開頭處加上這么一段代碼header(Content-Type:text/html;charset=GB2312);第二，在游客留言時，游客已經(jīng)退出了登錄，但

24、還能以此游客名進行留言。解決方法是：在游客登錄時，在后臺創(chuàng)建一個名為$cookie_(此名是有游客電腦中的關(guān)于本網(wǎng)頁的cookie值相加得到的。)的session，將游客名存入其中。在用戶退出登錄時，就其值設(shè)為空（因為游客在提交留言時，會有一個專門的動態(tài)網(wǎng)頁首先查看后臺服務(wù)器中有沒有名為$cookie_的session或其值是否為空，如果其不存在或值為空，則就說明此游客還沒有登錄，就會有相應(yīng)的提示框彈出。）?？偨Y(jié)：在制作本次論文所涉及的網(wǎng)頁時，大大小小也遇到的不少問題，但主要的問題也就這兩個，這些問題都是通過查閱一些相應(yīng)的查考文獻來一一解決的。結(jié)束語本設(shè)計根據(jù)畢業(yè)設(shè)計任務(wù)書的要求制作，功能基本

25、實現(xiàn)，可以完成登陸、注冊、留言、各產(chǎn)品展示等功能的實現(xiàn)。此次設(shè)計是查看了一些企業(yè)網(wǎng)站的結(jié)構(gòu)然后進行設(shè)計的，雖然此次設(shè)計構(gòu)造不能說是成熟，但也算是盡了力。這是我首次運用Dreamweaver、Php語言結(jié)合PhpMyAdmin數(shù)據(jù)庫系統(tǒng)開發(fā)工具進行動態(tài)網(wǎng)頁的制作，一切都是從零開始學(xué)習(xí)，所以制作的時候難免會過于簡單，考慮的也不是很周全。同時由于時間的倉促，有些功能的實現(xiàn)不是很完美。在設(shè)計過程中不可避免地遇到了各種各樣的問題，由于整個設(shè)計完全都是由個人設(shè)計的，有關(guān)Dreamweaver、Php和數(shù)據(jù)庫連接等方面許多細節(jié)問題都要靠自己去摸索，加之本人水平有限，因此還存在著許多不足之處。在以前的時間內(nèi)我

26、學(xué)習(xí)了許多專業(yè)課程，比如C語言，java語言，數(shù)據(jù)庫系統(tǒng)概論，F(xiàn)LASH等等，雖然通過學(xué)習(xí)對這些課程有所了解和掌握，但是始終處于理論知識的掌握階段，并沒有真正應(yīng)用于實踐設(shè)計開發(fā)，所以對知識的掌握還不夠全面和熟練，并不能真正獨立的開發(fā)出一個完整的應(yīng)用于實際的系統(tǒng)。通過這次畢業(yè)設(shè)計，使我學(xué)到了很多，對自身的能力有了很大的提高。此次設(shè)計是動態(tài)網(wǎng)頁設(shè)計，而不是簡單的靜態(tài)網(wǎng)頁，因此采用了在開發(fā)動態(tài)網(wǎng)頁方面比較先進的Php語言作為開發(fā)語言。Php是一種Web編程腳本語言。當(dāng)然在制作的過程中碰到過一些讓人頭痛的問題，我都一一解決了，直到設(shè)計全部完成，也讓我在解決問題方面的能力得到了提高。整個開發(fā)的過程對我來說是一次將理論應(yīng)用于實踐的過程，是將以前所學(xué)知識充分利用的過程，是一次真正的實踐過程?？傮w說來，在這學(xué)期的畢業(yè)設(shè)計中，學(xué)到了一些在課堂內(nèi)所學(xué)不到的知識，收獲很大。- -致謝首先感謝我的指導(dǎo)老師楊老師，他在我的畢業(yè)設(shè)計過程中給了指導(dǎo)性的方案和架構(gòu)，指引我閱讀相關(guān)的資料和書籍，使我能學(xué)習(xí)掌握知識并完成了畢業(yè)設(shè)計。感謝答辯組對此畢業(yè)設(shè)計的考核，如果可以得到答辯組各位老師的認(rèn)可將對我的學(xué)習(xí)和工作給予極大的鼓勵。你們客觀的評價和建議我將牢記在心，在今后的發(fā)展中揚長避短，更加努力的嚴(yán)格要求自己。感謝學(xué)校對我的培育，讓我從思想上、素