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

毕业设计题目（中文）“美食阁”电子商务网站的设计和实现系别网络传媒系专业、年级电子商务1202班“美食阁”电子商务网站的设计与实现湖南大众传媒职业技术学院网络传媒系摘要网络凭借其卓越的互动性与便捷的交流手段正成为最有发展潜力与前途的新兴媒体，成为众商家倍为关注的宣传热点。尤其是传统大型企业更应该充分利用互联网技术，为客户、合作伙伴在网上提供信息服务，并且借助互联网，敏锐的捕捉商机。俗话说民以食为天为了解决您对“食”的种种需求，我们需要搭建一个平台美食阁，通过互联网这一载体告诉您本店有什么吃的，提供什么样的菜品，什么价格，什么服务等等，您可以在线查询，在线购买等等。我们的目标是力争做到为您提供更方便、更快捷、更全面、更准确的餐饮信息服务，致力打造本地最权威的餐饮信息服务平台。本网站采用了DREAMWEAVERCS5来做前台和后台的搭建。使用ACCESS2010作为数据库，使用WINDOWS7为网站平台。关键词美食阁，在线查询，在线购买，餐饮2ABSTRACTNETWORKWITHITSEXCELLENTINTERACTIVEANDCONVENIENTMEANSOFCOMMUNICATIONISBECOMINGTHENEWMEDIAHASTHEMOSTPOTENTIALFORDEVELOPMENTANDTHEFUTUREOFPROPAGANDA,BECOMEHOTMUCHBUSINESSCONCERNESPECIALLYTHETRADITIONALLARGEENTERPRISESSHOULDMAKEFULLUSEOFTHEINTERNETTECHNOLOGY,FORCUSTOMERS,PARTNERSTOPROVIDEINFORMATIONSERVICEONTHEINTERNET,ANDTHEINTERNET,KEENTOCAPTURETHEBUSINESSOPPORTUNITIESASTHESAYINGGOESFOODISTOSOLVEYOUR“FOOD“ALLTHEDEMANDS,WENEEDTOBUILDAPLATFORMFOODCOURT,VIATHEINTERNET,THECARRIERTELLYOUWEHAVEWHATTOEAT,WHATKINDOFDISHES,WHATPRICE,WHATSERVICESANDSOON,YOUCANONLINEINQUIRIES,ONLINEPURCHASEANDSOONOURGOALISTOSTRIVETODOTOPROVIDEYOUWITHMORECONVENIENT,FASTER,MORECOMPREHENSIVEANDACCURATEINFORMATIONONCATERINGSERVICES,TOCREATETHEMOSTAUTHORITATIVELOCALRESTAURANTINFORMATIONSERVICEPLATFORMTHISWEBSITEUSESTHEDREAMWEAVERCS5FORCONSTRUCTIONOFTHEFOREGROUNDANDBACKGROUNDUSINGACCESS2010ASADATABASE,USINGWINDOWS7KEYWORDFOODCOURT,ONLINEINQUIRY,PURCHASEONLINE,CATERING3目录1商务网站总体设计1611商务网站功能结构设计1612网站页面布局设计17121首页页面布局17122二级页面布局18122CSS样式设计182网站各页面设计与实现1921数据表的设计与实现1922网页功能实现21221网站首页21222网站特色22223用户注册、登录26224商品分类页面模块28225商品详细页面模块28226湖南文化、联系我们模块303网站优化3131网站页面优化31321相关内容31322标签优化31323代码优化32324图片优化3333关键词优化33311关键词的选择3334内部链接优化344321面包屑导航34322网站地图35323404页面35总结36参考文献375前言俗话说民以食为天为了解决您对“食”的种种需求，我们需要搭建一个关于美食的平台美食阁，通过互联网这一载体告诉您本店有什么吃的，提供什么样的菜品，什么价格，什么服务等，如果您也是一位爱好美食的顾客，您通过本网站的相关美食信息在线查询，在线购买等等。我们的目标是力争做到为您提供更方便、更快捷、更全面、更准确的餐饮信息服务，致力打造本地最权威的餐饮信息服务平台。“美食阁”是一家专门为食客提供美食以及美食的制作方法的商务型网站，本网站主要经营湘菜、长沙特色小吃、甜品、等食物，为了满足追求健康美食的消费者，本网站还增加了健康养生的栏目，而且还设计了美食视频教学的栏目，以便于爱好制作美食的消费者学习。61商务网站总体设计11商务网站功能结构设计网站以白色为背景，红色为辅色，使整个网站给人以整洁、大气、专业的效果。白色的背景中夹杂点红色更容易让消费者产生食欲以及界面的美观，更容易的获得客户的青睐。本网站的网上商城主要由首页和各个二级页面组成。1网站首页主要包括美食信息的展示，以及用户注册、登录。（1）网站首页展示网站的所有栏目；（2）湖南文化介绍湖南的美食文化，促进消费者的购买行为；（3）湘菜大全包括具有湖南特色的大部分菜肴；（4）长沙特色小吃提供具有长沙特色的特色美食、地方特产；（5）健康养生提供营养价值比较高的美味佳肴；（6）互动专区方便消费者与消费者之间的互动交流；（7）美食视频方便爱好厨艺的顾客学习美食的制作方法；（8）联系我们通过在线交流、电话等方式联系我们，方便企业与消费者的交流；（9）网站地图方便消费者更快进入网站的相关页面；（10）友情链接通过链接其他网站从而让其他网站链接我们，起到推广作用。7用户注册登录湖南文化湘菜大全长沙特色小吃健康养生互动专区美食视频联系我们网站地图友情链接商品详情商品分类在线交流在线下单“美食阁”二级页面首页图11网站功能结构图2网站二级页面主要包括商品详情让用户更加了解该商品的信息；商品分类让用户可以根据自己的需求来进行查询。12网站页面布局设计121首页页面布局首页显示了“美食阁”网站的的主要内容，网站首页主要分为头部、导航、动画、产品展示、友情链接和底部等模块。网站背景为白色，左边展示的是网站LOGO，右边是注册、登陆等功能的实现，因为产品是网站的重要组成部分，所以产品的展示模块在首页的中间位置，作为本580毕业设计网站的特色之一，美食视频置于中间偏右位置，为用户提供参考。网站地图方便用户寻找相关页面，友情链接是为了加大网站的权威性，和同类型网站合作相互链接。收藏、注册LOGO导航栏BANNER广告动画美食视频8行业资讯产品展示美食大全网站地图美食推荐友情链接底部图12首页平面设计图122二级页面布局“美食阁”网站的二级页面沿用了首页的头部、导航、动画、底部等模块。中间位置新增了宝贝分类、产品展示和产品详情。产品详情主要介绍了产品的详细信息，方便用户了解产品。让用户能更好的、更快的选择出适合自己的产品。登录、注册LOGO导航栏BANNER广告动画分类产品展示底部图13二级页面页面布局图122CSS样式代做毕业设计CSS样式的设计，结构与样式分离的方式，其主要作用是简化网页的格式代码，便于后期维护与改版。运用CSS的外部样式表的功能，能够在制作大数量网页时，大量节省网页制作的时间，并且提高网页制作的质量。美食阁网站，根据自身的需求制定多个CSS样式表，提高网页制作的效率与质量。9表2CSS样式设计表CSS文件名CSS样式名样式说明MOBANCSS网页模板的CSS样式SPCSS美食视频的CSS样式CSSYANGSHENG健康养生的CSS样式102网站各页面设计与实现首先分析所需求的数据库表格，然后按照严格的数据表制作规范进行表格的制作。经过需求分析，确定制作ADMIN管理员信息表、MEISHIGERPRODUCT食品信息表、USER用户注册信息表、SHOPPINGDATA购物车信息表四种表格。21数据表的设计与实现（1）ADMIN管理员信息表后台管理员注册表的字段和数据。表3数据库ADMIN管理员信息表字段名称数据类型说明ADMIN文本主键PW文本（2）MEISHIGEPRODUCT图书信息表图书信息表的字段名和具体信息表4数据库FLOWERPRODUCT图书信息表字段名称数据类型说明ID自动编号序号（主键）PRODUCTNAME文本商品名称PRICE货币商品价格PRODUCTINTRO备注商品介绍BIMAGE文本大图路径SIMAGE文本小图路径SORT文本商品类别MAKETIME日期/时间日期11KOUWEI文本口味类别KOUWEI1文本口味AMOUNT数字库存数量HUNANTESE文本湖南特色TIANPIN文本甜品CHEAP文本打折优惠ZHAOPAI文本招牌推荐XINPIN文本最新推出IMPORTANT文本本周排行榜（3）USER用户注册信息表前台用户注册表的字段名和数据表5数据库USER表字段名称数据类型说明ID自动编号序号（主键）USERNAME文本用户名PASSWORD文本密码USEREMAIL文本电子邮件REALNAME文本真实姓名MOBILE文本手机号码（4）SHOPPINGDATA购物车信息表购物车的字段和类型表6SHOPPINGDATA购物车信息表字段名称数据类型说明12ID自动编号序号（主键）USERNAME文本用户名SHOPPINGDATA日期/时间购买日期PRODUCTID文本商品编号SHOPPINGNUM数字购买数量ORDERID文本订单号ORDERSTATE数字订单状态号RECEIVER文本收货人姓名ADDRESS文本地址CITY文本城市POSTCODE文本编号COMMENTS备注收货人留言PAYMETHOD文本付款方式DELIVERYMETHOD文本送货方式PAID货币付款额USEREMAILWWWBYSJ580COM文本收货人电子邮件地址USERTEL文本收获人电话22网页功能实现221网站首页“美食阁”网站的首页主要以简洁大方为主，网站的主栏目主要有网站首页、湖南文化、湘菜大全、长沙特色小吃、健康养生、互动专区、视频教学、联系我们。网站信息比较齐全，方便消费者的选购。下面是“美食阁”网站的首页13图21“美食阁”网站首页222网站特色“美食阁”网站特色主要有三个视频教学、互动专区、健康养生。（1）视频教学本网站不仅仅是销售美食，为了更好地服务消费者，网站特地设计了视频教学的栏目，这样既满足了“吃货”们的需求，也满足了部分爱好厨艺的消费14者。图22视频教学页面（2）互动专区为了引导消费者选购视频，网站还设计了互动专区栏目，互动专区主要是消费者与消费者之间的交流，通过已购买过食品的消费者对美食的评论，最后实现口碑营销。15图23互动专区（3）健康养生在这样一个物质生活越来越富裕的时代，消费者更加注重健康养生的食品，因此，网站还设计了健康养生的栏目，以满足不同消费者的需求16图24健康养生17223用户注册、登录1注册模块（1）用户在选购商品时商品，需要进行用户注册。注册时需要填的一些基本资料，主要分为几个方面，用户、密码、爱好、性别、职务等，文本框的长度为20，最多可输入20个字符。每个注册成功的用户，将成为网站会员。下图为用户注册界面图25用户注册页面（2）用户注册界面代码图26用户注册关键代码图182登录模块（1）登录页面，当用户注册完成后，会跳转到“美食阁”网站的会员登录页面，下图为登录页面图27用户登录页面（2）实现用户登录关键代码图28登录关键代码19224商品分类页面模块“爱尚淑女坊”网站商品主要是食品的种类来分类，主要有今日推荐、打折优惠、长沙特色小吃、凉拌菜、甜品等。下图为商品分类页面图29商品分类图225商品详细页面模块1“美食阁”网站的商品详细页面，主要是通过图片和文字的形式为用户介绍商品的详细情况。主要包括菜单编号、菜单名、价格和食品口味等内容。下面是商品详情展示图20图210商品详细展示页面2商品详细页面实现的关键代码图211商品详细展示页面关键代码1商品详细页面实现的记录集21图212商品详细展示页面的记录集226湖南文化、联系我们模块1湖南文化模块“美食阁”网站中的湖南文化，其目的是为了让用户了解湖南的文化，加快网站的发展，促进食品的销售，建立网站在用户心目中的地位，增强用户对网站的信任度。2联系我们模块“美食阁”网站中的联系我们模块，主要为消费者提供更高质量的服务，留住老顾客，吸引新顾客，页面中主要有百度地图、公司地址、电话等。223网站优化网站优化是对网站进行程序、域名注册查询、内容、版块、布局、目标关键字等多方面的优化调整，也就是网站设计时适合搜索引擎检索，满足搜索引擎排名的指标，从而在搜索引擎检索中获得流量排名靠前，增强搜索引擎营销的效果，使网站相关的关键词能有好的排名。为了使“美食阁”电子商务网站更容易被搜索引擎收录，提高用户体验（UE）和转化率，因此从网站页面、关键词、内部链接对网站进行优化。31网站页面优化321相关内容相关内容是提高用户体验、促进蜘蛛抓取的方法，所以相关内容应该在整个网页布局中占据一定的位置，因此相关内容的优化需做到每个网页都应该有独立的、概要描述网页主体内容的网页标题，有独立的反映网页内容的META标签，以及关键词；图31相关内容优化代码322标签优化1标题标签标题不应太长，2530个字符之间为宜。关键词出现一到两次，融入长尾关键词。网站关键词要和网站的主题一致。“美食阁”的网站主题是长沙美食，所以我们将长沙美食作为网站的主要关键词，网站标题为“长沙美食阁湘菜大全”。图32标题优化图232关键词密度主关键词一般不超过五个，每个不超过10个字数。主要围绕公司业务、网站主题、内容方向、公司地名来选择。选择主关键词不可太过宽泛和特殊，多站在访客的角度思考，尽量选择竞争力度小、搜索次数多的关键词。“美食阁”网站根据以上几个方面，选择了以下几个关键词长沙美食、美食网、家常菜、菜谱大全、湘菜、长沙小吃、凉拌菜、甜品等。1描述标签描述标签的主要作用是概况站点内容让用户了解，描述一般要注意简单明了，字数控制在搜索结果范围之内。“美食阁”网站的描述标签为美食阁是一个中文美食网站与厨艺交流社区，拥有很多的美食做法、菜谱、食谱大全以及家常菜菜谱，同时提供各种美食图片、菜谱大全、食谱大全、家常菜做法大全，丰富的菜谱大全可以让您轻松地学会怎么做美食分享美味的人生图33标签优化图323代码优化1清理垃圾代码是指删除页面中的冗余代码，可以删除多数的冗余代码，垃圾代码主要指那些删除了也不会对页面有任何影响的非必要代码。图34清理后的源代码2HTML标签的转换，这个主要就是使用短标签替换在网页中有同样效果的长标签。24图35标签转换1CSS优化。将CSS样式分离出来，并且以调用的方式，避免同样的标签重复写样式，从而达到精简代码的效果。图36CSS样式分离2JS优化。JS无论对普通用户还是搜索引擎,都是极其不友好的，所以在规划网页时，要尽量不要使用JS。目前为止，搜索引擎不解析JS生成的页面或内容，JS代码冗长，执行效率远低于HTML，导致打开慢。324图片优化1图片相关性不合理的图片、不相关的图片不仅不能给网站内容增添色彩，反而会让顾客失去对网站的信任，这直接影响到浏览的深度以及再次访问。在丧失一部分用户的同时，网站流量也会面临危机。2ALT标签网站优化从根本上来说是为了方便搜索引擎的抓取，更好的将信息展示给消费者，增强用户的体验度。25图37ALT标签图33关键词优化311关键词的选择关键字的选择不仅是通过搜索引擎，而且还要根据用户进行合理的添加与布局，网站关键字的选择应该符合网站长期运营定位的方向。关键字是描述你的产品及服务的词语，选择适当的关键字是建立一个高网站排名的第一步。选择关键字的一个重要的技巧是选取那些常为人们在搜索时所用到的关键字。下图是用追词助手对每个关键词数据的统计。图38ALT关键词选择图图39关键词竞争度分析图311关键词竞争度分析通过追词助手和百度分析工具，我们决定长沙美食、长沙小吃、湘菜、凉拌菜等作为我们的关键词。2634内部链接优化321面包屑导航面包屑导航可以看做是主导航的补充，能让用户明白自己身处的位置，并能快速地去想要去的页面。提高网站关键词密度，增加用户的体验值。图312面包屑图32