美食园网站设计报告书

《网页设计与网站建设》课程卷二实践考核

网页设计与网站建设

设计说明书

设计题目：美食园网站设计与实现

*名：***

学号： ***********

班级： 08信管2

指导教师：***

完成日期： 2010年12月15日

美食园网站的设计与实现

一、概述

电子商务在我国得到了快速的发展，它是数字化商业社会的核心，是未来企业发展、生存的主流方式。因此新的社会需求要求我们大学生应该具备自己设计开发网站的能力，在本学期的学习中，我已经清晰的了解了建设电子商务网站的知识结构，从电子商务网站的概念、网站的外观设计和内容编辑、Web 应用程序开发等三大方面的内容全面的学习掌握了本学期商务网站的学习设计。

本网站是以与食品相关的系列产品为基准进行建立的，因此将它命名为“美食园”，这样别人一看就很清楚是个什么网站，并且便于记忆。将“脑白金”的理念贯彻到命名当中，以彻底的“俗”让更多的人记住它。

在本次的网站制作过程中，我全面运用了本学期学习的《电子商务网站建设教程》中的各项知识点，从开始的建站点、网页文件基本操作到层与表格的运用、超级链接与框架网页运用、行为与时间轴应用、表单应用再到VBScript脚本语言运用，接着就开始了动态网页的制作，其中包括了安装IIS环境和建数据库连接，实现登录、注册、改密码功能。最后建设商品信息维护系统，包括了商品信息输入、修改、查询功能，并在集成购物车系统中实现商品搜索与购物车等功能。

我这次的设计主题是开发建设一个关于介绍食品厨艺、美食文化典故、食疗药膳、营养健康、厨房餐厅、国外料理等的全面性美食网站，同时作为一个电子商务网站，其最重要的功能当然还是产品交易，在本网站中有中华各地特色食谱、美食文化和健康养生书籍、厨房餐厅图集、各种食品材料和特色菜的买卖。希望通过网站大家即可订购餐点或交流做菜心得，一圆自己的创业梦甚至一展自己的设计天份，并向大家推广新式售卖模式，同时亦为某些创业者提供测试市场的平台。

预期本次的网站制作将会满足客户的基本需求，网站能够实现基本的信息浏览、查询、搜索等功能，为网站的访问者提供全面舒心的服务。

二、项目需求分析

在这个市场经济的时代，网易型的网站相信都是以利益为其宗旨的，但是“美食园”是一个给大学生实践的平台，这就注定了它的宗旨不能够是唯利是图。无论到什么时候，它只能是大学生的利益以及交流为第一宗旨，其次才是网站的商业运行等等。

日前随着科技的进步，人们对于网络的需求将会越来越高，在现在网络已经为人们提供了更加方便快捷的交流、交易方式，各种各样的信息将全会体现在网络上。特别是随着现在的趋势，人们必然会越来越喜欢网上购物，我们网站便是紧紧捉住这一需求——生活离不开食品，建设这一网站满足大家的需求。

对于网站设计来说，不仅应了解该网站要运行什么应用程序，需要如何连接单位现有系统等，还需知道这个网站希望达到什么样的目的，即必须清楚网站的目标市场在那里。这将成为整个网站所有设计思想的基础。无论网站采用何种形式，什么样的外观，提供什么的内容，都要以网站的最终目的为出发点来考虑。

我的客户群体将是非常的广泛，人的生存离不开食品，自然是不分职业、年龄、性别的各个阶层的社会大众都会浏览我们的网站，这样就要求网站设计中注意信息的广泛和丰富性，不过因为是学生设计，我将会更加倾向学生市场，满足大学生的新潮需要。

大学是一个小社会，商业发展的程度也不压于市场经济的发展程度。经济发展必然带了相关产业的发展，然而地理位置、学习时间等等的影响，商品经济的发展受到很大的限制。网上交易就这样孕育而生了，由于没有时间、地理的局限，网上平台得到了很大很快的发展。为了给大家提供一个更好的网上环境，设计一个网上平台，是相当有必要的。

根据交易平台的目的，网站采用C2C的模式，任何个人只要提供有效的证件就可以成功注册。我希望能够将网站做的更加完善，可以让用户自己在这样一个平台上交流买卖，双方可以通过自己的渠道进行协商，达成一致。提到盈利点，尽管网站的宗旨不是纯粹的为了盈利，但网站要运行，也要发展，就需要一定的费用。我希望本网站不仅能够买卖商品，更加可以为大家提供一个浏览了解相关知识的平台。

三、项目总体设计

通过我们详细的需求分析之后，我们形成了项目的总体设计方案，主题是以

食品为主，并附加包括食谱、材料、佐料、蔬果、餐厅、厨房厨具等在内的一系列相关商品信息。网站在设计中充分考虑到了用户的阅读需求，将页面的结构、色调、布局、导航条等都进行了细致的调整，保证用户在阅读是的舒适流畅。

网站的整体架构设计简单图示如下：

在栏目设计中大量应用了布局技巧，通过布局、表格的精确使用，将整个网页的布局更加的明确清晰，栏目的划分中考虑了多方的因素，大标题中加入了小标题，栏目进一步的细化，还充分想到了人们对于对称的接受力，所以，我在栏目的布局中加入了对称结构，使得信息分类更加的清晰明朗。同时，内容中加入了相关的图片、文字、视频、导航条、FLAsh按钮等，将网页的可读性进一步的提高。

导航条的设计中考虑到了各方的因素，根据信息的分类要求，使导航条明确化。在功能的设计中，加入了滚动文字、图片转换、背景音乐、时间轴应用、登录注册功能、商品信息输入、修改、查询功能，并在集成购物车系统中实现商品搜索与购物车等功能。

建设数据库时使用的是Microsoft Office Access 2003，包括了数据库中用户和商品信息表的制作，各表间的关系连接，定义数据源，最后在ＡＳＰ的动态页面中建立到数据库的连接。同时还有IIS环境的配置，创建虚拟目录，建立

站点，最后就是登录、注册、修改密码、信息输入、修改、查询等动态网页的制作。

四、项目详细设计

（一）、前台功能设计

板式

参考大量用类网站，商业化的美食网站，都是采用中规中矩的结构，通过大小不一的方框分解整个页面。

颜色

为了提高阅读的舒适度，颜色应以柔和淡雅的色调为主，在作导航条等反差颜色采用也应以采用柔和淡雅的色调。

建立布局

在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。把所有的素材都整理好（图片，文章，相片），开始布局。最开头是网页的标题和网页的导航栏，中间一大片用于放正文，分为五大板块，下面就是版权信息，友情连接，联系信息。这种布局方式看起来比较的整齐，简洁美观。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。

1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。

2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。