《“欧麦蛋糕”网站前端设计与实现毕业设计.pdf》由会员分享，可在线阅读，更多相关《“欧麦蛋糕”网站前端设计与实现毕业设计.pdf（28页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、摘要随着当前互联网的快速发展，越来越多的企业意识到企业网站建 设的重要性。网站已然成为企业实现网络营销的基础，同时也是网络 营销中最重要的一个环节。企业网站有利于提升企业的形象，宣传企 业商品，树立企业品牌。本毕业设计主题是“欧麦蛋糕”网站前端设计与实现。“欧麦蛋 糕”网站是欧麦蛋糕企业网站。本毕业设计首先对网站设计背景进行 介绍，然后完成了网站logo、banner等图片设计，最后设计实现了 网站的前端页面。关键词：欧麦蛋糕；企业官网；网站建设This document is produced by free version of Print2Flash.Visit for more inf
2、ormation目录引言.11设计背景.21.1网站设计背景.21.2品牌简介.21.3设计目的.32设计需求分析.42.1市场调研分析.42.2目标客户群分析.42.3竞争对手分析.53工具简介.83.1网页设计制作工具一Dreamweaver.83.2网页图片处理工具一Photoshop.83.3网页布局美化一CSS.84网站结构设计.94.1网站结构规划.94.2网站栏目主题介绍.95网站前端页面设计实现.115.1首页.115.2“马卡龙”页面.155.3“生日蛋糕”页面.16This document is produced by free version of Print2Flas
3、h.Visit for more information5.4“联系我们”页面.175.5其他页面.18总结.23致谢.24参考文献.25This document is produced by free version of Print2Flash.Visit for more information引言随着网络技术飞速发展，许多人已经习惯从网络上获取信息。现 如今网络已成为企业竞争的一个重要手段，越来越多的企业建立了自 己的企业网站。企业网站就是企业在网络上的宣传平台，如同企业在网络上的“名片”。企业网站作为网络时代企业发展的一个必要的条件，建立 企业网站有如下三方面优势，一是有利于提升企
4、业品牌的形象；二是 可以与顾客保持密切的联系；三是可以全面详细的展示企业产品。This document is produced by free version of Print2Flash.Visit for more information1设计背景1.1网站设计背景现在网络的发展已经呈现出商业化、全球化的趋势，目前蛋糕行 业已有大部分的门店在网络上建立了自己的企业官网，利用网络传递 企业信息，进行宣传销售。企业网站是企业在网络上进行宣传和树立 形象的一个平台，等同于企业在网络上的一张名片，企业网站不仅仅 是对企业形象进行的一个宣传，同时也可以帮助企业进行销售。为了提升品牌形象，扩大企业知
5、名度,使企业迈向一个新的台阶,“欧麦蛋糕”设计与制作了企业官网。1.2品牌简介欧麦蛋糕店是一家纯手工制作蛋糕的品牌店面，主要经营生日蛋 糕、马卡龙甜品、慕斯蛋糕、海绵蛋糕等产品。本店所用的所有原材 料都是采用世界顶级品牌，至始至终坚持顾客至上、不断创新、不断 学习的经营理念，服务于广大的消费人群，坚决遵守市场法则、诚信 经营，不断满足各类消费人群不同口味，服务于社会，努力传播带有 浓烈欧式风情的高品质甜品蛋糕，追求精致完美、时尚优雅。本品牌 致力于打造成中国食品烘培企业的领先者。This document is produced by free version of Print2Flash.V
6、isit for more information1.3设计目的本网站定位为企业官网，其设计目的是通过“欧麦蛋糕”企业官 网设计与制作树立企业的形象，宣传企业的品牌、推广企业产品，从 而为企业拓展销售渠道。3This document is produced by free version of Print2Flash.Visit for more information2设计需求分析2.1市场调研分析蛋糕老少皆宜，种类丰富，容易被大众接受，所以蛋糕行业的发 展前景巨大，但现在有很多国外的品牌也开始入驻中国市场，这让中 国的蛋糕行业市场产生了 一定的竞争压力。从市场分析来看，烘培行业市场规模近
7、2000亿元，201 1-201 6 年的CAGR为10%+,2017年的规模则是达到了 2022亿元，同比增长 1 2.65%,其中，糕点市场总份额占烘培行业的38%,市场规模达到726 亿，增长速度为1 4.7%,据推算，未来五年有望领跑烘培行业。从容 量上看，糕点行业市场扩容稳定，10年的销量复合增长速度为7.28%,2017年市场容量已经突破500万吨，达到了 547万吨，在消费升级 以及行业规模化的大趋势下，无论从市场分析还是市场容量上看，糕 点行业市场具有巨大的发展潜力。随着互联网技术及电子商务的迅猛发展，越来越多的企业通过建 立企业网站开展品牌宣传及产品推广。目前，设计运营比较出
8、色的蛋 糕甜品类企业官网有：贝思客蛋糕品牌官网、味多美蛋糕品牌官网等。2.2目标客户群分析蛋糕甜品行业的消费人群主要是分为以下3大群体：（1）上班族：根据调查显示，上班族主要以速食来解决早餐，蛋 糕是他们不可缺少的一样速食食品，上班族的工资比较稳定，产品This document is produced by free version of Print2Flash.Visit for more information 价格的变动，对他们的需求弹性比较低，所以上班族这类消费群体可 作为固定的消费人群。（2）在校大学生：在校的大学生思想都是比较前卫的，比较容易 接受新鲜事物，同时，大学的高等教育让
9、学生们对新事物的理解不同 于其他的消费群体。所以当店内新推出一些产品时，大学生群体应该 会很容易接受。（3）80、90后的妈妈：现在年轻的妈妈们都比较爱美想要减肥,但有一部分妈妈们又喜欢吃甜品，所以店内推出有机蔬果蛋糕，是非 常符合现在这些妈妈们的需求。通过客户群分析，本店的产品材质上注重优质原材料及独特的口 感。同时，针对不同的客户群体设置不同的价格定位，例如：上班族,收入较高，价格定位可以定高端价位；80、90后妈妈，收入一般，可定为中端价格;在校大学生，由于大部分在校生没有实现经济独立,消费水平相对较低，所以价格定位可以定低端价位。2.3竞争对手分析目前蛋糕行业发展较为迅速，许多蛋糕店也
10、开始建立起自己的官 网，贝思客蛋糕官网和味多美蛋糕官网不论是在网站设计效果还是网 络营销效率上来说都在蛋糕同行业中名列前茅，下面就以以上两个品 牌官网为例进行分析。1、贝思客蛋糕品牌官网2012年，上海手乐数码科技公司正式成立，推出了“卡思克This document is produced by free version of Print2Flash.Visit for more informationKasekuchen-即：贝思客bestcake”的前身，同年成立独立的配送物流体系，并正式启动400客服电话和线上订购系统，正式对 上海客户开放订购服务。截止至2016年，四年时间贝思客已经
11、在上 海、杭州、苏州、宁波、无锡、南京开设了分公司。贝思客蛋糕官网(https:/www.bestcake,com/index-sh)主要 功能是产品展示及在线下单，网站不仅有蛋糕甜品还有下午茶。该网 站主要栏目是：首页、下午茶、送亲子、送长辈、送闺蜜、送恋人、购物指南以及联系我们等。贝思客蛋糕品牌面向的目标消费者是对生 活品质有高要求的客户，其产品定位为中高端。网站配色采用了天蓝 色和粉红色，属于甜美风。网站首页效果图如图2-1所示：图2-1贝思客蛋糕官网首页图6This document is produced by free version of Print2Flash.Visit fo
12、r more information2、味多美蛋糕品牌官网味多美创立于1996年，是国内著名的烘焙连锁品牌，目前已 经在中国创建了 300多家连锁店，在北京、上海、包头拥有现代 化的中央工厂。味多美官网(http:/ 示和线上下单。其主要栏目是：蛋糕、提货卡券、全国邮寄、同 城配送、会员中心、积分换礼、企业服务及关于我们等。消费者 可以通过该网站浏览品牌所有产品，全国范围内线上或电话预定 产品，也可以联系门店服务，此外还可以了解企业品牌及相关信 息。味多美蛋糕官网主要配色为黑色、浅棕色和白色，风格属于 小清新。味多美蛋糕网站首页效果图，如下图2-2所示：。呻襄num M*sanH 二二 二二
13、二图2-2味多美蛋糕官网首页图7This document is produced by free version of Print2Flash.Visit for more information3工具简介3.1网页设计制作工具一DreamweaverAdobe Dreamweaver,简称“DW”，中文名称梦想编织者，是 美国MACROMEDIA公司开发的，2005年被Adobe公司收购。DW是前台 制作的工具，借助共享型用户界面设计，可以在不同的组件中更快的 工作，切换自如，随着DW软件的不断更新，许多的功能也在不断的 完善。3.2网页图片处理工具一PhotoshopAdobe Phot
14、oshop,简称PS目前最常用的图像处理软件之一,是由Adobe Systems开发和发行的，集图像扫描、编辑修改、图像制 作为一体的处理软件，主要处理以像素所构成的数字图像。使用其众 多的编修与绘图工具，可以有效地进行图片编辑工作。3.3网页布局美化一CSSCSS的全称为Cascading Style Sheets,中文名称为层叠样式表,简称为样式表。CSS不仅可以静态修饰页面，还可以配合各种脚本语 言动态地对网页各元素进行格式化。想要实现漂亮的布局，就需要使 用到CSS样式，一组相同的div标签，对应的代码不一样，效果也就 不一样。This document is produced by
15、free version of Print2Flash.Visit for more information4网站结构设计4.1网站结构规划本网站是由首页、关于欧麦、生日蛋糕、经典甜品、联系我们、登录、注册这七个一级栏目组成，其中经典甜品这个栏目是由马卡龙、海绵蛋糕、戚风蛋糕、慕斯蛋糕这四个二级栏目所组成。网站结构规划图，如下图4-1所示：图4-1网站结构规划图4.2网站栏目主题介绍(1)“关于欧麦”栏目：本栏目的内容有欧麦公司简介、欧麦 团队和品牌加盟。欧麦公司简介可以让顾客更加了解公司的发展、公 司的宗旨以及今后的愿景；欧麦团队展现出公司专业的团队，保证产 品的专业性；品牌加盟简述了目前蛋
16、糕行业的发展前景。9This document is produced by free version ofPrmt2Flash.Visit for more infbnnation（2）“生日蛋糕”栏目：本栏目内容分三部分，有儿童蛋糕、水果蛋糕以及祝寿蛋糕。（3）“经典甜品”栏目：本栏目有马卡龙、海绵蛋糕、戚风蛋 糕、慕斯蛋糕下级栏目，可以方便顾客根据自己的需求查找甜品。（4）“联系我们”栏目：本栏目有公司联系电话、地址以及意 见反馈表。This document is produced by free version of Print2Flash.Visit for more inform
17、ation5网站前端页面设计实现5.1首页1、首页简介首页是整个网站非常重要的一个页面，它能引导用户浏览网站其他部分的内容，是网站的精华所在地。本网站首页采用了棕色、浅灰色和白色三种颜色，棕色是巧克力的颜色，白色是奶油的颜色。本网站的风格属于少女风。首页效果如下图5-1所示:图5-1首页效果图11This document is produced by free version of Print2Flash.Visit for more information2、首页布局首页布局图，如下图5-2所示:图5-2首页布局图首页的第一部分放置了 log。图标和登录注册入口，第二部分是 导航栏，第三部
18、分是首页的海报滚动图，第四部分是小资讯，简单的 介绍了四种经典甜品，第五部分是推广本店的新品和热销单品，第六 部分是本店的版权信息。3、LOGO设计本网站的logo由棕色，浅棕色和白色组合而成，棕色是巧克力 的颜色，而巧克力又是蛋糕的必备元素，这个颜色可以让顾客联想到 蛋糕产品。在logo图形上选用了心形，代表着本店用心在做产品。在文字设计方面，将欧麦蛋糕的英文OMAI CAKE”放置在蛋糕的正 下方,采用微软雅黑24号字体，颜色为#6d432b。本网站LOGO设计紧贴本品牌经营类目，并通过巧克力颜色形象This document is produced by free version of
19、Print2Flash.Visit for more information 生动地调动了客户的购买欲。从而为品牌的宣传及产品定位起到了一 定的积极的宣传作用。LOGO效果如下图5-3所示：图5-3 logo效果图4、导航栏设计导航栏是页面中不可缺少的一部分，本网站的导航栏采用了下拉 菜单。导航栏背景颜色为棕色，颜色代码为#927f5e,文字为微软雅 黑15号字体，颜色代码为#FFF。导航栏设计实现了鼠标经过图像动 态效果，鼠标经过时，背景颜色变换为浅棕色，颜色代码为#d9c39c,文字颜色代码为#000。导航栏效果图，如下图5-4所示：图5-4导航栏效果图_ 首页 关于欧麦 生日蛋糕经典甜品
20、联歇们马卡龙海绵蛋糕戚风蛋糕慕斯蛋糕5、banner 设计首页banner采用了轮播动态效果实现，轮播海报图片有三幅，分别是：第一张海报的主题是马卡龙甜品，这款马卡龙是本店的热销产 品，粉红色的马卡龙，配上天蓝色的背景，给人一种唯美的意境。效 果如下图5-5所示：This document is produced by free version of Print2Flash.Visit for more information图5-5第一张海报效果图第二张海报的主题是红丝绒蛋糕，是本店杯状蛋糕卖的最好的一 款，利用纯白的背景，来突出产品，吸引顾客的关注。效果如下图 5-6所示：图5-6第二张海
21、报效果图第三张海报的主题的慕斯蛋糕，背景是选用的跟蛋糕相近的一种配色，使得背景与产品更好的融合在一起。效果如下图5-7所示：14This document is produced by free version of Print2Flash.Visit for more information图5-7第三张海报效果图5.2“马卡龙”页面“马卡龙”页面的主题是针对马卡龙系列进行产品展示。页面共 分为两个部分，一个是新品上市，另一个是热卖单品。新品上市这一 部分采用了图文非规则布局方式，展示了蔬果马卡龙、佛系马卡龙、彩系马卡龙、礼盒马卡龙和梦幻蓝莓马卡龙这五种新品，并且标明了 价格。热卖单品这一部
22、分采用了图文结合的布局方式，对唯美系马卡 龙、柠檬马卡龙和小清新马卡龙这三种产品进行了展示。页面配色采 用了粉红色和天蓝色这种生动活泼的浅色系，马卡龙产品主要面向的 是大学生和年轻人的消费群体。考虑到马卡龙系列产品自身比较鲜 艳，所以选取了与之相近的配色，希望通过这种配色能够激发消费者 的购买欲。马卡龙页面效果图，如下图5-8所示：15This document is produced by free version of Print2Flash.Visit for more information图5-8“马卡龙”页面效果图“马卡龙”页面第一部分是logo图标和登录注册入口，第二部 分是导航
23、栏，第三部分是马卡龙甜品海报，第四部分是新品上市，第 五部分是热卖单品。第六部分是版权信息。5.3“生日蛋糕”页面“生日蛋糕”页面顾名思义，主要是向顾客展示品牌的系列生日 蛋糕。此页面共分为三个板块，分别是儿童蛋糕、水果蛋糕和祝寿蛋 糕。儿童蛋糕主要面向于儿童消费群体，水果蛋糕主要面向热衷于健 康食品的白领阶层，祝寿蛋糕主要面向于老年消费群体。每一款类目 都分别展示了三款产品，采用了三字型布局，页面整体协调规则。页 面整体配色采用了蛋糕上巧克力的浅咖色。“生日蛋糕页面效果图，如下图5-9所示：16This document is produced by free version of Prin
24、t2Flash.Visit for more information图5-9“生日蛋糕页面效果图“生日蛋糕”页面第一部分是log。图标和登录注册入口，第二 部分是导航栏，第三部分是儿童蛋糕，第四部分是水果蛋糕，第五部 分是祝寿蛋糕。第六部分是版权信息。5.4“联系我们”页面“联系我们”页面共分为两个板块，一个是用户信息提交表，另 一个是实体店地图。用户信息表方便顾客将个人建议反馈给公司，是 公司与客户的线上交流方式。地图是为想去实体店的顾客提供路线和This document is produced by free version of Print2Flash.Visit for more i
25、nformation方式。页面整体采用了左右排版的布局方式。“联系我们”页面效果图，如下图5-1 0所示:魏i妥棋OMAI CAKE图5-1 0“联系我们”页面效果图联系我们页面第一部分是logo图标和登录注册入口，第二部分 是导航栏，第三部分是甜品小窗口、联系电话和意见反馈表，第四部 分是地图，地图可以跳转到360地图页面，此页面提供了到达欧麦蛋 糕实体店的路线和方式。第五部分是版权信息。5.5其他页面1、“海绵蛋糕”页面18This document is produced by free version of Print2Flash.Visit for more information“
26、海绵蛋糕”页面展示了欧麦蛋糕品牌中海绵蛋糕系统产品。页 面分为两个板块，一个是新品上市，另一个是热卖单品。每个部分分别展示了三款海绵蛋糕，都是采用图文结合的排版方式。“海绵蛋糕”页面效果图，如下图5-1 1所示:OMAI CAKE-EI 注u首页关于欧麦 生日竭底 经瞄品 联系我们 1卒 A 4美味墨椎/、挑战你的味蕾/件*V 欧麦蚩糕/用心11秀 旧h食普安全 心宅配xg/:咆P Hit 叫户M上rtf诸马H哥*.ra：*-jt 珀疝*Me,m*n寺 时仃队受里图5-1 3“戚风蛋糕”页面效果图4、“关于欧麦”页面“关于欧麦”页面共分为三个部分，第一部分为欧麦简介，介绍 了欧麦品牌的发展、公
27、司的理念以及公司目标。第二部分为欧麦团队,主要是介绍了三位蛋糕师傅。第三部分为品牌加盟，简单叙述了目前 蛋糕行业的发展现状以及发展前景。21This document is produced by free version of Print2Flash.Visit for more information“关于欧麦”页面效果图，如下图5-1 4所示:OMA1 CAKE欲1.登棋由1册首页关刊a麦生曰蔬a经典si品师我们 1K欧麦简介欧爰重成一家与手工3犊制作品牌,专门经营各种15克力 蚩糕.冰淇淋里EL 豚暮斯戳L芝土奶酪等产品.我们所有原材均采用担界施品牌，始绘坚持蹴至上、不断创新 的经营理
28、念，服务于广为肖贵者，遂守市场法则.诚信经营，不斯满 足广大消彗看日益提高的生活品味.陶务牡会.致力于侍1具有浓 郁欧式风情的高品味戳1追求精致时尚,经典娅充分体现消剧 者独甥的品味，尊崇的地位.我们公司一直坚持专业化品牌化.连做化扩张典，毁力于打造中国食品烘馅企业领导*公司目标：里视合同规范运营保证质星侑誉承谱公国埋念：”豚为本实力为先全心全意为加十李师fll刘师傅品牌联盟随碧面包蚩糕行业日超茹.竞争也是越来越激烈（狭路 相逢勇者牲,噩茹糕店以最前88的眼光敢税的洞察力，不断 创新，在众多品牌中脱颖而出，成为众多旅盟商争相投资的对象.欧麦萤成店主要以经营面包.重糕等为主，品种败多，实俪1宾，
29、价廉物美可满足不同喜好消费者的需要，获得了越来芯多的认可,品牌知名度与美誉度持续上升.，欧麦国建店获得了众多投资者 的青昧BQ盟店日渐增多，市场前段一片大好.快来加入我们吧I 1开业前期：开业策划装修设计培0懒出开业中期：持弟指导宣传指导开瞄期：设计支持物料支I吉新品推送伽传 益W”安企Vy/*：!：*t fWHS-fr!8-*；*U.*.4S图5-1 4“关于欧麦”页面效果图22This document is produced by free version of Print2Flash.Visit for more information总结通过制作本次的网站前端设计与实现，使得本人知道
30、制作一个网 站首先要对网站有明确的定位，只有明确目的，才能更好地去实施方 案，在网站的宣传方面，可以展开一系列的优惠活动的推广，当顾客 购买完产品之后，还可以不定期的对顾客进行互动，赠送优惠券，努 力留住顾客，让品牌在顾客心里留下一个好的印象。在这次网站的制 作过程中，本人使用了 Photoshop和Dreamweaver两种工具，Photoshop用来制做图片的美化以及GIF动图，Dreamweaver是用来 做页面的布局，以及样式的实现。通过制作本次的毕业设计，发现了 自己有很多的不足，这三年来，学到的知识都很片面，没有好好的利 用课余时间去加固自己在课堂上的知识，以至于本次的毕业设计完成
31、 的没有想象中那么完美，所以今后一定会多去学习，不断地的充实自 己的人生。遇到问题时，一定要会办法解决，而不是放弃逃避，人生 就是一场修行，在经历中成长，在困境中坚强。加油！23This document is produced by free version of Print2Flash.Visit for more information致谢时光荏苒，岁月匆匆，三年的时光转瞬即逝，转眼间大学生活就 快结束了，回头望去，心里思绪万千，感慨颇多，有付出、有收获、有彷徨也有成长。经过这段时间的学习，毕业设计终于完稿了，在此 期间，本人得到了许多老师以及同学的帮助，内心万分感谢！在完成这此次的毕业
32、设计的过程中，遇到过许许多多的困难，在 此，本人要特别感谢指导老师，感谢老师给予无私的帮 助，耐心的指导。从确定设计主题，到效果图，到页面的实现，再到 设计成果的总结撰写都离不开老师的指导，在承担繁重的教学工作任 务和工作任务的状况下，还能仔细严格的帮忙查看修改毕业设计作 品，帮助本人完成此次的毕业设计，真心地非常感谢老师！此外还要感谢本人的任课老师，老师、老师、老师老师、老师、老师感谢你们三年来对本人 的照顾，最后，亲爱的朋友们，感谢你们的帮助，不仅仅在学习上，在生活上也得到了你们许多无私的帮助，是你们，让本人这三年来过 得丰富多彩，谢谢你们！24This document is produ
33、ced by free version of Print2Flash.Visit for more information参考文献1 魏坤龙.爱达乐蛋糕店网购系统的设计与实现D.电子科技大 学，201 6.2 李玉婷.谈当下休闲餐饮业中品牌形象设计的趋势与应用研究 D.天津工业大学,201 7.3 于明璐，郭斐，董笑晨，等.北京本地食品企业的发展现状与建议J.中国食物与营养，2017,23(6):29-32.4 哈尔滨技师学院门户网站设计D.黑龙江大学，201 6.5 张莉莉，岳守春.论计算机网站建设的规划设计及其实现J.信息与电脑(理论版)，201 7(1 0):79-81.6 屈建萍，李汉超.高校网站建设规划设计与网页制作方法浅析 J.中国管理信息化，201 7(1):1 55-1 56.7 杨力.扁平化2.0网站前端设计的探析J.美术教育研究，2016(16):57-58.8 叶惠娟，毛利.企业门户网站价值分析J.合作经济与科 技,2018(23):1 44-1 45.9 兰华，李兰.企业网站建设的探讨J.科技与创新，2016(21):37 38.25This document is produced by free version of Print2Flash.Visit for more information