畢業(yè)設(shè)計(jì)（論文）-動(dòng)態(tài)網(wǎng)頁設(shè)計(jì).doc

畢業(yè)設(shè)計(jì)（論文）題 目： 專 業(yè)： 班 級(jí)： 學(xué) 生： 指導(dǎo)教師： 摘 要 在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類的活動(dòng)。它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分?，F(xiàn)今的社會(huì)，人們已經(jīng)離不開了網(wǎng)絡(luò)，網(wǎng)絡(luò)已經(jīng)成為人與人之間交流的一種形式，它能夠把事情的復(fù)雜化轉(zhuǎn)為簡單化，擺脫了時(shí)間和空間的限制。網(wǎng)站為消費(fèi)者提供了一個(gè)網(wǎng)絡(luò)生活空間，通過其網(wǎng)頁展示了企業(yè)介紹、企業(yè)榮譽(yù)、產(chǎn)品介紹、招商信息、加盟程序、留言等一系列內(nèi)容的介紹。瀏覽者不僅可以利用留言板經(jīng)濟(jì)而又快捷地與外界進(jìn)行各種信息的溝通，也可以直接在網(wǎng)上申請加盟。本論文還介紹了網(wǎng)頁的結(jié)構(gòu)分析和具體功能實(shí)現(xiàn)，網(wǎng)頁的界面和運(yùn)作方式，盡力模擬近代網(wǎng)頁普遍性形式，成為一個(gè)完整的動(dòng)態(tài)網(wǎng)站關(guān)鍵字Dreamweaver；Php；PhpMyAdmin；動(dòng)態(tài)網(wǎng)頁16目 錄1 引言12 網(wǎng)頁制作概述12.1 網(wǎng)頁的類型12.1.1 靜態(tài)頁面12.1.2 動(dòng)態(tài)頁面22.2 網(wǎng)頁開發(fā)技術(shù)22.3 網(wǎng)頁布局32.3.1 網(wǎng)頁布局的基本概念32.3.2網(wǎng)頁布局方法52.3.2 網(wǎng)頁布局技術(shù)72.4網(wǎng)頁配色82.5 網(wǎng)頁設(shè)計(jì)流程93 動(dòng)態(tài)網(wǎng)頁開發(fā)環(huán)境和技術(shù)93.1 了解Dreamweaver開發(fā)工具93.2 Php語言基礎(chǔ)知識(shí)113.3 開發(fā)環(huán)境介紹124 設(shè)計(jì)及具體代碼實(shí)現(xiàn)124.1網(wǎng)頁結(jié)構(gòu)設(shè)計(jì)124.2創(chuàng)建數(shù)據(jù)庫134.3主要模塊的代碼實(shí)現(xiàn)144.3.1 注冊代碼的實(shí)現(xiàn)144.3.2 登陸及退出登錄代碼的實(shí)現(xiàn)164.3.3留言代碼的實(shí)現(xiàn)184.4運(yùn)行測試194.4.1 注冊194.4.2 登陸214.4.3留言224.5遇到的問題及解決方法23結(jié) 束 語24致 謝- 25 -參考文獻(xiàn)- 26 -1 引言網(wǎng)頁是網(wǎng)站信息發(fā)布與表現(xiàn)的一種主要形式。因此要實(shí)現(xiàn)一個(gè)網(wǎng)站，必須了解網(wǎng)頁制作的相關(guān)知識(shí)。較流行的開發(fā)工具有：Dreamweaver，Php，PhpMyAdmin。網(wǎng)頁制作要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺上的愉悅感。因此在網(wǎng)頁創(chuàng)作的時(shí)候就必須將網(wǎng)站的整體設(shè)計(jì)與網(wǎng)頁設(shè)計(jì)的相關(guān)原理緊密結(jié)合起來。網(wǎng)站設(shè)計(jì)是將策劃案中的內(nèi)容、網(wǎng)站的主題模式，以及結(jié)合自己的認(rèn)識(shí)通過藝術(shù)的手法表現(xiàn)出來；網(wǎng)頁制作通常就是將網(wǎng)頁設(shè)計(jì)師所設(shè)計(jì)出來的設(shè)計(jì)稿，按照W3C規(guī)范用html語言將其制作成網(wǎng)頁格式。2 網(wǎng)頁制作概述2.1.1靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁區(qū)別通常，網(wǎng)頁可以分為靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁。 靜態(tài)網(wǎng)頁頁面上的內(nèi)容和格式一般不會(huì)改變，只有網(wǎng)管可根據(jù)需要更新頁面。 動(dòng)態(tài)網(wǎng)頁的內(nèi)容隨著用戶的輸入和互動(dòng)而有所不同，或者隨著用戶，時(shí)間，數(shù)據(jù)修正等而改變。網(wǎng)頁上的內(nèi)容也可以由用戶通過使用客戶端描述語言(JavaScript, JScript, Actionscript,）來改變。當(dāng)然更普遍的是由服務(wù)器端的描述語言（Perl，PHP, ASP, JSP, ColdFusion, 等)進(jìn)行編譯，從而對(duì)動(dòng)態(tài)網(wǎng)頁的內(nèi)容進(jìn)行改變。無論是客戶端還是服務(wù)器端的改變都需要使用較為復(fù)雜的應(yīng)用軟件。 隨著信息技術(shù)的更加專業(yè)化，越來越明顯的傾向表明，網(wǎng)頁設(shè)計(jì)和網(wǎng)站的發(fā)展會(huì)逐漸成為兩個(gè)不同的領(lǐng)域。 網(wǎng)頁是借助于美術(shù)構(gòu)圖與程序互動(dòng)、動(dòng)畫等方式向大眾推廣相關(guān)信息的媒體，所以網(wǎng)頁設(shè)計(jì)包括了幾大部分： 版面構(gòu)圖程序開發(fā)網(wǎng)站內(nèi)容管理2.5 網(wǎng)頁設(shè)計(jì)流程網(wǎng)頁設(shè)計(jì)是一個(gè)互動(dòng)的過程，不僅是設(shè)計(jì)師構(gòu)思設(shè)計(jì)就可以完成的。從客戶提出需求到最終發(fā)布，期間需要客戶與設(shè)計(jì)人員共同參與協(xié)商才可以，具體流程如下：首先，獲取客戶需求和資料。在設(shè)計(jì)網(wǎng)站頁面之前，設(shè)計(jì)師需要知道客戶的需求，從而確定客戶建立網(wǎng)站的目的?？蛻籼岢鼍W(wǎng)站需求是非常重要的一個(gè)環(huán)節(jié)。沒有詳細(xì)的需求，設(shè)計(jì)人員無法憑空進(jìn)行設(shè)計(jì)制作。在這個(gè)步驟中，雙方的溝通與交流是非常重要的。其次，確定網(wǎng)站內(nèi)容。設(shè)計(jì)人員選擇適合自己的圖像編輯軟件、動(dòng)畫制作軟件和網(wǎng)頁制作軟件進(jìn)行網(wǎng)頁的初步設(shè)計(jì)，這中間可能還需要和客戶進(jìn)行多次溝通才能達(dá)到客戶滿意的效果。在具體設(shè)計(jì)時(shí)，設(shè)計(jì)人員應(yīng)該為網(wǎng)站定位一個(gè)主題，從而保證所有網(wǎng)頁都圍繞這個(gè)主題進(jìn)行設(shè)計(jì)制作，保證風(fēng)格的和諧統(tǒng)一。然后，申請域名和空間。使用該方法能夠有效同步管理文件。還可以通過FTP軟件連接到服務(wù)器空間上，然后上傳發(fā)布文件。最后，后期維護(hù)。一般靜態(tài)網(wǎng)站上傳后，如果客戶方?jīng)]有專業(yè)人員維護(hù)，這樣就需要設(shè)計(jì)人員從客戶方獲取新資料進(jìn)行定期或不定期的更新。如果是動(dòng)態(tài)網(wǎng)站，設(shè)計(jì)人員需要負(fù)責(zé)培訓(xùn)客戶方如何使用后臺(tái)管理，這樣客戶就可以自己通過后臺(tái)管理添加信息，設(shè)計(jì)人員只要及時(shí)更正動(dòng)態(tài)網(wǎng)站的錯(cuò)誤即可。3 動(dòng)態(tài)網(wǎng)頁開發(fā)環(huán)境和技術(shù)3.1 了解Dreamweaver開發(fā)工具3.4.1網(wǎng)頁結(jié)構(gòu)設(shè)計(jì)css+div結(jié)構(gòu)目前用的人最多，框架結(jié)構(gòu)現(xiàn)在很少有人使用了，而表格結(jié)構(gòu)目前用的人也不多，但并不意味著已經(jīng)被淘汰，它也有DIV所不能取代的效果 方便快速的布局，只要不是經(jīng)常改動(dòng)的小部分就可以用表格。DIV可以與表格一起用，大布局用DIV，而小地方就用表格 ，效果會(huì)很好。比如本次論文所涉及的網(wǎng)頁就用到了表格與css+div相結(jié)合的思想，其上、下、左、右和中間分別是一個(gè)單獨(dú)的div模塊。具體框架結(jié)構(gòu)如圖4-1。圖4-1 網(wǎng)頁框架圖4.2創(chuàng)建數(shù)據(jù)庫 本論文設(shè)計(jì)的網(wǎng)頁，所用到的數(shù)據(jù)庫test是通過數(shù)據(jù)庫管理工具PhpMyAdmin做的，具體創(chuàng)建過程就不在這一一介紹了。其包含兩個(gè)表分別為：liuyan、test2，如圖4-2和4-3。 圖4-2 信息存儲(chǔ)表1本表主要存儲(chǔ)游客名、游客留言內(nèi)容和留言時(shí)間等數(shù)據(jù)。圖4-3 信息存儲(chǔ)表2本表主要存儲(chǔ)數(shù)據(jù)有：游客注冊名、性別、年齡、學(xué)歷、專業(yè)、愛好、備注、密碼（密碼就是注冊時(shí)，所輸入的驗(yàn)證碼）和注冊時(shí)間。4.3主要模塊的代碼實(shí)現(xiàn)4.3.1 注冊代碼的實(shí)現(xiàn)?phpif($_POSTname)include(conn.php);$up=$_FILEStx;$hh=$uptype;$fff=$uptmp_name;$yu=$upname;/獲得客戶端和服務(wù)器端的驗(yàn)證碼。$host=$_SERVERHTTP_HOST;$host= md5($host);$cookie_=$_COOKIE$host;session_start();$y=$_SESSION$cookie_;$y_d=$_POSTyz;/*。核對(duì)客戶端和服務(wù)器端的驗(yàn)證碼庫。*/if($y_d=$y)/*。查詢數(shù)據(jù)庫中的資源個(gè)數(shù)。*/$dd=mysql_query(SELECT * FROM test2);$hang=mysql_num_rows($dd);$hang=$hang+1;/*。values后不能有空格。(id,name,sex,age,diploma,speciality,like,remark,mima,enrolDate)。*/ $sql=insert into test2 values($hang,$_POSTname,$_POSTsex,$_POSTage,.$_POSTdiploma,$_POSTspeciality,$_POSTlike,$_POSTremark,$_POSTyz,now();/*。檢測是否插入成功。，。*/if(mysql_query($sql,$conn)if($hh=image/pjpeg|$hh=image/gif|$hh=image/png|$hh=image/bmp|$hh=image/jpg|$hh=image/jpeg)move_uploaded_file($fff,E:/zhandian/zhandian1/sousuo/touxiang/.$_POSTname.jpg);/目錄地址不能用反斜杠。echo alert(注冊成功,您是第.$hang.位注冊用戶!);else echo alert(對(duì)不起,您未能注冊成功!);else echo alert(對(duì)不起您未能注冊成功,因?yàn)槟斎氲尿?yàn)證碼不正確或右側(cè)的驗(yàn)證碼已經(jīng)失效。);mysql_close($conn);?這段代碼主要是將游客注冊信息插入到test2表，如果游客注冊成功，會(huì)彈出一個(gè)注冊成功提示框“注冊成功,您是第*位注冊用戶!”。如果沒能注冊成功，則會(huì)彈出一個(gè)注冊失敗提示框“對(duì)不起,您未能注冊成功!”或“對(duì)不起您未能注冊成功,因?yàn)槟斎氲尿?yàn)證碼不正確或右側(cè)的驗(yàn)證碼已經(jīng)失效?！?（出現(xiàn)此提示是因?yàn)橛慰驮谧詴r(shí)，由于停留時(shí)間過長，對(duì)應(yīng)的session已經(jīng)不存在了）如圖4-4所示。圖4-4 注冊界面4.3.2 登陸及退出登錄代碼的實(shí)現(xiàn)?phpheader(Content-Type:text/html;charset=GB2312);include(conn.php);$g=mysql_query(SELECT * FROM test2 WHERE name=$_GETusername and mima=$_GETmima);$h=mysql_query(SELECT * FROM test2 WHERE mima=$_GETmima and name!=$_GETusername);$j=mysql_query(SELECT * FROM test2 WHERE name=$_GETusername and mima!=$_GETmima);$hang=mysql_num_rows($g);$hang_1=mysql_num_rows($h);$hang_2=mysql_num_rows($j);if($hang)$host=$_SERVERHTTP_HOST;$host= md5($host);$cookie_=$_COOKIE$host.$_COOKIE$host;session_start();$_SESSION$cookie_ = $_GETusername;echo 歡迎.$_GETusername.登陸！;elseif($hang_1)echo 用戶名有誤;elseif($hang_2)echo 密碼有誤;elseecho 用戶名和密碼都有誤;?這段代碼主要是檢測游客登錄時(shí)，所提交的用戶名和密碼。如果表test2中有游客所提交的游客名，但沒有游客所提交的密碼，則會(huì)輸出一個(gè)錯(cuò)誤提示信息“密碼有誤”。如果表test2中有游客提交的密碼，但沒有游客提交的用戶名，則會(huì)輸出一另一個(gè)錯(cuò)誤信息“用戶名有誤”。如果表test2中既沒有游客提交的游客名，也沒有游客所提交的密碼，則會(huì)輸出“用戶名和密碼都有誤”。如果表test2中既包含游客提交的游客名，又包含游客提交的密碼，則輸出“歡迎*登陸！”信息，并把游客的名字存入到一個(gè)名為$cookie_的SESSION中。這段代碼主要是將值為要退出的游客名的SESSION設(shè)為空,登陸界面如圖4-5：圖4-5 登陸界面4.3.3留言代碼的實(shí)現(xiàn)這段代碼主要是將游客提交的留言內(nèi)容插入到表liuyan中，如果游客留言信息被成功插入，則會(huì)輸出插入位置（游客是第幾位留言的）。如果插入失敗。則會(huì)輸出錯(cuò)誤提示信息“留言失敗”或“還沒登陸”,（當(dāng)游客還沒登錄時(shí)就留言，會(huì)輸出此錯(cuò)誤信息）留言界面如圖4-6。圖4-6 留言界面4.4運(yùn)行測試我們以游客張山為例，來測試一下本網(wǎng)頁的幾個(gè)主要功能模塊。（游客注冊、游客登錄和游客留言）4.4.1 注冊當(dāng)游客張山輸入注冊信息時(shí)，界面如圖4-7：圖4-7 注冊界面當(dāng)游客張山提交信息成功后，將會(huì)彈出一個(gè)成功提示信息，如圖4-8：圖4-8 提示界面當(dāng)我們查看數(shù)據(jù)庫test中的表test2時(shí)，會(huì)發(fā)現(xiàn)其多了一條關(guān)于張山的游客信息。如圖4-9：如圖4-9 注冊后的數(shù)據(jù)庫圖4.4.2 登陸當(dāng)張山把名字和密碼輸入時(shí)，登陸界面如圖4-10：圖4-10 登陸界面當(dāng)張山以正確的名字和密碼登陸后，出現(xiàn)提示，如圖4-11：圖4-11 提示界面4.4.3留言當(dāng)張山寫入留言時(shí)，留言界面如圖4-12：圖4-12 留言界面當(dāng)張山成功將留言內(nèi)容提交后，會(huì)彈出一個(gè)留言成功提示框，如圖4-13：圖4-13 成功留言界面當(dāng)我們查看數(shù)據(jù)庫test中的表liuyan時(shí)，會(huì)發(fā)現(xiàn)其多了一條有游客張山所寫的留言內(nèi)容，如圖4-14：圖4-14 留言圖4.5遇到的問題及解決方法在本次論文設(shè)計(jì)中主要遇到兩個(gè)大問題。第一，在輸出注冊框時(shí)出現(xiàn)了亂碼。解決方法是:在要輸出的注冊框代碼的開頭處加上這么一段代碼header(Content-Type:text/html;charset=GB2312);第二，在游客留言時(shí)，游客已經(jīng)退出了登錄，但還能以此游客名進(jìn)行留言。解決方法是：在游客登錄時(shí)，在后臺(tái)創(chuàng)建一個(gè)名為$cookie_（此名是有游客電腦中的關(guān)于本網(wǎng)頁的cookie值相加得到的。）的session，將游客名存入其中。在用戶退出登錄時(shí)，就其值設(shè)為空（因?yàn)橛慰驮谔峤涣粞詴r(shí)，會(huì)有一個(gè)專門的動(dòng)態(tài)網(wǎng)頁首先查看后臺(tái)服務(wù)器中有沒有名為$cookie_的session或其值是否為空，如果其不存在或值為空，則就說明此游客還沒有登錄，就會(huì)有相應(yīng)的提示框彈出。）?？偨Y(jié)：在制作本次論文所涉及的網(wǎng)頁時(shí)，大大小小也遇到的不少問題，但主要的問題也就這兩個(gè)，這些問題都是通過查閱一些相應(yīng)的查考文獻(xiàn)來一一解決的。結(jié) 束 語本設(shè)計(jì)根據(jù)畢業(yè)設(shè)計(jì)任務(wù)書的要求制作，功能基本實(shí)現(xiàn)，可以完成登陸、注冊、留言、各產(chǎn)品展示等功能的實(shí)現(xiàn)。此次設(shè)計(jì)是查看了一些企業(yè)網(wǎng)站的結(jié)構(gòu)然后進(jìn)行設(shè)計(jì)的，雖然此次設(shè)計(jì)構(gòu)造不能說是成熟，但也算是盡了力。這是我首次運(yùn)用Dreamweaver、Php語言結(jié)合PhpMyAdmin數(shù)據(jù)庫系統(tǒng)開發(fā)工具進(jìn)行動(dòng)態(tài)網(wǎng)頁的制作，一切都是從零開始學(xué)習(xí)，所以制作的時(shí)候難免會(huì)過于簡單，考慮的也不是很周全。同時(shí)由于時(shí)間的倉促，有些功能的實(shí)現(xiàn)不是很完美。在設(shè)計(jì)過程中不可避免地遇到了各種各樣的問題，由于整個(gè)設(shè)計(jì)完全都是由個(gè)人設(shè)計(jì)的，有關(guān)Dreamweaver、Php和數(shù)據(jù)庫連接等方面許多細(xì)節(jié)問題都要靠自己去摸索，加之本人水平有限，因此還存在著許多不足之處。在以前的時(shí)間內(nèi)我學(xué)習(xí)了許多專業(yè)課程，比如C語言，java語言，數(shù)據(jù)庫系統(tǒng)概論，F(xiàn)LASH等等，雖然通過學(xué)習(xí)對(duì)這些課程有所了解和掌握，但是始終處于理論知識(shí)的掌握階段，并沒有真正應(yīng)用于實(shí)踐設(shè)計(jì)開發(fā)，所以對(duì)知識(shí)的掌握還不夠全面和熟練，并不能真正獨(dú)立的開發(fā)出一個(gè)完整的應(yīng)用于實(shí)際的系統(tǒng)。通過這次畢業(yè)設(shè)計(jì)，使我學(xué)到了很多，對(duì)自身的能力有了很大的提高。此次設(shè)計(jì)是動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)，而不是簡單的靜態(tài)網(wǎng)頁，因此采用了在開發(fā)動(dòng)態(tài)網(wǎng)頁方面比較先進(jìn)的Php語言作為開發(fā)語言。Php是一種Web編程腳本語言。當(dāng)然在制作的過程中碰到過一些讓人頭痛的問題，我都一一解決了，直到設(shè)計(jì)全部完成，也讓我在解決問題方面的能力得到了提高。整個(gè)開發(fā)的過程對(duì)我來說是一次將理論應(yīng)用于實(shí)踐的過程，是將以前所學(xué)知識(shí)充分利用的過程，是一次真正的實(shí)踐過程。總體說來，在這學(xué)期的畢業(yè)設(shè)計(jì)中，學(xué)到了一些在課堂內(nèi)所學(xué)不到的知識(shí)，收獲很大。致 謝首先感謝我的指導(dǎo)老師楊老師，他在我的畢業(yè)設(shè)計(jì)過程中給了指導(dǎo)性的方案和架構(gòu)，指引我閱讀相關(guān)的資料和書籍，使我能學(xué)習(xí)掌握知識(shí)并完成了畢業(yè)設(shè)計(jì)。 感謝答辯組對(duì)此畢業(yè)設(shè)計(jì)的考核，如果可以得到答辯組各位老師的認(rèn)可將對(duì)我的學(xué)習(xí)和工作給予極大的鼓勵(lì)。你們客觀的評(píng)價(jià)和建議我將牢記在心，在今后的發(fā)展中揚(yáng)長避短，更加努力的嚴(yán)格要求自己。 感謝學(xué)校對(duì)我的培育，讓我從思想上、素質(zhì)上和知識(shí)上得到很大的提高。在校學(xué)習(xí)的過程中的各科老師的悉心教導(dǎo)讓我掌握了更多的知識(shí)，對(duì)提高我的知識(shí)面有很大的幫助。 最后要感謝我的同學(xué)在設(shè)計(jì)完成前后對(duì)我的幫助，沒有同學(xué)的共同學(xué)習(xí)進(jìn)步也許就沒法完成設(shè)計(jì)，沒有同學(xué)的幫助，也許一些潛在的錯(cuò)誤難以得到更正，在此一并表示感謝。在此祝愿學(xué)校領(lǐng)導(dǎo)、老師、同學(xué)工作順利，事業(yè)更上一層樓；同時(shí)也祝愿學(xué)校更加輝煌！參考文獻(xiàn)1.呂洋波. Dreamweaver+Php動(dòng)態(tài)網(wǎng)站