道州新雅园餐厅网站设计与实现毕业设计论文.pdf

《道州新雅园餐厅网站设计与实现毕业设计论文.pdf》由会员分享，可在线阅读，更多相关《道州新雅园餐厅网站设计与实现毕业设计论文.pdf（23页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 毕 业 设 计 毕 业 设 计 题 道州新雅园餐厅网站设计与实现 毕业设计类型 产品设计 工艺设计 方案设计 姓名 班级 所属系部 物流信息系 专业 电子商务 指导教师 职称 完成时间 摘要“互动”是 Internet 的主要部分和基本价值，从简单的媒体向互动平台转换，是网络建设概念的革命性变化，同时也是当今时代网络的精华。网络拥有独一无二的先进性和功效性，管制与营销工具是最优秀和灵验的。依靠 Internet 的无尽扩展性、网络史无前例先进的策划、统计、分析、管理等功能，来提高企业的综合竞争力、调解装备资源、改善企业的结构，从基本上来变更企业的发展要求和生存。随着网络技术的发展和网络的遍及

2、，很多的企业已经认识到网络给企业带来的商机，然而吸引了很多企业投身于网络商业活动，用网络将企业与企业、企业与客户关联起来。本网站是道州新雅园餐厅官网，其建设的目的是对新雅园餐厅进行品牌宣传，同时便于顾客快捷的了解餐厅最新消息及餐厅最新菜品等信息。关键字：新雅园 餐厅官网 网站设计 目 录 第一章 网站设计背景.1 1.1 企业网站设计背景.1 1.2 网站建设需求分析.2 1.3 网站整体结构.4 第二章 前期准备.7 2.1 素材收集整理.7 2.2 LOGO 设计.7 2.3 Banner 设计.8 2.4 首页效果图.9 第三章 网页设计制作.11 3.1 首页设计制作.11 3.2 其

3、他设计制作.12 第四章 网站调试运行.15 4.1 网站调试及处理.15 4.2 网站运行与推广.15 总结.18 致谢.19 参考文献.19 1 第一章 网站设计背景 1.1 企业网站设计背景 1.1.1、当前信息技术发展背景 Intenet 时代，在企业中网络占据着特别重大的位置，为企业开辟了新的商机以及新的市场，企业通过网络不仅能更快的获得广大的市场，还能带给企业产品和技术方面的最新讯息。对于企业来说，建设一个企业网站，使外界通过网络来认识企业，并通过网络平台实现企业的电子商务化，已被越来越多的企业看重。随着网络的迅速发展以及知识经济的来临，世界上越来越多的企业运用互联网将自己和其他企

4、业、客户联系起来。许多中小企业也已经强烈的认识到建设网站的重要性，并且开始规划建设企业网站。1.1.2、企业网站建设现状背景 目前在互联网上出现众多企业网站。深入钻研发现，做企业网站有两大需求，一是运用网络服务于企业管理，二是运用网络展开营销活动，简单地说就是企业信息化和网络营销。对于运用网络服务于企业管理，一般适合大型企业协同办公和提升工作效率，而对于许多中小企业来说，开展网络营销是做网站重要的目的。若企业没有弄明白自己为什么要做网站就盲目去建设，便会出现“无人理睬”的难堪境界。然而对于本网站道州新雅园餐厅来说，开展网络营销需要的网上营销平台，将来的发展将不只限制于企业本身的网站，更多的是综

5、合性平台。它们一样可以做推广、建平台、做网络营销、促转化，对于中小企业而言，最终追求的是网络营销效果。2 1.1.3、品牌简介 道州新雅园餐厅创建于2000年9月21日，是道州示范餐饮行业。餐厅位于湖南省永州市道州南路 265 号，餐厅始终贯彻绿色安全，营养健康的经营宗旨。道州新雅园餐厅作为一家大众化的简约时尚餐厅，目前公司已经拥有一个大型天然食材基地，主要菜系有农家小炒、干锅系列、田园时蔬、靓汤系列、精美点心，是家庭休闲、朋友聚餐、生日聚会的理想场所。餐厅注重产品的创新和研发，餐厅菜单进行有规律的创新，持续做促销活动，吸引更多的顾客光临餐厅，从而使老顾客不断的增加，以致生意稳定、兴隆。餐厅独

6、一无二的秘密配方和标准化产品操作流程为菜品的口味统一打下了基础，为消费者营造更愉快的美食体验。作为一家传统餐饮企业，面对当前信息化浪潮及越来越激烈的市场竞争，道州新雅园餐厅已强烈地意识到了企业信息化的重要性，所以现阶段需要通过建立企业官网来提高企业品牌知名度，推介餐厅菜品。1.2 网站建设需求分析 1.2.1、当前电子商务给餐饮业带来的优势 电子商务主要是依靠互联网和一些信息平台，餐饮企业依照自己的情况建设一个网站，在网络上展现自己，强化对自己餐饮的宣传和提高餐饮企业的知名度。连锁经营是现代餐饮的一个显赫的特点，同时也是扩大和强化餐饮的必经之路。以前的经营管理模式中，餐饮企业因为运用过去的经营

7、模式，只能引进加盟商或者在另外的地方开店 3 来实现规模的扩展和利润增添。引进电子商务之后，通过互联网和电商平台，餐厅的连锁店能够轻易通过网络完成消费者订餐的配送和原材料采购等活动，不会耗费大量的人员调配。另外，网站可以给餐厅以及菜谱做宣传，还可以 设置在线咨询、投放广告等，以此提升餐厅的市场竞争力。严厉把关餐饮的物流环节，完成电子商务的一体化服务。餐饮企业以前存在高成本的局面，主要集中在物流、采购等过程中。把电子商务引用到餐饮之后，依靠它的优势，可以使企业更广阔的挑选食材，更高效的采购材料，更节省物流运输，同时还可以与第三方物流企业合作，实现安全、稳定的运输，对餐饮企业的扩大、强化、出色效益

8、具有非常大的促进作用。依靠电子商务，由专业协会指导，增强资源共享和信息交流，由行业竞争走向战略联盟。如今大多数餐饮企业都停滞不前，企业与企业间的沟通不频繁，都是排斥同行，维护自己特色，其实这样做都是没有必要的。现代社会讲求双赢或多赢，一家不能独大，但弱小会有被兼并或者破产的风险。运用网站实现资源共享和信息交流是电子商务的一个突出优点，对同行和客户亦是如此。网站的建设专业，餐饮的品牌效应越强、用户的浏览量越大。在餐饮专业协会的指导下，各餐厅应该利用互联网增强信息交流和资源共享，实现由行业竞争走向战略联盟，将中国的餐饮企业推向全世界，在世界上做大、做强和做响。由此可见，信息化的发展给我国餐饮业带来

9、了巨大的绩效，餐饮 4 业市场需求也将转变，餐厅采用互联网而节约陈本、增加销量，同时有利于餐厅品牌形象宣传、扩大企业影响、树立行业品牌。1.2.2、道州新雅园餐厅官网建设的必要性。引进电子商务的餐饮业是未来经济发展的大方向，电子商务将给餐饮业带来史无前例的大变革，另外，餐饮业也会依靠电子商务的发展增加自己的覆盖范围，开拓更多的业务带来获取更大的利润。因此，道州新雅园餐厅必须建设自己的官网，在网络上展示和宣传自己，增强对餐厅的宣传，提升品牌知名度。1.2.3、网站定位分析 网站设计的方向性指企业网站设计如何定位,希望能达到什么目的。企业的决策层、业务层应负起重大的责任，可以通过一些调查来得出适合

10、本企业发展的网站建设方向。企业网站根据设计的方向性可分为以下三类：a.信息发布型:宣传企业形象、扩大企业影响、树立行业品牌;b.市场开拓型:对准目标市场、开发潜在客户、突出产品优点;c.综合服务型:加强服务品位、完善服务体系、维护客户基础。本人通过对同类型企业官网的调查分析，确定本网站定位为信息发布型，主要用于宣传餐厅的形象、扩大餐厅的影响力、树立行业品牌。1.3 网站整体结构 网站整体结构是衡量用户体验网站好与坏的关键之一。清楚的网站结构可使用户迅速获得所需信息。以下是本网站的整体结构图：5 图 1-3 网站整体结构图 本网站是一个餐厅官网，栏目主要分为五个大的栏目：首页、关于我们、新闻中心

11、、美味菜单、联系我们。除首页外，其它四个大的栏目下都设有多个子类目。关于我们栏目有公司简介、发展历程、公司荣誉、诚聘精英等信息，让浏览者了解本餐厅。新闻中心栏目下有行业咨询、公司新闻、餐饮知识。美味菜单栏目下有特色推荐、小炒系列、干锅系列、田园时蔬、靓汤系列、精美点心。且每个子栏目都对餐厅的菜单进行了展示，用美食来吸引浏览者的眼球。关于 我们 新闻 中心 首页 美味 菜单 联系 我们 行业咨询 公司新闻 餐饮知识 特色推荐 小炒系列 干锅系列 靓汤系列 田园时蔬 精美点心 公司简介 发展历程 公司荣誉 诚聘精英 联系方式 在线留言 6 联系我们栏目有联系我们、在线留言等信息。7 第二章 前期准

12、备 2.1 素材收集整理 本网站是一个餐厅的官网，素材图片均为美食图片，都是在昵图网收集的，昵图网的网址为：http:/。图片收集整理后用 Photoshop 软件来加工修改，再应用到本网站上。处理图片素材时采用了颜色工具来调整图片的色相饱和度和对比度，使图片与网站的色彩合理的搭配；采用魔棒工具和仿制图章工具对图片上的水印进行处理；采用裁剪工具对图片进行适度的裁剪，同时使用工具栏的图像选项对图片的大小进行调整，并且同类图片的命名采用了相同的首字母，这样在制作网站时才能方便图片的放入。动画效果的素材图片在昵图网上搜索，比其它图片要困难些，因为动画效果的图片很长但不够宽，改变原图片的大小后会变形，

13、所以找到合适的很难，找了很多图片反复的试了后才试出四张最合适的。文字在百度检索窗口直接搜索，有符合本网站的文字参考后，按照自己的语言来编写，再应用到本网站上。2.2 LOGO 设计 Logo 是公司的标志，传递公司文化和理念，表达品牌的独特性。用简单明了的符号，形象的把网站理念留于人们心中，然而提高了logo 设计的重要性。Logo 是一种视觉语言，要产生瞬间作用，因此Logo 设计要简单、明了、醒目，要做到近看精致巧妙，远看清晰醒目，从每个方向和角度去看都能很好的识别。Logo 是公司精神的象征，代表公司的理念、经营的内容、特点和文化特色。公司的 Logo 8 绝不只是公司的脸面，更不能将其

14、视为一种外观的装饰来忽悠大众。消费者如果对 Logo 的认可不能和公司的本质相联系，公司 Logo 不仅失去应有的意义，还会损坏公司的根本利益。因此，只有公司的实际情况与公司 Logo 相一致时，才有可能获得社会大众的一致认可。本网站的 Logo 采用天蓝色为主要色调，象征着永恒，意味着餐厅永远都秉着绿色安全、健康的理念。Logo 设计的形态和色彩力求明确表达品牌理念及特点。合适的 LOGO 设计可以让人们印象深刻，便搭建品牌与受众之间的桥梁，从而促进品牌宣传。logo 设计图如下：图 2-2 网站 Logo 图 2.3 Banner 设计 本网站首页 banner 采用 Photoshop

15、工具，通过动画技术加以设计实现，banner 图片是在昵图网上找的高清美食图，再运用Photoshop 将四张图片修改成相等的长和宽制作而成。具体制作步骤如下：首先将收集的四张 banner 图片都调成相同的大小，再插入动画，播放第一张图片就把其它图片眼睛闭上，这样以此类推，将每张图片播放的时间都调成 3 秒，最后将图片储存为 web 和设备所用格式，扩展名为 gif 即可。banner 制作中的截图如下：9 图 2-3 Banner 的制作 动态的 banner 可以使得首页显得生动灵活，更富吸引力。Banner设计图如下：图 2-4 Banner 效果图 2.4 首页效果图 对于一个网站而

16、言，首页的设计直接影响到用户的体验度。目前，国内一些知名品牌企业的网站设计过于看重形象展示而忽视了信息传达职能，导致大批企业网站首页都是全屏 flash，对于用户迅速获得信息造成阻挠。因此，网站首页的设计必须传达品牌形象，让访客在第一时间了解网站的内容、服务和功能，通过首页可以迅速到达所 1 0 要找寻的目标页面。本网站的首页设计主要是页面的美观度和主题明确性，在首页很好的展示了道州新雅园餐厅的菜品，还设置了公司简介、新闻中心和联系我们，达到了信息传递的效果，用户能快速获取信息。采用 DIV、CSS 进行布局，保持视觉的一致性，使浏览者感觉更具亲和力。本网站的首页设计图如下：图 2-4 首页效

17、果图 1 1 第三章 网页设计制作 3.1 首页设计制作 3.1.1 网页布局 网站的页面布局和网站的内容结构有密不可分的关联，网站页面布局应该按照网站的信息和用户浏览习惯策划，将内容井然有序的展现在用户面前，使主要信息置于页面主要板块得以重点呈现。本网站的页面有效的将文字、图片、banner 进行搭配，合理有序的呈现在用户面前。网页布局图如下：图 3-1 网页布局图 3.1.2 风格或色调 本网站风格定位为稳重、简洁，突出重点，让浏览者能鲜明准确的找到自己想要搜索的信息。以蓝色和灰色为主色调，蓝色象征永恒，有着沉稳的特性，具有理智、准确的意向，灰色象征诚恳、沉稳，为 1 2 了突出所展示的内

18、容，用背景灰色差别比较大的蓝色来作为展现内容的底色，从而使整个网站显得更为突出。3.1.3 导航条的设计 网站的导航条能使浏览者清晰的了解网站的内容，导航分为：首页、关于我们、新闻中心、美味菜单、联系我们。导航的颜色为蓝色，给用户提供了一种指引。导航条设计图如下：图 3-2 导航条设计图 3.1.4 页头设计 网站的页头设计非常受网页设计者的重视，页头设计通过独有的设计手法，搭配极具创意的图片，可以让图片突破空间界限，给人留下深深的印象。本网站的页头使用了 DIV 和 CSS 进行布局和排版,使页头的美观度大大提高，能给浏览者留下深刻的印象。页头设计图如下：图 3-3 页头设计图 3.2 其他

19、设计制作 3.2.1“美味菜单”网页设计“美味菜单”页面可以介绍餐厅的菜品和特色菜，让顾客了解本餐厅的菜谱。点击各菜品，可进入各菜品的详情页面，菜品详情页面采用图文并茂的方式对各菜品名称、原料、功效进行了展示介绍。此 1 3 页面是采用 DIV 嵌套的方式做成的，并且用 CSS 对页面进行优化，从而使整个页面显示效果统一和不变形。以下是美味菜单的网页设计图：图 3-4 “美味菜单”页面效果图 3.2.2“关于我们”网页设计“关于我们”页面整体采用内嵌框架技术实现，通过点击左上角的“关于我们”栏目下级链接菜单“公司简介”、“发展历程”、“公司荣誉”、“诚聘精英”，各下级页面将在内嵌框架部分加以显

20、示。以下是“关于我们”的网页设计图：1 4 图 3-5 “关于我们”页面图 1 5 第四章 网站调试运行 4.1 网站调试及处理 4.1.1 用户界面 用户界面有中心工作空间，每个页面之间要保持一致。每个页面都有导航，要保持直观一致。UI 控件的命名方式要简洁明了，并且保持一致，控件的默认状态要适当；Web 应用系统的重要部分可以通过主页来访问；响应和操作方式与 Web 应用程序以及行业标准一致，响应结果要正确，不可产生输出错误以及数据一致性错误；若注释文字指向左侧的图片，则此图要呈现在左侧；填写证件号码和姓名的表格放在左边，其它细节放在右边会更有效；依据供应的帮助文档来操作，可以出现预期结果

21、；提供正确的反馈和错误提示信息。所有 Web应用系统的页面结构、字体、UI 控件、链接格调以及背景颜色、前景颜色和字体颜色搭配都要一致，而且文字回绕正确。每个单元格的宽度要足够，不可因为某一单元格内容太多，而将一整行拉长。图片要小于 30K，首页要采用大图。4.1.2 链接功能测试 全部链接都链接到应该链接的页面，保证 Web 应用系统上无单独的页面（即无链接指向该页面，唯有正确的 URL 地址才能访问）。集成测试阶段要完成链接测试，即在全部 Web 应用系统的全部页面开发完成之后实行链接测试。4.2 网站运行与推广 4.2.1 关键词选择 1 6 公司网站建设初期就选择好了合理的关键词，关键

22、词关系到公司的核心产品、业务和服务。网站优化的过程中，都是围绕关键词展开的，关键词的选择非常重要。本公司网站建设选择关键词时查看了同类网站的关键词，在关键词前加地区名，并且联系到公司的产品、业务、服务和公司名称。本网站选取的关键词有道州新雅园餐厅、新雅园餐厅、新雅园、餐厅，关键词在 DW 的工具栏选择插入选项，再选择 HTML、然后选择文件头标签、最后选择关键词添加即可。4.2.2 域名选择 用户对网站的第一印象是域名，让用户快速记住域名对网站的 发展尤为重要。域名要简单易记，越短越简单的域名用户最容易记在脑海里，而且成本越低，域名要和网站名称或者网站主题相呼应，使人看到域名便能联想到网站主要

23、经营的内容。采用何种格式的域名后缀对百度搜索没有影响，但域名后缀要利于用户记忆。.com、.cn、.net这些最为常见的域名后缀会更利于用户记忆，那些不常见的后缀可能会使用户对网站不信任。考虑到以上的这些因素，本网站在选择域名时，选择了以.com 为域名后缀名。于是本网站注册域名的时候选取了易于用户记忆、与公司的名称相呼应、易于产生信任感的域名，这样可以易于用户推荐网站、提升回头率、增加老顾客。本网站的域名为 。4.2.3 服务器空间选择 网站的用户体验是由服务器、空间的速度和稳定性影响，还会影 1 7 响搜索引擎的抓取。于是要选择速度快而且服务稳定的空间或服务器；用户访问速度和服务稳定要有保

24、证；选取实力强的正规空间商；购买何种服务器要依据网站规模和提供的服务来决定，若多个网站共用同一台服务器，稳定性会受到干扰，因为一般空间都会有功能上的限制、流量和连接数，但价格便宜；若限制比较少，就可以自主的管理，但是价格昂贵。本网站根据自己的需求选择了可以自主管理的服务器，因为它速度快、稳定性好，能给用户带来很好的体验。4.2.4 网站推广 中小型企业建设一个与公司名称相呼应的域名网站之后,将公司简介、公司新闻、产品信息、销售、联系我们等信息发布在网站中,供顾客访问。这是企业线下营销在线上的延伸。而网站的推广是为了让顾客了解和访问网站,是网络营销获得成果的基础,是企业能否实行网络营销并取得成功

25、的关键所在。当企业网站建设完成发布以后,应该制定宣传计划并且利用监控手段监控宣传成果。中小企业网站的推广是一个多样化和多层次的综合性网站推广体系，有线上推广和线下推广,网上经常看见而且非常有效的线上推广方法有十多种;线下推广的方式也有多种。这些推广方式中有些是付费的,而更多的是免费推广。本网站选择线上和线下推广。线上推广主要在博客、微博、论坛、问答、QQ 群、邮件营销、软文炒作等，可让更多的人了解道州新雅园餐厅，通过第三方的推广方式挖掘潜在客户。线下推广主要用海报、宣传单，车体宣传、通过户外活动等让更多的人了解新雅园餐厅官网。1 8 总结 在导师欧阳红巍老师的指导和鼓励下我完成了道州新雅园餐厅

26、网站的设计，设计的过程中学到了很多知识，深知遇到问题该如何去分析和解决问题，也让我深刻地体会到设计一个网站的不易，这也是对自己的一种鼓舞，把三年所学的知识用于实践，大大的提高了我设计网站的能力，这些在我以后的工作中肯定会受益匪浅。一边做设计，一边温故以前学过的知识，这个过程中学到了很多书本上学不到的东西，也遇到过很多以前没碰到过的困难，以及新的知识拓展。回首整个设计过程，学到的东西更广阔了，之前只能做一些简单的页面，现在能自己完成整个网站的设计，每一个设计的阶段都学到了新的知识，大大提高了我的动手能力。学会了独立思考，也学会了借助丰富的网络资源来解决问题。这一次的毕业设计为我以后的工作积攒了非

27、常宝贵的经验，整个设计不断地遇到问题、不断地解决问题。遇到问题还不能完美的解决，还要继续努力与钻研，只有不断的认识自己的错误，虚心的解决并改正，才能真正得到提升。设计结束的时候感到自己动手完成的网站非常不容易，还意识到毕业设计使自己得到进一步的提升、拥有不断完善的机会。1 9 致谢 既充实又紧张的毕业设计和毕业论文编写，都凝聚着老师的汗水和心血，每一步的成长都离不开各位老师的关怀和照顾。我要衷心感谢老师，此次设计和论文是在老师的指导下顺利完成的，毕业设计的选题、餐厅的调查方案制定、网站的布局、网站的色彩搭配、论文编写的整个过程，都是欧阳老师付出了大量时间和精力。论文的完稿之际，对欧阳老师的辛劳

28、培育和关怀致以衷心的感谢和崇高的敬意！即将毕业离开学校，我祝愿老师们工作顺利、安康又幸福。同时，也祝同学们找到一份好的工作，都有一个好的前程。参考文献 2 0 1潘果.电子商务实务 D.湖南：湖南现代物流职业技术学院，2012 年.2张晓雷.网页设计与制作案例教程 M.1 版.北京：清华大学出版社，2013 年 3马增友.Photoshop 图像处理技术应用M.1 版.北京：清华大学出版社；北京交通大学出版社，2009.9 4潘果，张华南.电子商务网站建设与管理M.1 版.北京：教育科学出版社，2013.10 5王大远.DIV+CSS 3.0 网页布局案例精粹 M.北京：电子工业出版社，2011.2 6李成飞.电子商务网站建设与维护 M.1 版.北京：中国劳动社会保障出版社，2008 7唐永明.浅议网页设计与制作J.科技信息，2012 8邓文渊.网页制作高手 FLASH 8M.北京：人民邮电出版社，2007.6 9刘晓敏.网络营销理论与实务.北京：北京理工大学出版社，2012.3