徽州美食網(wǎng)站的設(shè)計畢業(yè)設(shè)計方案樣本(共34頁)

1、徽州美食網(wǎng)站的設(shè)計畢業(yè)設(shè)計方案畢業(yè)論文（設(shè)計）論文題目： 徽州美食網(wǎng)站的設(shè)計 院（系部）： 計算機科學技術(shù)系 專業(yè)名稱： 計算機網(wǎng)絡(luò)專業(yè) 研究方向： 網(wǎng)頁網(wǎng)站 目錄內(nèi)容摘要3 緒論一、網(wǎng)頁（一）網(wǎng)頁設(shè)計背景 4（二）網(wǎng)頁設(shè)計概述 5二、設(shè)計語言及軟件介紹（一）HTML語言介紹5（二）Dreamweaver介紹5三、設(shè)計思路及步驟（一）設(shè)計思想6（二)需求分析6（三)設(shè)計步驟6四、設(shè)計的實現(xiàn)（一）網(wǎng)站主頁面的設(shè)計.18（二）菜譜大全界面設(shè)計：21（三）健康資訊界面設(shè)計：23（四）健腦飲食界面設(shè)計:25（五）美食團購界面設(shè)計：28（六）食材百科界面設(shè)計：29（七）母嬰飲食界面設(shè)計31（八）美容飲食

2、界面設(shè)計：32結(jié)論展望33參考文獻34內(nèi)容摘要21世紀是一個信息化的時代。隨著網(wǎng)絡(luò)信息的飛速發(fā)展，網(wǎng)絡(luò)傳媒以被越來越多的企業(yè)看好，而網(wǎng)站就是傳媒很好的一種方式，目前有很多企業(yè)都在開發(fā)屬于自己的網(wǎng)站，所以研究網(wǎng)站建設(shè)是很有必要的。本文主要概述了建設(shè)一個網(wǎng)站的具體過程。包括設(shè)計思路、設(shè)計步驟以及最后的設(shè)計實現(xiàn)。有文本的應(yīng)用、創(chuàng)建圖像頁面、使用CSS修飾網(wǎng)頁、創(chuàng)建多媒體網(wǎng)頁、利用表單對象創(chuàng)建表單文件、網(wǎng)頁連接的應(yīng)用、創(chuàng)建框架頁面、使用javaScript行為創(chuàng)建動態(tài)效果、主要使用的設(shè)計語言是HTML。本文還考慮到了軟件工程在程序設(shè)計中的應(yīng)用，軟件工程認為軟件開發(fā)與各種市場活動密切相關(guān)，所以編寫軟件時

3、不能脫離軟件的需求。Dreamweaver也是本文研究的主要對象。本文運用Dreamweaver和相應(yīng)的網(wǎng)站開發(fā)軟件，闡述了網(wǎng)站前后臺設(shè)計，并對其功能進行了論述，實現(xiàn)了整個網(wǎng)站功能的使用。通過對整個網(wǎng)站的設(shè)計，說明了在制作過程中遇到常見問題的解決方法。【關(guān)鍵字】網(wǎng)絡(luò)傳媒網(wǎng)站 HTML Dreamweaver 緒論網(wǎng)頁網(wǎng)站的應(yīng)用網(wǎng)頁設(shè)計是近年來興起的設(shè)計領(lǐng)域，是繼報紙、廣播、電視之后的又一全新的設(shè)計媒體。隨著計算機的廣泛普及，計算機網(wǎng)絡(luò)也得到了飛速的發(fā)展，如今的網(wǎng)絡(luò)這個平臺讓人們感覺一切都越來越簡單，也逐漸的越來越方面了，慢慢地隨著互聯(lián)網(wǎng)的猛速發(fā)展，人們的生活以及學習似乎離不開網(wǎng)絡(luò)。因為Inte

4、rnet這個大的平臺是實現(xiàn)網(wǎng)絡(luò)資源共享的資源庫，那么根據(jù)它的發(fā)展歷程與目前的應(yīng)用情況和發(fā)展趨勢，我們可以充分的相信網(wǎng)絡(luò)技術(shù)將會極大的改善我們的生活和工作方式，甚至抽象的理解為可能連社會的價值觀也會發(fā)生一定的變化。比如說，在近來的網(wǎng)絡(luò)猛速發(fā)展的過程中，越來越多的民間團體、企事業(yè)單位都紛紛的在網(wǎng)上自立門戶，這其中最迫切想得到外界了解和認可的無疑是那些大小商家們，對他們而言，網(wǎng)絡(luò)就像一座取之不盡用之不竭的天然寶藏，其中蘊藏著無窮的機遇與財富，而且不論是企業(yè)網(wǎng)站還是個人網(wǎng)站，各種大型的門戶網(wǎng)站，都如雨后春筍般的層層的蓬勃發(fā)展壯大起來，這樣一來就更進一步的使這樣的互聯(lián)網(wǎng)業(yè)呈現(xiàn)出絢爛多彩的發(fā)展局面。我設(shè)計

5、的畢業(yè)論文的題目是徽州美食網(wǎng)站的設(shè)計與實現(xiàn)，包括網(wǎng)站的概要設(shè)計，主要的功能模塊，詳細的功能以及詳細的設(shè)計，最后是結(jié)論與展望，總結(jié)這次畢業(yè)設(shè)計的收獲和心得。一、網(wǎng)頁（一）網(wǎng)頁設(shè)計背景隨著21世紀的到來，人們更深切地感受到計算機在生活和工作中的作用越來越重要，越來越多的職業(yè)需要具有計算機的應(yīng)用技能。掌握計算機是職業(yè)的需要，更是事業(yè)發(fā)展的需要。網(wǎng)頁設(shè)計與制作是計算機能力的具體表現(xiàn)，而一個網(wǎng)站也是一家企業(yè)不可缺少的一部分。對于我們來說必須要掌握網(wǎng)頁設(shè)計的相關(guān)知識（二）網(wǎng)頁設(shè)計概述 網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息（包括產(chǎn)品和服務(wù)）的一種方式，是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，離開網(wǎng)站（或者只是利用

6、第三方網(wǎng)站）去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標”，也是企業(yè)無形資產(chǎn)的組成部分，而網(wǎng)站是Internet上宣傳和反應(yīng)企業(yè)形象和文化的重要窗口二、設(shè)計語言及軟件介紹（一）HTML語言介紹超文本標記語言，即HTML（Hypertext Markup Language），是用于描述網(wǎng)頁文檔的一種標記語言。是標準通用標記下的一個應(yīng)用，也是一種規(guī)范，一種標準，它通過標記符號來標記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標記符解釋和顯

7、示其標記的內(nèi)容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。(二）Dreamweaver介紹Dreamweaver是一個可視化的網(wǎng)頁設(shè)計和網(wǎng)站管理工具，支持最新的Web技術(shù)，包含HTML檢查、HTML格式控制、HTML格式化選項、可視化網(wǎng)頁設(shè)計、圖像編輯、全局查找替換、全FTP 功能、處理Flash和Shockwave等富媒體格式和動態(tài)HTML、基于團隊的Web創(chuàng)作。在編輯上你可以選擇可視化方式或者你喜歡的源碼編輯方式。三、設(shè)計思路及步驟（一） 設(shè)計思想1、網(wǎng)站內(nèi)容要豐富齊全，需要包括一個主頁面和七個子頁面，子頁面包括“菜譜大全”、“

8、健康資訊”、“健腦飲食”、“美食團購”、“食材百科”、“母嬰飲食”、“美容飲食”。2、主頁面采用DIV+CSS和表格混合設(shè)計，特效有橫幅下拉特效，圖片切換特效。另外注冊和登錄采用數(shù)據(jù)庫技術(shù)，可以簡單實現(xiàn)，其他還有導航，超級鏈接，頁腳設(shè)計等等。3、子頁面可以簡單的采用表格制作，頁面要整潔簡單，一目了然。用到的圖片、素材要經(jīng)過Photoshop的加工、改造。4、登錄頁面和后臺管理頁面等等（二）需求分析通過市場、網(wǎng)上調(diào)查和自己對網(wǎng)頁網(wǎng)站的建立理解，一個網(wǎng)站應(yīng)該有以下內(nèi)容的需要：1、 網(wǎng)站前臺:網(wǎng)站前臺主要是用戶瀏覽本商城網(wǎng)站所得到的一些信息，它包括：網(wǎng)站首頁，網(wǎng)站導航，網(wǎng)站公告，用戶登錄、注冊，以及

9、商品的搜索模塊信息的顯示功能。前臺模塊的功能網(wǎng)站公告：用戶對網(wǎng)站最新公告的了解 用戶注冊：新用戶注冊用戶登錄：已注冊用戶登錄網(wǎng)站瀏覽信息2、網(wǎng)站后臺后臺管理頁面是商城管理員對整個網(wǎng)站的管理，其要求實現(xiàn)：商城產(chǎn)品的管理，商城公告的管理等多個模塊的功能。（三）設(shè)計步驟網(wǎng)站設(shè)計的步驟如下：1、 需求分析：根據(jù)實際需要設(shè)計相關(guān)功能模塊，并根據(jù)此分析給出合理的、滿足要求的設(shè)計思路。2、 收集材料：收集網(wǎng)站可能用到的圖片、文字等等，從圖書、報紙、光盤、多媒體上得來，也從互聯(lián)網(wǎng)上搜集。3、 設(shè)計效果圖：利用了photoshop工具等使用圖像處理軟件設(shè)計出最終效果圖，根據(jù)需要進行修改，直到滿意為止。4、 網(wǎng)站

10、具體建設(shè)：設(shè)計視圖中設(shè)計Web頁面外觀，設(shè)置控件的相關(guān)屬性。5、 調(diào)試、優(yōu)化和發(fā)布網(wǎng)站。四、設(shè)計的實現(xiàn)（一）網(wǎng)站主頁面的設(shè)計：主頁面重點制作和設(shè)計，包括LOGO，橫幅，網(wǎng)站導航，首頁分導航、超級鏈接、FLASH+JS圖片切換，頁腳設(shè)計等。設(shè)計效果如下：主要源代碼：<title>無標題文檔</title><script src="js/" type="text/javascript"></script><style type="text/css"><!-body,td,t

11、h color: #000000;font-size: 12px;.STYLE4 color: #666666.STYLE9 font-size: 24px; color: #FFFFFF; a:link text-decoration: none;color: #FF00FF;a:visited text-decoration: none;a:hover text-decoration: none;a:active text-decoration: none;.STYLE10 font-size: 18px.STYLE11 font-size: 14px;color: #000000;.ST

12、YLE12 color: #CC00CC.STYLE14 color: #666666; font-size: 12px; .STYLE16 font-size: 12.STYLE17 font-size: 12px.STYLE18 font-size: 16px.STYLE19 color: #0066CC.STYLE20 color: #00FF00.STYLE22 font-size: 16px; color: #666666; .STYLE23 font-size: 18px; color: #0066CC; .STYLE24 font-size: 16px; color: #00FF

13、00; .STYLE25 color: #990099;font-size: 18px;font-weight: bold;.STYLE27 font-size: 18px;color: #9900FF;font-weight: bold;.STYLE30 font-size: 24px; color: #000000; .STYLE33 color: #333333; font-size: 24px; body background-color: #FFFFCC;#Layer1 position:absolute;width:200px;height:115px;z-index:1;top:

14、 141px;visibility: hidden;.STYLE36 font-size: 18px;color: #00FFFF;font-weight: bold;.STYLE39 color: #9933CC;font-weight: bold;#Layer2 position:absolute;width:200px;height:96px;z-index:2;top: 139px;visibility: hidden;#Layer3 position:absolute;width:200px;height:64px;z-index:3;top: 144px;visibility: h

15、idden;.STYLE41 font-size: 36px; font-weight: bold; color: #CC6633;.STYLE42 font-family: "Courier New", Courier, monospace-></style><script type="text/JavaScript"><!-function MM_findObj(n, d) / var p,i,x; if(!d) d=document; if(p=("?")>0&&) d=

16、(p+1).document; n=(0,p); if(!(x=dn)&&) x=n; for (i=0;!x&&i<i+) x=in; for(i=0;!x&&&&i<i+) x=MM_findObj(n,i.document); if(!x && ) x=(n); return x;function MM_showHideLayers() / var i,p,v,obj,args=; for (i=0; i<(); i+=3) if (obj=MM_findObj(argsi)!=null)

17、v=argsi+2; if () obj=; v=(v='show')?'visible':(v='hide')?'hidden':v; =v; /-></script></head><body><table width="1109" height="1529" border="0" align="center"> <tr> <td width="1103" h

18、eight="1523" align="left" valign="top"><div align="center"> <table width="1101" border="0"> <tr> <td width="1095" height="44"><table width="1075" height="36" border="

19、;0" align="center"> <tr> <td width="150" height="32"> <a href="#">返回首頁</a></td> <td width="662">&nbsp;</td> <td width="127"><span class="STYLE4"><a href="#&

20、quot;><a href="#" class="one" onClick="='url(#default#homepage)'('');">設(shè)成首頁</a></span></td> <td width="164"><span class="STYLE4"><a href="#">意見反饋</a></span></td>

21、 </tr> </table> <p align="center" class="STYLE41"><span class="STYLE42"><img src="images/" alt="1" width="250" height="30" />徽州美食網(wǎng)站</span><img src="images/" width="250" he

22、ight="30" /></p></td> </tr> </table> <table width="1100" border="0" bordercolor="#FFFFFF" bgcolor="#9966FF"> <tr> <td width="140" height="37"><span class="STYLE9"><a

23、href="#">首頁</a></span></td> <td width="140"><div id="Layer1" onmouseover="MM_showHideLayers('Layer1','','show')" onmouseout="MM_showHideLayers('Layer1','','hide')"> <

24、table width="200" height="113" border="0" bordercolor="#9933FF" bgcolor="#99CC99" onmouseover="MM_showHideLayers('Layer1','','show')" onmouseout="MM_showHideLayers('Layer1','','hide')&quo

25、t;> <tr> <td bgcolor="#9966FF"><span class="STYLE36">家常菜譜</span></td> </tr> <tr> <td bgcolor="#9966FF"><span class="STYLE36">美容菜譜</span></td> </tr> <tr> <td bgcolor="#9966

26、FF"><span class="STYLE36">營養(yǎng)搭配菜譜</span></td> </tr> </table> </div> <span class="STYLE9"><a href="" onmouseover="MM_showHideLayers('Layer1','','show')" onmouseout="MM_showHideLaye

27、rs('Layer1','','hide')">菜譜大全</a></span></td> <td width="140"><div id="Layer2" onmouseover="MM_showHideLayers('Layer2','','show')" onmouseout="MM_showHideLayers('Layer2','

28、','hide')"> <table width="200" border="0"> <tr> <td height="29" bgcolor="#9966FF"> <span class="STYLE36">營養(yǎng)常識</span></td> </tr> <tr> <td height="28" bgcolor="#9966F

29、F"><span class="STYLE36">營養(yǎng)健康</span></td> </tr> <tr> <td height="29" bgcolor="#9966FF" class="STYLE36">營養(yǎng)手冊</td> </tr> </table> </div> <span class="STYLE30"><a href="&q

30、uot; onmouseover="MM_showHideLayers('Layer2','','show')" onmouseout="MM_showHideLayers('Layer2','','hide')">健康資訊</a></span></td> <td width="140"><div id="Layer3"> <table width=

31、"200" height="61" border="0" onmouseover="MM_showHideLayers('Layer3','','show')" onmouseout="MM_showHideLayers('Layer3','','hide')"> <tr> <td height="27" bgcolor="#9966FF"

32、; class="STYLE36">相冊</td> </tr> <tr> <td height="26" bgcolor="#9966FF" class="STYLE36">隨拍</td> </tr> </table> </div> <span class="STYLE9"><a href="" onmouseover="MM_showHideLa

33、yers('Layer3','','show')" onmouseout="MM_showHideLayers('Layer3','','hide')">健腦飲食</a></span></td> <td width="140" bgcolor="#9966FF"><span class="STYLE9"><a href="&quo

34、t;>美食團購</a></span></td> <td width="140"><span class="STYLE9"><a href="">食材百科</a></span></td> <td width="140"><span class="STYLE9"><a href="">母嬰飲食</a></span&

35、gt;</td> <td width="140"><span class="STYLE9"><a href=""> 美容飲食</a></span></td> </tr> </table> <table width="1093" height="181" border="0"> <tr> <td width="448" h

36、eight="177" align="left" valign="top"><div id="jiaodianContent"></div> <script type="text/javascript">/焦點var xmlData="<list><item><title>近期活動</title><img>images/</img><url></url&g

37、t;<item><title> 菠菜</title><title2>美食精選</title2><img>images/</img><url></url></item><item><title>家常菜菜譜</title><title2>主題食譜</title2><img>images/</img><url></url></item><item>&l

38、t;title>12鮮肉</title><title2></title2><img>images/</img><url></url></item><item><title>土豆</title><title2></title2><img>images/</img><url></url></item><item><title></title>&

39、lt;title2></title2><img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item><item><title></title><title2></title2><

40、img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><ur

41、l></url></item><item><title></title><title2></title2><img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item>&l

42、t;item><title></title><title2></title2><img>images/</img><url></url></item><item><title>牛奶</title><title2></title2><img>images/</img><url></url></item><item><title></ti

43、tle><title2>讓口水飛</title2><img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item></item><item><title></title><img&

44、gt;images/</img><url></url><item><title></title><title2></title2><img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url>

45、</item><item><title></title><title2></title2><img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item><item><tit

46、le></title><title2></title2><img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item><item><title></title><title2&g

47、t;</title2><img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item><item><title></title><title2></title2><img>imag

48、es/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item><item><title></title><title2>讓口水飛</title2><img>images/</img><url>&l

49、t;/url></item><item><title></title><title2></title2><img>images/</img><url></url></item></item><item><title></title><img>images/</img><url></url><item><title></title>

50、;<title2></title2><img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item><item><title></title><title2></title2>&l

51、t;img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><

52、url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item>

53、<item><title></title><title2>讓口水飛</title2><img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item></item><item><

54、;title>本周主打</title><img>images/</img><url></url><item><title></title><title2></title2><img>images/</img><url></url></item><item><title></title><title2></title2><img>images

55、/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item><item><title>牛奶</title><title2></title2><img>images/</img><url></u

56、rl></item><item><title></title><title2>讓口水飛</title2><img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item></item

57、><item><title></title><img>images/</img><url></url><item><title></title><title2></title2><img>images/</img><url></url></item><item><title></title><title2>讓口水飛</title2&g

58、t;<img>images/</img><url></url></item><item><title></title><title2></title2><img>images/</img><url></url></item></item></list>"var flashvars = xmlData:xmlData;var params = menu:false,wmode:&quo

59、t;transparent"var attributes = ;（二）菜譜大全界面設(shè)計：設(shè)計效果如下：主要源代碼：<td width="150" height="32"> <a href="#">返回首頁</a></td> <td width="662">&nbsp;</td> <td width="127"><span class="STYLE4"><a

60、href="#"><a href="#" class="one" onClick="='url(#default#homepage)'('');">設(shè)成首頁</a></span></td> <td width="164"><span class="STYLE4"><a href="#">意見反饋</a></span&g

61、t;</td> </tr> </table> <p align="center"><span class="STYLE41"><span class="STYLE42"><img src="images/" alt="1" width="250" height="30" />徽州美食網(wǎng)站</span><img src="images/"

62、 alt="0" width="250" height="30" /></span></p></td> </tr> </table> <table width="1100" border="0" bordercolor="#FFFFFF" bgcolor="#9966FF"> <tr> <td width="140" height="

63、;37"><span class="STYLE9"><a href="#">首頁</a></span></td> <td width="140"><div id="Layer1" onmouseover="MM_showHideLayers('Layer1','','show')" onmouseout="MM_showHideLayers(&#

64、39;Layer1','','hide')"> <table width="200" height="113" border="0" bordercolor="#9933FF" bgcolor="#99CC99" onmouseover="MM_showHideLayers('Layer1','','show')" onmouseout="MM_showHi

65、deLayers('Layer1','','hide')"> <tr> <td bgcolor="#9966FF"><span class="STYLE36">家常菜譜</span></td> </tr> <tr> <td bgcolor="#9966FF"><span class="STYLE36">美容菜譜</span></

66、td> </tr> <tr> <td bgcolor="#9966FF"><span class="STYLE36">營養(yǎng)搭配菜譜</span></td> </tr> </table> </div> <span class="STYLE9"><a href="" onmouseover="MM_showHideLayers('Layer1',''

67、;,'show')" onmouseout="MM_showHideLayers('Layer1','','hide')">菜譜大全</a></span></td> <td width="140"><div id="Layer2" onmouseover="MM_showHideLayers('Layer2','','show')" o

68、nmouseout="MM_showHideLayers('Layer2','','hide')"> <table width="200" border="0"> <tr> <td height="29" bgcolor="#9966FF"> <span class="STYLE36">營養(yǎng)常識</span></td> </tr> <

69、tr> <td height="28" bgcolor="#9966FF"><span class="STYLE36">營養(yǎng)健康</span></td> </tr> <tr> <td height="29" bgcolor="#9966FF" class="STYLE36">營養(yǎng)手冊</td> </tr> </table> </div> &

70、lt;span class="STYLE9"><a href="" onmouseover="MM_showHideLayers('Layer2','','show')" onmouseout="MM_showHideLayers('Layer2','','hide')">健康資訊</a></span></td> <td width="140"

71、;><div id="Layer3"> <table width="200" height="61" border="0" onmouseover="MM_showHideLayers('Layer3','','show')" onmouseout="MM_showHideLayers('Layer3','','hide')"> <tr>

72、<td height="27" bgcolor="#9966FF" class="STYLE36">相冊</td> </tr> <tr> <td height="26" bgcolor="#9966FF" class="STYLE36">隨拍</td> </tr> </table> </div> （三）健康資訊界面設(shè)計：主要源代碼： </tr> </t

73、able> <table width="1097" border="0"> <tr> <td width="1087" bgcolor="#FF9966"><span class="STYLE37">各種水果的功能</span></td> </tr> <tr> <td><div align="left">火龍果：</div></td&

74、gt; </tr> <tr> <td><div align="left"> （四）健腦飲食界面設(shè)計：網(wǎng)頁設(shè)計圖如下：主要源代碼： <table width="1098" border="0"> <tr> <td width="734"><span class="STYLE54">八大補腦食品 最新排行</span></td> <td width="348&quo

75、t; rowspan="17" valign="top"><img src="images/" width="350" height="449" /></td> </tr> <tr> <td> <div align="left">深色綠葉菜 </div></td> </tr> <tr> <td><div align="left