美食網(wǎng)站項(xiàng)目規(guī)劃與設(shè)計(jì)目錄一、項(xiàng)目背景 11、選題的目的和意義 12、課題研究的主要簡(jiǎn)介 1二、網(wǎng)站開(kāi)發(fā)平臺(tái) 1三、網(wǎng)站建設(shè)日程表 2四、站點(diǎn)地圖 2五、線框圖 31、主頁(yè)布局 32、子頁(yè)布局 3六、設(shè)計(jì)規(guī)范及網(wǎng)頁(yè)UI設(shè)計(jì) 31、設(shè)計(jì)愿望 42、確定網(wǎng)站主題 53、確定網(wǎng)站形象 54、確定網(wǎng)站風(fēng)格 55、確定網(wǎng)站內(nèi)容 5七、主要頁(yè)面的詳細(xì)設(shè)計(jì)圖 6八、網(wǎng)站測(cè)試 81、測(cè)試準(zhǔn)備 82、用戶界面測(cè)試 83、功能測(cè)試 84、兼容性測(cè)試 9九、網(wǎng)站推廣與維護(hù) 91.網(wǎng)站推廣 92、網(wǎng)站維護(hù) 9PAGE1一、項(xiàng)目背景1、選題的目的和意義隨著經(jīng)濟(jì)的發(fā)展，生活水平的提高，電子商務(wù)的興起，人們都習(xí)慣網(wǎng)上購(gòu)物，美食的銷(xiāo)售在其中占有重要的位置。Foodstore網(wǎng)主要銷(xiāo)售生產(chǎn)糖果，果凍等食品，多個(gè)品種公司在發(fā)展的過(guò)程中，堅(jiān)持不斷否定自己永遠(yuǎn)追求卓越的企業(yè)精神。打造良好的購(gòu)物環(huán)境，保證食品的安全性，給顧客創(chuàng)造良好的購(gòu)物環(huán)境，吃到可口美味的食品，節(jié)省顧客的時(shí)間以及省去了逛街購(gòu)物帶來(lái)的麻煩和勞累，開(kāi)拓了顧客的視野，色香味俱全。2、課題研究的主要簡(jiǎn)介Foodstore美食網(wǎng)站是給用戶一個(gè)方便的購(gòu)物空間，登陸Foodstore美食網(wǎng)界面，根據(jù)自己的需求選擇瀏覽，其功能有以下：（1）用戶可以通過(guò)瀏覽主頁(yè)，了解公司的簡(jiǎn)介以及圖片展示（2）用戶通過(guò)瀏覽子頁(yè)，可以對(duì)食品進(jìn)行細(xì)致的了解二、網(wǎng)站開(kāi)發(fā)平臺(tái)功能模塊技術(shù)和軟件平臺(tái)操作系統(tǒng)Windows8設(shè)計(jì)稿、圖形處理PhotoshopCS6動(dòng)畫(huà)設(shè)計(jì)制作FlashCS5網(wǎng)頁(yè)制作平臺(tái)Dreamweaver網(wǎng)站開(kāi)發(fā)語(yǔ)言HTML,CSS,JavaScript，asp網(wǎng)站測(cè)試平臺(tái)Chrome，F(xiàn)irefox三、網(wǎng)站建設(shè)日程表完成整個(gè)項(xiàng)目所需時(shí)間為三個(gè)月，其中各項(xiàng)規(guī)劃任務(wù)如下表所示：時(shí)間任務(wù)內(nèi)容3月9日-16日擬定項(xiàng)目3月17日-23日制定初步項(xiàng)目計(jì)劃4月6日-19日網(wǎng)站初步框架4月20日-5月1日網(wǎng)站內(nèi)容具體豐富5月2日-5月10日總結(jié)反思，網(wǎng)站細(xì)節(jié)完善5月11日-24日計(jì)劃微調(diào)，網(wǎng)站用戶體驗(yàn)感測(cè)試5月25日-6月7日網(wǎng)站裝飾再加工，CSS布局，JS語(yǔ)言,后臺(tái)數(shù)據(jù)庫(kù)設(shè)計(jì)6月8日-6月15日最終測(cè)試四、站點(diǎn)地圖系統(tǒng)主界面系統(tǒng)主界面聯(lián)系我們?nèi)瞬耪衅该媸醉?yè)新聞中心面公司簡(jiǎn)介面產(chǎn)品中心面五、線框圖1、主頁(yè)布局圖片圖片導(dǎo)航個(gè)人詳細(xì)信息介紹個(gè)人圖片版權(quán)及其他版權(quán)設(shè)計(jì)2、子頁(yè)布局圖片圖片導(dǎo)航主要介紹模塊介紹版權(quán)設(shè)計(jì)六、設(shè)計(jì)規(guī)范及網(wǎng)頁(yè)UI設(shè)計(jì)Foodstore美食網(wǎng)這個(gè)網(wǎng)站是運(yùn)用了HTML靜態(tài)網(wǎng)頁(yè)技術(shù)，和Dreamweaver軟件相結(jié)合實(shí)現(xiàn)的。頁(yè)面間通過(guò)網(wǎng)頁(yè)鏈接，實(shí)現(xiàn)具體所要查找的食品，可以方便用戶的需要做出選擇，給人們帶來(lái)了極大地方便。1、設(shè)計(jì)愿望在網(wǎng)站的首頁(yè)上方能看到幾個(gè)選項(xiàng)卡，分別是：首頁(yè)、公司簡(jiǎn)介、新聞中心、產(chǎn)品中心、人才招聘和聯(lián)系我們。當(dāng)用戶點(diǎn)擊希望去的界面時(shí)，就會(huì)自動(dòng)的鏈接到用戶希望的那個(gè)網(wǎng)頁(yè)。展現(xiàn)給用戶相應(yīng)的界面，在每個(gè)界面都會(huì)有這幾個(gè)選項(xiàng)卡，用戶可以在其中自由的切換。2、確定網(wǎng)站主題建立一個(gè)網(wǎng)站好比寫(xiě)一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰。如果網(wǎng)站結(jié)構(gòu)不清晰，目錄龐雜，內(nèi)容東一塊西一塊。結(jié)果不但瀏覽者看得糊涂，自己擴(kuò)充和維護(hù)網(wǎng)站也相當(dāng)困難。網(wǎng)站的題材確定后，并且收集和組織了許多相關(guān)的資料內(nèi)容，但如何組織內(nèi)容才能吸引網(wǎng)友們來(lái)瀏覽網(wǎng)站呢？欄目的實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來(lái)。因此我將美食網(wǎng)站分為六個(gè)欄目，分別是首頁(yè)、公司簡(jiǎn)介、新聞中心、產(chǎn)品中心、人才招聘和聯(lián)系我們。3、確定網(wǎng)站形象網(wǎng)站形象的設(shè)計(jì)可以從網(wǎng)站的LOGO、網(wǎng)站的色彩、網(wǎng)站的字體宣傳語(yǔ)等這些方面著手。圖6.1Logo設(shè)計(jì)網(wǎng)站色彩，網(wǎng)站給人的第一印象來(lái)自于視覺(jué)的沖擊，不同的色彩搭配會(huì)產(chǎn)生不同的效果，并可能影響到訪問(wèn)者的情緒?！皹?biāo)準(zhǔn)色彩”指的是能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩，給人們一種以整體統(tǒng)一的感覺(jué)。我個(gè)人網(wǎng)站的色彩是以橙色為主，黑色的字體和淺色的圖像給人一種舒服的感覺(jué)，仿佛生活在虛幻的世界里。網(wǎng)站字體，和標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)題、主菜單的一些特有字體。為了體現(xiàn)網(wǎng)站所特有的風(fēng)格，可以根據(jù)自已的網(wǎng)站所表達(dá)的內(nèi)涵，選擇更貼切的字體。我的個(gè)人網(wǎng)站的標(biāo)準(zhǔn)字體是華文彩體。給人一種沉穩(wěn)而不失俏皮的感覺(jué)。表格布局的過(guò)程：設(shè)計(jì)出框架為800*1000的布局表格，再在表格中添加適當(dāng)?shù)膯卧矜溄釉O(shè)計(jì)制作的過(guò)程：主頁(yè)與五個(gè)子頁(yè)進(jìn)行連接圖片處理的過(guò)程：?jiǎn)卧裨O(shè)定好，圖片大小和單元格同等大小然后添加導(dǎo)航按鈕的設(shè)置等等4、確定網(wǎng)站風(fēng)格風(fēng)格是抽象的，指網(wǎng)站的整體形象給瀏覽者留下的綜合感受。這個(gè)“整體形象”包括網(wǎng)站的LOGO、網(wǎng)站的色彩、網(wǎng)站的字體、網(wǎng)站的標(biāo)語(yǔ)等許多因素。網(wǎng)站是可以平易近人的、生動(dòng)活潑的，也可以是嚴(yán)肅專(zhuān)業(yè)的。但不管是在色彩、技術(shù)、文字、布局、還是交互方式上，只要能由此讓瀏覽者明確的看出這是你的網(wǎng)站所獨(dú)有的，這就形成了一種風(fēng)格。風(fēng)格是有人性的，它通過(guò)網(wǎng)站的色彩、技術(shù)、文字、布局、交互方式等可以綜合概括出一個(gè)網(wǎng)站的自己的個(gè)性；我的網(wǎng)站風(fēng)格是以舒服為主，給人一種舒舒服服的感覺(jué)。5、確定網(wǎng)站內(nèi)容在網(wǎng)站的首頁(yè)上方能看到幾個(gè)選項(xiàng)卡，分別是：首頁(yè)、公司簡(jiǎn)介、新聞中心、產(chǎn)品中心、人才招聘和聯(lián)系我們。七、主要頁(yè)面的詳細(xì)設(shè)計(jì)圖八、網(wǎng)站測(cè)試1、測(cè)試準(zhǔn)備測(cè)試前對(duì)被測(cè)系統(tǒng)做好以下準(zhǔn)備：系統(tǒng)的全面?zhèn)浞?，包括?yīng)用程序備份、數(shù)據(jù)備份等；記錄測(cè)試前系統(tǒng)狀態(tài)；制定應(yīng)急措施，確保在測(cè)試中發(fā)生問(wèn)題時(shí)系統(tǒng)可恢復(fù)。測(cè)試員應(yīng)在測(cè)試開(kāi)始前了解網(wǎng)頁(yè)的相關(guān)情況，對(duì)測(cè)試的預(yù)期結(jié)果應(yīng)進(jìn)行準(zhǔn)備和預(yù)測(cè)。測(cè)試前要做好真實(shí)數(shù)據(jù)的準(zhǔn)備工作，并進(jìn)行系統(tǒng)的數(shù)據(jù)初始化。2、用戶界面測(cè)試主要測(cè)試導(dǎo)航條、內(nèi)容、顏色、背景、圖像、返回等。3、功能測(cè)試主要測(cè)試站點(diǎn)中的鏈接等。鏈接測(cè)試：目的是檢查各個(gè)URL所聯(lián)接的頁(yè)面是否正確。表單測(cè)試：目的是檢查每個(gè)表單與程序是否正確聯(lián)接，能夠正確地發(fā)送用戶請(qǐng)求。4、兼容性測(cè)試主要檢驗(yàn)應(yīng)用能否在不同的客戶端使用。如蘋(píng)果（iOS系統(tǒng)的）用戶，經(jīng)常使用chrome，F(xiàn)irefox等瀏覽器的用戶是否都能正常使用。九、網(wǎng)站推廣與維護(hù)1.網(wǎng)站推廣（1）微信公眾平臺(tái)、朋友圈、微博、QQ空間推廣（2）論壇推廣我們可以注冊(cè)幾十個(gè)論壇，每個(gè)論壇注冊(cè)若干個(gè)帳號(hào)，把簽名設(shè)為自己的網(wǎng)站及團(tuán)隊(duì)圖標(biāo)。發(fā)表熱門(mén)內(nèi)容，自己頂自己的帖子。目前我們應(yīng)用的論壇包括校內(nèi)的極速之星、外網(wǎng)的百度貼吧、天涯論壇、豆瓣等等網(wǎng)民較為聚集的地方。（3）電子郵件推廣我們會(huì)像宜家一樣讓用戶進(jìn)行自愿注冊(cè)會(huì)員，瀏覽者自愿留下他的郵箱地址，定期或不定期的發(fā)布一些電子刊物、會(huì)員通訊、專(zhuān)業(yè)服務(wù)商的電子郵件廣告等?？梢詼p少?gòu)V告對(duì)用戶的滋擾、增加潛在吸引人群定位的準(zhǔn)確度、增強(qiáng)與客戶的關(guān)系、提高品牌忠誠(chéng)度等。2、網(wǎng)站維護(hù)網(wǎng)站