【《基于HTML5的美食介绍及食谱网站设计》7200字】

第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开发的文本编辑器。SublimeText性能优越。SublimeText用代码缩略图代替了大部分编辑器所使用的滚动条，大大方便了编程人员。SublimeText还有许多便捷的快捷键，如使用Tab键可以自动补全相应标签；ctrlshiftp可以显示命令面板。并且还有多重选择功能和即时的文件切换功能。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.6JavaScript的简单介绍

jQuery可以简化JavaScript的开发，是继prototype之后又一个优秀的JavaScript框架。而且使用jQuery库不需要安装，只需要在相关的HTML文档中简单地引用该库文件的位置。对DOM元素操作，比如修改其样式，添加、删除子元素等是使用jQuery最常见的功能，包括读取和设置其文本。jQuery主要可实现获取文档中的元素、修改文档的内容和简化常用的JavaScript任务的功能。第3章此网站的分析阶段3.1需求分析无论做什么产品，首先都是先进行需求分析，先明确产品需要什么，然后在一系列需求确定后，将这些需求提炼、拓展，最后成为最终的需求。3.1.1此网站的功能需求比如此网站的功能需求：为了使用户能够更直观的了解此网站的内容，所以制作了首页，将想要表达的想法尽可能的展示给用户；而为了实现引导用户健康饮食的目的，制作了健康膳食功能，将各种健康小知识分享给用户；为了让人们可以不用专门请教厨师，自己足不出户便能烹饪美味佳肴，于是制作了菜谱和美食视频功能。除此之外还有个登录界面。3.1.12此网站的软硬件需求网站的软硬件需求：本网站以html为基础，大量运用了Css进行美化和修饰，框架是使用了jQuery；硬件环境使用的是Windows10家庭中文版；主开发工具是SublimeText。3.2可行性分析经济可行性：由于互联网技术的飞速发展，网页制作趋向于简单化，技术难度越来越低，成本也越发低廉，再加上此次制作的是个人网站，几乎没有什么支出，经济方面完全可行。技术可行性：主要运用html、css、JavaScript。其中html和css因为学过的原因，难度并不是很大，技术层面可行。操作可行性；操作简洁方便，大概是每个美食网站的特点，并且由于本网站的功能较少，并且导航栏非常简洁，让人们一眼望去就知道该如何操作，所以在操作可行性上没有问题。社会因素可行性：越来越多的人注重饮食，无论是为了满足口腹之欲，喜欢品尝佳肴，还是利用饮食进行“食疗”或养生，都使得美食网站越来越受重视，因此，在社会因素的角度来讲，制作美食网站，尤其是带有健康饮食专栏的，是可行的。3.3制作思路在制作这个网站时，在分析过可行性后，遵循的是类似瀑布模型的思路，虽然可能并不是完全按照瀑布模型的固定格式来的，其中也未产生大量文档，毕竟是制作个人网站，在编写好代码后，效果立马可见。但思路确实遵循了瀑布模型，按照一定工序简化了网站设计。先是需求分析，分析了功能需求，软硬件需求。然后对每个网页，每个模块分开进行设计，得到了自己想要的效果后，就开始了每个网页的制作，一个一个模块进行编写，虽说过程艰难，但经过不懈努力，又因分阶段设计，条理清晰，最终还是完成了编写。然后将写好的几个页面通过超链接连接起来。第4章网站的总体结构4.1网站的总体结构简介本网站按照简洁方便的原则进行制作，利用html标签进行了大体布局的编写。网站共分为4个小网页，分别是首页、吆，菜谱、健康膳食、登录界面。每个网页利用css3进行修饰，通过引用js来实现动画效果的制作，并且网站整体简单易懂，通过观看网站的首页，用户可以很直观的看出网站的主要内容，并且可以连接到其他页面，方便快捷。主要制作了首页、菜谱、健康膳食和登录界面。彼此之间用超链接进行连接，总体布局如下：图4.1本网站的总体结构第5章网站的各个网页介绍5.1首页的设计通过网站的总体结构图，可以很直观的了解到该网站分成了五大模块：首页、菜谱、健康膳食、登录页面。通过查阅资料，百度和询问朋友，请教老师，最后才做出不算美观的页面，心里想的很多，无奈技术不到位，想做的效果很多，最后做出来让自己惊讶：这是个啥？尤其是查询某种效果的实现方法时，资料很全，却也只告诉你，这样就行，但没有解释为什么这样就行。这些网页的制作，真的是对自己的一次磨炼。首先，是利用html编写好了大体结构，在css中设置了body的背景颜色、字体、margin等值。body{ background:#FFF; font-family:'OpenSans',sans-serif;}5.1.1导航栏的制作导航栏是个小盒子，并只设置了下边框，充分利用了z-index的堆叠属性，将导航栏设置在最上方，并通过设置hover，使得鼠标通过时文字变色，接着插入了水果图片当背景图。其中hover就是设置鼠标经过时文字会变色。5.1.3特性服务和特色菜的制作然后就是特性服务的制作，在制作这个模块时非常费劲，因为连接了开源库，所以最后在查阅资料、请教老师、询问同学后，才利用弹性布局flex,给父容器设置好最小高度后，又引用了fa-truck图标做好。制作我们的特色菜的时候，特意选用了弹性布局，在给大盒子设置好样式后，利用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> <divclass="real-yd"> <imgsrc="images/guoshu_2_副本.jpg"alt="VegMores"> <h3>新鲜果蔬</h3> <p>果蔬养人，特色美食，送给特别的你。</p> </div>这个效果做出来的时候感觉还行：5.1.4关于我们模块的制作关于我们这个模块编写时相对简单一些，大盒子插入图片后，小盒子设置了绝对定位，使其能出现在背景图片的左侧，这样看起来能更美观，但由于找不到更合适的图片，所以在背景图片有所遮挡的文字的情况下，依然使用了这张图。本来也想给字体设置hover的，使鼠标经过能产生其他效果，但发现有背景图片的衬托，这个效果并不明显，于是放弃。以下是效果截图：5.2菜谱的设计为了避免用户看到喜欢的美食，却因找不到制作方法而焦急，所以设计了菜谱这一模块。5.2.1导航栏的制作导航栏模块与首页大体上一样，顶部便不再叙述，不过因为导航栏是设置的绝对定位，下面的模块会顶上去，所以为了美观，该网页直接导入了animate的CSS和jquery-1.11.1.min.js，因为是想wow.js制作图片滚动效果，而wow.js是依赖于animate.css的，于是引用了jQuery效果-animate()方法，使用了做成了三个图片飞入的效果：5.2.2具体菜谱的制作制作了3个具体菜谱，利用wow-duration与wow-delay实现了图片在鼠标拖到那里后之后才会延迟出现。利用col-md-4将行分为3份，引用flipInY使图片绕Y轴旋转。部分代码如下： <divclass="event-grids"> <divclass="col-md-4event-gridwowflipInY"data-wow-duration="1000ms"data-wow-delay="300ms"> <imgsrc="images/beef_副本.jpg"alt=""class="img-responsive"/> <divclass="nobis"> 5.2.3详细菜谱的制作详细食谱的制作参照了上边食谱的制作，只不过是让文字的div的col-md的值设置成了8，图片设置成了4，这样文字便占三分之二的空间，图片占了三分之一，再用ol+li给文字排好序，由于ol本来就是有序排列，所以选用它会方便一点：5.3健康膳食的设计导航栏的制作与菜谱导航栏的制作一样，便不再过多叙述。5.3.1健康小知识的制作健康小知识的制作很简单，一开始用了一个大盒子，里面嵌套小盒子，小盒子设置好margin值，后来发现直接一个盒子也能做到，毕竟内容不多，然后就用ul+li来排序，里面用p标签书写内容，再加了一条线（hr）,给其设置好border和dashed。效果图如下：本来想本来是想加个链接，链接到讲解饮水的益处的网站，但仔细一想，多喝水有好处谁都知道，于是就加了个空连接。<li> <ahref="#">多喝温水除了容易失去女朋友，其他都挺好</a> <p>多喝温水，可以排毒养颜</p><li>5.3.3温水养生的制作“温水养生”这个地方的制作是仿照文昌鸡的做法，一样的col-md，不过其数值不再是2:1，而是设置了文字占比十二分之七，图片占5份，其他的是一样的，也是引用wow.js，让图片延时出现。效果如下：5.4登录界面的设计登录界面比较简洁,给登录框添加了背景变换，然后给输入框增加了鼠标聚焦的样式。一共有账户，密码，确认密码三个模块，账户和密码利用函数制定了规则，比如输入用户名后，var会获取输入的数据，如果符合规范，函数就会非一下，请输入用户名就会变成Ok。当输入完账户密码后，设置的函数会获取密码和确认密码的数据，确认密码的数据不为空并且和输入的密码相同时，就会显示OK。而且由于不能熟练使用布局，致使页面比较难看，接下来的仍会努力学习，修改，争取将登录页面及不理想的地方，尽力做到最好。验证用户名：functioncheckUserName(){varusername=document.getElementById('userName');varerrname=document.getElementById('nameErr');varpattern=/^\w{3,}$/;if(username.value.length==0){errname.innerHTML="用户名不能为空"}if(!pattern.test(username.value)){errname.innerHTML="用户名不合规范"}else{errname.innerHTML="OK"}第6章结

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