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

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

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

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

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

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