簡(jiǎn)單生活網(wǎng)上買菜系統(tǒng)靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作畢業(yè)設(shè)計(jì)論文

西南科技大學(xué)高等教育自學(xué)考試（信息管理與服務(wù)）畢業(yè)論文前言當(dāng)今世界已進(jìn)入信息時(shí)代，Internet成為21世紀(jì)最受關(guān)注的行業(yè)之一,它的飛速發(fā)展和在全球范圍的普及應(yīng)用正在給人類生活帶來(lái)革命性變化。網(wǎng)絡(luò)技術(shù)的發(fā)展也取得了巨大的成就，為網(wǎng)站開(kāi)發(fā)提供了很好的技術(shù)支持。網(wǎng)站已經(jīng)成為現(xiàn)階段眾多企業(yè)不可或缺的網(wǎng)絡(luò)營(yíng)銷平臺(tái)，互聯(lián)網(wǎng)應(yīng)用規(guī)模正不斷擴(kuò)大。其中，特別是中小型企業(yè)，對(duì)于網(wǎng)絡(luò)平臺(tái)搭建的需求相當(dāng)?shù)钠惹小８鞔箝T戶網(wǎng)，企業(yè)網(wǎng)都在WEB2.0的標(biāo)準(zhǔn)上,采用CSS+DIV來(lái)布局網(wǎng)站，所以才有了此次的選題。論文詳細(xì)論述了一個(gè)基于公司網(wǎng)站的開(kāi)發(fā)的設(shè)計(jì)過(guò)程。在技術(shù)上，采用了Photoshop網(wǎng)站開(kāi)發(fā)工具，以HTML的超大功能結(jié)合JavaScript的客戶端語(yǔ)言，以增加網(wǎng)站的動(dòng)態(tài)效果。這樣的構(gòu)造有利于以后對(duì)網(wǎng)站系統(tǒng)開(kāi)發(fā)的把握，并給以后的開(kāi)發(fā)積累一定的經(jīng)驗(yàn)，提升編程能力。其中，最主要的就是介紹和展示DIV+CSS在網(wǎng)頁(yè)中的實(shí)用和魅力，還有Bootstrap這個(gè)框架給網(wǎng)站建設(shè)帶來(lái)的便利。隨著互聯(lián)網(wǎng)在中國(guó)的發(fā)展，越來(lái)越多的賣菜商把傳統(tǒng)的賣菜移植到互聯(lián)網(wǎng)上，從而形成了當(dāng)今網(wǎng)上餐飲蓬勃發(fā)展的趨勢(shì)。本網(wǎng)上買菜系統(tǒng)設(shè)計(jì)屬于小型電子商務(wù)系統(tǒng)，設(shè)計(jì)能夠滿足中小型餐飲店及家庭的網(wǎng)上售菜需要。本網(wǎng)上訂餐系統(tǒng)的設(shè)計(jì)充分考慮了用戶的視覺(jué)感受，努力做到界面簡(jiǎn)單明了，功能相對(duì)完善，主要針對(duì)人群為廣大的宅男宅女和上班時(shí)間比較忙的上班族,所以本網(wǎng)站在更新的時(shí)候會(huì)注意多涉及這部分人群的興趣與愛(ài)好進(jìn)行改進(jìn)設(shè)計(jì),前景看好。論文組織如下：首先闡述了該系統(tǒng)的開(kāi)發(fā)背景、意義，詳細(xì)介紹了div+css理論知識(shí)；其次介紹了相關(guān)的開(kāi)發(fā)工具及技術(shù)基礎(chǔ)；接著對(duì)網(wǎng)站的需求進(jìn)行了分析，并提出了具體的設(shè)計(jì)方案；然后展現(xiàn)了整個(gè)系統(tǒng)的具體實(shí)現(xiàn)，包括網(wǎng)頁(yè)的設(shè)計(jì)和連接，各功能模塊的實(shí)現(xiàn)；最后對(duì)該網(wǎng)站進(jìn)行了嚴(yán)格的測(cè)試。第1章網(wǎng)站設(shè)計(jì)背景1.1web概述1.1.1認(rèn)識(shí)WEBweb本意是蜘蛛網(wǎng)和網(wǎng)的意思?，F(xiàn)廣泛譯作網(wǎng)絡(luò)、互聯(lián)網(wǎng)等技術(shù)領(lǐng)域。表現(xiàn)為三種形式，即超文本（hypertext）、超媒體（hypermedia）、超文本傳輸協(xié)議（HTTP）等。Web(WorldWideWeb，簡(jiǎn)稱WWW，又稱萬(wàn)維網(wǎng))是目前Internet上應(yīng)用最廣泛也是最重要的信息服務(wù)類型，它的影響已經(jīng)進(jìn)入了Internet上 的廣告、新聞、電子商務(wù)和展示信息等各個(gè)服務(wù)領(lǐng)域。Web采用瀏覽器/服務(wù)器（B/S）工作模式，其運(yùn)作模式可以描述為：請(qǐng)求→處理→應(yīng)答。Web以超文本標(biāo)記語(yǔ)言HTML(HyperTextMarkupLanguage)與超文本傳輸協(xié)議HTTP(HyperTextTransferProtocol)為基礎(chǔ)，通過(guò)瀏覽器為用戶提供方便友好的信息瀏覽界面。Web將位于全世界互聯(lián)網(wǎng)上不同網(wǎng)址的相關(guān)信息有機(jī)地編織在一起。在Web服務(wù)方式中，信息以頁(yè)面（或稱Web頁(yè)）的形式存儲(chǔ)在Web服務(wù)器中，這些頁(yè)面采用超文本的方式對(duì)信息進(jìn)行組織，通過(guò)鏈接將一頁(yè)信息鏈接到另一頁(yè)信息。這些相互鏈接的頁(yè)面既可以放置在同一臺(tái)主機(jī)上，也可以放置在不同的主機(jī)上。頁(yè)面到頁(yè)面的鏈接信息由統(tǒng)一資源定位器URL(UniformResourceLocator)維持。用戶通過(guò)客戶端應(yīng)用程序（即瀏覽器）向Web服務(wù)器發(fā)出請(qǐng)求，服務(wù)器根據(jù)客戶端的請(qǐng)求將保存在服務(wù)器中的某個(gè)頁(yè)面返回給客戶端，瀏覽器接收到頁(yè)面后對(duì)其進(jìn)行解釋，最終將信息以圖、文、聲并茂的形式呈現(xiàn)給用戶。Web服務(wù)的特點(diǎn)在于高度的集成性，它能夠?qū)崿F(xiàn)不同類型的信息（如文本、圖像、聲音、動(dòng)畫和視頻等）和服務(wù)（如New、FTP、Telnet、Gopher及Mail等）的無(wú)縫鏈接，特別適合于廣域網(wǎng)中信息的組織、檢索與顯示。1.1.2認(rèn)識(shí)WEB2.0標(biāo)準(zhǔn)“Web2.0”的概念開(kāi)始于一個(gè)會(huì)議中，展開(kāi)于O'Reilly公司和MediaLive國(guó)際公司之間的頭腦風(fēng)暴部分。所謂互聯(lián)網(wǎng)先驅(qū)和O'Reilly公司副總裁的戴爾?多爾蒂(DaleDougherty)注意到，同所謂的“崩潰”迥然不同，互聯(lián)網(wǎng)比其他任何時(shí)候都更重要，令人激動(dòng)的新應(yīng)用程序和網(wǎng)站正在以令人驚訝的規(guī)律性涌現(xiàn)出來(lái)。更重要的是，那些幸免于當(dāng)初網(wǎng)絡(luò)泡沫的公司，看起來(lái)有一些共同之處。那么會(huì)不會(huì)是互聯(lián)網(wǎng)公司那場(chǎng)泡沫的破滅標(biāo)志了互聯(lián)網(wǎng)的一種轉(zhuǎn)折，以至于呼吁“Web2.0”的行動(dòng)有了意義？我們都認(rèn)同這種觀點(diǎn)，Web2.0會(huì)議由此誕生。WEB標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列的標(biāo)準(zhǔn)集合，網(wǎng)頁(yè)主要是由三部分組成：結(jié)構(gòu)（structure）、表現(xiàn)（presentation）、和行為（behavior）。對(duì)應(yīng)的標(biāo)準(zhǔn)也分為三個(gè)方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對(duì)象模型（如W3CDOM）、ECMAScripr等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)，比如ECMA(EuropeancomputerManufacturersAsscoiation)的ECMASscript標(biāo)準(zhǔn)。1.2結(jié)構(gòu)標(biāo)準(zhǔn)語(yǔ)言1.2.1XMLXML是TheExtensibleMarkupLanguage(可擴(kuò)展標(biāo)識(shí)語(yǔ)言)的簡(jiǎn)寫。目前推薦遵循的是W3C于2000年10月6日發(fā)布的XML1.0，參考WWW.W3.ORG/TR/2000/REC-XML-30001006。和xthml一樣，xml同樣是來(lái)源于SGML，但是xml是一種能定義其他語(yǔ)言的語(yǔ)。xml最初設(shè)計(jì)的目的是彌補(bǔ)html的不足，以強(qiáng)大的擴(kuò)展性媽祖網(wǎng)絡(luò)信息發(fā)布的需要，逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。關(guān)于xml的好處和技術(shù)規(guī)范描寫，這里就不說(shuō)了有更多的數(shù)據(jù)可供參考。xhtml是TheExtensibleHapertextMarkupLanguage可擴(kuò)展標(biāo)識(shí)語(yǔ)言的縮寫。目前推薦遵循的是W3C于2000年1月26日發(fā)布的XthML1.0，xml雖然是數(shù)據(jù)轉(zhuǎn)換的能力強(qiáng)大，完全可以替代HTML，但是面對(duì)成千上萬(wàn)的已有的站點(diǎn)，直接串通XML還為時(shí)過(guò)早。因此，我們?cè)贖TML4.0的基礎(chǔ)上，用XML的規(guī)則對(duì)其進(jìn)行擴(kuò)展，得到了xhtml。簡(jiǎn)單的說(shuō)，建立xhtml的目的就是實(shí)現(xiàn)XHTML向xml的過(guò)渡。1.2.2表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言CSS是CaseadingStyleSheets層疊樣式表的縮寫。目前推薦遵循的是W3C于1998年5月12日推薦CSS2。W3C創(chuàng)建CSS標(biāo)準(zhǔn)的目的是以CSS取代表格式布局、幀和其它表現(xiàn)的語(yǔ)言。純CSS布局與結(jié)構(gòu)式xhtml結(jié)合能幫助設(shè)計(jì)師分離外觀與結(jié)構(gòu)，使站點(diǎn)的訪問(wèn)及維護(hù)更加容易。1.2.3行為標(biāo)準(zhǔn)DOMDOM是DocumentObjectModel文檔對(duì)象模型的縮寫。根據(jù)W3C規(guī)范/dom/,DOM是一種瀏覽器，平臺(tái)，語(yǔ)言的借口，使得你可以訪問(wèn)頁(yè)面其它的標(biāo)準(zhǔn)組件。簡(jiǎn)單的理解，DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的沖突，給予web設(shè)計(jì)師和開(kāi)發(fā)者一個(gè)標(biāo)準(zhǔn)的方法，讓他們來(lái)訪問(wèn)他們站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)象。ECMAScriptECMAScript是ECMA（EuropeanComputerManufacturersAssociation)制訂的標(biāo)準(zhǔn)腳本語(yǔ)言JavaScript。目前推薦遵循的是ECMAScript262。CSS是CaseadingStyleSheets的簡(jiǎn)稱。實(shí)際上它是一組樣式。我們對(duì)CSS樣式并不陌生，在網(wǎng)上沖浪時(shí)，幾乎隨時(shí)都在與CSS打交道，在網(wǎng)頁(yè)上沒(méi)有使用過(guò)CSS的網(wǎng)頁(yè)可能不好找，不管你用什么工具軟件制作網(wǎng)頁(yè)，都在有意無(wú)意的使用CSS。用好CSS能使你的網(wǎng)頁(yè)更加的簡(jiǎn)練，為什么同樣內(nèi)容的網(wǎng)頁(yè)，有的人能做出及時(shí)KB，而高手做出來(lái)的只有十幾KB，CSS在其中的作用是不言而喻的。第2章技術(shù)支持2.1HTMLHTML（HyperTextMarkupLanguage），超文本標(biāo)記語(yǔ)言，是一種專門用于創(chuàng)建Web超文本文檔的編程語(yǔ)言，它能告訴Web瀏覽程序如何顯示W(wǎng)eb文檔（即網(wǎng)頁(yè)）的信息，如何鏈接各種信息。使用HTML語(yǔ)言可以在其生成的文檔中含有其它文檔，或者含有圖像、聲音、視頻等，從而形成超文本。超文本文檔本身并不真正含有其他的文檔，它僅僅含有指向這些文檔的指針，這些指針就是超鏈接。HTML是用來(lái)制作網(wǎng)頁(yè)的語(yǔ)言，網(wǎng)頁(yè)中的每個(gè)元素都需要用HTML規(guī)定的專門標(biāo)記來(lái)定義。在7.3節(jié)將介紹使用HTML進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。要讓設(shè)計(jì)者在網(wǎng)絡(luò)上發(fā)布的網(wǎng)頁(yè)能夠被世界各地的瀏覽者所閱讀，需要一種規(guī)范化的發(fā)布語(yǔ)言。在萬(wàn)維網(wǎng)(WWW)上，文檔的發(fā)布語(yǔ)言是HTML。標(biāo)記語(yǔ)言是一種基于源代碼解釋的訪問(wèn)方式，它的源文件由一個(gè)純文本文件組成，代碼中由許多元素組成，而前臺(tái)瀏覽器通過(guò)解釋這些元素顯示各種樣式的文檔。換句話說(shuō)，瀏覽器就是把純文本的后臺(tái)源文件以賦有樣式定義的超文本文件方式顯示出來(lái)。HTML和網(wǎng)絡(luò)是緊密相連的，HTML語(yǔ)言的發(fā)展和瀏覽器的支持是密不可分的，在20世紀(jì)90年代網(wǎng)絡(luò)剛剛興起時(shí)，多種瀏覽器同時(shí)流行于世界各地，它們支持HTML語(yǔ)言的標(biāo)準(zhǔn)也各不相同，這樣限制了HTML標(biāo)記語(yǔ)言本身的發(fā)展，逐漸，W3C網(wǎng)絡(luò)標(biāo)準(zhǔn)化組織聯(lián)手一些較為流行瀏覽器開(kāi)發(fā)廠商一同定義HTML標(biāo)準(zhǔn)，并且力推瀏覽器解釋語(yǔ)言和顯示方法的統(tǒng)一。到今天，IE瀏覽器隨著WINDOWS操作信息系統(tǒng)的絕對(duì)壟斷地位占據(jù)著主流市場(chǎng)，這也在另一方面為HTML標(biāo)準(zhǔn)的統(tǒng)一起到了關(guān)鍵作用。2.2JavaScriptJavaScript一種直譯式腳本語(yǔ)言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語(yǔ)言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語(yǔ)言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。在1995年時(shí)，由Netscape公司的BrendanEich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)現(xiàn)而成。因?yàn)镹etscape與Sun合作，Netscape管理層希望它外觀看起來(lái)像Java，因此取名為JavaScript。但實(shí)際上它的語(yǔ)法風(fēng)格與Self及Scheme較為接近。為了取得技術(shù)優(yōu)勢(shì)，微軟推出了JScript，CEnvi推出ScriptEase，與JavaScript同樣可在瀏覽器上運(yùn)行。為了統(tǒng)一規(guī)格，因?yàn)镴avaScript兼容于ECMA標(biāo)準(zhǔn)，因此也稱為ECMAScript。JavaScript腳本語(yǔ)言具有以下特點(diǎn):1.腳本語(yǔ)言。JavaScript是一種解釋型的腳本語(yǔ)言,C、C++等語(yǔ)言先編譯后執(zhí)行,而JavaScript是在程序的運(yùn)行過(guò)程中逐行進(jìn)行解釋。2.基于對(duì)象。JavaScript是一種基于對(duì)象的腳本語(yǔ)言,它不僅可以創(chuàng)建對(duì)象,也能使用現(xiàn)有的對(duì)象。3.簡(jiǎn)單。JavaScript語(yǔ)言中采用的是弱類型的變量類型,對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求,是基于Java基本語(yǔ)句和控制的腳本語(yǔ)言,其設(shè)計(jì)簡(jiǎn)單緊湊。4.動(dòng)態(tài)性。JavaScript是一種采用事件驅(qū)動(dòng)的腳本語(yǔ)言,它不需要經(jīng)過(guò)Web服務(wù)器就可以對(duì)用戶的輸入做出響應(yīng)。在訪問(wèn)一個(gè)網(wǎng)頁(yè)時(shí),鼠標(biāo)在網(wǎng)頁(yè)中進(jìn)行鼠標(biāo)點(diǎn)擊或上下移、窗口移動(dòng)等操作JavaScript都可直接對(duì)這些事件給出相應(yīng)的響應(yīng)。5.跨平臺(tái)性。JavaScript腳本語(yǔ)言不依賴于操作系統(tǒng),僅需要瀏覽器的支持。因此一個(gè)JavaScript腳本在編寫后可以帶到任意機(jī)器上使用,前提上機(jī)器上的瀏覽器支持JavaScript腳本語(yǔ)言,目前JavaScript已被大多數(shù)的瀏覽器所支持。不同于服務(wù)器端腳本語(yǔ)言，例如PHP與ASP，JavaScript主要被作為客戶端腳本語(yǔ)言在用戶的瀏覽器上運(yùn)行，不需要服務(wù)器的支持。所以在早期程序員比較青睞于JavaScript以減少對(duì)服務(wù)器的負(fù)擔(dān)，而與此同時(shí)也帶來(lái)另一個(gè)問(wèn)題：安全性。而隨著服務(wù)器的強(qiáng)壯，雖然程序員更喜歡運(yùn)行于服務(wù)端的腳本以保證安全，但JavaScript仍然以其跨平臺(tái)、容易上手等優(yōu)勢(shì)大行其道。同時(shí)，有些特殊功能（如AJAX）必須依賴JavaScript在客戶端進(jìn)行支持。隨著引擎如V8和框架如Node.js的發(fā)展，及其事件驅(qū)動(dòng)及異步IO等特性，JavaScript逐漸被用來(lái)編寫服務(wù)器端程序。2.3PhotoshopAdobePhotoshop，簡(jiǎn)稱“PS”，是由AdobeSystems開(kāi)發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進(jìn)行圖片編輯工作。ps有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。2003年，AdobePhotoshop8被更名為AdobePhotoshopCS。2013年7月，Adobe公司推出了最新版本的PhotoshopCC，自此，PhotoshopCS6作為AdobeCS系列的最后一個(gè)版本被新的CC系列取代。Adobe支持Windows操作系統(tǒng)、安卓系統(tǒng)與MacOS，但Linux操作系統(tǒng)用戶可以通過(guò)使用Wine來(lái)運(yùn)行Photoshop。從功能上看，該軟件可分為圖像編輯、圖像合成、校色調(diào)色及特功能特色效制作部分等。圖像編輯是圖像處理的基礎(chǔ)，可以對(duì)圖像做各種變換如放大、縮小、旋轉(zhuǎn)、傾斜、鏡像、透視等；也可進(jìn)行復(fù)制、去除斑點(diǎn)、修補(bǔ)、修飾圖像的殘損等。圖像合成則是將幾幅圖像通過(guò)圖層操作、工具應(yīng)用合成完整的、傳達(dá)明確意義的圖像，這是美術(shù)設(shè)計(jì)的必經(jīng)之路；該軟件提供的繪圖工具讓外來(lái)圖像與創(chuàng)意很好地融合。校色調(diào)色可方便快捷地對(duì)圖像的顏色進(jìn)行明暗、色偏的調(diào)整和校正，也可在不同顏色進(jìn)行切換以滿足圖像在不同領(lǐng)域如網(wǎng)頁(yè)設(shè)計(jì)、印刷、多媒體等方面應(yīng)用。特效制作在該軟件中主要由濾鏡、通道及工具綜合應(yīng)用完成。包括圖像的特效創(chuàng)意和特效字的制作，如油畫、浮雕、石膏畫、素描等常用的傳統(tǒng)美術(shù)技巧都可藉由該軟件特效完成。Photoshopcs6是目前最流行的圖形、圖像編輯設(shè)計(jì)軟件，在數(shù)碼影像處理、圖像編輯合成、廣告設(shè)計(jì)、封面設(shè)計(jì)、美術(shù)繪畫、網(wǎng)頁(yè)設(shè)計(jì)等領(lǐng)域都被廣泛地應(yīng)用。1.文字處理更加方便2.增加的圖層集使圖層管理更有序。3.新增圖像功能：圖像的剪切和剪裁更加方便。4.所有工具的選項(xiàng)板改進(jìn)為工具選項(xiàng)欄放置在工作區(qū)頂部，方便先項(xiàng)參數(shù)的設(shè)置。5.為了更方便地用路徑繪畫，改進(jìn)增加了幾何形狀工具，通過(guò)選擇工具的不同工作模式，可創(chuàng)建路徑、幾何形狀或幾何填充區(qū)，使得矢量繪圖功能得到了加強(qiáng)。2.4Bootstrap2.4.1簡(jiǎn)介Bootstrap是Twitter推出的一個(gè)開(kāi)源的用于前端開(kāi)發(fā)的工具包。它由Twitter的設(shè)計(jì)師MarkOtto和JacobThornton合作開(kāi)發(fā)，是一個(gè)CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動(dòng)態(tài)CSS語(yǔ)言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開(kāi)源項(xiàng)目，包括NASA的MSNBC（微軟全國(guó)廣播公司）的BreakingNews都使用了該項(xiàng)目。2.4.2特點(diǎn)Bootstrap是基于jQuery框架開(kāi)發(fā)的，它在jQuery框架的基礎(chǔ)上進(jìn)行了更為個(gè)性化和人性化的完善，形成一套自己獨(dú)有的網(wǎng)站風(fēng)格，并兼容大部分jQuery插件。2.4.3組件Bootstrap中包含了豐富的Web組件，根據(jù)這些組件，可以快速的搭建一個(gè)漂亮、功能完備的網(wǎng)站。其中包括以下組件：下拉菜單、按鈕組、按鈕下拉菜單、導(dǎo)航、導(dǎo)航條、面包屑、分頁(yè)、排版、縮略圖、警告對(duì)話框、進(jìn)度條、媒體對(duì)象等。2.4.4Javascript插件Bootstrap自帶了13個(gè)jQuery插件，這些插件為Bootstrap中的組件賦予了“生命”。其中包括：模式對(duì)話框、標(biāo)簽頁(yè)、滾動(dòng)條、彈出框等。2.4.5定制自己的框架代碼可以對(duì)Bootstrap中所有的CSS變量進(jìn)行修改，依據(jù)自己的需求裁剪代碼。2.4.6BootstrapLessLess是一個(gè)CSS預(yù)處理器，讓CSS具有動(dòng)態(tài)性。另一方面，Bootstrap是一個(gè)快速開(kāi)發(fā)WebApp和站點(diǎn)的工具包。這樣，您可以在CSS中使用Bootstrap的Less變量、mixins（混合）和nesting（嵌套）。2.5DreamweaverDreamweaver是創(chuàng)建和管理網(wǎng)頁(yè)的專業(yè)化可視編輯器。使用Dreamweaver可以輕松創(chuàng)建跨平臺(tái)、跨瀏覽器的頁(yè)面。Macromedia的RoundtripHTML技術(shù)允許用戶隨意導(dǎo)入HTML文檔而無(wú)需重新設(shè)置代碼格式。Dreamweaver可以為用戶做到：使用動(dòng)態(tài)HTML功能（例如具有動(dòng)態(tài)效果的層和行為）而不用寫一行代碼。它甚至還可以檢查用戶的工作成果在所有流行的平臺(tái)和瀏覽器中可能發(fā)生的錯(cuò)誤。Dreamweaver還是一個(gè)可以完全自定義的應(yīng)用程序。用戶可以創(chuàng)建自己的對(duì)象和命令修改菜單和快捷鍵，甚至編寫JavaScript代碼擴(kuò)展Dreamweaver的行為和屬性檢查器。至于Dreamweaver工作區(qū)是非常靈活的，因此它可以適應(yīng)各種不同的工作風(fēng)格和使用水平。常用的Dreamweaver工作區(qū)組件有以下若干種：1.文檔窗口可顯示當(dāng)前文檔，文檔的外觀和瀏覽器中看到的非常相似。2.裝載器中包含一些打開(kāi)和關(guān)閉常用檢查器和模板的按鈕。3.對(duì)象工具欄包含創(chuàng)建不同類型的對(duì)象（例如圖象、表格和層等）的按鈕。4.屬性檢查器顯示選定對(duì)象的屬性。5.快捷菜單可以使用戶對(duì)當(dāng)前選擇或區(qū)域快速執(zhí)行某些命令。6.可固定的浮動(dòng)工具欄允許用戶將浮動(dòng)窗口、檢查器和工具欄組合在一個(gè)或多個(gè)選擇窗口中。2.6DIV＋CSS2.6.1DIV+CSS簡(jiǎn)介CSS是英語(yǔ)CascadingStyleSheets（層疊樣式表單）的縮寫，它是一種用來(lái)表現(xiàn)HTML或XML等文件式樣的計(jì)算機(jī)語(yǔ)言。DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用術(shù)語(yǔ)之一，div+css是一種網(wǎng)頁(yè)的布局方法,這一種網(wǎng)頁(yè)布局方法有別于傳統(tǒng)的HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的表格（table）定位方式,真正地達(dá)到了w3c內(nèi)容與表現(xiàn)相分離。HTML語(yǔ)言自HTML4.01以來(lái)，不再發(fā)布新版本，原因就在于HTML語(yǔ)言正變得越來(lái)越復(fù)雜化、專用化。XHTML語(yǔ)言是一種可以將HTML語(yǔ)言標(biāo)準(zhǔn)化，用XHTML語(yǔ)言重寫后的HTML頁(yè)面可以應(yīng)用許多XML應(yīng)用技術(shù)。使得網(wǎng)頁(yè)更加容易擴(kuò)展，適合自動(dòng)數(shù)據(jù)交換，并且更加規(guī)整。在XHTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。以下是DIV+CSS的特點(diǎn)簡(jiǎn)介：1.符合W3C標(biāo)準(zhǔn)。微軟等公司均為W3C支持者。這一點(diǎn)是最重要的，因?yàn)檫@保證您的網(wǎng)站不會(huì)因?yàn)閷?lái)網(wǎng)絡(luò)應(yīng)用的升級(jí)而被淘汰。2.支持瀏覽器的向后兼容，也就是無(wú)論未來(lái)的瀏覽器大戰(zhàn)，勝利的是IE7或者是火狐，您的網(wǎng)站都能很好的兼容。3.搜索引擎更加友好。相對(duì)與傳統(tǒng)的table,采用DIV+CSS技術(shù)的網(wǎng)頁(yè)，對(duì)于搜索引擎的收錄更加友好。4.樣式的調(diào)整更加方便。內(nèi)容和樣式的分離，使頁(yè)面和樣式的調(diào)整變得更加方便?，F(xiàn)在YAHOO,MSN等國(guó)際門戶網(wǎng)站，網(wǎng)易，新浪等國(guó)內(nèi)門戶網(wǎng)站，和主流的WEB2.0網(wǎng)站，均采用DIV+CSS的框架模式，更加印證了DIV+CSS是大勢(shì)所趨。5.CSS的極大優(yōu)勢(shì)表現(xiàn)在簡(jiǎn)潔的代碼，對(duì)于一個(gè)大型網(wǎng)站來(lái)說(shuō)，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。6.表現(xiàn)和結(jié)構(gòu)分離，在團(tuán)隊(duì)開(kāi)發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。2.6.2級(jí)聯(lián)樣式表簡(jiǎn)介有三種方法可以在站點(diǎn)網(wǎng)頁(yè)上使用樣式表：1.將網(wǎng)頁(yè)鏈接到外部樣式表。2.在網(wǎng)頁(yè)上創(chuàng)建嵌入的樣式表。3.應(yīng)用內(nèi)嵌樣式到各個(gè)網(wǎng)頁(yè)元素。4.每一種方法均有其優(yōu)缺點(diǎn)：當(dāng)要在站點(diǎn)上所有或部份的網(wǎng)頁(yè)上一致地應(yīng)用相同樣式時(shí)，可使用外部樣式表。在一個(gè)或多個(gè)外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁(yè)，便能確保所有網(wǎng)頁(yè)外觀的一致性。如果人們決定更改樣式，只需在外部樣式表—中作一次更改—而該更改會(huì)反映到所有與該樣式表相鏈接的網(wǎng)頁(yè)上。通常外部樣式表以.css做為文件擴(kuò)展名，例如Mystyles.css。當(dāng)人們只是要定義當(dāng)前網(wǎng)頁(yè)的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級(jí)聯(lián)樣式表，“嵌”在網(wǎng)頁(yè)的<HEAD>標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁(yè)上使用。使用內(nèi)嵌樣式以應(yīng)用級(jí)聯(lián)樣式表屬性到網(wǎng)頁(yè)元素上。如果網(wǎng)頁(yè)鏈接到外部樣式表，為網(wǎng)頁(yè)所創(chuàng)建的內(nèi)嵌的或嵌入式樣式將擴(kuò)充或覆蓋外部樣式表中的指定屬性。第3章網(wǎng)站總體分析和設(shè)計(jì)3.1網(wǎng)站開(kāi)發(fā)的需求分析3.1.1需求分析背景隨著21世紀(jì)網(wǎng)絡(luò)信息時(shí)代的到來(lái)，現(xiàn)代社會(huì)都是快速高效率的Internet來(lái)傳播大量信息資源。人們通過(guò)IE瀏覽信息，當(dāng)然這種方式也是最常用的，這種方式的需求形成了電子商務(wù)。它的是指簡(jiǎn)單、快捷、低成本的電子通訊方式，買賣雙方不出面也可以進(jìn)行各種商貿(mào)活動(dòng)。電子商務(wù)真正的發(fā)展將是建立在Internet技術(shù)上。近年來(lái)，由于互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展及其逐步普及，企業(yè)對(duì)信息進(jìn)行網(wǎng)絡(luò)化管理的條件已經(jīng)日趨成熟，而傳統(tǒng)的通過(guò)電話和傳真來(lái)處理信息的傳統(tǒng)方式已經(jīng)越來(lái)越難以滿足企業(yè)的需求。建立基于網(wǎng)絡(luò)的管理和銷售信息系統(tǒng)，成為企業(yè)提高效率、降低成本、完善服務(wù)的有力保證。而對(duì)于餐飲業(yè)，由于一個(gè)行業(yè)本身的特性，它的流通性是非常高的，所以更對(duì)企業(yè)的效率提出了更高的要求。隨著越來(lái)越多的人接受了電子商務(wù)這種便捷、快速的交易形式，網(wǎng)上訂餐的順勢(shì)而出很快受到了大家的歡迎?；ヂ?lián)網(wǎng)的應(yīng)用以普及千家萬(wàn)戶,這為網(wǎng)絡(luò)訂菜提供了良好的發(fā)展空間。同時(shí)，網(wǎng)上訂菜服務(wù)的直觀、有效、便捷等優(yōu)點(diǎn)是傳統(tǒng)的電話訂菜業(yè)務(wù)無(wú)法比擬的。網(wǎng)絡(luò)訂餐可充通過(guò)色彩、圖片、說(shuō)明、設(shè)置動(dòng)畫加強(qiáng)了產(chǎn)品了宣傳，大大達(dá)到了賣菜行業(yè)的“色型”要求。需求結(jié)果：生成8個(gè)頁(yè)面，index.html網(wǎng)站首頁(yè)；aboutour.html關(guān)于我們；digndan.html訂單；glylogin.html管理員登錄;home.html用戶位置定位；login.html--用戶登錄；problem.html--常見(jiàn)問(wèn)題；registera.html--用戶注冊(cè)；sjzs.html--商家菜品展示。

3.1.2網(wǎng)站用戶活動(dòng)分析商家活動(dòng)分析商家在此過(guò)程中首先進(jìn)行登錄，登錄成功后跳轉(zhuǎn)到自家店鋪，在自己店鋪中可以進(jìn)行添加蔬菜、刪除蔬菜、修改蔬菜、確認(rèn)用戶提交的訂單、并可以查看訂單一系列操作。如圖3.1商家活動(dòng)分析圖：圖3.1商家活動(dòng)分析圖用戶活動(dòng)分析用戶如果不登錄網(wǎng)站也可以直接查看商家展示的各種菜品，當(dāng)用戶想選購(gòu)菜品時(shí)，需要進(jìn)行登錄，再進(jìn)行下單。登錄后的用戶可以選購(gòu)商品、搜索商家等操作。如圖3.2用戶活動(dòng)分析圖：

圖3.2用戶活動(dòng)分析圖管理員活動(dòng)分析管理員通過(guò)登錄后，可以在此系統(tǒng)中實(shí)現(xiàn)許多操作，比如管理商家，審查商家是否合格，添加商家，審核菜品等。如圖3.3管理員活動(dòng)分析圖：圖3.3管理員活動(dòng)分析圖3.2網(wǎng)站的總體設(shè)計(jì)與傳統(tǒng)媒體不同，網(wǎng)頁(yè)除了文字和圖像以外，還借助由代碼語(yǔ)言編程所實(shí)現(xiàn)的各種交互式效果，增加了網(wǎng)頁(yè)界面的生動(dòng)性和復(fù)雜性，也使得網(wǎng)頁(yè)設(shè)計(jì)者需要考慮更多頁(yè)面元素的排版、優(yōu)化。一般來(lái)說(shuō)，網(wǎng)頁(yè)的界面主要由下面幾個(gè)因素構(gòu)成：3.2.1文字文字元素是信息傳達(dá)的主體部分。網(wǎng)頁(yè)中的文字主要包括標(biāo)題、信息、文字鏈接、幾種主要形式。標(biāo)題和傳統(tǒng)媒體中信息傳達(dá)的基本作用相同，是內(nèi)容的簡(jiǎn)概說(shuō)明一般比較醒目、優(yōu)先編排。文字作為占據(jù)頁(yè)面重要比率的元素，同時(shí)又是信息重要載體，它的字體、大小、顏色和排布對(duì)頁(yè)面整體設(shè)計(jì)影響極大。我所使用的文字是宋體12號(hào)，因?yàn)檫@樣看得比較清楚，使整個(gè)頁(yè)面整潔，網(wǎng)頁(yè)中都普遍的使用，讓顧客一看就忍不住繼續(xù)看，所以在此我選擇12號(hào)宋體作為網(wǎng)頁(yè)的主體文字樣式。3.2.2圖形圖形在網(wǎng)頁(yè)界面中具有重要作用。合理的運(yùn)用圖形，可以生動(dòng)直觀、形象地表現(xiàn)設(shè)計(jì)主題。網(wǎng)頁(yè)中常用的圖形格式包括jpg和gif，這兩種格式壓縮比高，得到了規(guī)范瀏覽器的支持，下載速度快，具有跨平臺(tái)的特性，不需要瀏覽器安裝插件即可直接閱覽。圖形元素包括標(biāo)題、背景、主圖、鏈接圖標(biāo)四種。我所使用的圖片主要是自己收集的比較精美。如下圖3.4圖案展示：圖3.4圖案展示3.2.3頁(yè)面版式版式是網(wǎng)頁(yè)界面設(shè)計(jì)的重要組成部分，它將文字、圖形等視覺(jué)元素進(jìn)行組合配置，使頁(yè)面整體視覺(jué)效果美觀和諧，簡(jiǎn)單大方，便于閱讀，實(shí)現(xiàn)信息傳達(dá)的最佳效果。如下圖3.5頁(yè)面版式：圖3.5頁(yè)面版式3.2.4色彩彩色網(wǎng)頁(yè)比單色網(wǎng)頁(yè)更具吸引力；色彩本身具有象征作用。如圖3.6色彩：圖3.6色彩3.3網(wǎng)站的具體設(shè)計(jì)3.3.1鏈接設(shè)計(jì)網(wǎng)頁(yè)中的鏈接采用了綠色為背景，字體為白色，鼠標(biāo)指向時(shí)不會(huì)產(chǎn)生下劃線。如圖3。7鏈接設(shè)計(jì)：圖3.7鏈接設(shè)計(jì)3.3.2logo的設(shè)計(jì)Logo以綠色蔬菜為原型，配以綠色，是綠色蔬菜的詮釋，符合網(wǎng)站的總體風(fēng)格及主題。如圖3.8logo設(shè)計(jì)：圖3.8logo設(shè)計(jì)3.3.3導(dǎo)航設(shè)計(jì)網(wǎng)站的導(dǎo)航欄目可以讓用戶對(duì)網(wǎng)站的內(nèi)容及信息一目了然。導(dǎo)航分為：注冊(cè)、登錄、找客服、常見(jiàn)問(wèn)題、關(guān)于我們。首先采用div布局，里面嵌套u(yù)l形式然后相關(guān)css部分。效果如圖3.9導(dǎo)航設(shè)計(jì)：圖3.9導(dǎo)航設(shè)計(jì)第4章網(wǎng)頁(yè)的實(shí)現(xiàn)4.1首頁(yè)實(shí)現(xiàn)4.1.1首頁(yè)描述由于首頁(yè)完整給人的形象應(yīng)該是專業(yè)、大方，所以首頁(yè)的設(shè)計(jì)和布局我采用大方簡(jiǎn)單又不失活潑的原則。首頁(yè)整體用4個(gè)大的DIV里面包含4個(gè)部分。Div設(shè)置效果為：總體都設(shè)置了寬度，居中格式，背景顏色及背景圖片，其他還有內(nèi)邊距，高等。內(nèi)容界面是一個(gè)網(wǎng)站走向成功道路上必不可少的因素。網(wǎng)站的內(nèi)容代表著一個(gè)好網(wǎng)站的素質(zhì)和形象，所以應(yīng)該表現(xiàn)的大氣、端莊而且精細(xì)。還更要表現(xiàn)出一個(gè)網(wǎng)站應(yīng)該有的朝氣和活力。因此我首先選中色彩搭配比較大方，整體布局比較清晰簡(jiǎn)潔的內(nèi)容模式。在首頁(yè)的版面，先是用Photoshop對(duì)網(wǎng)站模板進(jìn)行切片，然后用DIV+CSS進(jìn)行排版。首先自然映入顏面的是logo設(shè)計(jì)，一個(gè)特殊于類似植物的圖標(biāo)加上簡(jiǎn)單生活幾個(gè)字，突出我們主題，此網(wǎng)站的目的就是給人們的生活帶來(lái)便利。頁(yè)面效果如下圖4.1所示：圖4.1頁(yè)面效果根據(jù)因?yàn)闉g覽者在閱讀時(shí)候經(jīng)常采用從上到下，從左到右的習(xí)慣，主體內(nèi)容中，我將“攤點(diǎn)”和“商家”各自放一塊，“l(fā)ogo”放在了上面的位置而且和搜索框一起完美搭配這樣能更好地吸引瀏覽者的眼球，同時(shí)也體現(xiàn)網(wǎng)站的專業(yè)、得體。底部不僅能夠展示網(wǎng)站的各種優(yōu)點(diǎn)，而且突出顯示出網(wǎng)站整體結(jié)尾的完美，看著簡(jiǎn)介而又大方得體，真是賞心悅目呀！整個(gè)界面采用近一年流行設(shè)計(jì)“平面化風(fēng)格”，既符合設(shè)計(jì)趨勢(shì)，又不失大體。4.1.2首頁(yè)導(dǎo)航及底部代碼實(shí)現(xiàn)<body> <divid="navbar-top"class="navbar-topnavbarnavbar-defaultnavbar-fixed-top"> <divclass="container"> <pclass="navbar-textnavbar-header"> <ahref="">成都   </a> <ahref="">物貿(mào)中心宿舍   </a> <ahref="html/home.html"class="headercs">[切換地址]</a> <spanclass="glyphiconglyphicon-menu-down"></span> </p> <pclass="navbar-textnavbar-righthidden-xs"> <ahref="html/registera.html">注冊(cè)   </a> <ahref="">|   </a> <ahref="html/login.html">登錄   </a> <ahref="">找客服   </a> <ahref="html/problem.html">常見(jiàn)問(wèn)題   </a> <ahref="html/aboutour.html">關(guān)于我們</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>常見(jiàn)問(wèn)題</p> <p>用戶反饋</p> <p>誠(chéng)信舉報(bào)</p> <p>線上體驗(yàn)店</p> </a> </div> <divclass="col-md-3col-md-offset-1footer_content"> <ahref=""> <h3>獲取更新</h3> <p>iphone/Android</p> <p>簡(jiǎn)單生活新浪微博</p> <p>公眾微信號(hào)：簡(jiǎn)單生活</p> </a> </div> <divclass="col-md-3col-md-offset-1footer_right"> <ahref="html/aboutour.html"> <h3>公司信息</h3> <p>關(guān)于簡(jiǎn)單生活</p> <p>媒體報(bào)道</p> <p>加入我們</p> </a> </div> </div> </div></body>4.2其他頁(yè)面實(shí)現(xiàn)其他頁(yè)面設(shè)計(jì)整體風(fēng)格跟主頁(yè)布局風(fēng)格一致，就只是內(nèi)容布局格式不一樣，更加直觀、簡(jiǎn)潔明了，突出統(tǒng)一性。其他頁(yè)面整體風(fēng)格都源于首頁(yè)的改裝，在每個(gè)商家頁(yè)面中附加了留言內(nèi)容給顧客留下了直接與賣家溝通的交流機(jī)會(huì)，首先即時(shí)溝通直接給人溫暖的感覺(jué)，專業(yè)的一對(duì)--溝通模式，讓顧客更深層次的了解賣家，更加有資質(zhì)，實(shí)力，專業(yè)，精心為用戶服務(wù)。首頁(yè)的作用通過(guò)各種產(chǎn)品的展示讓顧客即時(shí)了解本系統(tǒng)用處，能給顧客帶來(lái)的便利，所以擁有優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)是公司成功的關(guān)鍵，優(yōu)秀的網(wǎng)站首頁(yè)展示不僅僅是公司的完美的信息而且表現(xiàn)出公司的實(shí)力。4.2.1關(guān)于我們頁(yè)面圖4.2.關(guān)于我們頁(yè)面，用戶可在此頁(yè)面看到本系統(tǒng)的用處，用法，公司發(fā)展歷程，詳細(xì)了解此系統(tǒng)的各種用處。圖4.2關(guān)于我們頁(yè)面關(guān)于我們頁(yè)面主要部分代碼實(shí)現(xiàn)：<divclass="aboutour_contentcontainer"> <divclass="rowaboutour_a"> <divclass="col-md-4"> <p>您現(xiàn)在的位置：關(guān)于我們</p> <p>本項(xiàng)目是一個(gè)利用互聯(lián)網(wǎng)的足不出戶的特點(diǎn)，實(shí)現(xiàn)的一個(gè)在線購(gòu)買蔬菜的平臺(tái)，并且提供手機(jī)端的APP實(shí)現(xiàn)訂購(gòu)。用戶可以從購(gòu)買到付款都在網(wǎng)上實(shí)現(xiàn)。我們提供食材的清洗和切割，并且支持送貨上門服務(wù)。讓用戶省心、放心、開(kāi)心。</p> <p>我們的目標(biāo)是創(chuàng)辦一家能服務(wù)全成都市的在線買菜服務(wù)商，使得顧客享受優(yōu)惠，便利。食材、配料提供商能夠直接出售產(chǎn)品，我們負(fù)責(zé)配送和提供平臺(tái)。未來(lái)我們將覆蓋全川各大市級(jí)以上城市，并可實(shí)現(xiàn)當(dāng)日配送。</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訂單圖：用戶選好菜品后可進(jìn)行在線支付，下訂單，同時(shí)可以對(duì)商家留言。

圖4.3訂單頁(yè)面訂單頁(yè)面主要部分代碼實(shí)現(xiàn)：<divclass="dingdan_contentcontainer"> <p>河馬叔叔新鮮蔬菜店>確認(rèn)購(gòu)買</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">價(jià)格/重量</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管理員登錄：可以執(zhí)行用戶管理、商家添加、商家查詢、菜品類別添加、菜品類別查詢、菜品信息添加、菜品信息查詢、訂單管理、修改密碼、注冊(cè)用戶管理、留言管理、系統(tǒng)公告、站長(zhǎng)申明、聯(lián)系站長(zhǎng)、站長(zhǎng)聯(lián)系查詢、數(shù)據(jù)備份功能圖4.4管理員登錄頁(yè)面管理員登錄頁(yè)面實(shí)現(xiàn)和訂單頁(yè)面實(shí)現(xiàn)差不多，這里不再累述。以下頁(yè)面實(shí)現(xiàn)和上相同。4.2.4地理定位頁(yè)面圖4.5地理定位頁(yè)面：可定位到用戶當(dāng)前位置，進(jìn)而展示用戶周圍的蔬菜店。圖4.5地理定位頁(yè)面4.2.5用戶登錄頁(yè)面圖4.6用戶登錄頁(yè)面：注冊(cè)過(guò)的用戶可進(jìn)行登錄，方便之后進(jìn)行下訂單和支付。圖4.6用戶登錄頁(yè)面4.2.6常見(jiàn)問(wèn)題頁(yè)面圖4.7常見(jiàn)問(wèn)題頁(yè)面：用戶可以在此頁(yè)面看到各種常見(jiàn)問(wèn)題，方便更好的使用本系統(tǒng)。圖4.7常見(jiàn)問(wèn)題頁(yè)面4.2.7商家菜品展示頁(yè)面圖4.8商家菜品展示頁(yè)面:用戶點(diǎn)擊進(jìn)入一個(gè)商家后，可以詳細(xì)地看到商家的菜品展示。

圖4.8商家菜品展示頁(yè)面4.2.8注冊(cè)頁(yè)面圖4.9注冊(cè)頁(yè)面：首次使用的用戶需要進(jìn)行注冊(cè)，注冊(cè)成功后才能進(jìn)行購(gòu)買菜品，并在線支付。圖4.9注冊(cè)頁(yè)面第5章網(wǎng)站的測(cè)試編碼完成后，就要對(duì)源程序進(jìn)行測(cè)試。軟件測(cè)試的目的在于爭(zhēng)取在第一時(shí)間發(fā)現(xiàn)程序中的錯(cuò)誤，以便于及時(shí)糾錯(cuò)，增加軟件可靠性。它在整個(gè)系統(tǒng)設(shè)計(jì)實(shí)施過(guò)程中占有相當(dāng)?shù)姆至?。測(cè)試是軟件開(kāi)發(fā)時(shí)期的最后一個(gè)階段，也是軟件質(zhì)量保證中至關(guān)重