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

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

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