关 键 词：

美食 电子商务 网站 设计 以及 实现

资源描述：

“美食阁”电子商务网站的设计和实现,美食,电子商务,网站,设计,以及,实现

内容简介：

毕 业 设 计题 目（中文）“美食阁”电子商务网站的设计和实现姓 名孙光富 201201002003系别网络传媒系专业、 年级电子商务1202班指导教师李灿辉 二 一 四 年 十一月湖南大众传媒职业技术学院毕业设计诚信声明本人郑重声明：所呈交的毕业设计，是本人在指导老师的指导下，独立进行研究工作所取得的成果，成果不存在知识产权争议，除设计中已经注明引用的内容外，本设计不含任何其他个人或集体已经发表或撰写过的作品成果。对本设计的研究做出重要贡献的个人和集体均已在文中以明确方式标明。本人完全意识到本声明的法律结果由本人承担。 毕业设计作者签名：孙光富 2014 年 11 月28 日“美食阁”电子商务网站的设计与实现学生姓名：孙光富 指导老师：李灿辉老师湖南大众传媒职业技术学院网络传媒系摘 要 网络凭借其卓越的互动性与便捷的交流手段正成为最有发展潜力与前途的新兴媒体，成为众商家倍为关注的宣传热点。尤其是传统大型企业更应该充分利用互联网技术，为客户、合作伙伴在网上提供信息服务，并且借助互联网，敏锐的捕捉商机。 俗话说：民以食为天！为了解决您对“食”的种种需求，我们需要搭建一个平台美食阁，通过互联网这一载体告诉您：本店有什么吃的，提供什么样的菜品，什么价格，什么服务等等，您可以在线查询，在线购买等等。我们的目标是力争做到为您提供更方便、更快捷、更全面、更准确的餐饮信息服务，致力打造本地最权威的餐饮信息服务平台。本网站采用了Dreamweaver CS5 来做前台和后台的搭建。使用Access2010作为数据库，使用Windows 7 为网站平台。 关键词 美食阁，在线查询，在线购买，餐饮AbstractNetwork with its excellent interactive and convenient means of communication is becoming the new media has the most potential for development and the future of propaganda, become hot much business concern. Especially the traditional large enterprises should make full use of the Internet technology, for customers, partners to provide information service on the Internet, and the Internet, keen to capture the business opportunities.As the saying goes: Food is! To solve your food all the demands, we need to build a platform - Food Court, via the Internet, the carrier tell you: We have what to eat, what kind of dishes, what price, what services and so on, you can online inquiries, online purchase and so on. Our goal is to strive to do to provide you with more convenient, faster, more comprehensive and accurate information on catering services, to create the most authoritative local restaurant information service platform.This website USES the Dreamweaver CS5 for construction of the foreground and background. Using Access2010 as a database, using Windows 7.Keyword：Food Court, online inquiry, purchase online, catering目录1商务网站总体设计- 16 -1.1 商务网站功能结构设计- 16 -1.2 网站页面布局设计- 17 -1.2.1 首页页面布局- 17 -1.2.2二级页面布局- 18 -1.2.2 CSS样式设计- 18 -2网站各页面设计与实现- 19 -21数据表的设计与实现- 19 -22 网页功能实现- 21 -22.1 网站首页- 21 -22.2 网站特色- 22 -22.3 用户注册、登录- 26 -22.4 商品分类页面模块- 28 -22.5 商品详细页面模块- 28 -22.6 湖南文化、联系我们模块- 30 -3. 网站优化- 31 -3.1 网站页面优化- 31 -3.2.1 相关内容- 31 -3.2.2 标签优化- 31 -3.2.3 代码优化- 32 -3.2.4图片优化- 33 -33 关键词优化- 33 -3.1.1关键词的选择- 33 -34 内部链接优化- 34 -3.21面包屑导航- 34 -3.22网站地图- 35 -3.23 404页面- 35 -总结- 36 -参考文献- 37 -前 言俗话说：民以食为天！为了解决您对“食”的种种需求，我们需要搭建一个关于美食的平台美食阁，通过互联网这一载体告诉您：本店有什么吃的，提供什么样的菜品，什么价格，什么服务等，如果您也是一位爱好美食的顾客，您通过本网站的相关美食信息在线查询，在线购买等等。我们的目标是力争做到为您提供更方便、更快捷、更全面、更准确的餐饮信息服务，致力打造本地最权威的餐饮信息服务平台。“美食阁”是一家专门为食客提供美食以及美食的制作方法的商务型网站，本网站主要经营湘菜、长沙特色小吃、甜品、等食物，为了满足追求健康美食的消费者，本网站还增加了健康养生的栏目，而且还设计了美食视频教学的栏目，以便于爱好制作美食的消费者学习。1商务网站总体设计1.1 商务网站功能结构设计网站以白色为背景，红色为辅色，使整个网站给人以整洁、大气、专业的效果。白色的背景中夹杂点红色更容易让消费者产生食欲以及界面的美观，更容易的获得客户的青睐。本网站的网上商城主要由首页和各个二级页面组成。1.网站首页主要包括美食信息的展示，以及用户注册、登录。（1）网站首页：展示网站的所有栏目；（2）湖南文化：介绍湖南的美食文化，促进消费者的购买行为；（3）湘菜大全：包括具有湖南特色的大部分菜肴；（4）长沙特色小吃：提供具有长沙特色的特色美食、地方特产；（5）健康养生：提供营养价值比较高的美味佳肴；（6）互动专区：方便消费者与消费者之间的互动交流；（7）美食视频：方便爱好厨艺的顾客学习美食的制作方法；（8）联系我们：通过在线交流、电话等方式联系我们，方便企业与消费者的交流；（9）网站地图：方便消费者更快进入网站的相关页面；（10）友情链接：通过链接其他网站从而让其他网站链接我们，起到推广作用。用户注册登录湖南文化湘菜大全长沙特色小吃健康养生互动专区美食视频联系我们网站地图友情链接商品详情商品分类在线交流在线下单 “美食阁” 二级页面 首页图1-1 网站功能结构图2.网站二级页面主要包括商品详情：让用户更加了解该商品的信息；商品分类：让用户可以根据自己的需求来进行查询。1.2 网站页面布局设计1.2.1 首页页面布局首页显示了“美食阁”网站的的主要内容，网站首页主要分为头部、导航、动画、产品展示、友情链接和底部等模块。网站背景为白色，左边展示的是网站LOGO，右边是注册、登陆等功能的实现，因为产品是网站的重要组成部分，所以产品的展示模块在首页的中间位置，作为本网站的特色之一，美食视频置于中间偏右位置，为用户提供参考。网站地图方便用户寻找相关页面，友情链接是为了加大网站的权威性，和同类型网站合作相互链接。收藏、注册 Logo 导航栏Banner广告动画产品展示美食视频行业资讯美食大全网站地图美食推荐友情链接底部图1-2 首页平面设计图1.2.2二级页面布局“美食阁”网站的二级页面沿用了首页的头部、导航、动画、底部等模块。中间位置新增了宝贝分类、产品展示和产品详情。产品详情主要介绍了产品的详细信息，方便用户了解产品。让用户能更好的、更快的选择出适合自己的产品。登录、注册Logo导航栏Banner广告动画分类产品展示底部图1-3 二级页面页面布局图1.2.2 CSS样式设计CSS样式的设计，结构与样式分离的方式，其主要作用是简化网页的格式代码，便于后期维护与改版。运用CSS的外部样式表的功能，能够在制作大数量网页时，大量节省网页制作的时间，并且提高网页制作的质量。美食阁网站，根据自身的需求制定多个CSS样式表，提高网页制作的效率与质量。表2 CSS样式设计表CSS文件名CSS样式名样式说明CSSmobancss网页模板的CSS样式spcss美食视频的CSS样式yangsheng健康养生的CSS样式2网站各页面设计与实现首先分析所需求的数据库表格，然后按照严格的数据表制作规范进行表格的制作。经过需求分析，确定制作Admin管理员信息表、meishigerproduct食品信息表、User用户注册信息表、Shoppingdata购物车信息表四种表格。21数据表的设计与实现（1）Admin管理员信息表：后台管理员注册表的字段和数据。表3 数据库Admin管理员信息表字段名称数据类型说明Admin文本主键pw文本（2）meishigeproduct图书信息表：图书信息表的字段名和具体信息表4 数据库Flowerproduct图书信息表字段名称数据类型说明ID自动编号序号（主键）productName文本商品名称price货币商品价格Productintro备注商品介绍Bimage文本大图路径Simage文本小图路径sort文本商品类别maketime日期/时间日期kouwei文本口味类别Kouwei1文本口味amount数字库存数量hunantese文本湖南特色tianpin文本甜品cheap文本打折优惠zhaopai文本招牌推荐xinpin文本最新推出important文本本周排行榜（3）User用户注册信息表：前台用户注册表的字段名和数据表5 数据库user表字段名称数据类型说明ID自动编号序号（主键）username文本用户名password文本密码useremail文本电子邮件realname文本真实姓名mobile文本手机号码（4）Shoppingdata购物车信息表：购物车的字段和类型表6 Shoppingdata购物车信息表字段名称数据类型说明Id自动编号序号（主键）Username文本用户名Shoppingdata日期/时间购买日期Productid文本商品编号shoppingnum数字购买数量orderid文本订单号orderstate数字订单状态号receiver文本收货人姓名address文本地址city文本城市postcode文本编号comments备注收货人留言paymethod文本付款方式deliverymethod文本送货方式paid货币付款额useremail文本收货人电子邮件地址usertel文本收获人电话22 网页功能实现22.1 网站首页“美食阁”网站的首页主要以简洁大方为主，网站的主栏目主要有：网站首页、湖南文化、湘菜大全、长沙特色小吃、健康养生、互动专区、视频教学、联系我们。网站信息比较齐全，方便消费者的选购。下面是“美食阁”网站的首页：图2-1 “美食阁”网站首页22.2 网站特色“美食阁”网站特色主要有三个：视频教学、互动专区、健康养生。（1）视频教学：本网站不仅仅是销售美食，为了更好地服务消费者，网站特地设计了视频教学的栏目，这样既满足了“吃货”们的需求，也满足了部分爱好厨艺的消费者。图2-2 视频教学页面（2）互动专区：为了引导消费者选购视频，网站还设计了互动专区栏目，互动专区主要是消费者与消费者之间的交流，通过已购买过食品的消费者对美食的评论，最后实现口碑营销。图2-3 互动专区（3）健康养生：在这样一个物质生活越来越富裕的时代，消费者更加注重健康养生的食品，因此，网站还设计了健康养生的栏目，以满足不同消费者的需求图2-4 健康养生22.3 用户注册、登录1注册模块（1）用户在选购商品时商品，需要进行用户注册。注册时需要填的一些基本资料，主要分为几个方面，用户、密码、爱好、性别、职务等，文本框的长度为20，最多可输入20个字符。每个注册成功的用户，将成为网站会员。下图为用户注册界面：图2-5 用户注册页面（2）用户注册界面代码：图2-6 用户注册关键代码图2 登录模块（1）登录页面，当用户注册完成后，会跳转到“美食阁”网站的会员登录页面，下图为登录页面：图2-7 用户登录页面（2）实现用户登录关键代码：图2-8 登录关键代码22.4 商品分类页面模块“爱尚淑女坊”网站商品主要是食品的种类来分类，主要有今日推荐、打折优惠、长沙特色小吃、凉拌菜、甜品等。下图为商品分类页面：图2-9 商品分类图22.5 商品详细页面模块1. “美食阁”网站的商品详细页面，主要是通过图片和文字的形式为用户介绍商品的详细情况。主要包括菜单编号、菜单名、价格和食品口味等内容。下面是商品详情展示图：图2-10 商品详细展示页面2. 商品详细页面实现的关键代码：图2-11 商品详细展示页面关键代码1. 商品详细页面实现的记录集：图2-12 商品详细展示页面的记录集22.6 湖南文化、联系我们模块1湖南文化模块“美食阁”网站中的湖南文化，其目的是为了让用户了解湖南的文化，加快网站的发展，促进食品的销售，建立网站在用户心目中的地位，增强用户对网站的信任度。2联系我们模块“美食阁”网站中的联系我们模块，主要为消费者提供更高质量的服务，留住老顾客，吸引新顾客，页面中主要有百度地图、公司地址、电话等。3. 网站优化网站优化是对网站进行程序、域名注册查询、内容、版块、布局、目标关键字等多方面的优化调整，也就是网站设计时适合搜索引擎检索，满足搜索引擎排名的指标，从而在搜索引擎检索中获得流量排名靠前，增强搜索引擎营销的效果，使网站相关的关键词能有好的排名。为了使“美食阁”电子商务网站更容易被搜索引擎收录，提高用户体验（UE）和转化率，因此从网站页面、关键词、内部链接对网站进行优化。3.1 网站页面优化3.2.1 相关内容相关内容是提高用户体验、促进蜘蛛抓取的方法，所以相关内容应该在整个网页布局中占据一定的位置，因此相关内容的优化需做到：每个网页都应该有独立的、概要描述网页主体内容的网页标题，有独立的反映网页内容的META标签，以及关键词； 图3-1 相关内容优化代码3.2.2 标签优化1标题标签标题不应太长，2530个字符之间为宜。关键词出现一到两次，融入长尾关键词。网站关键词要和网站的主题一致。“美食阁”的网站主题是长沙美食，所以我们将长沙美食作为网站的主要关键词，网站标题为 “长沙美食阁-湘菜大全”。 图3-2 标题优化图2关键词密度主关键词一般不超过五个，每个不超过10个字数。主要围绕公司业务、网站主题、内容方向、公司地名来选择。选择主关键词不可太过宽泛和特殊，多站在访客的角度思考，尽量选择竞争力度小、搜索次数多的关键词。“美食阁”网站根据以上几个方面，选择了以下几个关键词：长沙美食、美食网、家常菜、菜谱大全、湘菜、长沙小吃、凉拌菜、甜品等。1描述标签描述标签的主要作用是概况站点内容让用户了解，描述一般要注意简单明了，字数控制在搜索结果范围之内。“美食阁”网站的描述标签为：美食阁是一个中文美食网站与厨艺交流社区，拥有很多的美食做法、菜谱、食谱大全以及家常菜菜谱，同时提供各种美食图片、菜谱大全、食谱大全、家常菜做法大全，丰富的菜谱大全可以让您轻松地学会怎么做美食分享美味的人生图3-3 标签优化图3.2.3 代码优化1. 清理垃圾代码是指删除页面中的冗余代码，可以删除多数的冗余代码，垃圾代码主要指那些删除了也不会对页面有任何影响的非必要代码。 图3-4 清理后的源代码2. HTML标签的转换，这个主要就是使用短标签替换在网页中有同样效果的长标签。图3-5 标签转换1. CSS优化。将CSS样式分离出来，并且以调用的方式，避免同样的标签重复写样式，从而达到精简代码的效果。 图3-6 CSS样式分离2 JS优化。JS无论对普通用户还是搜索引擎,都是极其不友好的，所以在规划网页时，要尽量不要使用JS。目前为止，搜索引擎不解析JS生成的页面或内容，JS代码冗长，执行效率远低于HTML，导致打开慢。 3.2.4图片优化1图片相关性不合理的图片、不相关的图片不仅不能给网站内容增添色彩，反而会让顾客失去对网站的信任，这直接影响到浏览的深度以及再次访问。在丧失一部分用户的同时，网站流量也会面临危机。2Alt标签网站优化从根本上来说是为了方便搜索引擎的抓取，更好的将信息展示给消费者，增强用户的体验度。图3-7 Alt标签图33 关键词优化3.1.1关键词的选择关键字的选择不仅是通过搜索引擎，而且还要根据用户进行合理的添加与布局，网站关键字的选择应该符合网站长期运营定位的方向。关键字是描述你的产品及服务的词语，选择适当的关键字是建立一个高网站排名的第一步。选择关键字的一个重要的技巧是选取那些常为人们在搜索时所用到的关键字。 下图是用追词助手对每个关键词数据的统计。图3-8 Alt关键词选择图图3-9 关键词竞争度分析图3-11 关键词竞争度分析通过追词助手和百度分析工具，我们决定长沙美食、长沙小吃、湘菜、凉拌菜等作为我们的关键词。34 内部链接优化3.21面包屑导航面包屑导航可以看做是主导航的补充，能让用户明白自己身处的位置，并能快速地去想要去的页面。提高网站关键词密度，增加用户的体验值。图3-12 面包屑图3.22网站地图网站地图是根据网站的结构、框架、内容，生成的导航页面文件。通过网站地图，不仅用户可以对网站的所有内容一目了然，搜索引擎也可以跟踪链接爬行到网站所有主要部分。图3-13 网站地图页面图3.23 404页面404页面是告诉浏览者其所请求的页面不存在或链接错误，同时引导用户使用网站其他页面而不是关闭窗口离开。404页面应该在最醒目的位置显示错误信息，明确提示用户，要访问的页面不存在。错误信息下面为用户提供返回首页和重要分类页面的链接点击选项。图3-14 404错误页面图总结三四个月的毕业设计很快就要过去了，在这个过程中有过苦，也有过累，但遇到困难我们就及时和老师联系，并积极和同学相互交流，请教指导老师，在大家的帮助下，解决掉一个个困难，网站也慢慢的成型。最后的毕业设计同时也是检验我们在大学三年的学习情况，同时也是对以前的知识的巩固。经过此次的毕业设计，我们收获很多，学会了对时间的合理分配，加强了个人的交流能力，提升了团队协作能力，并且能够通过合理的方式解决遇到的问题。同时，我和我的队员也认识到了我们的不足：对于未走出社会的我们，经验严重缺乏等。这对于即将走出社会实习的我们，也是一个提醒，我们该学的东西还有很多，我们会坚持不懈的学下去，活到老，学到老。在此，真诚地感谢李灿辉老师在毕业设计中对我们的指导，也感谢所有老师在大学生活中对我们的教诲。参考文献 1、著作类1 周立.网页设计与制作.北京：高等教育出版社,2009年2 杨选辉.网页设计与制作教程.北京：清华大学出版社.2010年3 李琪.电子商务网站建设.重庆：重庆大学出版社.2004年姓 名：孙光富专业班级：电子商务1202班通信地址：网络传媒系电子商务1202班邮政编码：410100联系电话：孙光富：15574372440E Mail：孙光富：841798455 - 32 -一、网络传媒系2015 届毕业设计任务书姓 名孙光富学 号201201002003专业、班级电子商务1202班毕业设计选题“美食阁”电子商务网站的设计与实现主要设计内容：随着电子商务的思想日益深入人心，餐饮网站建设公司在今后将不再局限部分人群的展示，网络凭借其卓越的互动性与便捷的交流手段正成为最有发展潜力与前途的新兴媒体，成为众商家倍为关注的宣传热点。网站购物可以为他们节省时间、节约费用、操作方便。本网站是以互联网技术为广大客户提供多种多样的美食的网站，目前网络中这样的美食网站竞争力还是比较强的。主要设计任务：1网站设计（1）网站功能设计用户管理：包括用户注册、登录等功能。浏览商品：为用户提供全方位的商品展示和介绍，方便用户选购商品，其中包括湘菜大全、长沙特色小吃、健康养生、美食视频等。查询商品：为方便用户迅速找到所需商品，网站设计了按照关键字查询商品以及分类查询；购买商品：在线购买商品是电子商务网站最重要的功能，为用户提供商品选择、购物车查看、修改、提交订单等功能；下订单：提供将用户购物车中所选商品生成订单的功能，并接收送货信息，包括收货人地址、联系方式、送货方式等。（2）网站栏目设计商务网站的建设主