速食代网站设计与实现设计毕业论文.doc

《速食代网站设计与实现设计毕业论文.doc》由会员分享，可在线阅读，更多相关《速食代网站设计与实现设计毕业论文.doc（29页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、毕 业 设 计毕业设计题 速食代网站设计与实现 毕业设计类型 产品设计 工艺设计 方案设计 姓名 班级 所属系部 物流信息系 专业 电子商务 指导教师 职称 完成时间 摘 要二十一世纪跟着互联网快速发展的步伐，已经进入了一个网络数字信息化的时代，在互联网时代下，菜谱记录在书本上的这种传统方式，已满足不了人们的需求，网上菜谱分享的便捷、直观性，让更多用户接受和了解，得到了广泛的青睐。本网站定位为美食分享型网站，其主要栏目有首页、家常菜谱、食材百科、饮食健康、快乐厨房。网站力图为用户找到感兴趣的菜谱，并详细地展示介绍制作各种美食的方法。此外，让美食爱好者了解食材、厨具的选择和使用。 关键词： 速食

2、代 家常菜谱 Dreamweaver目 录第1章 网站设计背景61.1 企业网站设计目的61.2 餐饮类网站发展现状61.3 网站整体结构7第2章 前期准备92.1 素材收集整理92.2 LOGO设计112.3 Banner设计122.4 首页效果图15第3章 网页设计制作163.1 首页设计制作163.2 其他页面设计制作19第4章 速食代网站推广234.1 电子邮件推广234.2 IM即时通讯工具推广244.3 SNS社区营销推广254.4 百度知道推广26总 结28致 谢29参考文献30第1章 网站设计背景1.1 企业网站设计目的我们生活在“大爆炸”的信息时代，在这个云计算和大数据时代，

3、人们每一天、每一分、每一秒，都离不开这个与生活密切相关的互联网社会，互联网正悄悄改变着这个世界。根据中国互联网络信息中心（CNNIC）发布的第35次中国互联网络发展状况统计报告统计，截至2014年12月，我国网民规模达6.49亿，互联网普及率为47.9%，普及率与英国、德国、美国相比还是较低。随着中国网民规模不断壮大，设备接入的数量不断飙升，网络应用已经渗透到生活的各个方面。本论文选择制作一个饮食类信息发布网站，一方面由于本人喜欢研究做菜的方法，对烹饪感兴趣，经常会浏览一些关于介绍烹饪菜谱的美食网站，积累了很多美食烹饪心得体会；另一方面则是由于本人在大学三年的学习生活中，经过学习网页制作、DI

4、V+CSS布局、动态网页制作等几门课程后，对于网站建设产生了浓厚的兴趣，非常希望能利用自己已学得知识制作出一个美观实用的网站。基于以上两个方面的因素，从而萌发了想做一个饮食类网站的想法，通过设计实现速食代菜谱分享网站的方式为网友及美食烹饪爱好者提供各种菜系制作方法。1.2 餐饮类网站发展现状正在飞速发展的我国经济，让居民的收入水平愈来愈高，日趋旺盛的餐饮消费需求，使得餐饮经济保持较强的增长势头。因为门坎较低，近年来餐饮业发展正在慢慢兴旺，市场规模不断扩大，已成为国内经济发展的重要增长点。随着现代互联网技术的广泛应用，电子商务逐渐为消费者所认可，网上购物、电子优惠券消费模式悄然流行，电子商务在餐

5、饮业中应用日益普及深入。电子商务技术的应用将对餐饮行业不断影响，多元化、多样化的电子商务模式给现代服务业带来巨大转变，让餐饮经济不断增长。通过结合电子商务模式，很多餐饮企业获得了较高的收益。本网站是一个菜谱分享网站，只提供菜谱的制作方法，还未与网上订餐技术相结合，今后通过技术的提升，可通过建立微信服务平台，实现网上订餐，让餐饮行业更好的在电子商务中发展。电子商务不仅为餐饮业带来了巨大的商机，也让用户能够享受到更快、更便捷的服务和不一样的支付方式，感受另一种生活体验。 1.3 网站整体结构网站的主要栏目有首页、家常菜谱、食材百科、饮食健康、快乐厨房。具体每个栏目的内容介绍如下：（1）家常菜谱栏目

6、主要介绍家常菜、热菜、冷菜等的制作方法；（2）食材百科栏目主要介绍了肉类、海鲜、蔬菜等各类食材的特性、禁忌及使用方法等百科知识；（3）饮食健康中包括了各类饮食小常识、美容瘦身、中医保健等健康知识；（4）快乐厨房这一栏目为用户提供了各类烹饪技巧、厨具选购等各类生活妙招。下图1-1为网站布局结构图。首 页快乐厨房饮食健康食材百科家常菜谱饮食小常识肉 类烹饪技巧家常菜美容瘦身海 鲜厨具选购热 菜食材加工蔬 菜中医保健冷 菜母婴健康饮食水 果生活妙招素 食图1-1 网站框架结构图第2章 前期准备2.1 素材收集整理素材一般有文字、图像、声音、视频、动画、图标、按钮等。为便于网站文件素材分门别类管理，在

7、网站创建之初便新建好了一系列素材库文件夹，并依据素材类型命名文件夹。比如：images文件夹用于存放图片素材；css文件夹用于存放css样式表等。对于网站中所使用到的素材资源，本网站主要通过以下方法进行收集：第一，利用搜索引擎，在互联网上搜索素材库；第二，平时浏览网站时，发现满意素材，便下载收集；第三，特殊的素材资料从参考文献上获取。本网站素材经过收集整理后，根据网站主题和需要进行了筛选及加工处理。文字素材根据栏目主题进行了重新编辑处理，图片素材采用了Photoshop工具进行处理，动画素材则采用了JS特效技术处理。下面是使用PS图像处理软件对图片素材处理的截图过程：首先，将所需图片放入PS中

8、。图2-1 原图其次，调整原始图像尺寸。图 2-2 调整图像大小然后，调整图像的色相及饱和度。图 2-3 调整色相、饱和度最后，完成图片修改，效果图如下。图 2-4 效果图2.2 LOGO设计图2-5 Logo图Logo，译为标志、厂标、标志图等，网站的Logo标志能识别和传达信息图，用简洁、优雅的造型体现品牌语言，树立企业形象。网站名称“速食代”中“速”是指快速，速度；“食”是指食物，食品；“代”是指时代，该网名的寓意是指快速发展的食物时代。黑色代表稳重，中英文相结合的黑色文字，体现了网站与国际接轨和严谨的办事效率。绿色代表健康、自然，在绿色盘子中放置叉子和勺子，寓意了有机、天然、无公害的食

9、物。2.3 Banner设计图2-6 Banner效果图Banner是一个表现商家广告的图片，作为旗帜广告可展示在网页顶部、中间、底部任意一处，是最基本的网络广告。本网站的Banner设计运用了Photoshop工具软件对图片进行处理，将三张图片放入Photoshop中拼凑相结合，合并成一个整体，并在相应的图片下，配以文字说明。Banner的设计中还加入了JS特效，产生了图片轮播的效果，使网站更加生动活泼，不会让人觉得死板。Banner制作步骤如下：首先将所需三张图片导入Photoshop中，通过新建图层（设置图像尺寸大小）；图2-7 Banner新建图层其次将三张图各自全选、复制、粘贴到新建

10、图层中；图2-8 Banner复制图层然后将其排列好合并为一张图片。图2-9 Banner合并效果图 最后在Photoshop中，选择横排文字工具在图片上方加入绿底白字的文字，并配以文字说明。效果图如下：图 2-10 Banner文字搭配效果图2.4 首页效果图图 2-11 首页效果图第3章 网页设计制作3.1 首页设计制作对于一个网站而言，首页的设计极为重要，首页的好坏，将直接影响到用户是否决定继续浏览该网站。由于本网站的定位是信息发布类网站，在网站首页展示了较多的栏目信息，为了让各个栏目信息多而不乱，则采用了“国字型”网页布局。这种页面布局使得首页布局清晰、内容丰富，简洁明朗，点击各个栏目

11、可以详细查看相关的栏目信息。考虑到浏览者在浏览网站时，由于文字信息内容较多，眼睛可能会觉得疲劳、酸涩，甚至有流泪的现象。专家建议：保护视力最佳的颜色是蓝色和绿色。本网站选择绿色作为主色调，不仅可以保护视力，还能让人联想到绿色健康的食物。网站首页布局结构图如下：图3-1 首页布局图首页中“每日三餐”信息板块采用了层和行为特效，设置一大一小两张图片，原图中放入小图片，在原图点击后产生图片放大的效果，这样就能更好的看清楚图片内容了。右边的文字“全部”、“早餐”、“午餐”、“晚餐”均可点击切换，能看到动画切换效果的出现。图3-2 “每日三餐”动态效果图“今日菜谱推荐”信息板块采用了DIV+CSS样式布

12、局和JS特效，鼠标放在图片上面时，能看到提示文字，用鼠标点击图片后，能看到图片和文字的演示步骤提示，点击红色方框中的箭头，能进入到下一步，依次类推。这种方便简捷的展示了图片所要表达的内容，让用户能够更好、更清晰的查看菜谱内容。具体效果图如下：图3-3 “今日菜谱推荐”效果图一图3-4 “今日菜谱推荐”效果图二3.2 其他页面设计制作 3.2.1 家常菜页面 家常菜页面包括有：“家常菜”、“菜谱排行”及“图说饮食”三个主要信息板块。“家常菜”信息板块采用了DIV+CSS样式布局，把最新、最热门的家常菜做法放入其中，网页中的五角星，代表该菜谱的热度值。页面中仅显示了部分菜谱介绍文字信息，想要了解更

13、多、更详细的信息，则可以通过点击链接进入美食杰官网进行查看。“菜谱排行”信息板块有三个不同选项卡（“今日”、“本周”、“本月”）分别列出今日、本周和本月菜谱点击量排行榜,此选项卡是采用JS特效来实现。用户可以根据需要点击按钮查看今日菜谱浏览排行榜、本周菜谱浏览排行榜以及本月菜谱浏览排行榜。图3-5 家常菜网页效果图 3.2.2 饮食健康页面 饮食健康页面以图片和文字相结合的形式，通过采用DIV和CSS布局以及JavaScript脚本代码实现页面效果，页面中的图片都较清晰，文字描述颜色也与网站风格相同，采用适合保护视力的绿色，让人们在浏览本网站时，眼睛不会干涩，产生视觉疲劳。“图说饮食”部分采用

14、JS特效，下图中，红色方框中的箭头方向可以自由点击切换到下一组图片。实现切换效果的部分JS代码如下： 图3-6 饮食健康页面效果图第4章 速食代网站推广4.1 电子邮件推广电子邮件因为使用方便、快速、低成本的特点，在互联网应用非常广泛，是一种非常有用的工具，也能促进推广效果。腾讯公司提供的QQ邮箱为用户带来了安全、稳定、快速、便捷的电子邮件服务，为超过1亿的邮箱用户提供免费和增值邮箱服务。由于本网站属于初步发展期，要想让更多人所熟知，就必须进行推广，根据电子邮件推广方便、快捷、成本低廉的特点，利用QQ邮箱推广是一个很好的方法。QQ邮箱推广操作步骤如下：首先打开QQ邮箱，进入邮箱后，点击左侧的“

15、写信”按钮；填好收件人的邮箱号；明确邮件主题，不要让接收者以为是垃圾邮件，从而错过此封邮件的接收；邮件内容编辑必须要有吸引力，应围绕网站名称“速食代”、“菜谱方法”等关键词进行描述；写好邮件后，点击“发送”。图4-1 电子邮件推广4.2 IM即时通讯工具推广IM是instant messaging的缩写，是即时消息或即时通讯的简称，一种基于互联网交换信息的业务。目前，常见的IM工具包括MSN，腾讯的QQ，淘宝旺旺，飞信，新浪UC，YY，呱呱，微信等。腾讯QQ作为现在人们生活中，最常使用的交流通讯软件，最大的特点就是及时性和交互性强，只要在网络环境较好的条件下，发送的信息都能快速接收到。腾讯QQ

16、注册用户总数现已突破5.979亿人，随着QQ用户的不断增加，网络普及度越广，要想把网站信息快速传播出去，利用QQ这一通讯软件传播是很好的。首先，申请一个QQ账号，将QQ网名、个性签名等都改成与本网站相关的内容；其次，多添加好友，对已经成为好友的QQ用户，适时的发送网站宣传推广信息；最后，定期更新网站推广内容，内容的编辑尽可能的吸引人，应围绕网站关键词来编辑内容。内容发送后，即时查看好友发送的反馈信息，对信息进行收集整理。图4-2 QQ推广4.3 SNS社区营销推广SNS，全称Social Networking Services，即社会性网络服务，还可以解释为社交网站或社会性网络软件，帮助人们建

17、立互联网应用服务。SNS营销的主要方式有分享、转发、评论、私信、粉丝，而新浪微博、微信朋友圈、天涯、豆瓣、人人网、开心网等都具有该功能。通过利用这些平台可以撰写软文进行传播推广。不过软文的质量非常重要，软文是否足够吸引浏览者是营销中至关重要的一点。新浪微博是为社会公众提供娱乐和休闲服务，实现信息共享与交流的平台，而网页版和手机客户端在任何时间、任何地点，可以将或听到、或看到、和想到的事情与网友分享和讨论。想要推广本网站，让网站信息让更多人所熟知，利用新浪微博进行推广是一个很好的平台。打开新浪微博官方网站，注册一个新账号；登录此账号，主动积极加好友，与好友互相之间成为粉丝，有了一定的粉丝量后，即

18、可发微博推广。在发言框中输入关于本网站相关信息的文字图片推广内容，点击“发布”，发布完成后，粉丝都会看到这则信息，让信息以评论、转发等方式迅速传播，达到更好的推广效果。图4-3 微博推广4.4 百度知道推广百度知道是由世界上最大的中文搜索引擎百度自主研发、基于搜索的互动式知识问答分享平台。百度知道拥有强大的问答平台基础和良好的用户口碑，其最大的特点就是搜索与引擎的结合。现在广为流传的一句话是“有问题，找百度”，可见百度网在人们的生活中应用的范围很广，给大家的学习、生活都带来了很大的便利，为人们解决了许多问题。本网站采用“百度知道”推广的主要原因是：由于本网站的知名度不高，为了提高网站知名度，利

19、用其特点搜索与引擎的结合，在世界上最大的中文搜索引擎网站“百度”中推广，可以发挥强大的作用。推广的实施步骤如下：首先注册一个百度账号；账号注册完成后，点击“我要提问”，设置与本网站相关的问题，设置问题标题字数在20个字内，简短的问题标题能获得较高浏览量；问题提交后通过另外注册的百度账号在数分钟后对该问题进行搜索回答，回答的问题应明确清晰；最后，返回“我的提问”中查看并采纳答案。图4-4 百度知道推广总 结此次毕业设计中，从选题开始的迷茫无措，到渐入佳境，对设计概念的思绪逐渐清晰，整个写作过程很难用语言来表达。经过几个月的奋战，毕业设计终于落下了帷幕，回忆这段时间所经历的事情，令我非常感慨，让我

20、拥有了难忘的回忆和收获。思路打开后，便开始着手准备资料的收集，在网上搜集各类相关资料过程时，我认真准备了一个笔记本，将突然想到的想法记录在上，使我的资料完整、准确，笔记本成为了有价值的信息源。从收集到的资料中，使我掌握了更多的专业知识，让我以前学过的知识得到巩固和提高，并且让我对网站的建设有了更深刻的了解。在网站设计的初期，对网站的布局和框架结构都没有明确的方向，经过导师的指导，我的设计渐渐有了头绪，网站布局结构图也逐渐确定好了，运用所学的网页制作知识，开始了对网站设计的编写。虽然中间遇到许多困难，但每次都克服解决了。本网站还存在很多不足，如网站界面不够美观，功能实现有待改善，推广力度不够强等

21、，但磨练了自己发现问题、思考问题、解决问题的能力，让自己的操作能力得到了进一步的提升。通过本次毕业设计，不仅复习了专业知识，也锻炼了自己的实践能力，拓展了知识，为以后找工作打下良好的基础。我要感谢我的指导老师欧阳红巍老师，从尊敬的导师身上，让我学到了专业知识和课本上所没有的做人道理，做任何事情一定要一步一个脚印，脚踏实地，在此由衷的感谢导师淳淳的教诲。致 谢在毕业设计过程中，感谢导师给了我很多建议和意见。在网站设计和论文写作给予了耐心的指导，在我顺利的完成毕业设计中起到了至关重要的作用，为以后的学习和工作打下了牢固的基础。我还要感谢我的母校，并在三年学习和生活中，给了我无私的奉献、热情帮助的教

22、师和同学，是他们教会了我专业的知识技能和为人处世的道理，带领我迈向成功。通过此次毕业设计，让我知道作为一名电子商务专业的大学毕业生，我们不仅仅要学会熟练掌握Dreamweaver、Photoshop、Javascript等软件的基本使用，更重要的是要有整体把握设计的能力和思维。最后，我还要感谢我的家人，他们一直支持着我的求学生涯。在每一次失败后给予勉励，取得每一个小的成就给予敦促，在教育和就业上充分尊重我的选择，让我铭记在心。他们无私的关怀让我顺利完成学业，是我最坚强的后盾，促使我不断进步前行。参考文献1潘果. 电子商务实务 D .湖南：湖南现代物流职业技术学院，2012.2马增友. Phot

23、oshop图像处理技术应用 M .1版.北京：清华大学出版社；北京交通大学出版社，2009.3张晓雷. 网页设计与制作案例教程 M .1版. 北京：清华大学出版社，2013.4潘果，张华南. 电子商务网站建设与管理 M .1版.北京：教育科学出版社，2013.5王大远. DIV+CSS 3.0网页布局案例精粹 M .北京：电子工业出版社，2011.6李成飞. 电子商务网站建设与维护 M .1版. 北京：中国劳动社会保障出版社，2008. 7王德永，张少龙. PHP+CMS+Dreamweaver网站设计实例教程 M .1版.北京：人民邮电出版社，2013.8李文龙，徐湘江. 客户关系管理实务 M .2版.北京：清华大学出版社，2013.9张春晓. 网页制作与网站建设宝典 M. 北京：电子工业出版社，2012.29