240網(wǎng)站規(guī)劃與設(shè)計(jì)大作業(yè)范例

1、網(wǎng)站頂目規(guī)劃與設(shè)汁目錄一、項(xiàng)目背景2(1) 網(wǎng)站需求分析2(2) 網(wǎng)站的目的及功能泄位2二網(wǎng)站開發(fā)平臺(tái)2三、網(wǎng)站建設(shè)日程表3四、站點(diǎn)地圖4五、線框圖4六設(shè)計(jì)規(guī)范5七、網(wǎng)頁Ul設(shè)計(jì)7丿(、主要頁面的詳細(xì)設(shè)計(jì)圖8九、網(wǎng)站測(cè)試9(1) 測(cè)試準(zhǔn)備9(2) 用戶界面測(cè)試9(3) 功能測(cè)試9(4) 兼容性測(cè)試9十、網(wǎng)站推廣9項(xiàng)目背景(1)網(wǎng)站需求分析隨著不同國家之間交流越來越廣泛，不同國家的飲食文化也隨之傳播，人們逐漸開始產(chǎn) 生了解不同國家飲食的需求。近年來，舌尖上的中國的熱播，通過對(duì)中華美食的多個(gè)側(cè)而，來展現(xiàn)食物給中國人生活 帶來的儀式、倫理等方而的文化。由此我們深受啟發(fā)，準(zhǔn)備讓大家見識(shí)多個(gè)有代表性的國

2、家 特色食材以及與食物相關(guān)、構(gòu)成他們并自美食特有氣質(zhì)的一系列元素，從而了解世界飲食文 化的精致和源遠(yuǎn)流長。岀自對(duì)事物的熱愛，對(duì)自然的敬畏，同時(shí)為了讓大家更多地了解世界廣大的飲食文明， 我們決左制作六個(gè)最具有代表性的國家的飲食介紹，相信會(huì)獲得各年齡階層曾的青睞。(2)網(wǎng)站的目的及功能定位目的及功能：展示各國各地的美食，使大眾全方位了解不同地區(qū)的飲食文化；為吃貨的 旅行提供參考：介紹大學(xué)食堂趣聞，貼近生活，展現(xiàn)另類美食風(fēng)采目標(biāo)人群：美食愛好者，各國文化愛好者，幾乎輻射各年齡階層二、網(wǎng)站開發(fā)平臺(tái)功能模塊技術(shù)和軟件平臺(tái)操作系統(tǒng)WindOWS 8設(shè)計(jì)稿、圖形處理PhOtOShOP CS6動(dòng)畫設(shè)計(jì)制作FI

3、aSh CS5網(wǎng)頁制作平臺(tái)DreamWeaVer網(wǎng)站開發(fā)語言HTMLl CSS, JaVaSCriPt網(wǎng)站測(cè)試平臺(tái)Chrome, FirefOX三、網(wǎng)站建設(shè)日程表完成整個(gè)項(xiàng)目所需時(shí)間為三個(gè)月，英中各項(xiàng)規(guī)劃任務(wù)如下表所示:時(shí)間任務(wù)內(nèi)容3月9 B-16日擬泄項(xiàng)目3月17日-23日制泄初步項(xiàng)目計(jì)劃46 1：|-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語言6 月 8 0-6 月 15 H最終測(cè)試四、站點(diǎn)地圖HOME： An UneXPeCted D

4、eliCaCyJOUrneyadviceCHlNAfRAIcJJAPAN五、線框圖(1)首頁木CHINA 相關(guān)圖IN DlA相 關(guān)圖片JAPAN 相關(guān)圖 片TURK EY相關(guān) 圖ENGLAND 相關(guān)圖 片ITALY 相關(guān)圖CONTAeT COUNTRIES ABOUT US SHARE(2)單頁布局內(nèi)容分類內(nèi)容特色內(nèi)容六、設(shè)計(jì)規(guī)范(1) 視覺風(fēng)格：網(wǎng)站整體風(fēng)格將用繞“簡(jiǎn)約”、“輕快”這兩個(gè)主題。各國都別具一格，富有自己國家的特點(diǎn)，但仍然有相互聯(lián)系，統(tǒng)一的整體效果。 顏色：首頁設(shè)計(jì)以藍(lán)紫灰為基調(diào)，運(yùn)用米黃進(jìn)行融合搭配，突出網(wǎng)站活潑淸爽的格調(diào)。 列外運(yùn)用flash和其他形式的動(dòng)態(tài)技術(shù)效果，強(qiáng)調(diào)網(wǎng)站

5、的特色同時(shí)也更能吸引瀏覽者的注 意。每個(gè)國家單獨(dú)的一組網(wǎng)頁的配色，我們決泄采用每個(gè)國家國旗的主要顏色，如意大利為 綠、白、紅，中國主要為紅色等等但不會(huì)使用純度很髙的顏色，否則不適宜閱讀。會(huì)使用偏灰色系的顏色，簡(jiǎn)約的現(xiàn)代感, 營造靜謐的氛圍，烘托食物的鮮艷，誘人。超鏈接的各個(gè)時(shí)段的顏色也會(huì)統(tǒng)一，目前鼠標(biāo)移上去和點(diǎn)擊時(shí)統(tǒng)一為白色。 字體：為了美化頁而，提高視覺效果，使用纖細(xì)，淸新的字體，且而包屑、主導(dǎo)航和 頁面上齊個(gè)標(biāo)題的字體都統(tǒng)一。目前使用的英文字體為yellow PeaS demo和SIMPLIFICA TyPefaCeo 圖像：采用貼合國家氣息的背景，背景盡量少繁復(fù)而實(shí)物圖片則選擇鮮艷，能夠

6、引起人們食欲的，明亮?xí)嵘{(diào)的圖片。 分辨率：所制作的網(wǎng)頁將自動(dòng)調(diào)整分辨率以適應(yīng)顯示器分辨率，不管在1024還 是800的分辨率下都可以配合用戸達(dá)到較佳的視覺效果。（2）布局設(shè)訃 空間的合理利用：在網(wǎng)頁的上端顯示檢索欄等信息，圖片都先以小圖標(biāo)形式展現(xiàn)，鼠 標(biāo)挪動(dòng)致圖片位置將展現(xiàn)細(xì)節(jié)圖，劃過處可進(jìn)一步放大，即Yj約了空間，同時(shí)營造岀一種簡(jiǎn) 潔現(xiàn)代的感覺。 動(dòng)態(tài)效果：會(huì)在圖片和一些特色小機(jī)關(guān)上賦予動(dòng)態(tài)效果，如跳動(dòng)，閃爍，放大縮小等。 其他附加效果：超鏈接下劃線的顯隱，目錄的跳轉(zhuǎn)，后期可能會(huì)加上音樂播放器功能。七、網(wǎng)頁Ul設(shè)計(jì)我們將堅(jiān)持以用戶體驗(yàn)為中心設(shè)汁原則，界而直觀、簡(jiǎn)潔，操作方便快捷，瀏覽者將對(duì)

7、 界面上對(duì)應(yīng)的功能一目了然。保持頁而內(nèi)元素風(fēng)格，版式一致。使用一致的標(biāo)記、標(biāo)準(zhǔn)縮寫和顏色，顯示信息含義明確。顯示有意義的出錯(cuò)信息，而不是單純的程序錯(cuò)誤代碼。減持髙效地使用顯示器的顯示空間，保持語言的一致性與可選擇性。我們將遵循瀏覽者從上而下，自左向右瀏覽、操作習(xí)慣，盡量多做“減法”運(yùn)算，將不 常用的功能區(qū)塊隱藏，以保持界面的簡(jiǎn)潔。在頁面顯眼位置應(yīng)該出現(xiàn)而包屑導(dǎo)航欄，讓用戶知道當(dāng)前所在頁面的位巻，并明確導(dǎo)航結(jié)構(gòu)。并且為頁而導(dǎo)航加以設(shè)計(jì)規(guī)劃。八、主要頁面的詳細(xì)設(shè)計(jì)圖印理(fPr5師越醬給I*rBeiwemdo!uwenulo!>fi« m軟紅來到神咅的印度(s)丫自天經(jīng)WELCOn

8、Ei14-佛説的開端，株行的起點(diǎn)O > J Origin印密共和國足個(gè)多尺族.宋教秤逆很多.國民也很盪佰敎' 然而印燮的風(fēng)土人情之淳樸是有呂丼睹的.；所以燙起印度芙食噗總會(huì)有種神圣和IS始完英結(jié)合的和i皆惑*來看看印變經(jīng)典飲食特色吧，餐前開兩菜板旦軒色f種豐宮.口味齊全.享譽(yù)全球：烹調(diào)特KCMF > COUntry> I H二.一會(huì)孕育出經(jīng)無樹菜與傳菜 lg緞弊JS于從典W±jsji二國寧m*如 丄 凸土工萊.基本的烹tf方式烤.煮肉品需要箱心挑選經(jīng)過大財(cái)?shù)霓D(zhuǎn)粉纟川牛羊肉豈無腥味九、網(wǎng)站測(cè)試(1) 測(cè)試準(zhǔn)備測(cè)試前對(duì)被測(cè)系統(tǒng)做好以下準(zhǔn)備：系統(tǒng)的全面?zhèn)浞?，包括?yīng)

9、用程序備份、數(shù)拯備份等： 記錄測(cè)試前系統(tǒng)狀態(tài)：制左應(yīng)急措施，確保在測(cè)試中發(fā)生問題時(shí)系統(tǒng)可恢復(fù)。測(cè)試員應(yīng)在測(cè) 試開始前了解網(wǎng)頁的相關(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)接的頁而是否正確。表單測(cè)試：目的是檢查每個(gè)表單與程序是否正確聯(lián)接，能夠正確地發(fā)送用戶請(qǐng)求。(4) 兼容性測(cè)試主要檢驗(yàn)應(yīng)用能否在不同的客戶端使用。如蘋果(iOS系統(tǒng)的)用戸，經(jīng)常使用chrome, FirefOX等瀏覽器的用戶是否都能正常使用。十、網(wǎng)站推廣(1)微信公眾平臺(tái)、朋友圈、微博.QQ空間推廣(2)論壇推廣我們可以注冊(cè)幾十個(gè)論壇，每個(gè)論壇注冊(cè)若干個(gè)帳號(hào)，把簽爼設(shè)為自己的網(wǎng)站及團(tuán)隊(duì)圖 標(biāo)。發(fā)表熱門內(nèi)容，自己頂自己的帖子。目前我們應(yīng)用的論壇包括校內(nèi)的極速之星、外網(wǎng)的 百度