【基于html5的美食介绍及食谱网站设计8400字（论文）】

基于html5的美食介绍及食谱网站设计摘要国人对饮食很重视，而苦于经济、交通等问题的限制，各地佳肴传播难度大，这便是酒香也怕巷子深。当问题涉及到衣食住行中的某一项时，人们总能很快的解决，美食网站顺势而生。再加上如今的网络技术日趋成熟，制作网站的成本越来越小，技术难度也越来越低，美食网站的制作门槛不断降低。而且再加上网站存储信息量大，存储时间长，成本低廉，所以，美食网站的制作成为了必要，并且因为存储容量可以无限扩充，其所发挥的作用越来越大。怎样吃得好，吃的精致，吃的健康已经成为了大多数现代人经常思考的问题。而由于交通，经济，信息传播受限等各种问题的限制，许多地方的特色小吃或者是名声不显的各种美食，无法被人们所了解，所品尝，而美食网站却可以在一定程度上解决这个问题。利用CSS3、HTML5、jQuery和JavaScript技术，完成了对美食网站首页、菜谱、登录和健康膳食等模块的制作，将特色美食展示给人们、将其制作方法展示给大家，帮助人们在平时吃的精致、吃得健康、吃得舒心。关键词：美食网站，健康饮食，html，CSS，JavaScript，jQuery目录TOC\t"章,1,节,2,小节,3"\h14244摘要 I11744第1章绪论 1277111.1课题研究的背景 16711.2本课题研究的内容

1198291.3本课题研究的目的和意义

1316811.4此网站设计目标及主要模块 2231421.5论文的组织结构 210第2章开发工具及开发技术的简介 440532.1关于网页的基本知识简介 4199652.2开发工具与开发技术 4153262.2.1开发技术与开发工具的选择

4262072.2.2SublimeText的简介

47362.2.3HTML的简单介绍

5122832.2.4CSS3的简单介绍

5237452.2.5JavaScript的简单介绍 5180162.2.6jQuery的简单介绍 521794第3章需求分析 6132293.1需求分析 6282983.1.1此网站的功能需求 655463.1.2此网站的软硬件需求 6183193.2可行性分析 6288653.3制作思路 723162第4章网站的总体结构与实现 8183174.1网站的总体结构简介 8130674.2首页的设计 910524.2.1导航栏的制作 1049234.2.2特性服务和特色菜的制作 11266514.2.3关于我们模块的制作 1418404.3菜谱的设计 1590924.3.1导航栏的制作 16106924.3.2具体菜谱的制作 17280314.3.3详细菜谱的制作 1898034.4健康膳食的设计 2065564.4.1健康小知识的制作 21106204.4.2多喝温水的制作 23132014.5登录界面的设计 2417063第5章结

论 2532674参考文献 28TOC\t"章,1,节,2,小节,3"\h第1章绪论1.1课题研究的背景

现代社会无论是衣、食、住、行哪个方面，都离不开网络，人们在网上冲浪通过各种APP，或各种各样浏览器访问网站来获取想要的信息，这使得各种网站如雨后春笋般“冒”了出来，比如大家所熟知的购物网站、二手车交易网站、电子商城、美食网站等。其中，美食网站更是使得人们突破了地理上的限制，将各地的特色小吃和传统美食展示给人们，将各种美食的制作方法公开给大众，将各地美食展示、教导美食制作、健康膳食融为一体。在当代，怎样吃饱已是过去式，怎样吃的精致、怎样吃的健康才是当今人们所关注的问题。而美食网站恰恰能满足人们在“食”方面的需求，不仅是让人了解各种美味佳肴，还能让人们自主学习各种佳肴的制作，体会自己动手做菜的乐趣，给予人以满足感。而且，随着人们对于饮食的逐渐重视，美食网站也必将会受到重视，其存在是非常重要的。1.2本课题研究的内容

本文主要说明本人制作此美食网站的原因、背景、制作此美食网站有何意义，以及此网站的总体构成，每个网页的功能以及每个网页里各个模块的功能，最后讲解了是如何利用代码实现的这些功能的。1.3本课题研究的目的和意义

美食网站不仅仅能为人们了解各地特色美食提供平台，还能通过合理膳食模块引导人们健康饮食。养生之道，莫于先食，健康饮食可以起到养生健身的作用，并且，享用美食能让人切实感受到生活质量的提高，让生活充满仪式感。而且美食还可以使人忘掉不快乐，人生五味——酸甜苦辣咸，吃掉美食，吃掉生活百味，唇齿留香，只留下甜美记忆。所以，人们的生活需要一个美食网站，需要健康膳食，于是我通过学习及查阅资料，以html为基础及用CSS美化，JavaScript来修饰并完善制作了一个美食网站，用美食传递快乐，以健康膳食模块为人们的合理饮食保驾护航。1.4此网站设计目标及主要模块经过不断的学习与查阅资料，终于利用css和js完成了4个页面，分别是首页、吆，菜谱、健康膳食、登录界面。●

网站首页：主要是展示这个网站的大体内容，像个美食展览柜，并链接到其它模块。●

吆，菜谱：简单介绍了一些美食及其具体做法，并链接到百度，让用户可以观看详细教程。●

健康膳食：展示了某些健康常识，并略微介绍了各个季节吃哪些食物比较健康，为人们的饮食健康保驾护航。●

登录界面：主要制作了一个用户登录页面，因为未连接数据库，便只是做出来了一个大体结构。1.5论文的组织结构本论文旨在描述此美食网站的制作背景及意义，网站的主要模块以及其中运用到的技术，还有制作过程中遇到的困难，发现的问题及制作完后的感悟。由于直接叙述会显得论文臃肿晦涩，所以分为五个章节，显得有条理，一开始的时候，章节分的比较少，各个章节很冗杂，版面也显得比较乱，于是将其分成了五个章节：第一章：绪论。主要叙述本课题的研究背景及意义，毕业设计的设计目标与此网站大致模块的简单介绍。第二章：对于开发软件及所用技术的简单介绍。第三章：需求分析。叙述此网站的功能需求、软硬件需求、可行性分析以及此网站的制作思路。第四章：网站总体结构与实现。主要叙述网站的总体结构与各个页面的介绍，以及各个页面中各个模块是具体怎样设计的。第五章：论文总结。论文制作完成后的一些心得的叙述。在此五个章节之外，便是最后的致谢，以及网站制作和本文编写所参考的一些书籍。第2章开发工具及开发技术的简介2.1关于网页的基本知识简介首先，静态网页并不是就是一个死板的页面，它可以有些动画效果。静态网页没有数据库，不含程序并且不可交互，但网站更安全，速度更快，且可以公开，适用于更新较少的展示型网站。动态网页通常以数据库技术为基础，比起静态页面来说具有更好的交互性，可以最大限度上满足客户或者用户的需求。但相对于静态网页而言，在访问速度上并不占优势。2.2开发工具与开发技术2.2.1开发技术与开发工具的选择

互联网应用涉及到的技术多种多样，其中web开发技术是互联网应用最广泛的技术之一，并且web技术飞速发展，出现了HTML、DHTML、CSS、NET、JSP、PHP及JavaScript等许多内容，此网站便是选用HTML、jQuery、CSS及JavaScript来制作的。开发工具：SublimeText开发技术：HTML、CSS、JavaScriptjQuery开发环境：windows10家庭中文版浏览器：360浏览器2.2.2SublimeText的简介

SublimeText是由JonSkinner开发的文本编辑器。有漂亮的用户界面，还可以自定义绑定，菜单和工具栏。而且还有许多便捷的快捷键，如使用Tab键可以自动补全相应标签；ctrl

shift

p可以显示命令面板。并且还有多重选择功能和即时的文件切换功能。Sublime

Text用代码缩略图代替了大部分编辑器所使用的滚动条。Sublime

Text性能优越。Sublime

Text还有许多便捷的快捷键。2.2.3HTML的简单介绍

HTML标记可以说明文字、声音、图形、表格、链接等。虽然现在已经有很多工具可以实现HTML文档的可视化制作，但很多时候，我们还是要在生成的网页中直接编写和修改HTML代码，来生成我们所需要的动态HTML网页，所以学习和掌握HTML语言的常用标记对一个Web开发者来说是一项基本技能。HTML5是HTML下一个主要的修订版本，其添加了许多新的语法特性。2.2.4CSS3的简单介绍

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的，大概包括：、超链接模型、语言模块等；CSS3具有以下特性：圆角矩形，对应属性：border-radius。出现了一些对边框、背景等进行修改的新属性，丰富了CSS的功能。增加了点线、虚线、波浪线等。2.2.5JavaScript的简单介绍

JavaScript主要用于Web页面编写脚本，其具备许多特性：JavaScript是简化的编程语言，使用起来简洁灵活。具有可移植性。具有很高的安全性。2.2.6jQuery的简单介绍

jQuery可以简化JavaScript的开发，使用jQuery库不需要安装，只需要在相关的HTML文档中简单地引用该库文件的位置。对DOM元素操作，比如修改其样式，添加、删除子元素等是使用jQuery最常见的功能，包括读取和设置其文本。jQuery主要可实现获取文档中的元素、修改文档的内容和简化常用的JavaScript任务的功能。第3章需求分析3.1需求分析无论做什么产品，首先都是先进行需求分析，先明确产品需要什么，然后在一系列需求确定后，将这些需求提炼、拓展，最后成为最终的需求。3.1.1此网站的功能需求比如此网站的功能需求：为了使用户对于本网站有个大概的了解，于是制作了首页，将想要表达的想法尽可能的展示给用户。毕竟无论哪个网站，首页都是人们快速了解这个网站的最便捷的渠道，所以首页的制作是必要的；而为了实现引导用户健康饮食的目的，制作了健康膳食功能，将各种健康小知识分享给用户；为了让人们可以不用专门请教厨师，自己足不出户便能烹饪美味佳肴，于是制作了菜谱功能。除此之外还有个登录界面。3.1.2此网站的软硬件需求网站的软硬件需求：本网站以html为基础，大量运用了Css进行美化和修饰，引用了jQuery开源库；硬件环境使用的是Windows10家庭中文版；主开发工具是SublimeText。3.2可行性分析经济可行性：由于互联网技术的飞速发展，网页制作趋向于简单化，技术难度越来越低，成本也越发低廉，再加上此次制作的是个人网站，几乎没有什么支出，经济方面完全可行。技术可行性：主要运用html、css、JavaScript。其中html和css因为学过的原因，难度并不是很大，技术层面可行。操作可行性；操作简洁方便，大概是每个美食网站的特点，并且由于本网站的功能较少，并且导航栏非常简洁，让人们一眼望去就知道该如何操作，所以在操作可行性上没有问题。社会因素可行性：越来越多的人注重饮食，无论是为了满足口腹之欲，喜欢品尝佳肴，还是利用饮食进行“食疗”或养生，都使得美食网站越来越受重视，因此，在社会因素的角度来讲，制作美食网站，尤其是带有健康饮食专栏的，是可行的。3.3制作思路在制作这个网站时，在分析过可行性后，遵循的是类似瀑布模型的思路，虽然可能并不是完全按照瀑布模型的固定格式来的，其中也未产生大量文档，毕竟是制作个人网站，在编写好代码后，效果立马可见。但思路确实遵循了瀑布模型，按照一定工序简化了网站设计。先是需求分析，分析了功能需求，软硬件需求。然后对每个网页，每个模块分开进行设计，得到了自己想要的效果后，就开始了每个网页的制作，一个一个模块进行编写，虽说过程艰难，但经过不懈努力，又因分阶段设计，条理清晰，最终还是完成了编写。然后将写好的几个页面通过超链接连接起来。第4章网站的总体结构与实现4.1网站的总体结构简介本网站按照简洁方便的原则进行制作，各个页面利用html标签和javascript进行了大体布局的编写，网站共分为4个小网页，分别是首页、吆，菜谱、健康膳食、登录界面。每个网页利用css3进行修饰，通过引用js来实现动画效果的制作，并且网站整体简单易懂，通过观看网站的首页，用户可以很直观的了解网站的主要内容，并且可以连接到其他页面，方便快捷。通过菜谱这个页面，用户如果有兴趣，也可以根据上边的菜谱自己动手进行制作；健康膳食页面可以让用户了解一些健康小知识，登录界面比较简洁。主要制作了包括首页、菜谱、健康膳食和登录界面这四个网页，彼此之间用超链接进行连接。总体布局如下：图4.1本网站的总体结构4.2首页的设计首先展示的是网站的总体结构，通过网站的总体结构图，可以很直观的了解到该网站分成了四大页面：首页、菜谱、健康膳食、登录页面。在制作这些页面时，通过查阅资料，百度和询问朋友，请教老师，最后才做出较为美观的页面。尤其是一开始进行制作时，那时心里想的很多，无奈技术不到位，想做的效果很多，最后做出来让自己惊讶：这是个啥？但是经过查阅资料、请教老师，最后依靠不断的学习，终于是制作出了既美观又功能齐全的页面。每当想起这些，就感觉这些网页的制作，真的是对自己的一次磨炼。首先，是利用html编写好了大体结构，在css中设置了body的背景颜色、字体、margin等值。整个首页，制作了导航栏、轮播图、特色服务、特色美食、关于我们等模块。导航栏能让用户快速切换到自己感兴趣的页面，轮播图衬于导航栏下面，起到美化界面的作用；特色服务和特色美食的灵感来自于在浏览其他网站的时候，发现大部分网站都有自己的特色模块，于是便生出了制作特色美食与特色服务的想法。以下是部分代码：对于整个body的设置：body{ padding:0; margin:0; background:#FFF;}结构图如以下所示：图4.2网站首页的大体结构4.2.1导航栏的制作导航栏是个小盒子，并只设置了下边框，充分利用了z-index的堆叠属性，将z-index的值设置的较大将导航栏设置在最上方，并通过设置hover，使得鼠标通过时文字变色，接着插入了水果图片当背景图。其中hover就是设置鼠标经过时文字会变色。以下是成果图片：图4.2.1首页导航栏及其背景轮播图4.2.2特性服务和特色菜的制作然后就是特性服务的制作，在制作这个模块时非常费劲，因为许多想要的图标做不出来，因为以前并没有接触过fa-truck图标库的原因，所以一上来采取了抠图的方法，效率低下，最后在查阅资料、请教老师、询问同学后，才知道了可以引用这个类库进行想要图标的制作。最后又利用弹性布局flex,给父容器设置好最小高度后，又引用了fa-truck图标做好。特性服务这个模块一个大盒子，分成了两个小的div来制作的，特性服务这几个字是一个盒子，下面的具体细节是一个大盒子，flex-flow:row使其按列排序。以后还会进行尝试能不能使用栅格布局col-md来制作。制做特色菜模块的时候，特意选用了弹性布局，在给大盒子设置好样式后，利用fixed，使得图片不占位置，3个小盒子上移，并给小盒子设置了flex，使其成为同一个容器的成员，通过flex-flow:row3个小盒子横向排列均分了大盒子。再给大盒子添加了背景图片，小盒子设置了hover，鼠标经过时会有个变色。部分代码及效果图如下：<divclass="features-icon"> <iclass="fafa-cutlery"aria-hidden="true">></i> </div> <divclass="features-info"> <h4><ahref="#"style="color:red">美味佳肴</a></h4> <p>这里的食物健康营养，种类多多，欢迎您的到来！</p> </div> 图4.2.2.1首页特色服务成果展示以下是部分代码：<divclass="real-yd"> <imgsrc="images/guoshu_2_副本.jpg"alt="VegMores"> <h3>新鲜果蔬</h3> <p>果蔬养人，特色美食，送给特别的你。</p> </div>.features{ background-color:#f56768;}对于特色菜品，刚开始做出来时，效果并不满意，改了好多次，甚至有次推翻重来，将背景图改没了，也是在制作这个模块的时候，才知道审美对前端真的很重要。效果展示如下：图4.2.2.2首页特色菜品成果展示4.2.3关于我们模块的制作关于我们这个模块编写时相对简单一些，大盒子插入图片后，小盒子设置了绝对定位，使其能出现在背景图片的左侧，这样看起来能更美观，但由于找不到更合适的图片，所以在背景图片有所遮挡的文字的情况下，依然使用了这张图。本来也想给字体设置hover的，使鼠标经过能产生其他效果，但发现有背景图片的衬托，这个效果并不明显，于是放弃。以下是效果截图：图4.2.3首页关于我们成果展示4.3菜谱的设计为了避免用户看到喜欢的美食，却因找不到制作方法而焦急，所以设计了菜谱这一模块。大体结构如下：图4.3菜谱页面大体结构4.3.1导航栏的制作导航栏模块与首页大体上一样，其实每个页面都弄了导航栏，都是利用z-index的元素堆叠属性，用li和float使其浮现在页面顶部左侧，顶部便不再叙述，不过因为导航栏是设置的绝对定位，下面的模块会顶上去，所以为了美观，该网页直接导入了animate的CSS和jquery-1.11.1.min.js，因为是想wow.js制作图片滚动效果，而wow.js是依赖于animate.css的，于是引用了jQuery效果-animate()方法，使用了做成了图片飞入的效果，而且通过利用jquery类库，设置了wow-duration和wow-delay的值，使飞入效果延时出现：图4.3.1菜谱首部成果展示4.3.2具体菜谱的制作既然此网页是关于菜谱的，便不能仅有菜品展示，于是查阅资料认真学习后制作了3个具体菜谱，其中的动画效果是利用wow-duration与wow-delay实现的，图片在鼠标拖到那里后之后才会延迟出现。又利用栅格布局col-md-4使每个图片均占4份，一行三个，旋转效果是引用flipInY使图片绕Y轴旋转实现的。图4.3.2具体菜谱成果展示4.3.3详细菜谱的制作此模块的制作参照了上边具体食谱的制作，利用col-md：8将文字的div所占空间变成了三分之二，图片的col-md值设置成了4，这样图片便占了这一行剩余的三分之一空间。再用ol+li将详细的制作步骤有序排列，利用a标签，制造空连接，便于对文字进行颜色和鼠标经过变色等操作，这里不选择ul，是因为由于ol本来就是有序排列，所以选用它会方便一点：图4.3.3.1详细菜谱成果展示详细菜谱中肘子的制作这个模块，是用的flex，给父盒子设置了display：fiexed，两个小盒子都是设置的flex：1，（文字描述部分和图片部分各是一个div）,通过设置相同的flex，使其排列在一行。效果图如下：图4.3.3.2详细菜谱成果展示4.4健康膳食的设计制作了健康膳食模块，通过一些健康小知识来帮助大家进行合理膳食。其中导航栏的制作与菜谱导航栏的制作一样，只是将轮播的小图片换了个样式，便不再过多叙述。大体结构如下：图4.4.1健康膳食大体结构将背景图片及轮播图片替换后的效果，色彩鲜艳，温水宜人、拒绝油炸、果蔬养生，在首部便充分体现出此页面的主题，将健康小知识展示给用户。效果图如下：图4.4.2健康膳食大体结构4.4.1健康小知识的制作健康小知识的制作很简单，一开始用了一个大盒子，里面嵌套小盒子，小盒子设置好margin值，后来发现直接一个盒子也能做到，毕竟内容不多，然后就用ul+li来排序，里面用p标签书写内容，再加了一条线（hr）,给其设置好border和dashed，于是便有了一条美观的虚线。效果图如下：图4.4.1.1健康小知识效果展示本来想本来是想加个链接，链接到讲解饮水的益处的网站，但仔细一想，多喝水有好处谁都知道，于是就加了个空连接。<li> <ahref="#">多喝温水除了容易失去女朋友，其他都挺好</a> <p>多喝温水，可以排毒养颜</p><li>4.4.2多喝温水的制作这个地方的制作是仿照文昌鸡的做法，一样的col-md，不过其数值不再是2:1，而是设置了文字占比十二分之七，图片占5份，其他的是一样的，也是引用wow.js，让图片延时出现。效果如下：图4.4.2.1多喝温水效果展示4.5登录界面的设计登录界面比较简洁,给登录框添加了背景渐变，一开始使用的是粉、红等的颜色渐变，但实际效果出来后，发现与整个网站简约的风格不符，于是最终选用了白色浅蓝色的颜色渐变。然后给输入框增加了鼠标聚焦的样式，当鼠标移动到输入框时，其背景颜色与输入框大小会发生些许变化。登录框一共有昵称，密码，确认密码三个模块，账户和密码利用函数制定了规则，比如输入用户名后，var会获取输入的数据，如果符合规范，函数就会非一下，请输入用户名就会变成Ok。当输入完账户密码后，设置的函数会获取密码和确认密码的数据，确认密码的数据不为空并且和输入的密码相同时，就会显示OK。而且由于不能熟练使用布局，致使页面比较难看，接下来的仍会努力学习，修改，争取将登录页面及不理想的地方，尽力做到最好。图4.5登录界面效果展示第5章结

论经过几个月的不懈努力，在老师的耐心指导下，终于完成了对此美食网站的制作，而随着论文总结的落笔，意味着大学生活即将结束。流光容易把人抛，曾以为拥有大把时光，可最是光阴留不住，在学校的点点滴滴仿佛还发生在昨天，眨眼间却要背起行囊，离开生活了数年的敬爱的母校。也曾以为世上无难事，但通过毕业设计的制作，也明白了有时候我们不光需要努力，还需要一点天赋。以前总感觉这些知识不难，那些知识不难，但当实际进行编写代码时，就发现自己想要编写的效果，和实际编写出来的效果有很大差异，就像是自己想写个“飞机”，结果出来的是“飞鸡”。每当这个时候，其实是非常受打击的，信心满满的开始，灰头土脸的结束。然后就开始不断地查阅资料，询问指导老师程海涛老师，这个过程有苦有乐，苦的是有些知识理解不了，得一遍一遍磨，但当最终将自己所期望的效果做出来后，那种愉悦感和成就感其实是溢满心房的。毕业设计，不仅是对以往所学知识的一次整合性检测，而且是对自己的一次提升，用最简单的方式，促使你不由自主的以往所学的相关知识整合起来，而且还促使你去学习新的知识，提高自我。而且通过这次的实际操作，不光对自己的知识水平有了确切的