毛毛雨零食网站规划与设计毕业设计论文.pdf

一、选题的目的及意义目的：1、希望可以受到全国乃至全世界的零食爱好者的追捧。2、能够解决温饱问题。3、使得更多的人了解零食意义：毛毛雨零食店的存在意义只有一个，那就是将自身所拥有的零食种类推荐 给顾客。中国是世界领土最广阔的四大国家之一，而中国的美食，天上飞的、地上跑的、水里游那是应有尽有，只要具有食用价值的食材，都会摆上餐桌，而零食是一个分支，一个临界点，所谓休闲食品，那就是飞正餐，主要的市场 在工作之余，缓解压力、舒适心情所开发出来的，消费速度之快让人咂舌，而 且是一次性使用，也就是说主要的消费人群，是学生和女生！但是在信息时代 的今天，我们有能力将之扩大推广，在网络上将自家的食品展现在中国广大的 网民面前。二、设计的主要内容制作一个关于零食的网页：1、确定主页模板、设计板式2、制作好子页模板，做好食品展示图3、将做好的展示图放入模板的相应位置4、做好链接跳转5、联系我们的收尾工作目录一、内容简介.9（一）、背景与意义.9（二）、网站资料收集与分析.9（三）、方案设计.9二、网站分析.9（一）、方法分析.9（二）、网站制作过程分析.10三、设计草图.12（一）、首页草图.12（二）、产品介绍草图.13（三）、店长推荐草图.13（四）、联系我们草图.14四、设计效果图.14（一）、首页效果图.14（二）、产品介绍效果图.15（三）、店长推荐效果图.16（四）、联系我们效果图.16五、制作过程.17六、作品图片.19七、设计创意说明.20八、设计总结.20九、致谢.20十、参考文献.21一、内容简介（一）、背景与意义背景：零食既是休闲食品（leisure food）,也是快速消费食品，是在人们闲暇、休息 时所享用的食品。最贴切的解释是非常好吃的食品。意义：毛毛雨零食店的存在意义只有一个，那就是将自身所拥有的零食种类推荐给顾 客。中国是世界领土最广阔的四大国家之一，而中国的美食，天上飞的、地上跑的、水里 游那是应有尽有，只要具有食用价值的食材，都会摆上餐桌，而零食是一个分支，一个临 界点，所谓休闲食品，那就是非正餐，主要的市场在工作之余，缓解压力、舒适心情所开 发出来的，消费速度之快让人咂舌，而且是一次性使用，也就是说主要的消费人群，是学 生和女生！但是在信息时代的今天，我们有能力将之扩大推广，在网络上将自家的食品展 现在中国广大的网民面前。（二）、网站资料收集与分析确定选题之后，开始收集关于零食的资料，分类后做好备份。紧接着分析市场，学生大 多喜欢辣条，女生则喜欢薯片之类的。那么我们可以将零食种类区分好，最吸引目光的一 定是美味可口的零食，那么图片处理方面一定要到位。排版适宜用条纹格式，一列一列分 好。市场方面可考虑添加联系我们，排除被怀疑盗版店铺的可能性。（三）、方案设计首先：1、确定主页模板、设计板式。2、制作好子页模板，做好食品展示图。3、将做好的展示图放入模板的相应位置。4、做好链接跳转。5、联系我们的收尾工作。二、网站分析（一）、方法分析在零食网站整体版面布局中，需要使用多种CSS样式和div+css布局使网站整体页面 形成一股民以食为天的风气。需要达到的要求：（1）、颜色搭配方面要达到美观，能让顾客一眼就拥有购买欲望的程度。所以版面需 要花哨缭乱，在不影响整体格局的情况下，保证能吸引顾客。色彩方面采用明亮清晰的冷 色系原色调，使板块布局呈现出一种扔顾客有购买欲。主题风格偏向花哨且不失整洁，主 要以黑色为背景，灰色为辅。文字颜色以白色为主。采用12px的正文宋体。（2）、版面合理，页面链接无误。合理设计各个区块元素的位置,DIV与css样式的简洁书写,使之有更丰富的动画效果,此外也要保证页面间的链接完整。网站css样式部分代码如下：|c a.rou-Tici:OOOOOO;pa.dcixn.cr：;p-osxt:ion.:zre 1 at 11ve;D*O3XC xon:七。；left:5%;.navxac on widLx;t i:80%;X oa E:工工/EC MuX.naszxg(p-adloc 1c r mat zizi:O l.Qp3c;uX.navxg Xxt-exx fcranaf orm:u.pje rca.se:font 3i z-e:lem;C DlCX:f；f ont wex-gt et-E:TOO;二）、网站制作过程分析使用Photoshop cc制作出PSD的切片HTML文件和图像，参考别的零食网站，如中华 零食网、零食天下等网站后定下整体页面布局，接着为零食网站设计一个log。在网上搜集好素材并下载到指定文件夹，并将之分类放好，然后在Photoshou cc里面做好美化，在将整体布局切片，生成html文件格式，然后在Adobe Dreamweaver CS6里面加入链接即可，下载搜集图片如图3.1.1所示。SCff I：遍辑 查看CS）曲曝您）工一帮ft h.每）.I回凶IG后退、1立卅成同步-搜素,文件灭Q作为切灯片查看 省联机订购殖Ji jfe,打Ep图片女捋和立片夹枉费泊 削建一个就W1愧 心惰这个M七哄沛至*Web蹄共亨此立件夹苴它位：S国图片收藏获的电脸网上邻居觥朽翠.菖孝食止 越仔火狐德圄 _2ai5-04-15T01-03.削商嚅爵皿厄1图片任答*S转到图3.1.1图片搜集截图有关介绍零食网站的文字素材复制并保存在meishi.txt中,文字资料如图3.1.2所示。一件是为持一，上光 牌r自-大是都 顾都警推摹 食荚友个的美冒.如；蒙池翼.就己，简君到 宜庭豪觉 is谏 K K苗。房 只4-4-K K-临，六己戏味 隼E E风 1 15 5的 .自科 委时吃巷 曼鑫 SSA 织舌人口 卖1 1 众:i，喜制 迪告 m m.-有.的普 H H .点 察有合樽 喙吃 山忸期群葛 K K-.即堂同他 U U?，菖。不M M 斯中*番”的S中美星 五因 i i-厚 靠 中W W8 81 1最创学与.现 生瓠运食，味 为瞬的箕法朦 念鬼、技化 1Z1Z胃 延璧员出 端矽雷喜示 化王耍仲屣 禺到理国仟 O O萱，度 参丸蝗1212稗 产：3 3外萎 i i从点技业从零 A藻-!._，中I I 中国它化 文.不国?富技钉、的囊 学皆境:亩产A A宗价 4 49 9生与鬲:同出皆XX嘛申呆羽策.K夷*图3.1.1文字资料截图建立主页面，制成模板，在另存为子页面，命名要精确到页面的具体内容，以免发生 不必要的失误。结合Photoshop软件制作效果图，将图片进一步美化。首页设计秉承简约却花俏、繁琐却一目了然的设计理念，力求在有限的空间里面，实 现零食百花齐放的美景。设计中将顾客为上帝的理念带入其中，让用户体验严谨、整洁、庄重，而又不失活泼，紧凑而不失大气。使整个网站时时充满生机和活力，使浏览者一进 入首页就能够了解整个网站最新内容，从而吸引市场。页面编排上：网站首页的导航功能非常重要，是整个页面的引路人，需要确保每一个 内容都有牵引。页面设计上：在Photoshop里面做好板式切片，再到Adobe Dreamweaver CS6里面讲板 块区域删除，添加需要的内容，制成网页雏形.,在根据主页面布局，在主页面的基础上构建 子页面，从而开始网站整体搭建。互补色虽然略显繁琐，但是在现在的网站设计中非常流行，因为互补色适合于制作活 泼时尚的效果，可以让网站魅力四射。另夕卜，在photoshop中，要想构造一个三色方案也是很简单。首先选中一种颜色，记 下他的H(Hue)值，再加120,以此类推得到第三种颜色，构成一个三色方案。三色方案 中使用了三种差别明显的颜色，可以带来一种视觉冲击的配色方案，将给予浏览者某种紧 张感，从而引发兴趣，促成购买欲的生成，进而得到市场。网站布局：DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的 元素。DIV强大之处在于可以指定一个区块，控制某个指定的元素。对于网站div+css样式的设计越来越受到业界的关注，从淘宝天猫网站首页到个人博 客，网页如同门户一样，将自己的产品展示给客人，达到未行千里路，却知天下事一般的 神器。如果用div+css来构建和美化网站，那么div就是整个网站的骨架，css样式就是网站 的衣服。其中的内容，就是心脏。想要设计一个网站，就要从最基本的表格布局开始，进 而学习DIV+css样式，达到美观效果。本网站的主页框构如下图3.4所示：LOGO皈权佶虑、图3.4设计中网站的骨架图网站的骨架图是在做网站之前就先设计好网站的整体布局，图3.4就是网站在规划阶 段对网站整体框架。网站首页调试截图如图3.4.1所示网站首页调试截图3.4.1通过文本编辑器写好代码了在浏览器打开，按fl2进行局部微调，把调好的代码复制 到CSS里面。三、设计草图（一）、首页草图1、“首页”草图如图3T所示Logo导航图片轮播蛋糕甜点我的产品企业简介网站版权图3-1（二）、产品介绍草图2、“产品介绍”草图如图3-2所示3=22Logo导航产品展示其他产品网站版权（三）、店长推荐草图3、“店长推荐”草图如图3-3所示Logo导航图3-3店长推荐热销产品网站版权（四）、联系我们草图4、“联系我们”草图如图3-4所示：图3-4Logo导航表单网站版权四、设计效果图（一）、首页效果图1、“首页”页面效果图如图4-1图4-1（二）、产品介绍效果图2、产品介绍页面效果图如图4-2所示首页/产品介绍 丽菁贞休闲食品明巧F段口袋iHT瓜子图4-2（三）、店长推荐效果图3、“店长推荐”页面效果图4-3所示首页I日长隔百页百页产品介产品介铝铝 KKm荐联荃荐联荃我我们们 rFiuim后长就排名辣条土殳原料为面粉,加入水，盐，羸 天然色素脚1面蝉条 间爆早，碗耘早觎在蛔附1&K品,在子看来,不仅价,而且味追响,是的不二秘,迫专勃,说灰泗的包装筒.盐、第 仙剑的含星商超过国寮标律，剧.1撬入&大，直接勤响孩子身商和餐丑发 育,县王可能蟾.为了避免驾品S3琼子的林季成成，网星河仙 缺长应海子安排好一日三程,让畏子远顾价雪氛为这么辣魏桀具备辛哝也哽口味和磨头，吃起来又密欢.常精会屈俸Jgg,服。福让人忌受到剌觐，成尝受劲道，因此；-为大 余喜爱.编口院as物者辛料,没有剌异的嘛,藻安色辣金的新酒来源一球生中包含的面麻面g希卜是 神审白,道寸百粉汨7而I主而园,再将面团用唇水反宕麻浒,把百团中的活粉 和WN的主部先掉,登宿一小决白邑有抻性的物质,这就是面菰 直务妥日T史性久的号挽为隼，旦在杠It朝FVSC盛行开 来，成为.仲J用佳肴，比孩出售的有侑代的清水油在筋,和如今的炒血筋、烤回筋，口吨隹，朝亘七H.广尝喜念图4-3（四）、联系我们效果图4、“联系我们”效果图如图4-4所示首页首页 产品介产品介绍绍 店氏店氏修修 喉喉系系我我们们 注注册/册/登登录录苜其/联系我们睇我们地址畋图4-4五、制作过程1、主页导航栏实现代码，鼠标点击后可以弹出下拉菜单效果。如图5-1：图5-1实现代码：首页v/ax/li产品介绍 休闲食品 蛋糕甜点小吃零食 店长推荐联系我们v/ax/li注册/登录v/ax/li$(span.menu).click(function()$(.navigation).slideToggle(slow,function()/Animation complete.)；);$(a.menu2).click(function()($(.navigation?).slideToggle(slow,function()(/Animation complete.))；使用JQ代码，实现主页导航栏鼠标进入时的动画和下拉效果。2、主页展示图片切换效果实现，本图片会按时间自动轮播切换，如图5-2：图5-2实现代码：PreviousNext六、作品图片1、主页面的图片，如图6-1图6-12、制作的所有网页，如图6-2，未解由 css 山 images 山 js，小(10-100 KB)(1)index.html,微小(0-10 KB)(36)|zp.htmlI*!bd.html|j cha npi ng.html|_j chanping2.html|contact.htmlI j cha nping 3.htmlj denglu.html|_j hc.htmlDig,html kdb.html ls.html nn.html nr.htmli pks.html qkLhtmlQ ptg.htmlP|qq.htmlj_j rsp.htmll single.html|_J single4.htmlPl single2.htmlsingleS.himl|single5.htmlI single6.html|_J single7.htmltuijian.htmll_jww.htmlQ xt.htmlrJ|xz.htmlQ yb.htmlQ yg.htmlQ zcg.html_j ym.html zhuce.htmlj|zrp.html图6-2七、设计创意说明零食网站主要功能是零食展示。其中，零食所用材料、做法、市面价格发布的各种类 型。使其能更方便快捷查找到所需的商品。另外，用户还可在网站留言，说出各自想法或 留下问题。八、设计总结零食网站，它包括个人主页的选题、页面的排版设置、图片的处理、内容采集整理、整套网页的色调及其背景等很多东西。主页的设计应以醒目优先，版式要令人一目了然，不会堆砌太多不必要的细节，不使画面过于复杂。要做到这一点，就要在整体上策划好网 站的主题和内容，确定自己需要传达给访问用户的主要信息，然后仔细考虑，把自己所有 要表达的内容合情合理地组织起来；再来，是设计一个富有的页面式样，务必尽善尽美。这样制作出来的主页才会清晰、简单、内容丰富。切记，页面给人的第一视觉感最为重要!在网上到处浏览网站的人很多，如果你的个人主页给人的第一印象没有吸引力，很难令他 们继续观赏，恐怕客人再也不会访问你的网站了。整体的排版设计是整个页面的核心，要让顾客感受到焕然一新的感觉，从而吸引顾客,得到稳定的市场。通过这件事，老师，学生合作，我深深体会别人的合作，以提高自己的能力和重要性。总之，本次毕业设计给了我很多收获，既锻炼了我的实践能力，让我有一种真正的感受，为以后工作填上了浓厚的一笔。九、致谢时光匆匆，这是我在学校最后停留的时光了。走在大学的林间小道上，回首往事，喜 怒哀乐慢慢的涌上心头，一切仿佛依旧是在昨天。我把人生中最美好的三年时光留在了永 州，留在了我喜爱的母校，不管未来的日子如何，但在学校的点滴生活，都会在我的回忆 中留存感谢我的母校湖南九嶷职业技术学院，是她给予了我一个展示自己青春与激情的 舞台，在这里收获了很多的东西，有许多的是不能用简单言语来表达；但是在这我还是要 感谢一下我的老师，是你那亲切和蔼的待人之道，与宽厚稳重的处事之法在我学习上与生 活中带来无尽的动力；在此感谢大学的老师与同学，感谢你们给我三年的来最珍贵和最美 好的生活。感谢杨艳梅、魏翔老师，在你们的身上，我不仅学到了文化知识，还有感谢你们大学 三年以来对我的教诲与无私的帮助。感谢我的毕业指导魏翔老师，你的温文尔雅和不厌其烦，促使我圆满完成了大学最后 的答卷。十、参考文献1 网页设计与网站建设完全学习手册刘贵国编著清华大学出版社 2014年；2 中文版Dreamweaver CS6网页制作从入门到精通九州书源等编著清华大学 出版社 2014年；3 中文版Dreamweaver CS6网页设计教程孙中魁等编著清华大学出版社*2013 年；4 网页制作与网站开发从入门到精通朱印宏著科学出版社 2009年；5 网页设计与制作实例教程（第2版）袁磊编著清华大学出版社 2013年；6 网页版式设计指南张旭生等编著国防工业出版社 2008年；