個(gè)人美食網(wǎng)站

摘 要在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。Internet上發(fā)布信息主要是通過(guò)網(wǎng)站來(lái)實(shí)現(xiàn)的，獲取信息也是要在Internet“海洋”中按照一定的檢索方式將所需要的信息從網(wǎng)站上下載下來(lái)。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見(jiàn)，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。為了讓更多客人了解不同信息的情況，提高信息共享度。本網(wǎng)站通過(guò)用Dreamweaver、Javascript、CSS等編寫(xiě)的美食網(wǎng)站，其主要包括幾個(gè)模塊:首頁(yè)、美味時(shí)尚、地方特色、專(zhuān)題、最新推薦等。通過(guò)本網(wǎng)站系統(tǒng)能提供各種與美食相關(guān)的信息以及各種美食信息的交流。與其它企業(yè)網(wǎng)站一樣，也應(yīng)通過(guò)Internet來(lái)對(duì)外宣傳網(wǎng)站。關(guān)鍵字：Dreamweaver Javascript Internet DIV CSSAbstractIn the Internet today, with the rapid development of Internet become people to quickly get, distribution and transfer information important channel, it in people politics, economy, life aspects plays an important role. Internet information placed mainly through the website to realize, obtaining information is also to be in the Internet sea in accordance with certain retrieval methods will be required information from web site download. Therefore website construction in the Internet application status are obvious, it has become the government, enterprises, an important part of informatization construction, thus much attention. In order to let more guests to understand different information, improve information sharing degree.This website passes to use Dreamweaver,javascript,CSS etc. of delicacies website, it mainly includes a few mold piece:home page,delicacies specialty area,sweet article specialty area, delicacies material,forum etc. Passing this website system can provide various and the delicacies related information and various delicacies information of exchanges. Similar to other business enterprise websiteses,should also pass Intemet to publicizee a website outward.This website passes to use Dreamweaver,javascript,CSS etc. of delicacies website, it mainly includes a few mold piece:home page,delicacies specialty area,sweet article specialty area, delicacies material,forum etc. Passing this website system can provide various and the delicacies related information and various delicacies information of exchanges. Similar to other business enterprise websiteses,should also pass Intemet to publicizee a website outward.Keywords: Dreamweaver Javascript Internet DIV CSS目 錄引 言1第一章 網(wǎng)頁(yè)制作概述21.1網(wǎng)頁(yè)的基礎(chǔ)知識(shí)21.1.1 Internet簡(jiǎn)介21.1.2 網(wǎng)頁(yè)的概述21.1.3 站點(diǎn)與網(wǎng)頁(yè)的建立21.2個(gè)人網(wǎng)站設(shè)計(jì)的主要因素31.2.1網(wǎng)站的定位31.2.2網(wǎng)站的構(gòu)思3第二章 開(kāi)發(fā)工具和運(yùn)行環(huán)境42.1 網(wǎng)站設(shè)計(jì)的基本知識(shí)42.2 Dreamweaver 開(kāi)發(fā)工具概述42.3 HTML簡(jiǎn)介52.4 HTML技術(shù)介紹52.4.1網(wǎng)頁(yè)和Html語(yǔ)言52.4.2 CSS簡(jiǎn)介62.5 Flash 概述72.6 網(wǎng)站運(yùn)行環(huán)境7第三章 美食網(wǎng)站需求分析93.1 美食網(wǎng)站功能描述93.2 系統(tǒng)的可行性分析9第四章 網(wǎng)站系統(tǒng)的實(shí)現(xiàn)104.1 素材的準(zhǔn)備104.2 首頁(yè)的制作104.3 其他網(wǎng)頁(yè)的制作154.3.1 美味時(shí)尚模塊實(shí)現(xiàn)154.3.2 地方特色模塊實(shí)現(xiàn)164.4 網(wǎng)頁(yè)中特效的制作16第五章 網(wǎng)站測(cè)試與維護(hù)215.1 網(wǎng)站的建成215.2 網(wǎng)站的發(fā)布21總 結(jié)22參考文獻(xiàn)2427引 言2010年上半年，我國(guó)餐飲市場(chǎng)消費(fèi)需求較旺，景氣指數(shù)明顯攀升，營(yíng)業(yè)額繼續(xù)保持較強(qiáng)的增長(zhǎng)勢(shì)頭。據(jù)國(guó)家統(tǒng)計(jì)局統(tǒng)計(jì)，上半年餐飲業(yè)實(shí)現(xiàn)營(yíng)業(yè)額3373.7億元，與去年同期增長(zhǎng)24.5%：其中一季度實(shí)現(xiàn)營(yíng)業(yè)額1742.3億元，同比增長(zhǎng)16.6%；二季度餐飲業(yè)實(shí)現(xiàn)營(yíng)業(yè)額1631.4億元，同比增長(zhǎng)達(dá)到34.2%，增幅較大，主要是去年同期餐飲業(yè)受非典影響增幅下降10.1個(gè)百分點(diǎn)，同比基數(shù)較低的因素影響。據(jù)推算，我國(guó)現(xiàn)有餐飲網(wǎng)點(diǎn)達(dá)到400萬(wàn)個(gè)，其中個(gè)體私營(yíng)企業(yè)380萬(wàn)個(gè)，占到95%左右；外資合資與國(guó)有企業(yè)約20萬(wàn)個(gè)，占到5%左右，企業(yè)結(jié)構(gòu)不斷調(diào)整，行業(yè)規(guī)模繼續(xù)擴(kuò)大。近兩年來(lái)，一大批網(wǎng)站正在吸引著人們的眼球。然而，除了少數(shù)網(wǎng)站受到風(fēng)險(xiǎn)投資的青睞并實(shí)現(xiàn)飛躍式發(fā)展之外，很大一部分正處于迷茫摸索甚至掙扎的狀態(tài)。在餐飲業(yè)這樣一個(gè)與老百姓“衣食住行”息息相關(guān)的傳統(tǒng)領(lǐng)域，各種網(wǎng)站走出了不同電子商務(wù)之路，催生出餐飲業(yè)電子商務(wù)發(fā)展。隨著生活質(zhì)量的提高，對(duì)飲食消費(fèi)理性化、經(jīng)營(yíng)特色化和市場(chǎng)細(xì)分化的特點(diǎn)日益突現(xiàn)出來(lái)。調(diào)查反映，2010年上半年的餐飲消費(fèi)在需求能力有所提高的同時(shí)，顧客的就餐選擇性和多樣性的特點(diǎn)明顯，更加追求企業(yè)的品牌特色、營(yíng)養(yǎng)健康和環(huán)境服務(wù)的綜合水平，特別是對(duì)餐飲企業(yè)的經(jīng)營(yíng)特色化和差異性的要求不斷提高，特色餐飲對(duì)消費(fèi)的吸引力明顯增強(qiáng)。餐飲企業(yè)的創(chuàng)新能力不斷提升，在經(jīng)營(yíng)業(yè)態(tài)、菜品推出、風(fēng)味設(shè)計(jì)和文化氛圍等方面加大開(kāi)發(fā)力度，市場(chǎng)細(xì)分化趨勢(shì)增強(qiáng)，更加豐富多彩。隨著飲食市場(chǎng)的不斷變化對(duì)業(yè)界提出了一系列新的要求，而通過(guò)電子商務(wù)網(wǎng)站形式加強(qiáng)企業(yè)的競(jìng)爭(zhēng)能力已經(jīng)成為一種趨勢(shì)，所以我建立了一個(gè)美食網(wǎng)站。本文主要針對(duì)該網(wǎng)站的各方面內(nèi)容進(jìn)行描述。第一章 網(wǎng)頁(yè)制作概述1.1網(wǎng)頁(yè)的基礎(chǔ)知識(shí)1.1.1 Internet簡(jiǎn)介 Internet 最早來(lái)源于美國(guó)國(guó)防部高級(jí)研究計(jì)劃局DARPA的前身ARPA建立的ARPAnet，該網(wǎng)于1969年投入使用。從60年代開(kāi)始，ARPA就開(kāi)始向美國(guó)國(guó)內(nèi)大學(xué)的計(jì)算機(jī)系和一些私人有限公司提供經(jīng)費(fèi)，以促進(jìn)基于分組交換技術(shù)的計(jì)算機(jī)網(wǎng)絡(luò)的研究。1968年，ARPA為ARPAnet網(wǎng)絡(luò)項(xiàng)目立項(xiàng)，這個(gè)項(xiàng)目基于這樣一種主導(dǎo)思想：網(wǎng)絡(luò)必須能夠經(jīng)受住故障的考驗(yàn)而維持正常工作，一旦發(fā)生戰(zhàn)爭(zhēng)，當(dāng)網(wǎng)絡(luò)的某一部分因遭受攻擊而失去工作能力時(shí)，網(wǎng)絡(luò)的其他部分應(yīng)當(dāng)能夠維持正常通信。最初，ARPAnet主要用于軍事研究目的它有五大特點(diǎn)：(1) 支持資源共享；(2) 采用分布式控制技術(shù)；(3) 采用分組交換技術(shù)；(4) 使用通信控制處理機(jī)；(5) 采用分層的網(wǎng)絡(luò)通信協(xié)議。1.1.2 網(wǎng)頁(yè)的概述網(wǎng)站，就是指在網(wǎng)際網(wǎng)路上，根據(jù)一定的規(guī)則使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁(yè)的集合。簡(jiǎn)單地說(shuō)，網(wǎng)站是一種通訊工具，就像布告欄一樣，人們可以通過(guò)網(wǎng)站來(lái)發(fā)布自己想要公開(kāi)的資訊，或者利用網(wǎng)站來(lái)提供相關(guān)的網(wǎng)絡(luò)服務(wù)。人們可以通過(guò)網(wǎng)頁(yè)瀏覽器來(lái)訪問(wèn)網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)。通俗說(shuō)，網(wǎng)站就是由網(wǎng)頁(yè)組成的。網(wǎng)頁(yè)通常是HTML格式。1.1.3 站點(diǎn)與網(wǎng)頁(yè)的建立在制作網(wǎng)頁(yè)之前，首先要?jiǎng)?chuàng)建和設(shè)置本地站點(diǎn)。首先要?jiǎng)?chuàng)建本地站點(diǎn)的文件夾，命名為index.html,然后分別建立“首頁(yè)”、“美味時(shí)尚”、“地方特色”、“專(zhuān)題”等主要網(wǎng)頁(yè)。然后在“美味時(shí)尚”中有設(shè)分頁(yè)，將內(nèi)容進(jìn)一步擴(kuò)展。編輯網(wǎng)頁(yè)時(shí)，直接點(diǎn)擊右側(cè)文件中的相應(yīng)網(wǎng)頁(yè)即可。1.2個(gè)人網(wǎng)站設(shè)計(jì)的主要因素1.2.1網(wǎng)站的定位網(wǎng)站的定位很重要，制作一個(gè)好的網(wǎng)站，必須對(duì)網(wǎng)站風(fēng)格及內(nèi)容有一個(gè)準(zhǔn)確的定位。美食網(wǎng)站的主題通常取決于網(wǎng)站作者的愛(ài)好和興趣。本網(wǎng)站的一個(gè)美食網(wǎng)站，所以命名為“小饞貓美食網(wǎng)”。1.2.2網(wǎng)站的構(gòu)思美食網(wǎng)的前臺(tái)主要包括首頁(yè)、美味時(shí)尚、地方特色、專(zhuān)題、最新推薦等模塊。為了方便讀者對(duì)系統(tǒng)文件有更清晰的認(rèn)識(shí)和使用，我使用了以下一個(gè)設(shè)計(jì)構(gòu)思：首 頁(yè)美味時(shí)尚專(zhuān) 題地方小吃圖1-1 系統(tǒng)功能圖第二章 開(kāi)發(fā)工具和運(yùn)行環(huán)境2.1 網(wǎng)站設(shè)計(jì)的基本知識(shí)靜態(tài)編程最重要的特征就是由程序自動(dòng)生成網(wǎng)頁(yè)，最終形成供瀏覽器解釋的HTML。那么如何設(shè)計(jì)出精美的網(wǎng)頁(yè)以及動(dòng)態(tài)更新交互的站點(diǎn)，這就需要網(wǎng)頁(yè)編程與網(wǎng)頁(yè)制作相結(jié)合。本章主要介紹網(wǎng)站建設(shè)所必須掌握的基礎(chǔ)知識(shí)，如網(wǎng)頁(yè)文檔的結(jié)構(gòu)、超鏈接、表格和表單等基本的HTML標(biāo)識(shí)的寫(xiě)法要求，網(wǎng)頁(yè)編輯的常用工具，動(dòng)態(tài)網(wǎng)站項(xiàng)目工程的設(shè)計(jì)步驟要求，以及網(wǎng)站的發(fā)布與維護(hù)、網(wǎng)站的主機(jī)方案等相關(guān)知識(shí)。2.2 Dreamweaver 開(kāi)發(fā)工具概述Dreamweaver是在網(wǎng)頁(yè)設(shè)計(jì)與制作領(lǐng)域中用戶(hù)最多、應(yīng)用最廣、功能最強(qiáng)大的軟件，隨著Dreamweaver 8的發(fā)布，更堅(jiān)定Dreamweaver在該領(lǐng)域的地位。它集網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站開(kāi)發(fā)和站點(diǎn)管理功能于一身，具有可視化、支持多平臺(tái)和跨瀏覽器的特性，是目前網(wǎng)站設(shè)計(jì)、開(kāi)發(fā)、制作的首選工具。突出的特點(diǎn)主要有靈活的編寫(xiě)方式；可視化編輯界面；功能更多的CSS支持CSS可視化設(shè)計(jì)、CSS檢查工具；動(dòng)態(tài)跨瀏覽器驗(yàn)證；強(qiáng)大的WEB站點(diǎn)管理功能；內(nèi)建的圖形編輯引擎；豐富的媒體支持能力等。將世界一流水平的“設(shè)計(jì)”和“代碼”編輯器合二為一，在設(shè)計(jì)窗口中精華源代碼，使用戶(hù)能夠按工作的需要定制自己的用戶(hù)界面。1. 利用豐富的CSS樣式表支持構(gòu)筑復(fù)雜，標(biāo)準(zhǔn)規(guī)范的站點(diǎn)。同時(shí)提供了豐富的用于快速的工具和樣式屬性控制工具。2. 跨瀏覽器有效性檢查。保存時(shí)自動(dòng)地檢查當(dāng)前文檔跨瀏覽器的有效性，兼容性。3. 使用內(nèi)置的圖像編輯器程序讓開(kāi)發(fā)更加節(jié)省時(shí)間。裁剪，縮放等一些輔助性的圖像編輯功能可以不用離開(kāi)Dreamweaver就能夠完成，編輯工具是內(nèi)嵌的Macromedia Fireworks技術(shù)。4. 增強(qiáng)與其他軟件的結(jié)合能力，包括Flash,Fireworks及其他設(shè)計(jì)開(kāi)發(fā)工具。5. 支持Macromedia Flash 元素。通過(guò)內(nèi)置的Flash構(gòu)件，Dreamweaver 8增加了頁(yè)面的交互性，導(dǎo)入一個(gè)Flash構(gòu)件就像定制標(biāo)簽一樣輕松。6. 基本支持改良:插入條,表格工具都有改進(jìn)!7. 增強(qiáng)代碼編寫(xiě)工具:編輯代碼更省時(shí),例如右鍵編寫(xiě)代碼工具,增強(qiáng)的查找和替換,高效的屬性面板。8. 改進(jìn)的設(shè)計(jì)開(kāi)放環(huán)境:一個(gè)改良的用戶(hù)界面,更高的實(shí)用性,非常親切和有邏輯,讓你快速找到你想要的東西,一個(gè)新的開(kāi)始屏幕讓你快速訪問(wèn)最近的文件和教程資源。2.3 HTML簡(jiǎn)介全稱(chēng)：HyperText Mark-up Language。 譯稱(chēng)：超文本標(biāo)記語(yǔ)言。 簡(jiǎn)意：一種為普通文件中某些字句加上標(biāo)識(shí)的語(yǔ)言，其目的在于運(yùn)用標(biāo)記（tag）合文件 達(dá)到預(yù)期的效果。 HTML 是在 SGML 定義下的一個(gè)描述性的語(yǔ)言，或可說(shuō) HTML 是 SGML 的一個(gè)應(yīng)用程式。HTML 不是程式語(yǔ)言，如 C+ 和 Java 之類(lèi)，它只是標(biāo)記語(yǔ)言，基本上你只要明白了各種 標(biāo)記的用法便算學(xué)懂了 HTML，HTML 的格式非常簡(jiǎn)單，只是由文字及標(biāo)記組合而成，于 編輯部方面，任何文字編輯器都市可以，只要能將檔案存為文本格式即可， 用專(zhuān)門(mén)的網(wǎng)頁(yè)編輯工具當(dāng)然更好。2.4 HTML技術(shù)介紹Macromedia公司的Roundtrip HTML技術(shù)讓用戶(hù)可以隨意導(dǎo)入HTML文件而無(wú)需重新設(shè)置代碼格式，用戶(hù)還可以利用Dreamweaver清除或重新格式化HTML代碼，實(shí)現(xiàn)代碼的優(yōu)化。2.4.1網(wǎng)頁(yè)和Html語(yǔ)言我們的網(wǎng)頁(yè)是用html語(yǔ)言編寫(xiě)的一個(gè)網(wǎng)站，html中文翻譯為“超文本標(biāo)記語(yǔ)言”，所謂“超文本”就是指頁(yè)面內(nèi)可以包含圖片，鏈接，多媒體等非問(wèn)字的元素，通過(guò)html語(yǔ)言將這些元素表示出來(lái)，就形成了html代碼。瀏覽器的工作主要是將這些標(biāo)記語(yǔ)言進(jìn)行“翻譯”，并按照定義的格式顯示出來(lái)，這就是我們所看到的網(wǎng)頁(yè)。HTML的結(jié)構(gòu)包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說(shuō)明的具體內(nèi)容。 另外，HTML是網(wǎng)絡(luò)的通用語(yǔ)言,一種簡(jiǎn)單、通用的全置標(biāo)記語(yǔ)言。它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類(lèi)型的電腦或?yàn)g覽器。其主要特點(diǎn)如下：（1）簡(jiǎn)易性，HTML版本升級(jí)采用超集方式，從而更加靈活方便。（2）可擴(kuò)展性，HTML語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，HTML采取子類(lèi)元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。（3）平臺(tái)無(wú)關(guān)性。雖然PC機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，HTML可以使用在廣泛的平臺(tái)上。2.4.2 CSS簡(jiǎn)介CSS (層疊樣式表) 是一系列格式設(shè)置規(guī)則，它們控制 Web 頁(yè)面內(nèi)容的外觀。使用 CSS 設(shè)置頁(yè)面格式時(shí)，請(qǐng)將內(nèi)容與表現(xiàn)形式分開(kāi)。頁(yè)面內(nèi)容（即 HTML 代碼）駐留在 HTML 文件自身中，而用于定義代碼表現(xiàn)形式的 CSS 規(guī)則駐留在另一個(gè)文件（外部樣式表）或 HTML 文檔的另一部分（通常為文件頭部分）中。使用 CSS 可以非常靈活并更好地控制具體的頁(yè)面外觀，從精確的布局定位到特定的字體和樣式。CSS 允許控制 HTML 無(wú)法獨(dú)自控制的許多屬性。除設(shè)置文本格式外，還可以使用 CSS 控制 Web 頁(yè)面中塊級(jí)別元素的格式和定位。CSS 的主要優(yōu)點(diǎn)是: 它提供了便利的更新功能；更新一處的 CSS 規(guī)則時(shí)，使用該已定義樣式的所有文檔的格式都會(huì)自動(dòng)更新為新樣式。外部 CSS 樣式表是一系列存儲(chǔ)在一個(gè)單獨(dú)的外部 CSS (.css) 文件（并非 HTML 文件）中的 CSS 規(guī)則。利用文檔文件頭部分中的鏈接，該文件被鏈接到 Web 站點(diǎn)中的一個(gè)或多個(gè)頁(yè)面。內(nèi)部（或嵌入式）CSS 樣式表是一系列包含在 HTML 文檔文件頭部分的 style 標(biāo)簽內(nèi)的 CSS 規(guī)則2.5 Flash 概述Flash是Macromedia公司開(kāi)發(fā)一款優(yōu)秀的網(wǎng)頁(yè)動(dòng)畫(huà)開(kāi)發(fā)軟件，從簡(jiǎn)單的動(dòng)畫(huà)到復(fù)雜的交互式Web應(yīng)用程序，它使用戶(hù)可以創(chuàng)建任何作品。通過(guò)添加圖片、聲音和視頻，可以使Flash應(yīng)用程序媒體豐富多彩。Flash包含了許多種功能，如拖入用戶(hù)界面組件、將動(dòng)作腳本添加到文檔的內(nèi)置行為，以及可以添加到對(duì)象的特殊效果。這些功能使Flash不僅功能強(qiáng)大，而且易于使用。最嘆引人的還是Flash作品SWF文件體積出奇的小，并且可以以插件的形式加入到網(wǎng)頁(yè)中，通常幾分鐘的復(fù)雜動(dòng)畫(huà)才幾百KB，是目前網(wǎng)絡(luò)中最常用的動(dòng)畫(huà)格式。Flash MX 2004是Web設(shè)計(jì)人員、交互式媒體專(zhuān)業(yè)人員或開(kāi)發(fā)多媒體內(nèi)容的主要專(zhuān)家的理想工具。該版本注重于創(chuàng)建、導(dǎo)入和處理多種類(lèi)型的媒體（音頻、視頻、位圖、矢量、文本和數(shù)據(jù)）。2.6 網(wǎng)站運(yùn)行環(huán)境 服務(wù)器： 操作系統(tǒng)： windows XP Server； Web服務(wù)器：IIS5.0 數(shù)據(jù)平臺(tái)：Access 客戶(hù)端： 任意操作系統(tǒng)下的瀏覽器均可。 配置要求： CPU Intel或兼容機(jī)Pentium 166Mhz或以上 企業(yè)版：至少64M建議128M或更多 內(nèi)存 標(biāo)準(zhǔn)版：至少512M 開(kāi)發(fā)版：至少512M 硬盤(pán) Service：至少80G，一般為160G English Query：80M顯視器 VGA或更高分辨率在服務(wù)器端的電腦上運(yùn)行microsoft windows XP server，或者是Windows V7的Personal Web，安裝好Macromedia Dreamweaver 8，將用Macromedia Dreamweaver 8制作的文件名的后綴一定要改為 .html ，然后上傳到服務(wù)器上一個(gè)有執(zhí)行權(quán)的目錄下，瀏覽器端的電腦，只要是上得了英特網(wǎng)的就可以了，目前的個(gè)人電腦基本上都符合這個(gè)程序的瀏覽與運(yùn)行，比如現(xiàn)在的瀏覽器是微軟的explorer使用的最多，然后不管是內(nèi)網(wǎng)和外網(wǎng)，只要用瀏覽端瀏覽器的地址欄輸入正確的要瀏覽WEB的地址或叫路徑發(fā)送，服務(wù)端就會(huì)根據(jù)瀏覽器的要求執(zhí)行 Macromedia Dreamweaver 8 程序，腳本程序?qū)⒁徽酌畎l(fā)送給腳本解釋器 ( 即腳本引擎 ) ，由腳本解釋器進(jìn)行翻譯并將其轉(zhuǎn)換成服務(wù)器所能執(zhí)行的命令，得到答案并將標(biāo)準(zhǔn)的 HTML 頁(yè)面，返回給用戶(hù)瀏覽端。第三章 美食網(wǎng)站需求分析在進(jìn)行一個(gè)網(wǎng)站項(xiàng)目開(kāi)發(fā)之前，應(yīng)對(duì)這一開(kāi)發(fā)項(xiàng)目進(jìn)行了需求分析，以確定網(wǎng)站開(kāi)發(fā)者需要完成哪些工作才能滿足用戶(hù)的需求。3.1 美食網(wǎng)站功能描述在現(xiàn)今的信息共享的時(shí)代，網(wǎng)絡(luò)信息化管理工作系統(tǒng)經(jīng)信息量大、數(shù)據(jù)準(zhǔn)確、速度快、管理工作全面等特點(diǎn)在現(xiàn)實(shí)生活中得到廣泛地應(yīng)用。互聯(lián)網(wǎng)商業(yè)的普及應(yīng)用已經(jīng)成為網(wǎng)絡(luò)經(jīng)濟(jì)的大勢(shì)所趨。本章介紹的美食網(wǎng)站是建立在用戶(hù)和美食信息之間的，用戶(hù)可以方便、快捷地查找到自己所需要了解的有關(guān)于食物制作方法的信息，可以足不出戶(hù)就能了解到自己喜歡的美食的制作方法的基本信息，從而提高自己的做菜水平以及在以后生活中能夠有需要的去體驗(yàn)不一樣的口味。3.2 系統(tǒng)的可行性分析(1)實(shí)用性網(wǎng)站的宗旨是根據(jù)用戶(hù)需求的有關(guān)食物信息和現(xiàn)今發(fā)展形勢(shì)提供有關(guān)與美食制作的詳細(xì)信息，(2)技術(shù)性網(wǎng)站提供給客戶(hù)了了解食物的的基本信息和各種歷史信息，使客戶(hù)能夠更好的在本站內(nèi)獲得他們所需的東西。(3)經(jīng)濟(jì)性網(wǎng)站能夠提供給致力于推廣美食文化的企業(yè)或者個(gè)人來(lái)達(dá)到所能達(dá)到的經(jīng)濟(jì)效益，并且能夠達(dá)到預(yù)期的推廣效果。第四章 網(wǎng)站系統(tǒng)的實(shí)現(xiàn)4.1 素材的準(zhǔn)備準(zhǔn)備做網(wǎng)站的素材是最重要的一環(huán)，不僅要收集許多內(nèi)容各異的文字圖片，還要設(shè)計(jì)各種網(wǎng)站的排版格式與美工。這個(gè)網(wǎng)站的排版格式是我自己用Dreamweaver畫(huà)出來(lái)的，其中的圖片有的是自己處理的，也有些是從網(wǎng)上下載后自己用Photoshop、Fireworks處理的。4.2 首頁(yè)的制作先把素材整理成一些整齊的目錄，最好就在網(wǎng)頁(yè)需要放置的目錄下，我把它放在文件夾“網(wǎng)頁(yè)/image和flash”下。定義站點(diǎn)是選擇這個(gè)目錄，這樣素材就全位于站點(diǎn)以?xún)?nèi)，處理比較方便。1、定義站點(diǎn)（1）啟動(dòng)Dreamweaver。（2）打開(kāi)“站點(diǎn)”菜單，選擇“新建站點(diǎn)”命令。圖4-1 站點(diǎn)的定義（3）在彈出的“站點(diǎn)定義”對(duì)話框中的“站點(diǎn)命令”文本框中輸入“小饞貓美食網(wǎng)”，在下面的“本地根目錄文件夾”文本框中輸入本地網(wǎng)站預(yù)保存的路徑，單擊“確認(rèn)”按鈕。（4）隨即在組合面板中彈出“站點(diǎn)”面板，現(xiàn)在可以在其中添加頁(yè)面了。（5）右鍵單擊“站點(diǎn)”面板中的根目錄，在彈出菜單中選擇“新建文件”命令，把新建文件的名稱(chēng)改為”index.html”。（6）雙擊index.html，進(jìn)入頁(yè)面編輯狀態(tài)。（7）首先劃分整個(gè)頁(yè)面的布局。點(diǎn)擊“布局”按鈕進(jìn)入布局模式，劃分頁(yè)面，將整個(gè)頁(yè)面劃分為五部分：上面橫幅部分，用來(lái)表明頁(yè)面的主題；接著橫幅部分是一小塊鏈接部分，用來(lái)鏈接其他的幾個(gè)頁(yè)面；左面較為狹窄的部分，是一些鏈接，算是修飾部分吧；右面是主要部分，頁(yè)面的主要內(nèi)容放在這里；最底下的小塊部分，說(shuō)明網(wǎng)站的制作者和聯(lián)系方式。圖4-2 表格建立（8）然后在頁(yè)面頭部添加背景圖片： ，并在頭部右側(cè)寫(xiě)好自己網(wǎng)站的各個(gè)部分名稱(chēng)，并且設(shè)置好背景圖片設(shè)置好鏈接 首 頁(yè) 美味時(shí)尚 地方特色/a專(zhuān) 題   （圖5-3）圖5-3（9）然后在頁(yè)面中部的左側(cè)設(shè)置上背景和相關(guān)CSS設(shè)置，寫(xiě)上些自我介紹的文字。（圖5-4）圖 5-4（10）在頁(yè)面的左上角插入5張圖片，放入事先設(shè)置好的表格。運(yùn)用javascript的代碼，做一個(gè)變換效果。代碼如下： Loading. 黑巧克力玫瑰蛋糕 原料：低筋粉90克、蛋黃4個(gè) 、蛋白4個(gè)、好時(shí)Special Dark特濃黑巧克力。 做法：1、4個(gè)蛋黃，加入30克白糖攪勻顏色變淡，比較粘稠時(shí)，再加入50克橄欖油、50克水拌勻，再篩入低筋粉90克，奶粉20克，泡打粉2克，鹽2克。 2、4 白中滴入白醋，分三次加入150克白糖打發(fā)，直至將打蛋器立起，被打發(fā)的蛋清. （11）在頁(yè)面的中部加上個(gè)人簡(jiǎn)介 并且設(shè)置好CSS樣式和各個(gè)鏈接。圖 5-5(12)最后添加首頁(yè)站內(nèi)索引，相關(guān)鏈接的鏈接，代碼如下： 韓式大醬湯 草莓酸奶沙拉 菊花三泡臺(tái) tr方便面煎蛋餅 黑芝麻豆渣餅 蒙布朗 貴州美食 感受云南民俗 紫薯椰蓉球 花生醬吐司 之心可樂(lè)餅等4.3 其他網(wǎng)頁(yè)的制作4.3.1 美味時(shí)尚模塊實(shí)現(xiàn)圖 5-6這一組是美味時(shí)尚頁(yè)面，我使用了的是圖像鏈接，代碼如下： /p4.3.2 地方特色模塊實(shí)現(xiàn)圖 5-7 4.4 網(wǎng)頁(yè)中特效的制作網(wǎng)頁(yè)特效的運(yùn)用在整個(gè)網(wǎng)站中并不是最重要的，但也是不可取少的，它在一定程度上起到了畫(huà)龍點(diǎn)睛的作用！也許你會(huì)說(shuō)，有沒(méi)有特效無(wú)所謂，只要網(wǎng)頁(yè)構(gòu)思好，網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)的得好就可以了！這種想法是不對(duì)的，過(guò)多的網(wǎng)頁(yè)特效會(huì)使得頁(yè)面顯得雜亂而且不整潔，但是適度的網(wǎng)頁(yè)特效卻能使網(wǎng)頁(yè)更具有靈動(dòng)性，更能吸引人的眼球！在我們的網(wǎng)站的不同頁(yè)面中分別運(yùn)用了一些網(wǎng)頁(yè)特效，是從網(wǎng)上下載的網(wǎng)頁(yè)特效的代碼，具體如下：1、滾屏特效效果：該特效的效果和幻燈片播放效果類(lèi)似，多個(gè)圖片循環(huán)出現(xiàn)，不?；Q。在所有頁(yè)面中都有體現(xiàn)。圖 5-8圖5-9代碼如下：var s=function()var interv=2000; /切換間隔時(shí)間var interv2=10; /切換速速var opac1=80; /文字背景的透明度var source=fade_focus /圖片容器id/獲取對(duì)象function getTag(tag,obj)if(obj=null)return document.getElementsByTagName(tag)elsereturn obj.getElementsByTagName(tag)function getid(id)return document.getElementById(id);var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag(div,id)0);var li=getTag(li,id);var div=document.createElement(div);var title=document.createElement(div);var span=document.createElement(span);var button=document.createElement(div);button.className=button;for(var i=0;ili.length;i+)var a=document.createElement(a);a.innerHTML=i+1;a.onclick=function()clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();a.className=b1;a.onmouseover=function()this.clas sName=b2;a.onmouseout=function()this.className=b1;sc(j);button.appendChild(a);/控制透明度f(wàn)unction alpha(obj,n)if(document.all)obj.style.filter=alpha(opacity=+n+);elseobj.style.opacity=(n/100);/控制焦點(diǎn)按鈕function sc(n)for(var i=0;ili.length;i+)button.childNodesi.className=b1;button.childNodesn.className=b2;title.className=num_list;title.appendChild(span);alpha(title,opac1);id.className=d1;div.className=d2;id.appendChild(div);id.appendChild(title);id.appendChild(button);/漸顯var fadeon=function()opac+=5;div.innerHTML=lij.innerHTML;span.innerHTML=getTag(img,lij)0.alt;alpha(div,opac);if(scton=0)sc(j);num=-2;scrolltxt();scton=1;if(opac0)timer=setTimeout(fadeout,interv2)elseif(jli.length-1)j+elsej=0;fadeon();/滾動(dòng)文字var scrolltxt=function()t+=num;span.style.marginTop=t+px;if(num3)timer3=setTimeout(scrolltxt,interv2)else if(num0&t62)timer3=setTimeout(scrolltxt,interv2)elsescton=0;fadeon();/初始化window.onload=s;|xGv00|1d9efe72e6c0a6843b8e0c919b8b9f76|xGv00|7ae188d82f1163746583ef18aa3a58e8 首 頁(yè) 美味時(shí)尚 地方特色 專(zhuān) 題   Loading. 黑巧克力玫瑰蛋糕 原料：低筋粉90克、蛋黃4個(gè) 、蛋白4個(gè)、好時(shí)Special Dark特濃黑巧克力。 做法：1、4個(gè)蛋黃，加入30克白糖攪勻顏色變淡，比較粘稠時(shí)，再加入50克橄欖油、50克水拌勻，再篩入低筋粉90克，奶粉20克，泡打粉2克，鹽2克。 2、4 白中滴入白醋，分三次加入150克白糖打發(fā)，直至將打蛋器立起，被打發(fā)的蛋清. /div第五章 網(wǎng)站測(cè)試與維護(hù)5.1 網(wǎng)站的建成網(wǎng)站建成后并不意味著網(wǎng)站建設(shè)的結(jié)束，網(wǎng)站內(nèi)容需要不斷更新， 并且網(wǎng)站發(fā)布前要進(jìn)行細(xì)致周密的測(cè)試，以保證正常瀏覽和使用。主要測(cè)試內(nèi)容： 1、服務(wù)器穩(wěn)定性、安全性。2、程序軟件的測(cè)試。 3、網(wǎng)頁(yè)兼容性測(cè)試，如瀏覽器、顯示器。 4、根據(jù)需要的其他測(cè)試。5.2 網(wǎng)站的發(fā)布網(wǎng)站發(fā)布后也要定時(shí)的對(duì)網(wǎng)站進(jìn)行維護(hù)，以保證網(wǎng)站的正常瀏覽和使用。主要的維護(hù)內(nèi)容有：1、服務(wù)器及相關(guān)軟硬件的維護(hù)，對(duì)可能出現(xiàn)的問(wèn)題進(jìn)行評(píng)估，制定響應(yīng)時(shí)間。 2、內(nèi)容的更新、調(diào)整等。 3、制定相關(guān)網(wǎng)站維護(hù)的規(guī)定，將網(wǎng)站維護(hù)制度化、規(guī)范化?？?結(jié)實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)，當(dāng)然也是檢驗(yàn)學(xué)習(xí)成果的標(biāo)準(zhǔn)。通過(guò)這次畢業(yè)設(shè)計(jì)讓我對(duì)前面學(xué)過(guò)的許多課程有了更為深刻的理解，也是我對(duì)這兩年所學(xué)的東西的一個(gè)綜合體現(xiàn)。然而這次設(shè)計(jì)讓我感受頗深，它讓我體會(huì)到了理論知識(shí)結(jié)合實(shí)踐的重要性，光有理論知識(shí)是遠(yuǎn)遠(yuǎn)不夠的。首先，我選的課題是旅游美食網(wǎng)站設(shè)計(jì)，隨之而來(lái)的就是我如何來(lái)確定該網(wǎng)站的主題,起初自己把問(wèn)題想的過(guò)于簡(jiǎn)單了，總覺(jué)得