基于bootstrap框架美食网站的设计与实现 - 七掌柜火锅项目.docx
七掌柜火锅网站设计说明书开发人员：XXXvXXX人员分工安排：项目组长（XXX）负责需求的总体把握，和网站的总体策划。界面设计工程师（XXX）承担网站首页界面和各子页界面的设计开发工程师（XXX）承担网站编码工作测试工程师（XXX）承担整体网站测试工作说明文档+项目演示（XXX）网站说明文档的编写+项目演示PPT第1章项目需求和背景3第2章网站规划设计说明3第3章HTML页面结构图4第4章页面DIV结构代码6第5章代码及注释12第6章网站测试结果12第7章项目计划及分工15第8章总结16意自助火锅店面，未来的市场前景好，还有一个不可或缺的因素，就是消费者消费的起。大家看到上面的两点，可能会有一些疑惑，就是自助火锅店面，既然可以这样满足消费者的需求，那么是不是价钱昂贵呢？答案自然是否定的，即使火锅店面可以提供的服务比较好，但是在市场上来看，消费者还是可以消费的起的。其中一个方面的原因是目前消费者的消费水平，是越来越高，还有一个原因是自助火锅店面的产品价钱并不是非常贵的，因此自助火锅的市场前景还是比较好的。第2章网站规划设计说明1、网站规划网站名称：七掌柜火锅网站主题：通过网站宣传，树立企业形象，提高七掌柜火锅知名度。输入法网站语言：简体中文网站风格：以红色调为主，给人以一种欢快的感觉，主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题，表现网站的个性和情趣，办出网站的特点。（1）首页设计页头：准确无误的标识临沂旅游。页面：各种食品的展览。（2）导航设计寻味意大利科技：首页、火锅介绍、特色类、新鲜蔬菜类、留言板2、形象设计Logo：3、网站色彩（1）网站主色调首页火锅介绍特色类新鲜蔬菜类留言板QSER七掌柜火锅七掌柜品牌成立以通过以瑜雕培训、刻捌浮和以埼碎方式，培养出一大批脸水翎蚱.三三f.精运营的人才队伍致力于帮助加88商开业指导、店面扶持以及日常维妒,是实现TS11务的骨干力三确保加盟客户装生检零基勖也能完全做期业营.该网站的主色彩是红色系列，配以白色背景，文字为黑/白，红色是一种较具刺激性的颜色，它给人以燃烧和热情感。4、技术方案表2技术方案表序号网站组成使用技术效果说明11、网站所有文字页面2、静态图片3、表格HTML出版在线的文档，其中包含了标题、文本、表格、等内容。2网站内的动态按钮CSS使用CSS的技术，网页便会给人一种赏心悦目、工工整整的感觉，同时字体的色彩变化也使主页变得更加生动活泼。3动态图JS,HTML+CSS轮播图4框架Bootstrap响应式框架第3章HTML页面结构图（包括主页、内容页等，不同风格的版面都要给出结构图）主页介绍页页脚特色类页和新鲜蔬菜类页页脚<body><!-header-top-><divclass="header-top"id=,header"><divclass="container"><divclass=,row02<divclass=,wowbounceInLeftcol-md-6col-sm-6col-xs-12,><div><divclass=",wowbouncelnRightcol-md-6col-sm-6col-xs-12,><formclass="navbar-formnavbar-right,><divclass="form-group"style=,position:relative;<inputtype="text"class=,form-control"PIaCehOlder="请输入例想搜索的内容"><iclass=,searchglyphiconglyphicon1search"><i><div><buttontype=',submit"class=',btnbtn-default”>搜索<button><form><div><div><div><div><1一导航条一）<navclass=,navbarmynav"><divclass="container">< !-BrandandtogglegetgroupedjForbettermobiledisplay<divclass="navbar-headerj,j<buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false”"<spanclass="sr-only">Togglenavigation<span><spanclass="icon-bar,><span><spanclass="j.con-bar"x/span><spanclass=,icon-bar,><span><button><aclass="navbar-brand"href="#"><imgclass=,logo"src=,imgslogo3.png"alt=",><a><div>< !-CollectthenavIinksjforms,andothercontentfortoggling-><divClass=nCollapsenavbar-collapse"id="bs-example-navbar-collapse-1,><ulclass="navnavbar-navnavbar-right,><li><aclass=,active"href="index.html,><a><li><li><ahref=',htmlwenchuanghtrn>>火锅介绍<axli><li><ahref=,htmlhotel.html"2fe<axli><li><ahref=',htmlfood.html”>新鲜蔬菜类<a><li><li><ahref="htmlmessage.html'>留言板<a><li><ul>< div><!-/navbar-collapse一-><div><!-/.container-fluid-><nav><!-一轮播图-><divid="carousel-example-generic"class=',carouselslide"data-ride="carousel">< !-Indicators-><olclass=,carousel-indicators,>JIidata-target="#carousel-example-generic"data-slide-to=',0"class="active,><li><lidata-target="#carousel-example-generic"data-slide-to=,l,><li><lidata-target="#Care)USeI-example-generic"data-slide-to=,2,><li><ol>< !-Wrapperforslides->< diclass="carousel-inner"role="listbox"2<di£class=,itemactive"2<imgsrc="imgsl.png"alt=".,><div>LdiVclass=,item11><imgstyle=,margin0auto;height478x;"src="imgs2.png"alt="."><div>LdilCIaSS=HitemH<imgstyle=,margin:0auto;height:478x;src=2imgs3.png"alt=',."><div><div><!-Controls-><aclass=,leftcarousel-control"href="#carousel-example-generic"role=,button"data-slide="prev"<spanclass=',glyphiconglyphicon-chevron-left"aria-hidden="true"><Zspan><spanclass="sr-only">Previous<span><a><aclass="rightcarousel-control"href="#Care)USeJ-example-generic”role="button”data-SIide="next”)<divclass="col-md-6col-sm-6,><P>鸭肠<p><imgsrc=',imgs12.png"alt=""><P>鸭肠是火锅的标配，咀嚼间每一口都是爽脆潦味十几秒就出锅的毛肚上丰富的蘸料，舌头面对它时<p><div><divclass="col-md-6col-sm-6,>JP>月巴牛卷<P<imgsrc=',imgs13.png"alt=""><P>火锅中爆款C位还有“肥牛卷”，不管你是什么锅底，只要有它，样样有滋味，吃上两盘，瞬间回本！口感<p><div><div><div><divclass=",col-md-6"><divclass=,row"><divclass=,col-md-6col-sm-6,><p>麻辣牛肉<p><imgsrc=',imgs14.png"alt=""><P>七八种香料腌制而成，辛辣微麻的味道完全进入肉里，涮熟放入口中，像一颗美味Zha弹一样轰炸味蕾一<p><div><divclass=,col-md-6col-sm-6,>jp>¾月土<P1imgsrc=',imgs15.png"alt="J'2<P>毛肚，千层肚色泽天然，口感厚实，在红油锅里七上八下的涮一涮，爽脆的毛肚浸透了红油的麻辣，吃在嘴里脆嫩弹牙、<p><div><div><div><div><buttonclass=,btnbtn-defaultbtn-block">更多</button)<div><div><!-Footer-<divclass=,footer"2<divclass="container"><pclass="text-center">七掌柜火锅<P><div><div><!-返回顶部<divclass="rightFix"><script>newIIOII().init();$(WindOW),scroll(function()if($(this).scrollTop()>500)$(,.goTop,).fadeln();else$(,.goTop,).fadeut();)$(,.goTop,).click(function()$(,htmljbody').animate(ScrollTop:0j500)<script><body><html>第5章代码及注释主页：CSS代码:.introh3color:#c42a2a;).intropline-height:30px;).introimgwidth:100%;).productbackground-color:#c42a2a;).product.navdisplay:flex;justify-content:center;flex-wrap:wrap;margin:20px0;).product.navliwidth:120px;text-align:center;).product.navacolor:#eee;).product.nava:hovercolor:#000;).productptext-align:center;margin-top:20px;color:).productimgwidth:100%;border-radius:5px;*opacity:0.5;*/transition:Is;).productimg:hoveropacity:1;)*about*/.aboutimgmargin:30px0;transition:Is;).aboutimg:hovertransform:translateY(-20px);).aboutliline-height:30px;)/jpar*/.parbackground-color:#c42a2a;color:#fff;).parh4border-left:3pxsolid#c42a2a;margin-left:15px;text-indent:10px;).parh4acolor:)parimg*width:100%;*/height:180px;border-radius:5px;第6章网站测试结果1、PC端测试结果七掌柜火锅七摹柜品牌成立以通过长W厢准培训.30S敦学和以请新的方式，塔养出一大枇脸木翎昨*三.精运营的人才队伍，Sl力于帮助加源商开业指导.店a联持以及日焦婚a,赖现服务的骨干力*,瑜保侬客户w.零基础也能完全做到开业经营.2、移动端测试结果七掌柜火锅七掌柜品牌成立以来，通过长期精准培训、实践教学和以老微F的方式，培养出一大批阑支术、会操作、善管理、精运营的人才队伍，致力于帮助加盟商开业指导、店面扶持以及日常维护，是实现服务的骨干力量，确保加盟客户“零经验、零基础”也能完全做到生营。七掌柜不但传承了巴蜀传统火锅文化，体现了传统火锅的嘛、辣、鲜、香”等特点，还将科学、营养、健康、时尚等元素有效而完美的融合在一起。主营产品：火锅、自助火锅、火锅串串、市井火锅。七掌柜自助火锅作为眉山市香质匚餐饮管理有限公司主打实第7章项目计划及分工1、项目计划表日期:项目组长：班级:进程第14周(5.23-5.29)第15周(5.30-6.5)第16周(6.6-6.12)第17周(6.13-6.19)负责人项目计划IIXXX总体方案XXX效果图XXX首页IIIXXX披萨页面IIIXXX甜品页面XXX汉堡包页面U一XXX红酒页面XXX分享照页面IXXX热门菜单页面一PXXX联系我们匚XXX设计说明书XXX系统测试XXX项目展示IIXXX2、分工完成情况XXX：项目计划，网站页面。XXX：总体方案，效果图，公众页面，系统测试。XXX：设计说明书，项目展示。第8章总结通过此次设计与开发，把所学的知识进行融会贯通，通过遇到的难题和想办法去解决它，从而获取新的知识，边用边学，完善自己的知识体系结构。但由于时间仓促，团队经验的不足，还不能让这个系统各个功能都做到完美，代码较为复杂，我相信我还要有一段漫长的研究过程，不过通过这次的写作和系统设计，我觉得我真的学到了很多，给我以后的工作中提供了很大帮助和经验。
