简单生活网上买菜系统静态网页设计与制作毕业设计论文

西南科技大学高等教育自学考试（信息管理与服务）毕业论文前言当今世界已进入信息时代，Internet成为21世纪最受关注的行业之一,它的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨大的成就，为网站开发提供了很好的技术支持。网站已经成为现阶段众多企业不可或缺的网络营销平台，互联网应用规模正不断扩大。其中，特别是中小型企业，对于网络平台搭建的需求相当的迫切。各大门户网，企业网都在WEB2.0的标准上,采用CSS+DIV来布局网站，所以才有了此次的选题。论文详细论述了一个基于公司网站的开发的设计过程。在技术上，采用了Photoshop网站开发工具，以HTML的超大功能结合JavaScript的客户端语言，以增加网站的动态效果。这样的构造有利于以后对网站系统开发的把握，并给以后的开发积累一定的经验，提升编程能力。其中，最主要的就是介绍和展示DIV+CSS在网页中的实用和魅力，还有Bootstrap这个框架给网站建设带来的便利。随着互联网在中国的发展，越来越多的卖菜商把传统的卖菜移植到互联网上，从而形成了当今网上餐饮蓬勃发展的趋势。本网上买菜系统设计属于小型电子商务系统，设计能够满足中小型餐饮店及家庭的网上售菜需要。本网上订餐系统的设计充分考虑了用户的视觉感受，努力做到界面简单明了，功能相对完善，主要针对人群为广大的宅男宅女和上班时间比较忙的上班族,所以本网站在更新的时候会注意多涉及这部分人群的兴趣与爱好进行改进设计,前景看好。论文组织如下：首先阐述了该系统的开发背景、意义，详细介绍了div+css理论知识；其次介绍了相关的开发工具及技术基础；接着对网站的需求进行了分析，并提出了具体的设计方案；然后展现了整个系统的具体实现，包括网页的设计和连接，各功能模块的实现；最后对该网站进行了严格的测试。第1章网站设计背景1.1web概述1.1.1认识WEBweb本意是蜘蛛网和网的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本（hypertext）、超媒体（hypermedia）、超文本传输协议（HTTP）等。Web(WorldWideWeb，简称WWW，又称万维网)是目前Internet上应用最广泛也是最重要的信息服务类型，它的影响已经进入了Internet上 的广告、新闻、电子商务和展示信息等各个服务领域。Web采用浏览器/服务器（B/S）工作模式，其运作模式可以描述为：请求→处理→应答。Web以超文本标记语言HTML(HyperTextMarkupLanguage)与超文本传输协议HTTP(HyperTextTransferProtocol)为基础，通过浏览器为用户提供方便友好的信息浏览界面。Web将位于全世界互联网上不同网址的相关信息有机地编织在一起。在Web服务方式中，信息以页面（或称Web页）的形式存储在Web服务器中，这些页面采用超文本的方式对信息进行组织，通过链接将一页信息链接到另一页信息。这些相互链接的页面既可以放置在同一台主机上，也可以放置在不同的主机上。页面到页面的链接信息由统一资源定位器URL(UniformResourceLocator)维持。用户通过客户端应用程序（即浏览器）向Web服务器发出请求，服务器根据客户端的请求将保存在服务器中的某个页面返回给客户端，浏览器接收到页面后对其进行解释，最终将信息以图、文、声并茂的形式呈现给用户。Web服务的特点在于高度的集成性，它能够实现不同类型的信息（如文本、图像、声音、动画和视频等）和服务（如New、FTP、Telnet、Gopher及Mail等）的无缝链接，特别适合于广域网中信息的组织、检索与显示。1.1.2认识WEB2.0标准“Web2.0”的概念开始于一个会议中，展开于O'Reilly公司和MediaLive国际公司之间的头脑风暴部分。所谓互联网先驱和O'Reilly公司副总裁的戴尔•多尔蒂(DaleDougherty)注意到，同所谓的“崩溃”迥然不同，互联网比其他任何时候都更重要，令人激动的新应用程序和网站正在以令人惊讶的规律性涌现出来。更重要的是，那些幸免于当初网络泡沫的公司，看起来有一些共同之处。那么会不会是互联网公司那场泡沫的破灭标志了互联网的一种转折，以至于呼吁“Web2.0”的行动有了意义？我们都认同这种观点，Web2.0会议由此诞生。WEB标准不是某一个标准，而是一系列的标准集合，网页主要是由三部分组成：结构（structure）、表现（presentation）、和行为（behavior）。对应的标准也分为三个方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScripr等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA(EuropeancomputerManufacturersAsscoiation)的ECMASscript标准。1.2结构标准语言1.2.1XMLXML是TheExtensibleMarkupLanguage(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考WWW.W3.ORG/TR/2000/REC-XML-30001006。和xthml一样，xml同样是来源于SGML，但是xml是一种能定义其他语言的语。xml最初设计的目的是弥补html的不足，以强大的扩展性妈祖网络信息发布的需要，逐渐用于网络数据的转换和描述。关于xml的好处和技术规范描写，这里就不说了有更多的数据可供参考。xhtml是TheExtensibleHapertextMarkupLanguage可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日发布的XthML1.0，xml虽然是数据转换的能力强大，完全可以替代HTML，但是面对成千上万的已有的站点，直接串通XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了xhtml。简单的说，建立xhtml的目的就是实现XHTML向xml的过渡。1.2.2表现标准语言CSS是CaseadingStyleSheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代表格式布局、帧和其它表现的语言。纯CSS布局与结构式xhtml结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。1.2.3行为标准DOMDOM是DocumentObjectModel文档对象模型的缩写。根据W3C规范/dom/,DOM是一种浏览器，平台，语言的借口，使得你可以访问页面其它的标准组件。简单的理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。ECMAScriptECMAScript是ECMA（EuropeanComputerManufacturersAssociation)制订的标准脚本语言JavaScript。目前推荐遵循的是ECMAScript262。CSS是CaseadingStyleSheets的简称。实际上它是一组样式。我们对CSS样式并不陌生，在网上冲浪时，几乎随时都在与CSS打交道，在网页上没有使用过CSS的网页可能不好找，不管你用什么工具软件制作网页，都在有意无意的使用CSS。用好CSS能使你的网页更加的简练，为什么同样内容的网页，有的人能做出及时KB，而高手做出来的只有十几KB，CSS在其中的作用是不言而喻的。第2章技术支持2.1HTMLHTML（HyperTextMarkupLanguage），超文本标记语言，是一种专门用于创建Web超文本文档的编程语言，它能告诉Web浏览程序如何显示Web文档（即网页）的信息，如何链接各种信息。使用HTML语言可以在其生成的文档中含有其它文档，或者含有图像、声音、视频等，从而形成超文本。超文本文档本身并不真正含有其他的文档，它仅仅含有指向这些文档的指针，这些指针就是超链接。HTML是用来制作网页的语言，网页中的每个元素都需要用HTML规定的专门标记来定义。在7.3节将介绍使用HTML进行网页设计。要让设计者在网络上发布的网页能够被世界各地的浏览者所阅读，需要一种规范化的发布语言。在万维网(WWW)上，文档的发布语言是HTML。标记语言是一种基于源代码解释的访问方式，它的源文件由一个纯文本文件组成，代码中由许多元素组成，而前台浏览器通过解释这些元素显示各种样式的文档。换句话说，浏览器就是把纯文本的后台源文件以赋有样式定义的超文本文件方式显示出来。HTML和网络是紧密相连的，HTML语言的发展和浏览器的支持是密不可分的，在20世纪90年代网络刚刚兴起时，多种浏览器同时流行于世界各地，它们支持HTML语言的标准也各不相同，这样限制了HTML标记语言本身的发展，逐渐，W3C网络标准化组织联手一些较为流行浏览器开发厂商一同定义HTML标准，并且力推浏览器解释语言和显示方法的统一。到今天，IE浏览器随着WINDOWS操作信息系统的绝对垄断地位占据着主流市场，这也在另一方面为HTML标准的统一起到了关键作用。2.2JavaScriptJavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。在1995年时，由Netscape公司的BrendanEich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。JavaScript脚本语言具有以下特点:1.脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。2.基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。3.简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。4.动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。5.跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖JavaScript在客户端进行支持。随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。2.3PhotoshopAdobePhotoshop，简称“PS”，是由AdobeSystems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。2003年，AdobePhotoshop8被更名为AdobePhotoshopCS。2013年7月，Adobe公司推出了最新版本的PhotoshopCC，自此，PhotoshopCS6作为AdobeCS系列的最后一个版本被新的CC系列取代。Adobe支持Windows操作系统、安卓系统与MacOS，但Linux操作系统用户可以通过使用Wine来运行Photoshop。从功能上看，该软件可分为图像编辑、图像合成、校色调色及特功能特色效制作部分等。图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等；也可进行复制、去除斑点、修补、修饰图像的残损等。图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路；该软件提供的绘图工具让外来图像与创意很好地融合。校色调色可方便快捷地对图像的颜色进行明暗、色偏的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。特效制作在该软件中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由该软件特效完成。Photoshopcs6是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。1.文字处理更加方便2.增加的图层集使图层管理更有序。3.新增图像功能：图像的剪切和剪裁更加方便。4.所有工具的选项板改进为工具选项栏放置在工作区顶部，方便先项参数的设置。5.为了更方便地用路径绘画，改进增加了几何形状工具，通过选择工具的不同工作模式，可创建路径、几何形状或几何填充区，使得矢量绘图功能得到了加强。2.4Bootstrap2.4.1简介Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师MarkOtto和JacobThornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的BreakingNews都使用了该项目。2.4.2特点Bootstrap是基于jQuery框架开发的，它在jQuery框架的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。2.4.3组件Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。2.4.4Javascript插件Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：模式对话框、标签页、滚动条、弹出框等。2.4.5定制自己的框架代码可以对Bootstrap中所有的CSS变量进行修改，依据自己的需求裁剪代码。2.4.6BootstrapLessLess是一个CSS预处理器，让CSS具有动态性。另一方面，Bootstrap是一个快速开发WebApp和站点的工具包。这样，您可以在CSS中使用Bootstrap的Less变量、mixins（混合）和nesting（嵌套）。2.5DreamweaverDreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的RoundtripHTML技术允许用户随意导入HTML文档而无需重新设置代码格式。Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种：1.文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。2.装载器中包含一些打开和关闭常用检查器和模板的按钮。3.对象工具栏包含创建不同类型的对象（例如图象、表格和层等）的按钮。4.属性检查器显示选定对象的属性。5.快捷菜单可以使用户对当前选择或区域快速执行某些命令。6.可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。2.6DIV＋CSS2.6.1DIV+CSS简介CSS是英语CascadingStyleSheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。以下是DIV+CSS的特点简介：1.符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。2.支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。3.搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。4.样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。5.CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。6.表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。2.6.2级联样式表简介有三种方法可以在站点网页上使用样式表：1.将网页链接到外部样式表。2.在网页上创建嵌入的样式表。3.应用内嵌样式到各个网页元素。4.每一种方法均有其优缺点：当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表—中作一次更改—而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以.css做为文件扩展名，例如Mystyles.css。当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的<HEAD>标记符内。嵌入的样式表中的样式只能在同一网页上使用。使用内嵌样式以应用级联样式表属性到网页元素上。如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。第3章网站总体分析和设计3.1网站开发的需求分析3.1.1需求分析背景随着21世纪网络信息时代的到来，现代社会都是快速高效率的Internet来传播大量信息资源。人们通过IE浏览信息，当然这种方式也是最常用的，这种方式的需求形成了电子商务。它的是指简单、快捷、低成本的电子通讯方式，买卖双方不出面也可以进行各种商贸活动。电子商务真正的发展将是建立在Internet技术上。近年来，由于互联网技术的飞速发展及其逐步普及，企业对信息进行网络化管理的条件已经日趋成熟，而传统的通过电话和传真来处理信息的传统方式已经越来越难以满足企业的需求。建立基于网络的管理和销售信息系统，成为企业提高效率、降低成本、完善服务的有力保证。而对于餐饮业，由于一个行业本身的特性，它的流通性是非常高的，所以更对企业的效率提出了更高的要求。随着越来越多的人接受了电子商务这种便捷、快速的交易形式，网上订餐的顺势而出很快受到了大家的欢迎。互联网的应用以普及千家万户,这为网络订菜提供了良好的发展空间。同时，网上订菜服务的直观、有效、便捷等优点是传统的电话订菜业务无法比拟的。网络订餐可充通过色彩、图片、说明、设置动画加强了产品了宣传，大大达到了卖菜行业的“色型”要求。需求结果：生成8个页面，index.html网站首页；aboutour.html关于我们；digndan.html订单；glylogin.html管理员登录;home.html用户位置定位；login.html--用户登录；problem.html--常见问题；registera.html--用户注册；sjzs.html--商家菜品展示。

3.1.2网站用户活动分析商家活动分析商家在此过程中首先进行登录，登录成功后跳转到自家店铺，在自己店铺中可以进行添加蔬菜、删除蔬菜、修改蔬菜、确认用户提交的订单、并可以查看订单一系列操作。如图3.1商家活动分析图：图3.1商家活动分析图用户活动分析用户如果不登录网站也可以直接查看商家展示的各种菜品，当用户想选购菜品时，需要进行登录，再进行下单。登录后的用户可以选购商品、搜索商家等操作。如图3.2用户活动分析图：

图3.2用户活动分析图管理员活动分析管理员通过登录后，可以在此系统中实现许多操作，比如管理商家，审查商家是否合格，添加商家，审核菜品等。如图3.3管理员活动分析图：图3.3管理员活动分析图3.2网站的总体设计与传统媒体不同，网页除了文字和图像以外，还借助由代码语言编程所实现的各种交互式效果，增加了网页界面的生动性和复杂性，也使得网页设计者需要考虑更多页面元素的排版、优化。一般来说，网页的界面主要由下面几个因素构成：3.2.1文字文字元素是信息传达的主体部分。网页中的文字主要包括标题、信息、文字链接、几种主要形式。标题和传统媒体中信息传达的基本作用相同，是内容的简概说明一般比较醒目、优先编排。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的字体、大小、颜色和排布对页面整体设计影响极大。我所使用的文字是宋体12号，因为这样看得比较清楚，使整个页面整洁，网页中都普遍的使用，让顾客一看就忍不住继续看，所以在此我选择12号宋体作为网页的主体文字样式。3.2.2图形图形在网页界面中具有重要作用。合理的运用图形，可以生动直观、形象地表现设计主题。网页中常用的图形格式包括jpg和gif，这两种格式压缩比高，得到了规范浏览器的支持，下载速度快，具有跨平台的特性，不需要浏览器安装插件即可直接阅览。图形元素包括标题、背景、主图、链接图标四种。我所使用的图片主要是自己收集的比较精美。如下图3.4图案展示：图3.4图案展示3.2.3页面版式版式是网页界面设计的重要组成部分，它将文字、图形等视觉元素进行组合配置，使页面整体视觉效果美观和谐，简单大方，便于阅读，实现信息传达的最佳效果。如下图3.5页面版式：图3.5页面版式3.2.4色彩彩色网页比单色网页更具吸引力；色彩本身具有象征作用。如图3.6色彩：图3.6色彩3.3网站的具体设计3.3.1链接设计网页中的链接采用了绿色为背景，字体为白色，鼠标指向时不会产生下划线。如图3。7链接设计：图3.7链接设计3.3.2logo的设计Logo以绿色蔬菜为原型，配以绿色，是绿色蔬菜的诠释，符合网站的总体风格及主题。如图3.8logo设计：图3.8logo设计3.3.3导航设计网站的导航栏目可以让用户对网站的内容及信息一目了然。导航分为：注册、登录、找客服、常见问题、关于我们。首先采用div布局，里面嵌套ul形式然后相关css部分。效果如图3.9导航设计：图3.9导航设计第4章网页的实现4.1首页实现4.1.1首页描述由于首页完整给人的形象应该是专业、大方，所以首页的设计和布局我采用大方简单又不失活泼的原则。首页整体用4个大的DIV里面包含4个部分。Div设置效果为：总体都设置了宽度，居中格式，背景颜色及背景图片，其他还有内边距，高等。内容界面是一个网站走向成功道路上必不可少的因素。网站的内容代表着一个好网站的素质和形象，所以应该表现的大气、端庄而且精细。还更要表现出一个网站应该有的朝气和活力。因此我首先选中色彩搭配比较大方，整体布局比较清晰简洁的内容模式。在首页的版面，先是用Photoshop对网站模板进行切片，然后用DIV+CSS进行排版。首先自然映入颜面的是logo设计，一个特殊于类似植物的图标加上简单生活几个字，突出我们主题，此网站的目的就是给人们的生活带来便利。页面效果如下图4.1所示：图4.1页面效果根据因为浏览者在阅读时候经常采用从上到下，从左到右的习惯，主体内容中，我将“摊点”和“商家”各自放一块，“logo”放在了上面的位置而且和搜索框一起完美搭配这样能更好地吸引浏览者的眼球，同时也体现网站的专业、得体。底部不仅能够展示网站的各种优点，而且突出显示出网站整体结尾的完美，看着简介而又大方得体，真是赏心悦目呀！整个界面采用近一年流行设计“平面化风格”，既符合设计趋势，又不失大体。4.1.2首页导航及底部代码实现<body> <divid="navbar-top"class="navbar-topnavbarnavbar-defaultnavbar-fixed-top"> <divclass="container"> <pclass="navbar-textnavbar-header"> <ahref="">成都   </a> <ahref="">物贸中心宿舍   </a> <ahref="html/home.html"class="headercs">[切换地址]</a> <spanclass="glyphiconglyphicon-menu-down"></span> </p> <pclass="navbar-textnavbar-righthidden-xs"> <ahref="html/registera.html">注册   </a> <ahref="">|   </a> <ahref="html/login.html">登录   </a> <ahref="">找客服   </a> <ahref="html/problem.html">常见问题   </a> <ahref="html/aboutour.html">关于我们</a> </p> </div> </div> <divid="top-header"> <divclass="container"> </div> </div> <divid="content"> </div> <divclass="footer"> <divclass="container"> <divclass="col-md-3col-md-offset-1footer_content"> <ahref="html/problem.html"> <h3>用户帮助</h3> <p>常见问题</p> <p>用户反馈</p> <p>诚信举报</p> <p>线上体验店</p> </a> </div> <divclass="col-md-3col-md-offset-1footer_content"> <ahref=""> <h3>获取更新</h3> <p>iphone/Android</p> <p>简单生活新浪微博</p> <p>公众微信号：简单生活</p> </a> </div> <divclass="col-md-3col-md-offset-1footer_right"> <ahref="html/aboutour.html"> <h3>公司信息</h3> <p>关于简单生活</p> <p>媒体报道</p> <p>加入我们</p> </a> </div> </div> </div></body>4.2其他页面实现其他页面设计整体风格跟主页布局风格一致，就只是内容布局格式不一样，更加直观、简洁明了，突出统一性。其他页面整体风格都源于首页的改装，在每个商家页面中附加了留言内容给顾客留下了直接与卖家沟通的交流机会，首先即时沟通直接给人温暖的感觉，专业的一对--沟通模式，让顾客更深层次的了解卖家，更加有资质，实力，专业，精心为用户服务。首页的作用通过各种产品的展示让顾客即时了解本系统用处，能给顾客带来的便利，所以拥有优秀的网页设计是公司成功的关键，优秀的网站首页展示不仅仅是公司的完美的信息而且表现出公司的实力。4.2.1关于我们页面图4.2.关于我们页面，用户可在此页面看到本系统的用处，用法，公司发展历程，详细了解此系统的各种用处。图4.2关于我们页面关于我们页面主要部分代码实现：<divclass="aboutour_contentcontainer"> <divclass="rowaboutour_a"> <divclass="col-md-4"> <p>您现在的位置：关于我们</p> <p>本项目是一个利用互联网的足不出户的特点，实现的一个在线购买蔬菜的平台，并且提供手机端的APP实现订购。用户可以从购买到付款都在网上实现。我们提供食材的清洗和切割，并且支持送货上门服务。让用户省心、放心、开心。</p> <p>我们的目标是创办一家能服务全成都市的在线买菜服务商，使得顾客享受优惠，便利。食材、配料提供商能够直接出售产品，我们负责配送和提供平台。未来我们将覆盖全川各大市级以上城市，并可实现当日配送。</p> </div> <divclass="col-md-7col-md-offset-1"> <imgclass="col-md-12"src="../image/apic8516.jpg"alt=""> </div> </div> </div>4.2.2订单图图4.3订单图：用户选好菜品后可进行在线支付，下订单，同时可以对商家留言。

图4.3订单页面订单页面主要部分代码实现：<divclass="dingdan_contentcontainer"> <p>河马叔叔新鲜蔬菜店>确认购买</p> <divclass="row"> <divclass="col-md-6"> <divclass="dingdan_left"> <ul> <liclass="row"> <h3class="col-md-3">菜品名</h3> <h3class="col-md-4col-md-offset-3">价格/重量</h3> </li> </ul> <ul> <liclass="row"> <pclass="col-md-3">红辣椒</p> <pclass="col-md-4col-md-offset-3">15元/5斤</p> </li> </ul> <ul> <liclass="row"> <pclass="col-md-3">红辣椒</p> <pclass="col-md-4col-md-offset-3">15元/5斤</p> </li> </ul> <ul> <liclass="row"> <pclass="col-md-3">红辣椒</p> <pclass="col-md-4col-md-offset-3">15元/5斤</p> </li> </ul> <ul> <liclass="row"> <pclass="col-md-3">红辣椒</p> <pclass="col-md-4col-md-offset-3">15元/5斤</p> </li> </ul> <ul> <liclass="row"> <pclass="col-md-3">红辣椒</p> <pclass="col-md-4col-md-offset-3">15元/5斤</p> </li> </ul> </div> </div> <divclass="col-md-5col-md-offset-1"> <divclass="dingdan_right"> <divclass="dingdan_right_contentrow"> <h3class="col-md-12dingdan_shdz">送货地址</h3> <textareaclass="col-md-11"name=""id=""cols="40"rows="6"></textarea> <pclass="col-md-4dingdan_shdzliuyandingdan_liuyan">给商家留言：</p> <textareaclass="col-md-7liuyan"name=""id=""cols="35"rows="6"></textarea> <pclass="col-md-6liuyandingdan_shdz">您共需要付款：100元</p> <divclass="col-md-3liuyandingdan_fukuan"> <ahref="">去付款</a> </div> </div> </div> </div> </div> </div>4.2.3管理员登录图4.4管理员登录：可以执行用户管理、商家添加、商家查询、菜品类别添加、菜品类别查询、菜品信息添加、菜品信息查询、订单管理、修改密码、注册用户管理、留言管理、系统公告、站长申明、联系站长、站长联系查询、数据备份功能图4.4管理员登录页面管理员登录页面实现和订单页面实现差不多，这里不再累述。以下页面实现和上相同。4.2.4地理定位页面图4.5地理定位页面：可定位到用户当前位置，进而展示用户周围的蔬菜店。图4.5地理定位页面4.2.5用户登录页面图4.6用户登录页面：注册过的用户可进行登录，方便之后进行下订单和支付。图4.6用户登录页面4.2.6常见问题页面图4.7常见问题页面：用户可以在此页面看到各种常见问题，方便更好的使用本系统。图4.7常见问题页面4.2.7商家菜品展示页面图4.8商家菜品展示页面:用户点击进入一个商家后，可以详细地看到商家的菜品展示。

图4.8商家菜品展示页面4.2.8注册页面图4.9注册页面：首次使用的用户需要进行注册，注册成功后才能进行购买菜品，并在线支付。图4.9注册页面第5章网站的测试编码完成后，就要对源程序进行测试。软件测试的目的在于争取在第一时间发现程序中的错误，以便于及时纠错，增加软件可靠性。它在整个系统设计实施过程中占有相当的分量。测试是软件开发时期的最后一个阶段，也是软件质量保证中至关重