猫咪主题咖啡馆网站设计

目录TOC\o"1-3"\h\u一、内容简介 产品名称猫咪主题咖啡馆网站一、内容简介（一）背景与意义通过调研,国内外的一些咖啡馆设计大多数都没有自己的特色和风格,不能让人耳目一新的感觉,星巴克、上岛咖啡、左岸咖啡等一些咖啡厅的设计风格如出一辙，没有特定的主题，仅仅靠上档次的装修是远远不够吸引人眼球的。除此之外，例如国内的名典咖啡，它的缺点在于设计有点太过于成熟，针对的消费人群就略显微薄。咖啡厅的消费人群大多数是30-50岁之间的中年人土。而且它的设计颜色很单调、很冷清、很压抑，没有让人精神放松的氛围，没有特定的文化氛围，但它的家具和设计高档，这是它的优点。咖啡厅以高雅，清新，柔和的主要色调配以简洁，流畅的设计语言营 造了一个舒适；惬意且极具现代气息的商用空间。温暖的色调；流畅的曲线；新颖独特的空间处理，适当的冷色补充，再加上强烈的金属材料的配合，创造出一个品味非凡的休憩空间。  （二）资料收集和分析“咖啡”的小镇，在希腊语中“Kaweh”的意思是“力量与热情”。茶叶与咖啡、可可并称为世界三大饮料。咖啡树是属茜草科常绿小乔木，日常饮用的咖啡是用咖啡豆配合各种不同的烹煮器具制作出来的，而咖啡豆就是指咖啡树果实内之果仁，再用适当的烘焙方法烘焙而成。另有图书以此为名。咖啡终端销售市场一依次为:咖啡及西式快餐连锁店、星级酒店、西餐厅。其中咖啡馆及西式快餐连锁店主要由上岛咖啡、星巴克咖啡、真锅咖啡,麦当劳、必胜客,这些连锁店平均每月销量在21.18吨,占30、18%,其次星级酒店每月平均销量在16,47吨,占23.47%,西餐厅平均每月销量13、53吨,占19,28%。随着时代的发展和人们生活理念的进一步改变,咖啡业也在以一种迅猛的速度发展。（三）方案设计咖啡店方案设计咖啡厅的装修要根据人们消费的主题思想来装修,你可以为工作而来,可以为听音乐而来,可以为看书而来,也可以为看电影而来。

当人们在享受咖啡的味道的时候,更是被咖啡厅独有氛围所吸引。因此咖啡厅装修设计要注意营造喝咖啡的独特氛围。①产品介绍:以专业咖啡为主,结合精美小食、水吧饮料等来满足消费者的需求1、咖啡:以纯品咖啡为主打,推出精致花式咖啡,如:蓝山咖啡、曼特宁咖啡、卡布奇诺爱尔兰咖啡等;2、时尚水吧饮品:如:木瓜牛奶,香蕉牛奶,港式奶茶等。3、根据不同的季节制定一些冷饮、热饮、点心、沙拉等。（四）方案的实施用AdobeDreamweaverCS6软件制作时，每张设计制作并编辑网站效果图中，包括首页、咖啡种类。包括的名称、咖啡的有名出版社及一些图片和背景。书籍上主要包括书的名称内容一些图片和背景图案。用AdobeDreamweaverCS6软件播放时将作品的咖啡作为一个整体图片一起进行设计制作并编辑网站效果图中展示。二、产品分析本毕业设计制作为目的。主要运用的是AdobeDreamweaverCS6软件依次制作出效果图。最后用AdobeDreamweaverCS6制作并编辑网站将所有效果展示出来。用AdobeDreamweaverCS6制作并编辑网站制作的分析：咖啡豆含有大约100种不同的物质，包括咖啡因、单宁酸、油和氮化合物等，每100克速溶咖啡中，含咖啡因44~100毫克；每100克调制咖啡中，含咖啡因64~124毫克。咖啡是一种兴奋剂，对人体会产生很多影响，它可利尿、刺激中枢神经和呼吸系统、扩大血管、使心跳加速、增强横纹肌的力量以及缓解大脑和肌肉疲劳。制作过程中，需要运用到AdobeDreamweaverCS6制作并编辑网站、网站设计代码编辑效果等知识。用AdobeDreamweaver软件播放时，需要添加代码、拆分、设计、实时视图效果浏览器的兼容网页设计。三、设计草图1、首页草图网站的主页和子页的基本框架都相似，页面上方是主题“猫咪主题咖啡馆”，左侧是“咖啡的种类图片”右侧是“小题字体”、“字体内容”。然后根据子页的不同内容再加上相应的图案或文字。图3.1编辑网站设计框架图2、“关于我们”页面草图图3.2编辑网站设计框架图3、“产品展示”页面草图图3.3编辑网站设计框架图4、“精品推荐”页面草图图3.4编辑网站设计框架图5、“门店展示”页面草图图3.5编辑网站设计框架图6、“精品推荐”页面草图图3.6编辑网站设计框架图7、“联系我们”页面草图图3.7编辑网站设计框架图四、设计效果图（一）“网站首页”设计效果图，如图4.1所示图4.1“网站首页”效果图“关于我们”设计效果图，如图4.2所示图4.2“关于我们”效果图（三）“产品展示”设计效果图，如图4.3所示图4.3“产品展示”效果图（四）“精品推荐”设计效果图，如图4.4所示图4.4“精品推荐”效果图（五）“行业资讯”设计效果图，如图4.5所示图4.5“行业资讯”效果图（六）“门店展示”设计效果图，如图4.6所示图4.6“门店展示”效果图（七）“联系我们”设计效果图，如图4.7所示图4.7“联系我们”效果图（八）“咖啡的种类”计效果图，如图4.8所示图4.8“咖啡的种类”效果图（九）“点心的咖啡”设计效果图，如图4.9所示图4.9“点心的咖啡”效果图（十）“产品展示”设计效果图，如图4.10所示图4.10“产品展示”效果图“猫咪主题咖啡馆”设计代码，如图4.11所示图4.11“猫咪主题咖啡馆”效果图源代码：<ahref="index11.htm">网站首页</a><ahref="../2/2.htm">关于我们</a><ahref="../3/3.htm">产品展示</a><ahref="../4/4.htm">精品推荐</a><ahref="../5/5.htm">行业资讯</a><ahref="../6/6.htm">门店展示</a><ahref="../7/7.htm">联系我们</a>（十二）“产品展示”设计代码，如图4.12所示图4.12“产品展示”效果图源代码：<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>（十三）“点心咖啡”设计代码，如图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">联系方式</h3>五、过程图片制作猫咪主题咖啡馆的步骤：（以制作“猫咪主题咖啡馆”为例）（一）启动Photoshop软件，新建大小为800×200像素，分辨率为72像素/英寸，颜色模式为RGB，背景内容为白色的图像文件。如图5.1所示。图5.1新建文件（二）用鼠标单击工具箱中的移动工具，在标尺边缘拖出多条辅助线，效果如图5.2所示。（三）打开做好的素材图片1和2，分别放到“图层1”和“图层2”中。改变“橡皮擦工具”的笔画大小、不透明和笔画硬度等，使用“橡皮擦工具”对素材进行编辑处理。新建图层“图层3”，利用矩形选框工具在封面上绘制一个长方形，并填充为红色，效果如图5.2所示。图5.2底背景图（四）关闭标尺。效果如图5.3所示。图5.3猫咪主题咖啡馆中间矩形六、作品图片本毕业设计总共制作了猫咪主题咖啡馆网站，世界各地，人们越来越爱喝咖啡。全部制作完毕以后，以AdobeDreamweaverCS6软件动态展示出来主要内容见下图。图6.1作品展示七、设计创意说明设计软件包括了AdobeDreamweaverCS6软件和图形处理软件。用AdobeDreamweaverCS6软件进行页面的制作，用网页设计代码面效果图进行展示。在AdobeDreamweaverCS6软件制作，运用了软件中部分功能。每一个猫咪主题咖啡馆网页设计软件提供了一套直观的可视界面，供您创建和编辑HTML网站和移动应用程序。使用专为跨平台兼容性设计的自适应网格版面创建适应性版面。在发布前使用多屏幕预览审阅设计。八、设计总结：历经了三个月的奋战，我的毕业设计终于完成了。回想这段日子的经历和感受，让我感慨万千，在这次毕业设计的过程中，我努力和精心制作，学习了Photoshop.exe、flash、AdobeDreamweaverCS6等网页软件的应用。通过这次设计使我明白了自己基本的知识还比较欠缺，要学习的东西还很多，终于使我对自己现在有了掌握。在以后的工作、生活中都应该请教老师等方式，不断的学习、解决、提高，设计出的网页不论是外观还是内容，都在不断的进步、改善。在整个猫咪主题咖啡网站设计中我知道得了许多东西,也培养了我独立工作的能力,树立了对自己工作能力的信心,相信会对将来的学习工作日子有特别重要的妨碍。而且大大提高了动手的能力,使我充分体味到了在制造过程中探究的艰苦和成功时的欢跃。尽管那个设计做的也别太好,但是在设计过程中所学到的东西是这次毕业设计的最大收获和财宝,使我终身受益。九、参考资料[1]冯涛、王海波.网页设计与制作项目教程[M].第2版.大连理工大学出版社，2014,6[2]张苏