《山海味长沙菜介绍网站设计与实现》由会员分享，可在线阅读，更多相关《山海味长沙菜介绍网站设计与实现（15页珍藏版）》请在金锄头文库上搜索。
1、目目录录一一、作作品品概概述述. 1 11.1 选题背景.11.2 选题意义.1二二、开开发发环环境境. 1 12.1 硬件环境.12.2 软件环境.22.3 工具软件.22.4 产品架构.2三三、需需求求分分析析. 3 33.1 总体目标.33.2 功能需求.3四四、系系统统设设计计. 4 44.1 总体设计.44.2 详细设计.4五五功功能能实实现现. 7 75.1 导航栏设计.75.2 首页页面设计.85.3 排行榜页面设计.85.4 山海味介绍页面设计.95.5 热搜美食视频页面设计.95.6 美食推荐页面设计.95.7 热点餐馆页面设计.105.8 网页自适应设计.11六六、作作品品
2、测测试试. 1 12 26.1 测试概述.126.2 测试过程.126.3 测试结果.13七七、设设计计总总结结. 1 13 3八八、参参考考资资料料. 1 14 41一、作品概述1.1 选题背景如今人均生活水平在不断的提高，从提高数量变成提高质量。追求高质量已经成为一种社会趋势。生活住吃不同方面都在努力变好，对食物的口感追求也日益提高，吃什么，怎么吃，都是现在人们对生活的一种追求。人们对美食的追求逐渐演变为一种生活方式，也是一种生活态度。同时，用心去吃每一道美食，去尝试各地不同的特色美食，都是一种美好的生活追求。现在不同菜系的菜馆连锁经营， 开阔创新， 能将中国菜系进一步推广， 让不同大菜系
3、进一步融入社会生活，也是我们当代大学生值得去做的有意义的事情。本网站则以推广湘菜为主，让大家对于湘菜有一个大概的了解情况。1.2 选题意义湘菜，是我们中国历史悠久的地方菜，也是我们汉族饮食文化的八大菜系之一。湘菜的烹调技艺已经有相当高的水平，作为一个湖南人，对于湘菜的喜爱更不用言语了。由于地理位置的关系，湖南人都比较喜欢吃辣以及用辣椒来提神去湿，因此湘菜中或多或少都会放入一些辣椒，所以湘菜的辣，也成为了独具地区特色的饮食风格。长沙作为湖南省的省会中心，美食历史悠长，此网站对于长沙美食的介绍，能更好的推荐给外来旅游人士去认识关于长沙的美食，能给不知道在长沙吃什么，或是对于长沙美食不了解的人一个参
4、考范围。也能更好的推动湘菜和长沙菜的发展。二、开发环境2.1 硬件环境开发环境：Windows10 系统，JDK1.8.0_201硬件要求：1.80GHz 以上 CPU，256M 以上内存操作系统要求：支持 Windows10/7/8浏览器支持：谷歌浏览器（Google Chrome）响应速度：采用了 HTML5 缓存机制容易维护：前台采用 Bootstrap 框架实现响应式布局22.2 软件环境本网站主要利用 Webstorm 开发工具，Html5、CSS、JavaScript 等技术实现的一个简单的静态旅游网站。最大优势是快速，运用完整的语法提示和代码输入法、代码块等，高度提升 HTML、
5、js、css 的开发效率。使用Photoshop 的文字编辑工具和图片编辑工具制作了旅游网站的LOGO 和图标。2.3 工具软件Webstorm（简称名称是“WS”）是一款强大的 HTML5 编辑工具，JavaScript开发和 Web 前端开发工具。Adobe Pohtoshop（简称名称是“PS”）主要处理以像素所构成的数字图像，可以有效的图片编辑软件。2.4 产品架构JavaScript（简称名称是“JS”） 是具有函数优先的轻量级，即时编译型或解释型的编程语言。大部分是用来向 HTML，（一般的编程应用）页面添加交互行为在绝大多数浏览器的支持下，但是也可以用到在非浏览器环境中。在用于w
6、eb 页面作为脚本语言，也可以支持命令式，声明式还有面向对象，js 的标准是ECMAScript。JSP（全称 JavaServer Pages），是一种动态网页标准，将 Java 代码作为脚本语言， 将内容嵌入到静态的页面中， 实现以静态页面为模板， 动态生成 html或者其他格式文档的 web 内容。它引入了被称做“JSP 动作”的 XML 标签，标签库能增强功能，还有服务器性能，能为用户的 HTTP 请求提供服务。还能够不受跨平台这个问题的限制。HTML5 语言是 Web 构建内容的一种描述方式，被大多数浏览器支持。是构建web 前端的重要语言描述的方式，HTML5 是互联网的下一代标准
7、，是构建以及呈现互联网内容的一种语言方式HTML5 被认为是互联网的核心技术之一，作用是构成网页文档。CSS3 和 CSS 相比，css3 是技术的升级版本，比 css 更完善。是在网页中自定义样式表的选择符，与 html 有一定的紧密型，但是不同的浏览器会影响特性，在网页中也大量引用这些选择符，css3 拥有多种模块（如语言模块 背景边框）。3jQuery 可以使开发更加方便和便捷，例如选择文档对象、操作 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。与 js 有一定的联系，除此之外， 它还能提供 API 方便开发者编写插件代码。能够使开发者可以更简单的开发出，强大功能
8、的不同网站，例如静态网站或动态网页。Bootstrap 有一套属于自己独特的网站风格。它是基于 HTML、CSS、JavaScript 的，它在 jQuery 的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分 jQuery 插件。Bootstrap 十分简洁灵活，使得 Web 开发更加快捷。其最大的优势是响应式布局，使得开发者可以方便的让网页适应于各种终端设备。三、需求分析3.1 总体目标山海味长沙美食网站，里面收录了许多关于长沙的美食和小吃，为了让人们快速清晰的了解长沙本地的美食，对美食的需求，对美食餐馆的了解和认知，还有对湘菜会有一定的了解，让更多人喜欢长沙
9、美食，设计初期即考虑通过简洁直观的界面，给用户一个舒适的体验，方便用户更直观明了的看到需求信息。此外更能推动长沙餐饮业的发展，以及许多因长沙美食而来的游客，也会因此带动了长沙旅游业的发展。3.2 功能需求本网站功能拟定为：全屏滚动信息、美食排行榜单、山海味美食简介、美食推荐、热搜美食视频、热点餐馆。整体页面简洁，功能模块分明，使浏览者不必眼花缭乱，面临选择困难，可以根据自己的喜好进入需求的页面。3.2.1 首页模块全屏轮播滚动美食图片可以直接浏览美食图片，使用户极少的互动行为，却能反馈给用户更多的需求信息。3.2.2 美食排行榜模块设计美食排行榜单，给用户一个全网打分美食排行，便于用户去打卡“
10、网红美食”。3.2.3 山海味美食简介模块山海味美食简介模块，使用户了解美食的发源历史，在用户享受美食丰富味蕾的同时，也丰富了自身的文化底蕴。43.2.4 美食推荐模块设计美食排行榜单，给用户一个全网打分美食排行，便于用户去打卡“网红美食”。3.2.5 热搜美食视频模块热搜美食视频模块的功能，主要是根据用户搜索相同美食次数的统计而推出该美食的做法视频。3.2.6 热点餐馆热点餐馆，顾名思义即美食餐馆，网站会根据搜索次数较多的几家餐馆给出对应的餐馆信息。四、系统设计4.1 总体设计山海味长沙菜网站共有五大模块，分别为首页、美食排行、历史介绍、视频介绍、特色菜推荐、餐馆介绍。设计图如 4-1 和图
11、 4-2。4.2 详细设计4.2.1 首页页面设计美食照片的轮播图导航栏图 4-3 首页页面设计图54.2.2 美食排行页面设计城市美食排行城市美食排行美食热度图 4-4 美食排行页面设计图4.2.3 历史介绍页面设计介绍图片轮播图历史文字介绍图 4-5 美食排行页面设计图64.2.4 视频介绍页面设计视频介绍页面图 4-6 视频介绍页面设计图4.2.5 特色菜推荐页面设计美食图片美食图片美食图片美食图片美食图片美食图片图 4-7 视频介绍页面设计图74.2.6 餐馆推荐页面设计餐馆推荐餐馆推荐餐馆推荐餐馆推荐图 4-8 视频介绍页面设计图五功能实现5.1 导航栏设计网页顶端设置了导航栏，此网
12、页对导航栏设置根据网页位置的移动而移动,设置了五个跳转页面。网页 logo 是原创设计，采用了项目总名称“山海味”背景图同样以此概念设计。 以自然为主的理念， 大海和山河的概念来阐述美食味道。同样是自主设计，使用了 ps 进行制作。图片如图 5-1 所示：图 5-1logo 设计图85.2 首页页面设计首页设置了轮播的方式，代码采用了 JavaScript 与 jQuery 的实现，共有 5个轮播图片进行轮播，图片都是精美的美食图片，可以吸引到浏览者的眼球。图 5-2 首页轮播图5.3 排行榜页面设计排行榜页面浏览内容介绍：排行榜页面进行了几个长沙美食的数据比较，可以一目了然的看出大概情况，在
13、这里进行了翻转的效果，部分代码如下。进行了一系列的大小还有颜色等调试， 运用了我们专业知识中的 class 语句和一些其他知识。图 5-3 排行榜页面图95.4 山海味介绍页面设计山海味介绍页面内容介绍：此模块介绍了关于产品设计的大概介绍，是一个长沙特色菜的推荐介绍网页， 图片也采用了轮播方式， 上面设置了相应的时间点，然后进行图片轮换。右边就是文字介绍，进行了相应的设计，使网页更加美观。图 5-4 文字介绍图5.5热搜美食视频页面设计美食推荐页面浏览： 这块模块插入了视频， 可播放暂停， 代码中插入了 video语句。 视频是来自于我国优秀的文化推广大使李子柒的视频之湘菜篇。这个模块主要是想
14、加入当下在互联网的热门话题和人物，更好的突出网页制作的主题，这里背景设定成不滚动的模式，导航栏随机而动，方便浏览用户跳转其他模块。图 5-5 视频页面图5.6 美食推荐页面设计美食推荐页面浏览：图片进行了特效处理，设置翻转和放大功能，如图 5-6-210可以看到右侧设置了转动的标志，可以进行直接看到下一张图片。不用再点击退出，避免了重复麻烦。另外还在图片展示上设置了，鼠标移到图片上时有立刻放大预览的功能。添加了展示效果，增强了观感和难度，设置了各种不等的大小。图 5-6-1 美食推荐页面图图 5-6-2 美食图放大页面图5.7 热点餐馆页面设计热点餐馆页面浏览介绍：比较上几个图片浏览模板，用了
15、能快速知道相应大餐馆信息的介绍方式，图片边框加重了阴影，突出效果。通过鼠标停留图片可以11知道餐厅所在位置信息，快捷方便。也加入了切入阴影的效果图 5-7 餐馆页面图5.8 网页自适应设计为了适应手机和电脑两种形式，对网站增加设置了自适应形式，能够根据窗口大小进行调试合适的界面，在网页中右下角还设置了回到网站顶部首页的位置。相应的模块图片文字也会随着变换。如图：图 5-8 自适应页面图12图 5-9 自适应页面图六、作品测试6.1 测试概述现在将对其进行一系列测试， 查看是否能正常运行。 主要包括以下几个测试：功能测试、性能测试、安全性测试、配置和兼容性测试、可用性测试、链接跳转测试等。6.2
16、 测试过程功能测试：打开网页以后，对功能模块进行测试，导航栏点击，跳转对应的模块功能；轮播图的滚动效果；排行榜的数据信息；视频的播放以及其它信息的展示。性能测试：点击过后，网站能快速执行命令，给出反馈。13配置和兼容性测试：测试了 IE 浏览器、Chrome 谷歌浏览器和火狐浏览器，其中 Chrome 谷歌浏览器的效果更佳。可用性及功能性：轮播图正常显示，网站信息内容的展示，视频模块加载成功，实现了网站自适应。链接跳转测试：点击对应的链接就会跳转到对应的模块。综合测试：在以上测试的基础上，对网站性能进行了整体测试，依次检验网站功能是否符合网站开发的目标。6.3 测试结果网站的运行处于稳定状态，
17、部分功能都可以完整的显示，如山海味简介、美食推荐以及热搜美食视频等模块的展示都十分完整，但是，由于第一次独立设计制作一个网站，在测试时有出现过轮播图的加载不当问题，以及轮播图加载过慢的情况，也许是因为图片过大不易加载，又或者是自身网站代码的原因，需要改进和反复测试。七、设计总结山海味长沙美食介绍网站的产品与设计是自己通过深思熟虑后才进行设计完成的网站，关于对毕业设计的进行总结：最初想到做这个网站，本身就是作为湖南人喜欢湘菜，在长沙读书生活，对长沙美食的了解也更为具体。而在中国菜系中，湘菜受到全世界人民喜爱的程度也非常高。所以做这个网站的目的就是为了推广和介绍长沙美食。网站中用到了不同的设计环境
18、，我们 UI 设计专业最常见的 webstorm 起到了很大的作用。网页界面设计最开始因为界面板块等问题，一直出现错误代码，反复矫正，因此觉得不管是什么界面结构的构成，都是一直缓慢而复杂的过程，新的问题会一直出现，所以问题只要出现就一定要解决。在进行毕业设计的过程中，有一些自己相对薄弱的地方，但是通过这次的任务，也能加强对这些方面的加强。而且对于网页设计，代码是主要核心，所以代码繁杂、重复，会让代码的复用性利用率很低，对于一个网站的建立，把自己所学到的知识点和内容运用上也是十分重要的，合理的展示自己的才能，也算是一种对自己的肯定。这次通过毕业网页设计，让我学到了非常多的东西，不管是知识还是其他
19、方面。都是一种考验，为我以后的学习以及工作起到了重要的帮助。在以后的工作中和生活中，我想着都要和现在一样，认真用心的去做好每件事。在这次学习过程中，还能发现自己有些遗忘的知识，然后自己独立思考的方面也有进步，很大14部分上减少了对老师的依赖，努力用书本和互联网独立解决问题。但是也虚心向同学和老师进行询问请教，努力把网站的设计做到更好。八、参考资料1 田家旗, Java开发语言的开发平台与J2EE编程技术问题研究J. 信息技术与信息化,20162 明日科技,Java 从入门到精通.第五版.清华大学出版社.20193 汪云飞,JavaEE 开发的颠覆者.电子工业出版社.20164 王军, 基于 Java 的垂直搜索引擎的设计方式构建J. 信息化建设，2015
