猫咪主题咖啡馆网站设计.docx

目录一、内容简介1
（一）背景与意义1（二）资料收集和分析1
（三）方案设计1（四）方案的实施2
二、产品分析2三、设计草图2
1、首页草图2
2、“关于我们”页面草图3
3、“产品展示”页面草图3
4、“精品推荐”页面草图3
5、“门店展示”页面草图4
6、“精品推荐”页面草图4
7、“联系我们”页面草图4四、设计效果图5
五、过程图片10六、作品图片12
七、设计创意说明13八、设计总结：13
九、参考资料14X 八 A

X 八 A
*iai* *•心，f >o-
At«e・ F"〜■IP13K BMf&a-Vlflkt ?*■ •>
««!▼ el»M-vi«cb*>
<6v CXf*CCM-T fl
<41* OK7L*OCK-・X・O*>
<01* 0W"3F
,m W； 〃： 8。，w3>s-
=la»***X4xi«-«srw po&t&aft*・>・•
■ Y‘v{
»*ca®*：C^pa aasgimf。tpa)
MX3FgC 加.>>
(«x・，Wle-
rxdth ：<CV« e> <• h-.WUdxg
<^>X« 7・1
—・ TBtl»»a*'Sfis SRW.f，・>■—• r/«X7M>
</4*v> </XX»
c，in mma, •> <a mf.mm—xg，：c-
•i/m，*需工■ Ik 4;?••• ”：.l-W£W・ “5rb-rs, “y ：* ”—・gec*y 】；》/•
«2k* bc«r*
,3-a.:m-mt- urge—.f e■字X
|O 脚牲gia国i
见i■诉 XTttil :户M■示:3ttt : h««a ： rwu■不:C»Afl
图4.12 “产品展示”效果图
源代码：<h3xa href="3-l.htm" title=”康宝蓝"target="_self">康宝 蓝咖啡</ax/h3><h3xa href="3-2.htm" title="爱尔兰咖啡"
target="_self">爱尔兰咖啡</ax/h3><h3xa href="3-3.htm" title="白咖啡"target="_self"> 白咖啡</a></h3><h3xa href="3-5.htm"
title二”摩卡咖啡" target="_self”>摩卡咖啡</a></h3><h3xahref="3-6.htm,, title="皇家咖啡"target="_self”>皇家咖啡</ax/h3> <h3xa href="3-7.htm" title="拿铁"target="_self">拿铁咖啡v/ax/h3> <h3xa href="3-8.htm" title=”越南吻叩非"target="_self"x/axa href="3-8.htm" title二”越南咖啡" target="_self">越南咖啡v/ax/h3> <h3xa href="3-9.htm" title="浓缩咖啡" target="_self”>浓缩咖啡 </ax/h3> <h3xa href="3-10.htm" title="星巴克" target="_self"> 星巴克</a></h3><h3xa href="3-ll.htm" title="瑰夏咖啡”
target="_self"> 瑰夏咖啡 </a></h3>
<h3xa href="3-12.htm" title;”绿茶咖啡" target:”_selF>绿茶咖 啡</a><a href="3-12.htm" title="绿茶咖啡" target="_self"></a></h3>“*IM
汇M4S.攵从闻5£tt・ no内叫ilRKG
初Z，i|・ 19»<3M5T <K->.用筋MTMT霭芟 JM5,热触与抬h 2gMm
多货号文做电ib wr<*rr<w>.

“*IM
汇M4S.攵从闻5£tt・ no内叫ilRKG
初Z，i|・ 19»<3M5T <K->.用筋MTMT霭芟 JM5,热触与抬h 2gMm
多货号文做电ib wr<*rr<w>.
:#尔竺・*
（十三）“点心咖啡”设计代码，如图4.13所示</A> cdt <«w
</"» </«!>
«/&▼> <M3XXaa By€««MiM dta-ooE・L•tap <4A»-nav-fcot «oxccxn>
“m3 王*确5»f ♦: OB
■ "wpd： ”即82—> <dlv>
・，9«|> ■： 80Mo«2 mi “加z”“g.cc»a)c Rvwv.faS4P*9«.MB</av>
</«!▼> <«!▼ «:•••-• •b-teOB tr «b-W*> <h> «1•»•••»e- <div c—・8«•一〃 8! •>。:jne-RiMI内•汨 > “t <a - A ——9例“，B></a&v>CXA4»*aCX««S*X/a&V>
<d*T CXAj>»«*«ETIW-$Ut・》
<hl C— <d« <0t3t"*，・K“gclaas^ixfc IK*-，><但 arc*
分学alt-•* my*宗之・*I,OXl></«9***
«*a〃M<coalaA1<4tMX« *../FubXac/xaMa«/soca/a;</«cnpc>
<r?r*pe »?—・・，>-3_，8；・・/=丁©<»・1・・^«・,图4.13 “点心咖啡”效果图
源代码：<a href="../3/3・Lhtm" title，”点心的品种” class^zm^xspan〉点心的品种 </span></a></dt>
</dl><div class=',clear,,x/div>
</div>
<h3 class=ntitle line myCorner,1 data-corner=Htop 5px">联系方式 </h3>五、过程图片
制作猫咪主题咖啡馆的步骤：（以制作“猫咪主题咖啡馆”为例）
（一）启动Photoshop软件，新建大小为800X200像素，分辨率为72像 素/英寸，颜色模式为RGB,背景内容为白色的图像文件。如图5.1所示。
预设详细信息猫咪主题咖啡馆士
宽度800 像素v
高度 方向画板200）［固□
.•口立年干72像素/英寸v
颜色模式灰度〜Unit v
背曷内容白色▼ ■
>高级选项（关闭）创建
图5. 1新建文件
10
（二）用鼠标单击工具箱中的移动工具，在标尺边缘拖出多条辅助线，效果如图5. 2所示。
（三）打开做好的素材图片1和2,分别放到“图层1”和“图层2”中。改变“橡 皮擦工具”的笔画大小、不透明和笔画硬度等，使用“橡皮擦工具”对素材进行 编辑处理。新建图层“图层3”，利用矩形选框工具在封面上绘制一个长方形， 并填充为红色，效果如图5. 2所示。

图5.2底背景图
（四）关闭标尺。效果如图5. 3所示。

图5.3猫咪主题咖啡馆中间矩形
11
六、作品图片
本毕业设计总共制作了猫咪主题咖啡馆网站，世界各地，人们越来越爱喝咖 啡。全部制作完毕以后，以Adobe Dreamweaver CS6软件动态展示出来主要内容见下图。
言字未历
♦ y「•・■* •kma•力wr n. —Hemms. <1”,….， 7f»*. rue*-*r»«ttMi»«B»»R. • hewMtrVX. aa&XA7«SMVft- ・0•▼和 b，OfiM元■♦今
Mt«va«AM. AB g««f. ”\♦*#
，■…一”■■，•・ •VMMMAMMnteiA l»W“・5 r*r«TW« tfttfWKtMnMi:
riHMMiJI<AMrfIttC.t-4M«MV
AOMdMmM： 3Atmr7a^rtrB*ttl ctnt* sii.twr
、GH*s*«L93・<urmr s7Bta・[■■・2 • •«• laMLaa*

5 r*r«TW« tfttfWKtMnMi:
riHMMiJI<AMrfIttC.t-4M«MV
AOMdMmM： 3Atmr7a^rtrB*ttl ctnt* sii.twr
、GH*s*«L93・<urmr s7Bta・[■■・2 • •«• laMLaa*
»«w-
亶际“<•况ax・nr：M5HUUmMt«a・ f»5m"R3HH7>HK«・3e«IU
teniMMra*- • ■» • firuew fmeeiiwvs -xg It Mi
—«A”f4.
mie一,.做h aBe»
■ge. MMtdUI gJbVBUm 3
4Mm..—・ … mi<MMi<^i*«*aaa«4w7
-Etefs EiG；w・trd 即一!“ fw ♦inmx。
12
f ・«”重■•*••<• me«m« t. iHAa.wm.. iwm...
m. amnaiABVMMi cut*（又 ft。*"Brj-c“）・im”《M£n=*rm.*i8・r«
・ Art 卜坛* 1「■■■iSBfTMB . MRT^JI.
（KM
•四l，土m. »i
— 〃r«ra m«h«c »twt «xaui. *«•» ■ flhZM AfMBH^t. AMO
M»^9i ram.
图6.1作品展示
七、设计创意说明
设计软件包括了 Adobe Dreamweaver CS6软件和图形处理软件。用AdobeDreamweaver CS6软件进行页面的制作，用网页设计代码面效果图进行展示。
在Adobe Dreamweaver CS6软件制作，运用了软件中部分功能。每一个猫咪 主题咖啡馆网页设计软件提供了一套直观的可视界面，供您创建和编辑HTML网 站和移动应用程序。使用专为跨平台兼容性设计的自适应网格版面创建适应性版 面。在发布前使用多屏幕预览审阅设计。
八、设计总结：
历经了三个月的奋战，我的毕业设计终于完成了。回想这段日子的经历和感 受，让我感慨万千，在这次毕业设计的过程中，我努力和精心制作，学习了 Photoshop, exe、flash、Adobe Dreamweaver CS6 等网页软件的应用。通过这 次设计使我明白了自己基本的知识还比较欠缺，要学习的东西还很多，终于使我13 对自己现在有了掌握。在以后的工作、生活中都应该请教老师等方式，不断的学 习、解决、提高，设计出的网页不论是外观还是内容，都在不断的进步、改善。 在整个猫咪主题咖啡网站设计中我知道得了许多东西，也培养了我独立工作的能 力，树立了对自己工作能力的信心，相信会对将来的学习工作日子有特别重要的 妨碍。而且大大提高了动手的能力，使我充分体味到了在制造过程中探究的艰苦 和成功时的欢跃。尽管那个设计做的也别太好，但是在设计过程中所学到的东西 是这次毕业设计的最大收获和财宝，使我终身受益。
九、参考资料[1]冯涛、王海波.网页设计与制作项目教程[M].第2版.大连理工大学出版社， 2014,6
[2]张苏中、吕威飞、尤胜.网页设计制作[M].高等教育出版社，2014,7[3]孙振业.网页设计与制作[M] .第2版.高等教育出版社，2014, 8
[4]刘万辉、常村红.网页设计与制作（HTML+CSS+JavaScript》[M].第2版.高等 教育出版社，2018,4[5]倪红耀、新世纪高职专教材编审委员会.《网页设计与制作》[M].第3版.大 连理工大学出版社，2014, 1
[6]黄颖、郑代福.《网页设计与制作》[M].第2版.电子工业出版社，2015,7 [7]霍苏萍.《网页设计与制作》ML大象出版社，2017,814
产品名称猫咪主题咖啡馆网站一、内容简介
（一）背景与意义
通过调研，国内外的一些咖啡馆设计大多数都没有自己的特色和风格,不能 让人耳目一新的感觉，星巴克、上岛咖啡、左岸咖啡等一些咖啡厅的设计风格如 出一辙，没有特定的主题，仅仅靠上档次的装修是远远不够吸引人眼球的。除此 之外，例如国内的名典咖啡，它的缺点在于设计有点太过于成熟，针对的消费人 群就略显微薄。咖啡厅的消费人群大多数是30-50岁之间的中年人土。而且它的 设计颜色很单调、很冷清、很压抑，没有让人精神放松的氛围，没有特定的文化 氛围，但它的家具和设计高档，这是它的优点。
咖啡厅以高雅，清新，柔和的主要色调配以简洁，流畅的设计语言营 造了 一个舒适；惬意且极具现代气息的商用空间。温暖的色调；流畅的曲线；新颖独 特的空间处理，适当的冷色补充，再加上强烈的金属材料的配合，创造出一个品 味非凡的休憩空间。
（二）资料收集和分析
“咖啡”的小镇,在希腊语中“Kaweh”的意思是“力量与热情”。茶叶与 咖啡、可可并称为世界三大饮料。咖啡树是属茜草科常绿小乔木，日常饮用的咖 啡是用咖啡豆配合各种不同的烹煮器具制作出来的，而咖啡豆就是指咖啡树果实 内之果仁，再用适当的烘焙方法烘焙而成。另有图书以此为名。
咖啡终端销售市场一依次为:咖啡及西式快餐连锁店、星级酒店、西餐厅。 其中咖啡馆及西式快餐连锁店主要由上岛咖啡、星巴克咖啡、真锅咖啡，麦当劳、 必胜客,这些连锁店平均每月销量在21. 18吨，占30、18%,其次星级酒店每月平 均销量在16, 47吨，占23. 47%,西餐厅平均每月销量13、53吨，占19, 28%o随着 时代的发展和人们生活理念的进一步改变，咖啡业也在以一种迅猛的速度发展。
（三）方案设计
咖啡店方案设计咖啡厅的装修要根据人们消费的主题思想来装修，你可以为 工作而来,可以为听音乐而来,可以为看书而来,也可以为看电影而来。
当人们在享受咖啡的味道的时候,更是被咖啡厅独有氛围所吸引。因此咖啡 厅装修设计要注意营造喝咖啡的独特氛围。
①产品介绍：
以专业咖啡为主,结合精美小食、水吧饮料等来满足消费者的需求1、咖啡：以纯品咖啡为主打，推出精致花式咖啡，如:蓝山咖啡、曼特宁咖啡、卡 布奇诺爱尔兰咖啡等；
2、时尚水吧饮品:如:木瓜牛奶,香蕉牛奶,港式奶茶等。
3、根据不同的季节制定一些冷饮、热饮、点心、沙拉等。
（四）方案的实施
用Adobe Dreamweaver CS6软件制作时，每张设计制作并编辑网站效果图中， 包括首页、咖啡种类。包括的名称、咖啡的有名出版社及一些图片和背景。书籍 上主要包括书的名称内容一些图片和背景图案。用Adobe Dreamweaver CS6软件 播放时将作品的咖啡作为一个整体图片一起进行设计制作并编辑网站效果图中 展示。
二、产品分析
本毕业设计制作为目的。主要运用的是Adobe Dreamweaver CS6软件依次 制作出效果图。最后用Adobe Dreamweaver CS6制作并编辑网站将所有效果展示 出来。
用Adobe Dreamweaver CS6制作并编辑网站制作的分析：咖啡豆含有大约 100种不同的物质，包括咖啡因、单宁酸、油和氮化合物等，每100克速溶咖啡 中，含咖啡因44~100毫克；每100克调制咖啡中，含咖啡因64〜124毫克。咖 啡是一种兴奋剂，对人体会产生很多影响，它可利尿、刺激中枢神经和呼吸系统、 扩大血管、使心跳加速、增强横纹肌的力量以及缓解大脑和肌肉疲劳。制作过程 中，需要运用到Adobe Dreamweaver CS6制作并编辑网站、网站设计代码编辑效 果等知识。用Adobe Dreamweaver软件播放时，需要添加代码、拆分、设计、实 时视图效果浏览器的兼容网页设计。
三、设计草图1、首页草图
网站的主页和子页的基本框架都相似，页面上方是主题“猫咪主题咖啡 馆”，左侧是“咖啡的种类图片”右侧是“小题字体”、“字体内容”。然后根 据子页的不同内容再加上相应的图案或文字。
主题图片
网站首先
关于我们
产品展示
精品推荐
行业资讯
门店展示
联系我们
咖啡的种类图片
关于我们
字体
行业资讯
字体
关于我们I公司动态I友情链接I联系我们 Copyright ©20172020 Rights Reserved.长ICP指 14005359^图3.1编辑网站设计框架图
2、“关于我们”页面草图主题图片 I网站首先I关于我们I产品展示I精品推荐I行业资讯I门店展示I联系我们
主页图片
内容内容
内容关于我们I公司动态I友情黄接I联系我们
Copyright €>2017——2020 Rights Reserved.长ICP备 14005359号
图3.2编辑网站设计框架图3、“产品展示”页面草图
文字文字 文字 文字 文字 文字 文字 文字产品展示
文字咖啡的种类图片
关于我们I公司动态I友情曾接I联系我们
Copyright ©2017-—2020 Rights Reserved.长ICP备 14005359号
图3.3编辑网站设计框架图4、“精品推荐”页面草图
文字
文字
文字
文字
文字
文字
文字
文字
主题图片
图片

图片
文字内容
精品推荐文字
关于我们I公司动态I友情链接I联系我们
Copyright ©2017-——2020 Rights Reserved.长ICP备 14005359号
图3.4编辑网站设计框架图

5、“门店展示”页面草图

文字文字 文字 文字 文字 文字 文字文字主题图片
图片
门店展示文字内容
文字关于我们।公司动态।友情链接।联系我们
Copyright © 2017——2020 Rights Reserved.长ICP备 14005359号图3.5编辑网站设计框架图
6、
“精品推荐”页面草图

文字 |文字 文字 文字 文字 文字 文字 文字主题图片
图片
文字内容
精品推荐文字
关于我们।公司动态।友情,接।联系我们Copyright © 2017--2020 Rights Reserved.长ICP备 14005359号
图3.6编辑网站设计框架图7、“联系我们”页面草图
文字
文字
文字
文字
文字
文字
文字
文字
主题图片
联系我们
文字

图片
文字内容
关于我们|公司动态I友情链接I联系我们
Copyright ©2017一—2020 Rights Reserved.长ICP备 14005359号
图3.7编辑网站设计框架图四、设计效果图
（一）“网站首页”设计效果图，如图4.1所示
•M? »«ooua«?*： moutui

图4.1 “网站首页”效果图
（二）“关于我们”设计效果图，如图4.2所示
图4.2 “关于我们”效果图
（三）“产品展示”设计效果图，如图4. 3所示

户的事—

图4.3 “产品展示”效果图（四）“精品推荐”设计效果图，如图4.4所示

图4.4 “精品推荐”效果图（五）“行业资讯”设计效果图，如图4.5所示

blUWI
WnStH
eonan
R&h衣
■ at *0
« 1 x即
■ a Meno
RU MUAJUU944UA

*1 TM>aWDWM*vB*1«**«•(«** twt4«w
・• !》»••”一• ■■■・・曲t一€^，
as «tt3»;^wsiM*rsar-. Mts.Qgxs。su«^inw*CA- u«i»a<U4i- e
am FAK«xweIHllVSA•
iT^xntaflKveit^i NflQW'XTDnm- «»««.**»M «tnt. — 必 ”rBWM・mr,C，ET y・t，E*TT，，--3UMr
<9m>rm^atan^awM- x*i*rsi*MR<w^r*K7ie^. to-肝旧 >«a・
图4.5 “行业资讯”效果图

图4.9 "点心的咖啡”效果图
（十）“产品展示”设计效果图，如图4.10所示产瞄展示
迪啡的易附
.曰
（«U5xt
的三U。
的版：=81
毛 £ ： 18874021046
纹■: 000000
Email ：
R 史：w*w.Un9P49exo<n
2.区间

图4.10 “产品展示”效果图
（十一）“猫咪主题咖啡馆”设计代码，如图4.11所示a«M**k«rwvrl** ewrt®nt«-fi* i •WWil* • £aae«・de»c*“，8・ coecccc3MliIMK1W，

a«M**k«rwvrl** ewrt®nt«-fi* i •WWil* • £aae«・de»c*“，8・ coecccc3MliIMK1W，
:f「；-二」,M*«A ： XT*n ； fMr j MAM«* ； fitX* ： CW■示 i<11A*-
..八〜r，83/r»z・.s •••■■•■•^•…・皿。…<Xia« »«l**e<yx««**»** </•••- z.i
*./lMCale»/rpinc«.C49*><linkmLf—:• tyr*-
<»cx少，八_，*“-/：2«asy8，・3.2.f""teat/: •▼•«cs&F、l*x/xsipt)
<»crtpt ・r—*.八_门1♦•/■»，icX_ui.”J*，w・：♦■，/： ・vMer a pt ・x / »er»
<»«&>« ,»•••«・，/xex，k>«・ •<•••.✓l^eilet/^qteiv.taSlioer.Bia.jf.^B-wyfcript*
<MyJOC% ->(w«aec» (4iv cX**a«nSDI-S4Bv*x»(aa cXa»*»atr
Ktx- T- n« m 8 ” ,：« ”—g ： yx，div>
<01.…8 x，&ng.»<ti»idia g・—》
«av «1•»•••>«•--eoft-Xar> fl*> «g •»€•i,.、"rh
•、y3L~rcc 9fM "• ”• 8, • ss—”・"工给•・、一»</«!▼>
<a«v ©l”r••斯n” tr<Ul «lx “-•y_188・ f.
00MB.X^«aX・H</»X/fl9«a>X/21X3& cl!«••></li>
<11 2Lt»»U・ FimgJi 3t|»，.x«p«e>«.
s.c< f* ,./2/2.>MT Rj1)< /o</*221- -Ma-liaea>c/u>
hrwf-*.
・REB
<U i-.Xf —~xgig"x -xspanx ，・ »▼■― /4 > 4A 〜，f”、••・・图4.11“猫咪主题咖啡馆”效果图
源代码：<a href="indexll.htm">网站首页</a> <a href="../2/2.htm">关于我们</a><a 11面二,,・・/3/3丘171”>产品展示</3> <a
href=',../4/4.htm,,>精品推荐</a> <a href二,1/5/5.htm,,>行业资讯</a> <a
href二”.・/6/6・htm”〉门店展示</a><a href二”.・/7/7.htm”>联系我们</a>
(十二)“产品展示”设计代码，如图4.12所示