貓咪主題咖啡館網(wǎng)站設(shè)計

目錄TOC\o"1-3"\h\u一、內(nèi)容簡介 產(chǎn)品名稱貓咪主題咖啡館網(wǎng)站一、內(nèi)容簡介（一）背景與意義通過調(diào)研,國內(nèi)外的一些咖啡館設(shè)計大多數(shù)都沒有自己的特色和風格,不能讓人耳目一新的感覺,星巴克、上島咖啡、左岸咖啡等一些咖啡廳的設(shè)計風格如出一轍，沒有特定的主題，僅僅靠上檔次的裝修是遠遠不夠吸引人眼球的。除此之外，例如國內(nèi)的名典咖啡，它的缺點在于設(shè)計有點太過于成熟，針對的消費人群就略顯微薄?？Х葟d的消費人群大多數(shù)是30-50歲之間的中年人土。而且它的設(shè)計顏色很單調(diào)、很冷清、很壓抑，沒有讓人精神放松的氛圍，沒有特定的文化氛圍，但它的家具和設(shè)計高檔，這是它的優(yōu)點?？Х葟d以高雅，清新，柔和的主要色調(diào)配以簡潔，流暢的設(shè)計語言營?造了一個舒適；愜意且極具現(xiàn)代氣息的商用空間。溫暖的色調(diào)；流暢的曲線；新穎獨特的空間處理，適當?shù)睦渖a充，再加上強烈的金屬材料的配合，創(chuàng)造出一個品味非凡的休憩空間。??（二）資料收集和分析“咖啡”的小鎮(zhèn)，在希臘語中“Kaweh”的意思是“力量與熱情”。茶葉與咖啡、可可并稱為世界三大飲料?？Х葮涫菍佘绮菘瞥＞G小喬木，日常飲用的咖啡是用咖啡豆配合各種不同的烹煮器具制作出來的，而咖啡豆就是指咖啡樹果實內(nèi)之果仁，再用適當?shù)暮姹悍椒ê姹憾伞Ａ碛袌D書以此為名?？Х冉K端銷售市場一依次為:咖啡及西式快餐連鎖店、星級酒店、西餐廳。其中咖啡館及西式快餐連鎖店主要由上島咖啡、星巴克咖啡、真鍋咖啡,麥當勞、必勝客,這些連鎖店平均每月銷量在21.18噸,占30、18%,其次星級酒店每月平均銷量在16,47噸,占23.47%,西餐廳平均每月銷量13、53噸,占19,28%。隨著時代的發(fā)展和人們生活理念的進一步改變,咖啡業(yè)也在以一種迅猛的速度發(fā)展。（三）方案設(shè)計咖啡店方案設(shè)計咖啡廳的裝修要根據(jù)人們消費的主題思想來裝修,你可以為工作而來,可以為聽音樂而來,可以為看書而來,也可以為看電影而來。

當人們在享受咖啡的味道的時候,更是被咖啡廳獨有氛圍所吸引。因此咖啡廳裝修設(shè)計要注意營造喝咖啡的獨特氛圍。①產(chǎn)品介紹:以專業(yè)咖啡為主,結(jié)合精美小食、水吧飲料等來滿足消費者的需求1、咖啡:以純品咖啡為主打,推出精致花式咖啡,如:藍山咖啡、曼特寧咖啡、卡布奇諾愛爾蘭咖啡等;2、時尚水吧飲品:如:木瓜牛奶,香蕉牛奶,港式奶茶等。3、根據(jù)不同的季節(jié)制定一些冷飲、熱飲、點心、沙拉等。（四）方案的實施用AdobeDreamweaverCS6軟件制作時，每張設(shè)計制作并編輯網(wǎng)站效果圖中，包括首頁、咖啡種類。包括的名稱、咖啡的有名出版社及一些圖片和背景。書籍上主要包括書的名稱內(nèi)容一些圖片和背景圖案。用AdobeDreamweaverCS6軟件播放時將作品的咖啡作為一個整體圖片一起進行設(shè)計制作并編輯網(wǎng)站效果圖中展示。二、產(chǎn)品分析本畢業(yè)設(shè)計制作為目的。主要運用的是AdobeDreamweaverCS6軟件依次制作出效果圖。最后用AdobeDreamweaverCS6制作并編輯網(wǎng)站將所有效果展示出來。用AdobeDreamweaverCS6制作并編輯網(wǎng)站制作的分析：咖啡豆含有大約100種不同的物質(zhì)，包括咖啡因、單寧酸、油和氮化合物等，每100克速溶咖啡中，含咖啡因44~100毫克；每100克調(diào)制咖啡中，含咖啡因64~124毫克?？Х仁且环N興奮劑，對人體會產(chǎn)生很多影響，它可利尿、刺激中樞神經(jīng)和呼吸系統(tǒng)、擴大血管、使心跳加速、增強橫紋肌的力量以及緩解大腦和肌肉疲勞。制作過程中，需要運用到AdobeDreamweaverCS6制作并編輯網(wǎng)站、網(wǎng)站設(shè)計代碼編輯效果等知識。用AdobeDreamweaver軟件播放時，需要添加代碼、拆分、設(shè)計、實時視圖效果瀏覽器的兼容網(wǎng)頁設(shè)計。三、設(shè)計草圖1、首頁草圖網(wǎng)站的主頁和子頁的基本框架都相似，頁面上方是主題“貓咪主題咖啡館”，左側(cè)是“咖啡的種類圖片”右側(cè)是“小題字體”、“字體內(nèi)容”。然后根據(jù)子頁的不同內(nèi)容再加上相應(yīng)的圖案或文字。圖3.1編輯網(wǎng)站設(shè)計框架圖2、“關(guān)于我們”頁面草圖圖3.2編輯網(wǎng)站設(shè)計框架圖3、“產(chǎn)品展示”頁面草圖圖3.3編輯網(wǎng)站設(shè)計框架圖4、“精品推薦”頁面草圖圖3.4編輯網(wǎng)站設(shè)計框架圖5、“門店展示”頁面草圖圖3.5編輯網(wǎng)站設(shè)計框架圖6、“精品推薦”頁面草圖圖3.6編輯網(wǎng)站設(shè)計框架圖7、“聯(lián)系我們”頁面草圖圖3.7編輯網(wǎng)站設(shè)計框架圖四、設(shè)計效果圖（一）“網(wǎng)站首頁”設(shè)計效果圖，如圖4.1所示圖4.1“網(wǎng)站首頁”效果圖“關(guān)于我們”設(shè)計效果圖，如圖4.2所示圖4.2“關(guān)于我們”效果圖（三）“產(chǎn)品展示”設(shè)計效果圖，如圖4.3所示圖4.3“產(chǎn)品展示”效果圖（四）“精品推薦”設(shè)計效果圖，如圖4.4所示圖4.4“精品推薦”效果圖（五）“行業(yè)資訊”設(shè)計效果圖，如圖4.5所示圖4.5“行業(yè)資訊”效果圖（六）“門店展示”設(shè)計效果圖，如圖4.6所示圖4.6“門店展示”效果圖（七）“聯(lián)系我們”設(shè)計效果圖，如圖4.7所示圖4.7“聯(lián)系我們”效果圖（八）“咖啡的種類”計效果圖，如圖4.8所示圖4.8“咖啡的種類”效果圖（九）“點心的咖啡”設(shè)計效果圖，如圖4.9所示圖4.9“點心的咖啡”效果圖（十）“產(chǎn)品展示”設(shè)計效果圖，如圖4.10所示圖4.10“產(chǎn)品展示”效果圖“貓咪主題咖啡館”設(shè)計代碼，如圖4.11所示圖4.11“貓咪主題咖啡館”效果圖源代碼：<ahref="index11.htm">網(wǎng)站首頁</a><ahref="../2/2.htm">關(guān)于我們</a><ahref="../3/3.htm">產(chǎn)品展示</a><ahref="../4/4.htm">精品推薦</a><ahref="../5/5.htm">行業(yè)資訊</a><ahref="../6/6.htm">門店展示</a><ahref="../7/7.htm">聯(lián)系我們</a>（十二）“產(chǎn)品展示”設(shè)計代碼，如圖4.12所示圖4.12“產(chǎn)品展示”效果圖源代碼：<h3><ahref="3-1.htm"title="康寶藍"target="_self">康寶藍咖啡</a></h3><h3><ahref="3-2.htm"title="愛爾蘭咖啡"target="_self">愛爾蘭咖啡</a></h3> <h3><ahref="3-3.htm"title="白咖啡"target="_self">白咖啡</a></h3><h3><ahref="3-5.htm"title="摩卡咖啡"target="_self">摩卡咖啡</a></h3><h3><ahref="3-6.htm"title="皇家咖啡"target="_self">皇家咖啡</a></h3><h3><ahref="3-7.htm"title="拿鐵"target="_self">拿鐵咖啡</a></h3><h3><ahref="3-8.htm"title="越南咖啡"target="_self"></a><ahref="3-8.htm"title="越南咖啡"target="_self">越南咖啡</a></h3><h3><ahref="3-9.htm"title="濃縮咖啡"target="_self">濃縮咖啡</a></h3><h3><ahref="3-10.htm"title="星巴克"target="_self">星巴克</a></h3><h3><ahref="3-11.htm"title="瑰夏咖啡"target="_self">瑰夏咖啡</a></h3><h3><ahref="3-12.htm"title="綠茶咖啡"target="_self">綠茶咖啡</a><ahref="3-12.htm"title="綠茶咖啡"target="_self"></a></h3>（十三）“點心咖啡”設(shè)計代碼，如圖4.13所示圖4.13“點心咖啡”效果圖源代碼：<ahref="../3/3-1.htm"title="點心的品種"class="zm"><span>點心的品種</span></a></dt></dl><divclass="clear"></div></div><h3class="titlelinemyCorner"data-corner="top5px">聯(lián)系方式</h3>五、過程圖片制作貓咪主題咖啡館的步驟：（以制作“貓咪主題咖啡館”為例）（一）啟動Photoshop軟件，新建大小為800×200像素，分辨率為72像素/英寸，顏色模式為RGB，背景內(nèi)容為白色的圖像文件。如圖5.1所示。圖5.1新建文件（二）用鼠標單擊工具箱中的移動工具，在標尺邊緣拖出多條輔助線，效果如圖5.2所示。（三）打開做好的素材圖片1和2，分別放到“圖層1”和“圖層2”中。改變“橡皮擦工具”的筆畫大小、不透明和筆畫硬度等，使用“橡皮擦工具”對素材進行編輯處理。新建圖層“圖層3”，利用矩形選框工具在封面上繪制一個長方形，并填充為紅色，效果如圖5.2所示。圖5.2底背景圖（四）關(guān)閉標尺。效果如圖5.3所示。圖5.3貓咪主題咖啡館中間矩形六、作品圖片本畢業(yè)設(shè)計總共制作了貓咪主題咖啡館網(wǎng)站，世界各地，人們越來越愛喝咖啡。全部制作完畢以后，以AdobeDreamweaverCS6軟件動態(tài)展示出來主要內(nèi)容見下圖。圖6.1作品展示七、設(shè)計創(chuàng)意說明設(shè)計軟件包括了AdobeDreamweaverCS6軟件和圖形處理軟件。用AdobeDreamweaverCS6軟件進行頁面的制作，用網(wǎng)頁設(shè)計代碼面效果圖進行展示。在AdobeDreamweaverCS6軟件制作，運用了軟件中部分功能。每一個貓咪主題咖啡館網(wǎng)頁設(shè)計軟件提供了一套直觀的可視界面，供您創(chuàng)建和編輯HTML網(wǎng)站和移動應(yīng)用程序。使用專為跨平臺兼容性設(shè)計的自適應(yīng)網(wǎng)格版面創(chuàng)建適應(yīng)性版面。在發(fā)布前使用多屏幕預(yù)覽審閱設(shè)計。八、設(shè)計總結(jié)：歷經(jīng)了三個月的奮戰(zhàn)，我的畢業(yè)設(shè)計終于完成了?；叵脒@段日子的經(jīng)歷和感受，讓我感慨萬千，在這次畢業(yè)設(shè)計的過程中，我努力和精心制作，學習了Photoshop.exe、flash、AdobeDreamweaverCS6等網(wǎng)頁軟件的應(yīng)用。通過這次設(shè)計使我明白了自己基本的知識還比較欠缺，要學習的東西還很多，終于使我對自己現(xiàn)在有了掌握。在以后的工作、生活中都應(yīng)該請教老師等方式，不斷的學習、解決、提高，設(shè)計出的網(wǎng)頁不論是外觀還是內(nèi)容，都在不斷的進步、改善。在整個貓咪主題咖啡網(wǎng)站設(shè)計中我知道得了許多東西,也培養(yǎng)了我獨立工作的能力,樹立了對自己工作能力的信心,相信會對將來的學習工作日子有特別重要的妨礙。而且大大提高了動手的能力,使我充分體味到了在制造過程中探究的艱苦和成功時的歡躍。盡管那個設(shè)計做的也別太好,但是在設(shè)計過程中所學到的東西是這次畢業(yè)設(shè)計的最大收獲和財寶,使我終身受益。九、參考資料[1]馮濤、王海波.網(wǎng)頁設(shè)計與制作項目教程[M].第2版.大連理工大學出版社，2014,6[2]張?zhí)K