基于bootstrap框架美食网站的设计与实现 - 七掌柜火锅项目.doc

PAGE3

《七掌柜火锅》网站设计说明书

开发人员：xxx、xxx

人员分工安排：

项目组长(xxx)

负责需求的总体把握，和网站的总体策划。

界面设计工程师(xxx)

承担网站首页界面和各子页界面的设计

开发工程师（xxx）

承担网站编码工作

测试工程师（xxx）

承担整体网站测试工作

说明文档+项目演示(xxx)

网站说明文档的编写+项目演示PPT

目录

TOC\o1-3\h\z\u第1章项目需求和背景 3

第2章网站规划设计说明 3

第3章HTML页面结构图 8

第4章页面DIV结构代码 10

第5章代码及注释 11

第6章网站测试结果 16

第7章项目计划及分工 17

第8章总结 18

-PAGE21-

项目需求和背景

意自助火锅店面，未来的市场前景好，还有一个不可或缺的因素，就是消费者消费的起。大家看到上面的两点，可能会有一些疑惑，就是自助火锅店面，既然可以这样满足消费者的需求，那么是不是价钱昂贵呢?答案自然是否定的，即使火锅店面可以提供的服务比较好，但是在市场上来看，消费者还是可以消费的起的。其中一个方面的原因是目前消费者的消费水平，是越来越高，还有一个原因是自助火锅店面的产品价钱并不是非常贵的，因此自助火锅的市场前景还是比较好的。

第2章网站规划设计说明

1、网站规划

网站名称：七掌柜火锅

网站主题：通过网站宣传，树立企业形象，提高七掌柜火锅知名度。

输入法网站语言：简体中文

网站风格：以红色调为主，给人以一种欢快的感觉，主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题，表现网站的个性和情趣，办出网站的特点。

（1）首页设计

页头：准确无误的标识临沂旅游。

页面：各种食品的展览。

（2）导航设计

寻味意大利科技：

首页、火锅介绍、特色类、新鲜蔬菜类、留言板

2、形象设计

Logo：

3、网站色彩

(1)网站主色调

该网站的主色彩是红色系列，配以白色背景，文字为黑/白，红色是一种较具刺激性的颜色，它给人以燃烧和热情感。

4、技术方案

表2技术方案表

序号

网站组成

使用技术

效果说明

1

1、网站所有文字页面

2、静态图片

3、表格

HTML

出版在线的文档，其中包含了标题、文本、表格、等内容。

2

网站内的动态按钮

CSS

使用CSS的技术，网页便会给人一种赏心悦目、工工整整的感觉，同时字体的色彩变化也使主页变得更加生动活泼。

3

动态图

JS，HTML+CSS

轮播图

4

框架

Bootstrap

响应式框架

第3章HTML页面结构图

(包括主页、内容页等，不同风格的版面都要给出结构图)

主页

介绍页

特色类页和新鲜蔬菜类页

留言页

第4章页面DIV结构代码

!DOCTYPEhtml

htmllang=en

head

??metacharset=UTF-8

??metaname=viewportcontent=width=device-width,initial-scale=1.0

??title首页/title

??linkhref=css/bootstrap.min.cssrel=stylesheet

??linkrel=stylesheethref=css/animate.css

??linkrel=stylesheethref=css/common.css

??linkrel=stylesheethref=css/index.css

??scriptsrc=js/jquery.min.js/script

??scriptsrc=js/bootstrap.min.js/script

??scriptsrc=js/wow.min.js/script

/head

body

??!--header-top--

??divclass=header-topid=header

????divclass=container

??????divclass=row

????????divclass=wowbounceInLeftcol-md-6col-sm-6?col-xs-12

????????/div

????????divclass=wowbounceInRightcol-md-6col-sm-6?col-xs-12

??????????formclass=navbar-formnavbar-right

????????????divclass=form-groupst