“一樂拉面”網(wǎng)站設計畢業(yè)設計

PAGE22目錄TOC\o"1-3"\h\u30218一、內容簡介 313995（一）背景與意義： 39211（二）資料收集和分析 411107（三）方案的設計 4205601．網(wǎng)站的名稱：一樂拉面商務設計網(wǎng)站 4298312．網(wǎng)站功能的設計： 4167973．網(wǎng)站欄目的規(guī)劃圖： 554064．網(wǎng)站設計資源圖： 529310（四）方案的實施 6312691．確定網(wǎng)站主題 6198532．網(wǎng)站的搭配 6305123．構建網(wǎng)站布局 696994．設計軟件的選擇 644555．網(wǎng)站頁面素材的收集 7145166．網(wǎng)站頁面的實現(xiàn) 7212957．網(wǎng)站推廣 710445二、產(chǎn)品分析 730257（一）需求分析 811004（二）技術可行性分析 824234（三）方法分析 84770（四）可行性分析 810247三、設計草圖 825868（一）網(wǎng)站Logo 815916（二）網(wǎng)站首頁 95553（三）登錄頁 927682（四）注冊頁 10195（五）子頁面 1011829四、設計過程與效果圖 112636（一）網(wǎng)站頭部 12285781．網(wǎng)站Logo、網(wǎng)站名稱 1282762．注冊與登錄 1331228（二）Banner 1628027（三）導航欄 171668（四）中間內容 1816902（五）頁面底部 226172五、作品效果圖片 2226298六、設計創(chuàng)意說明 242099七、設計總結 2415360參考資料 26內容簡介背景與意義：“一樂拉面”網(wǎng)站的設計是為了自己所喜愛的動漫，亦或者是自己兒時的玩伴，也是自己喜歡美食的一個紀念點。在明治時代早期，拉面是橫濱中華街常見的食品。1900年代，來自上海和廣東的中國人在日本賣切面，配以簡單的湯底和配料。在昭和年間，拉面在日本開始流行。第二次世界大戰(zhàn)之后，來自美國的廉價面粉和從中國戰(zhàn)場回來的士兵使得中國風味的面條大行其道。在日本的新橫濱還設有一個“拉面博物館”。館內將日本拉面分為4種：橫濱拉面，博多拉面，札幌拉面和喜多方拉面。橫濱拉面為最出名。橫濱拉面起源與橫濱中華街，最接近中國拉面的風味。博多又名福岡，是北九州的大城市，其拉面因為是用豬骨熬成的濃白高湯佐味而出名；札幌是北海道的第一大城市，當?shù)乩嬉幻鏈珴庥?，面條粗韌勁道而見長；喜多方拉面比較前面三類略為遜色。而且隨著經(jīng)濟的發(fā)展與互聯(lián)網(wǎng)的運用和開發(fā)，不管我們是在學校、在工作、還是在做什么事，只要有網(wǎng)絡，我們都能了解到拉面也是一種不可多得的美食，我也希望能借助這個網(wǎng)站把自己喜歡的美食可以帶給更多的人。做這個網(wǎng)站就是想可以將日式拉面更好的推廣出去，并且讓大家認識并了解到日式拉面更多。資料收集和分析本次網(wǎng)站設計項目是自己一直都想去做的一個網(wǎng)站設計，通過自己學過的知識、做過的練習題、瀏覽過的網(wǎng)頁，同時結合自己的構思與想法，制作出一個簡單而又讓人煥然一新的網(wǎng)頁構架。本項目的相關資料是通過查找相關的網(wǎng)站、查找了相關資料以及融入了自己的想法和理解來制作和實現(xiàn)的。方案的設計本這次的畢業(yè)設計主要是制作一個食品推廣的網(wǎng)站。這個網(wǎng)站由一個主頁、2個子頁面、注冊頁和登錄頁組成。網(wǎng)站的名稱：一樂拉面商務網(wǎng)站設計網(wǎng)站功能的設計：網(wǎng)站功能的設計是通過借鑒并瀏覽一些比較成熟的、連接性流暢的網(wǎng)站，同時結合了自身的想法來實現(xiàn)的。網(wǎng)站的一些基本內容主要包括了：logo、導航欄、用戶的注冊與登錄、主要信息區(qū)、聯(lián)系方式與版權信息等；而且當我們在瀏覽頁面的時候是希望能夠很快的找到自己想要瀏覽的頁面并且具有很強的連接性。這些功能都是一個成熟網(wǎng)站所需具備的，正因如此，我的網(wǎng)站設計也是從這些方面開始實施與實現(xiàn)的，并且同時加入自己的想法。網(wǎng)站欄目的規(guī)劃圖：圖1-1網(wǎng)站欄目規(guī)劃圖網(wǎng)站設計資源圖：圖1-2網(wǎng)站資源圖方案的實施確定網(wǎng)站主題美食是我從小就喜歡的，我會去嘗試各種各樣的美食，每到一個地方旅游，我總是要先去嘗試一下當?shù)氐奶厣朗常@個已經(jīng)成為我的一種習慣。動漫也是一種精神寄托，當倆者結合到一起，便產(chǎn)生了美妙的化學反應，一種從內心牽動你食欲的感覺。網(wǎng)站的搭配一樂是動漫“火影忍者”中主人公最喜歡的一家拉面，我也是一名動漫愛好者。因為主人公的衣著就是以橙色與黃色與主色調，所以我也采用橙色為主色調，讓瀏覽者有一種代入感。構建網(wǎng)站布局網(wǎng)站的布局是運用結構比較單一的模板樣式構建完成的。首先完成首頁內容及樣式的布局，之后對其新建模板，再新建模板中的頁，就得到自己想要的網(wǎng)站頁面。最后將各個頁面相關信息、內容運用上去即可，然后對網(wǎng)站進行整體色彩的搭配。設計軟件的選擇一個成熟網(wǎng)站的制作是需要通過運用制作軟件來共同制作并完成。首先，我選擇的第一個軟件就是AdobeDreamWeaver軟件，運用它來對網(wǎng)站進行大概的布局規(guī)劃，制作出網(wǎng)站框架。其次就是運用了AdobePhotoShop軟件，用此軟件對網(wǎng)站所需的素材照片進行裁剪、美化、亮化、模糊等處理，讓素材圖片更加美化、生動的出現(xiàn)在網(wǎng)站頁面上。網(wǎng)站頁面素材的收集現(xiàn)如今網(wǎng)絡世界是很強大的，只有你想不到的，沒有你搜不到的。利用網(wǎng)絡的強大資源來搜集自己所需的網(wǎng)站頁面素材，并將搜集的資料進行處理與美化，比如：對圖片素材的大小進行調整、編輯、美化等處理。網(wǎng)站頁面的實現(xiàn)使用DreamWeaver代碼編輯來編寫網(wǎng)站的靜態(tài)頁面代碼，依照自己構思的、繪畫出的網(wǎng)站草圖以及網(wǎng)站該實現(xiàn)的功能定位來編寫網(wǎng)站網(wǎng)頁代碼；利用DW中的div盒子布局和css代碼樣式來實現(xiàn)網(wǎng)站的靜態(tài)頁面。讓網(wǎng)站實現(xiàn)各個頁面之間的連接與跳轉。同時，使用PhotoShop圖像處理軟件對網(wǎng)站頁面所需要的圖片素材進行美化、亮化、模糊、裁剪等等處理。網(wǎng)站推廣一個網(wǎng)站的瀏覽量都是需要靠推廣來實現(xiàn)的，一個沒有瀏覽量的網(wǎng)站不是一個成熟的網(wǎng)站?，F(xiàn)如今我們所熟知的：百度、搜狗瀏覽器、谷歌瀏覽器等，這些瀏覽器的是最為常見的，也是應用最多的。所以我打算在這些瀏覽器上進行網(wǎng)站推廣，與此同時，還可以在微信、微博這些新媒體上進行網(wǎng)站推廣的實現(xiàn)；在進行網(wǎng)站推廣的時候可以對網(wǎng)站的關鍵詞進行挑選、優(yōu)化等處理，當然還要考慮到網(wǎng)站兼容性問題。產(chǎn)品分析需求分析該網(wǎng)站主要是以“一樂拉面”來作為主題的一個網(wǎng)站。網(wǎng)站主要介紹一樂拉面的店鋪，如拉面起源、店鋪內飾、店鋪主要拉面、還有周邊商品等等，讓大家更加進一步了解我們店鋪。而且網(wǎng)站主頁與各個子頁面的連接與跳轉都能讓人們可以很快的找到自己想要了解的頁面，讓其有目的性的了解、去瀏覽。技術可行性分析網(wǎng)站采用了DW的div與css技術對網(wǎng)站頁面你進行構圖布局和樣式效果的實現(xiàn)；運用JS對網(wǎng)站的圖片進行輪播效果的實現(xiàn)；使用PS對網(wǎng)站圖片素材進行編輯處理。結合這些技術的綜合運用，實現(xiàn)網(wǎng)站的整體效果，從而滿足人們的需求。方法分析根據(jù)不同的網(wǎng)站、從不同的方面來完善自己的網(wǎng)站設計。取其精華去其糟粕，優(yōu)點予以借鑒，缺點便加以改進，綜合起來共同完成一個成熟網(wǎng)站的設計與實現(xiàn)。善于傾聽和借鑒周圍人給的建議，根據(jù)周圍朋友指出來的優(yōu)缺點進一步完善自己的網(wǎng)站。可行性分析旅游業(yè)隨著經(jīng)濟的發(fā)展逐漸上升，如今的我們也想到處去看看、去走走，去領略世界各地的風俗和文化，去發(fā)現(xiàn)更多“新世界”。正因為網(wǎng)絡世界的到來，人們更加喜歡網(wǎng)上沖浪，喜歡在網(wǎng)上了解自己想要了解的事物。設計草圖網(wǎng)站Logo圖2-1網(wǎng)站Logo圖網(wǎng)站首頁圖2-2網(wǎng)站首頁圖登錄頁圖2-3登錄頁圖注冊頁圖2-4注冊頁圖子頁面圖2-5一樂周邊頁面圖圖2-6一樂拉面館頁面圖設計過程與效果圖Photoshop部分Photoshop部分為，分別是：網(wǎng)站Logo制作網(wǎng)站Logo運用了PhotoShop軟件來制作。這樣設計的主要原因是日式拉面作為拉面品種的一分子，直接用“面”字相應網(wǎng)站主題，而且動漫的主人公也是喜歡穿著橙色黃色相間衣服。Logo的大小為120*80像素，字體顏色為fff000，中間的外圓運用該#184485和#6b8fc3填充，采用橢圓工具且按住Shift鍵，大小為70*70像素的正圓，然后選取一半，下面用鋼筆畫出一個梯形，用#184485和#6b8fc3填充，一樂拉面字體為站酷快樂體。制作過程與效果圖如下：圖3-1碗字圖3-2Logo修整圖3-4Logo效果圖代碼如圖所示：（二）Dreamweaver部分運用所學的Dreamweaver表單知識制作了登錄與注冊界面1、注冊界面設計根據(jù)現(xiàn)在主流注冊界面和我們店鋪所需要的會員信息我設計如下圖（3-8）的注冊與登錄（3-9）界面，背景為店鋪招牌拉面，顏色為紅色，能夠激發(fā)食客們的食欲。效果與過程圖如下：圖3-7注冊頁過程圖圖3-8注冊頁效果圖圖3-9登錄頁過程圖圖3-10登錄效果圖2、子頁面網(wǎng)站子頁面分為拉面館與企業(yè)文化倆個界面，拉面館為我們店鋪的本店熱賣、特色拉面、特色小吃和夏日飲料組成。企業(yè)文化界面則是我們店鋪建立的初衷和對于一樂拉面的熱愛。圖3-11子頁面（拉面館）設計過程圖片圖3-12子頁面（企業(yè)文化）設計過程圖片作品效果圖片產(chǎn)品的整體完整性是需要產(chǎn)品的整體效果來評估的。產(chǎn)品的效果圖就是想讓圖片、文字等傳媒體來表達作品最后所需要以及想要達到的預期的效果。效果圖是最直觀、最生動的設計意圖的表達，它以圖片的形式展現(xiàn)，以一種最直接的方式展現(xiàn)在觀看者面前，讓觀看者能夠直接的了解的網(wǎng)站的主要包括的內容以及它的框架與布局。作品效果圖，可以幫助我們更加好的完善自己的網(wǎng)站，能讓我們了解自己網(wǎng)站的顏色搭配、文字布局等等是否得體；從而完善，給人呈現(xiàn)出一種視覺性的效果美。該網(wǎng)站的整體是由五大部分組成，分別是：頭部（Logo、主題、注冊與登錄按鈕）、Banner、導航欄、中間內容部分以及頁面底部。作品效果圖如下：圖4-1首頁效果圖圖4-2注冊效果圖圖4-3登錄效果圖圖4-4子頁面（企業(yè)文化）效果圖圖4-5子頁面（拉面館）效果圖設計創(chuàng)意說明“一樂拉面商務設計網(wǎng)站”這個網(wǎng)站，主要是想表達自己對動漫和沒事的一種熱愛，一直以來家長都認為動漫小孩子看的，我要借此機會釋放我對于美食和動漫的一種熱忱。美食，是我們一輩子都在追求的，那里有我們的美好回憶，有我們成長的記憶；最重要的是有我們的家人，也有各種各樣的回憶。酸甜苦辣咸也代表這人生百態(tài)，我們無論何時都要抱著熱愛生活和熱愛美食的信念。一樂拉面雖然是動漫里的一種拉面，今天我們把這個變成現(xiàn)實，希望喜歡這個動漫的人能聚到一起，不知道的人可以因為拉面愛上這個動漫。設計總結經(jīng)過這段制作“一樂拉面商務網(wǎng)站設計”網(wǎng)站的時間，讓我深深地感受到，沒有什么事情是自己完成不了的，只要靜下心來慢慢去感受它，就沒有什么是不可能的完成的；哪怕是一節(jié)課只寫了一個字、一句話、一個代碼或者是一張照片的編輯處理，那也是自己想出來并且去完成的一件事。在還沒涉及到畢業(yè)設計的時候，我就在想畢業(yè)設計自己該往哪個方向去完成。由于專業(yè)的問題，自己很多方面的東西都學了，也感覺會了許多，會美工設計、會敲代碼、會運營等；但同時有感覺自己什么都不會，雖說學過但只是學了一點皮毛，要想精通的話，還得繼續(xù)學習，因為僅僅憑自己現(xiàn)在的能力是遠遠不夠的。以前覺得，網(wǎng)頁是非常難的一個課程。因為需要自己敲代碼，有時甚至搞不清楚該用哪個單詞或者哪個樣式來實現(xiàn)網(wǎng)頁的整體布局。有時打錯一個字母，或者錯打、少打一個符號，整個頁面的效果就都不會出現(xiàn)。但是，在技能抽查的這段時間里，我感覺自己的進步是非常大的，可以自己獨自完成一個頁面，甚至有時還能趕在老師的前面提前完成。我從來都不覺得自己的專業(yè)知識是班級里最好的一個，能力也不是最好的一個人，畢竟人外有人天外有天。比自己專業(yè)知識好的人有很多，比自己能力強的人也有很多，但這并不能影響我自己做得更好。所以，在這次的畢業(yè)設計中，遇到不懂的問題我會向老師、朋友、室友們請教；同時也會上網(wǎng)查找一些解決的辦法。好記性