【文章內(nèi)容簡(jiǎn)介】 ，下單時(shí)間，處理狀態(tài)）主鍵：訂單列表編號(hào) NOT NULL說明：發(fā)貨訂單表記錄針對(duì)用戶的一個(gè)訂單的詳細(xì)信息。其表結(jié)構(gòu)如下表45 所示：表 45 發(fā)貨訂單表（Orderlist）字段名 數(shù)據(jù)類型 長(zhǎng)度 允許空 備注ID int 4 發(fā)貨訂單編號(hào)（主鍵）Memberid varchar 20 會(huì)員 ID，非會(huì)員為 0Customername varchar 10 客戶姓名Address varchar 60 詳細(xì)地址（送貨用）Zipcode varchar 6 郵編Phone varchar 20 聯(lián)系電話Email varchar 30 電子郵件Payment varchar 20 應(yīng)付款額Remark varchar 16 備注Createdate varchar 8 下單時(shí)間State varchar 8 處理狀態(tài)（未處理：0 已處理：1）Treateddate varchar 8 是 送貨日期treatedremark varchar 16 是 送貨備注（6）購(gòu)物幫助表（問題編號(hào)，問題標(biāo)題，答案，點(diǎn)擊數(shù)）主鍵：?jiǎn)栴}編號(hào) NOT NULL說明：購(gòu)物幫助表記錄系統(tǒng)中的常見問題，用于實(shí)現(xiàn)購(gòu)物幫助功能。其表結(jié)構(gòu)如下表 46 所示：表 46 購(gòu)物幫助表（FAQ ）字段名 數(shù)據(jù)類型 長(zhǎng)度 允許空 備注ID int 4 問題編號(hào)（主鍵）Question varchar 100 問題標(biāo)題Answer text 16 答案Hitnum int 4 點(diǎn)擊數(shù)，用于評(píng)價(jià)是否是熱點(diǎn)問題第 5 章 網(wǎng)站的風(fēng)格及頁面設(shè)計(jì) 頁面設(shè)計(jì)的原則設(shè)計(jì)的 3C 原則：所謂 3C 原則是指簡(jiǎn)潔、一致性、好的對(duì)比度。Web 頁面設(shè)計(jì)需要遵循這三條原則。根據(jù)以上原則網(wǎng)站頁面要做到樸素大方，線條輪廓要流暢、穩(wěn)重，用色要慎重不可花里胡哨。 線條的使用直線（矩形）的應(yīng)用。直線條的藝術(shù)效果是流暢、挺拔、規(guī)矩、整齊，所謂有輪有廓。直線和矩形在頁面上的重復(fù)組合可以呈現(xiàn)井井有條、涇渭分明的視覺效果。曲線（弧形）的應(yīng)用。曲線的效果是流動(dòng)、活躍，具有動(dòng)感。曲線和弧形在頁面上的重復(fù)組合可以呈現(xiàn)流暢、輕快，富有活力的視覺效果。一般應(yīng)用于青春、活潑的主頁題材。曲、直線（矩形、弧形）的綜合應(yīng)用。把以上兩種線條和形狀結(jié)合起來運(yùn)用，可以大大豐富主頁的表現(xiàn)力，使頁面呈現(xiàn)更加豐富多彩的藝術(shù)效果。這種形式的主頁，適應(yīng)的范圍更大，各種主題的主頁都可以應(yīng)用。但是，在頁面的編排處理上，難度也會(huì)相應(yīng)大一些，處理得不好會(huì)產(chǎn)生凌亂的效果。 色彩的選擇色彩是人的視覺最敏感的東西。主頁的色彩處理得好，可以錦上添花，達(dá)到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào)，局部對(duì)比” ，也就是：主頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對(duì)比。在色彩的運(yùn)用上，可以根據(jù)主頁內(nèi)容的需要，分別采用不同的主色調(diào)。因?yàn)樯示哂邢笳餍裕纾耗劬G色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標(biāo)志色，例如：軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺，例如冷、暖的感覺，進(jìn)、退的效果等。另外，色彩還有民族性，各個(gè)民族由于環(huán)境、文化、傳統(tǒng)等因素的影響，對(duì)于色彩的喜好也存在著較大的差異。所以，我以藍(lán)白色搭配為主色調(diào)其它顏色相輔，給人以寧靜深遠(yuǎn)的回味，導(dǎo)航欄用七色箭頭點(diǎn)綴，彩色圖片和動(dòng)態(tài)元素的使用使頁面樸素、大方、莊重。 網(wǎng)站設(shè)計(jì)構(gòu)思首先在制作一個(gè)網(wǎng)頁之前，應(yīng)該先進(jìn)行構(gòu)思。新建頁面就象一張白紙，沒有任何表格，框架和約定俗成的東西，你可以盡可能的發(fā)揮你的想象力，將你想到的“景象 ”畫上去，建議用一張白紙和一支鉛筆將初步的設(shè)想畫在紙上，當(dāng)然用作圖軟件 photoshop 等也可以，免得在做了一半時(shí)發(fā)現(xiàn)頁面不和諧而重做。這屬于創(chuàng)造階段，不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫出創(chuàng)意的輪廓即可。盡可能多畫幾張，最后選定一個(gè)滿意的作為繼續(xù)創(chuàng)作的腳本。第一步先明確頁面主題，考慮是否有合適的圖片來襯托主題，如果有現(xiàn)成的圖片就可以了，沒有的話，就根據(jù)情況來決定是否自己做一幅，這里我用PHOTOSHOP 軟件設(shè)計(jì)了一張簡(jiǎn)單的網(wǎng)站標(biāo)題“ 新世紀(jì)手機(jī)商城 ”字體顏色選用淺藍(lán)，以便協(xié)調(diào)網(wǎng)站的基色。但不管怎樣，標(biāo)題的主色調(diào)應(yīng)先定下來，這對(duì)后面幾步的版面影響很大。第二步明確頁面上要鏈接的目錄，要將他們放在較顯眼的位置，根據(jù)頁面風(fēng)格的不同可以放在頂部、左邊、右邊、中部等較明顯的位置，主鏈接可以做成小圖標(biāo)的形式，但注意圖片不能太大、也不能過分搶眼（一般情況下不比標(biāo)題或主圖的色彩重）。第三步是指定主圖，所謂主圖，就是放一幅較能反映頁面主題思想的圖片，他的大小可適當(dāng)超過頁面上的其它圖片，顏色不加限制，而且位置應(yīng)盡量突出在前面搶眼處。這里要特別指出的是，網(wǎng)標(biāo)，它是一個(gè)網(wǎng)站的標(biāo)志和靈魂，在他的設(shè)計(jì)上一定要突出自己的風(fēng)格和特點(diǎn)，能反映站點(diǎn)主題，體現(xiàn)企業(yè)文化，可以結(jié)合使用企業(yè)的標(biāo)志。以上三步確定下來后，頁面的基本風(fēng)格就出現(xiàn)了，我們?cè)诟鶕?jù)情況進(jìn)行調(diào)整，或者看是否加上背景，主要考慮主圖是否需要背景。 網(wǎng)站的風(fēng)格版面設(shè)計(jì)在版面設(shè)計(jì)上我認(rèn)為可以說是既繼承了傳統(tǒng)設(shè)計(jì)的優(yōu)點(diǎn)，又作了個(gè)性化創(chuàng)新作為傳統(tǒng)設(shè)計(jì)無非是用以下幾種架構(gòu)如圖 51 所示：a、 b、 c、 d、圖 51 網(wǎng)站架構(gòu) a 型、b 型、c 型、d 型多數(shù)網(wǎng)站的設(shè)計(jì)都采用了 c 型，上邊為站標(biāo)及廣告欄，左邊作為導(dǎo)航欄，底邊為版權(quán)信息及設(shè)計(jì)制作小組，中間作為內(nèi)容區(qū)。我的設(shè)計(jì)基本延用了 c 型但做了一些改進(jìn)。延用了上下邊框和左邊框的設(shè)計(jì)網(wǎng)頁顯得簡(jiǎn)潔。但沒有使用共享邊框，而是單獨(dú)的設(shè)計(jì)制作了上邊框的內(nèi)容 ，下邊框的內(nèi)容，和左邊框的內(nèi)容 。使用!include file=語句完成對(duì)上述部分的調(diào)用，實(shí)現(xiàn)頁面共享使每層網(wǎng)頁具有相同的上下及左邊框統(tǒng)一了風(fēng)格，這樣的調(diào)用方法效地解決了導(dǎo)航欄及超鏈接在深層網(wǎng)頁的相對(duì)路徑偏差問題，實(shí)現(xiàn)鏈接路徑完全統(tǒng)一化。網(wǎng)站頁面結(jié)構(gòu)布局如下圖 52 所示：網(wǎng)站購(gòu)物功能鏈接區(qū)（）手機(jī)廠商等（）（商品顯示區(qū)）圖 52 網(wǎng)站頁面結(jié)構(gòu)布局 商城主頁設(shè)計(jì)主頁是一個(gè)商城的門戶，顧客一般都是首先看到此頁（也有個(gè)別從鏈接進(jìn)來者） ，因此大多數(shù)商家都希望在主頁上能夠顯示盡可能多的信息，而且希望將自己最希望讓別人了解的信息放在最吸引目光的位置。本系統(tǒng)的主頁是 文件，圖 53 是在線手機(jī)銷售系統(tǒng)的主頁面。圖 53 在線手機(jī)銷售系統(tǒng)主頁面 客戶端界面結(jié)構(gòu)設(shè)計(jì)在客戶端界面中，出于美觀考慮，沒有采用框架?？蛻舳私缑娼Y(jié)構(gòu)是由頭（） 、左惻快捷菜單（） 、體和尾（）四部分組成。由于沒有使用框架，各個(gè)模塊的頁面需要在此的基礎(chǔ)上，在頁面結(jié)構(gòu)的“體” 處加入實(shí)現(xiàn)功能特點(diǎn)的頁面代碼。 界面頭、尾設(shè)計(jì)為了提高代碼的重用性，把客戶端界面部分相同的頭和尾做成兩個(gè)文件分別命名為 和 。在 中除了功能菜單以外，還集成了一個(gè)會(huì)員登陸功能，在 文件中調(diào)用 showmemberlogin()過程就是為了實(shí)現(xiàn)此功能的，其作用是根據(jù)會(huì)員是否登陸來顯示歡迎信息或登陸表單。 界面左惻快捷菜單設(shè)計(jì)左惻快捷菜單包含三部分，分別是手機(jī)廠商、熱門商品和最優(yōu)惠商品。 文件的實(shí)現(xiàn)，它所包含的每一部分都是由一個(gè)表格（table）構(gòu)成，由于需要頁面美化，其中每個(gè)表格都包含了一些 HTML 修飾代碼。第 6 章 系統(tǒng)詳細(xì)設(shè)計(jì) 客戶端界面設(shè)計(jì)客戶端界面的設(shè)計(jì)采用了界面模塊化的思想，每個(gè)頁面都具有一定的功能，且頁面命名采用“ 模塊名+功能名” 的方式。 商品（手機(jī)）信息瀏覽模塊商品（手機(jī)）信息瀏覽模塊的主要功能：顯示商品預(yù)覽列表（） ，顯示商品詳細(xì)信息頁面（） ，存放商品基本函數(shù)（） 。商品既手機(jī)是顧客來到網(wǎng)站后所關(guān)心的第一件事，對(duì)于手機(jī)這類注重外形的商品，具備以縮略圖方式預(yù)覽手機(jī)的功能是非常必要的，另外還需要具備查詢功能。在本系統(tǒng)中，手機(jī)預(yù)覽列表與查詢是用同一個(gè)頁面完成的，既都是 文件，在這個(gè)文件中，默認(rèn)是顯示全部商品，然后可以根據(jù)手機(jī)廠商和手機(jī)名稱關(guān)鍵字來查看過濾后所顯示的手機(jī)。手機(jī)詳細(xì)信息對(duì)應(yīng)的文件是 ，圖 612 是查看某一手機(jī)詳細(xì)信息的頁面。查看手機(jī)詳細(xì)信息是通過在 文件中調(diào)用如下語句實(shí)現(xiàn)的：Call showproduct(realstring((“id”)))這里通過 Request 對(duì)象獲得要查看手機(jī)的編號(hào)，然后作為參數(shù)傳入Showproduct 過程中，這個(gè)過程也位于 文件中，它的實(shí)現(xiàn)原理是通過傳入的產(chǎn)品編號(hào)組織 SQL 語句，從數(shù)據(jù)庫中檢索數(shù)據(jù)，然后將查到的結(jié)果顯示出來，另外 ，由于這個(gè)頁面用來顯示大量文本，所以一定要用Convert 函數(shù)對(duì)所顯示的文本進(jìn)行 HTML 編碼和用 HTML 的換行符“br”替換字符串中的回車符，否則頁面顯示會(huì)很亂。圖 612 查看手機(jī)詳細(xì)信息 購(gòu)物車管理模塊設(shè)計(jì)購(gòu)物車管理模塊的主要功能：顯示購(gòu)物車（） ，購(gòu)物車基本函數(shù)（ ） 。購(gòu)物車管理模塊與訂單維護(hù)模塊類似，也是本系統(tǒng)的本質(zhì)所在。本系統(tǒng)的目的就是用來銷售，自然最感興趣的就是顧客將商品放入購(gòu)物車并提交訂單。但實(shí)際上購(gòu)物車管理模塊從技術(shù)實(shí)現(xiàn)角度將并不復(fù)雜，與訂單維護(hù)模塊類似。查看購(gòu)物車用到的是 和 兩個(gè)文件。圖 613 是查看購(gòu)物車的顯示界面，從圖中可以看出在購(gòu)物車內(nèi)可以存放多種商品，每種商品也可以購(gòu)買多個(gè)。顧客利用購(gòu)物車所提供的功能，可以更改所購(gòu)買商品的數(shù)量或刪除所購(gòu)買的商品。此頁的原理是每次訪問此頁時(shí)，都會(huì)從 Request 對(duì)象和 Querystring 集合和Form 集合中尋找以下三個(gè)參數(shù)：（1）ProductID ：要購(gòu)買的商品編號(hào)，位于 Querystring 集合中，如果找不到，報(bào)錯(cuò)。（2）Clear：是否清空購(gòu)物車，位于 Querystring 集合中，只有當(dāng)此參數(shù)為“Yes”時(shí)才清空購(gòu)物車。（3）Modify：修改購(gòu)物車，位于 Form 集合中，只有當(dāng)此參數(shù)為“Yes”時(shí)才更新購(gòu)物車。圖 613 查看購(gòu)物車的顯示界面然后，分別根據(jù)是否接收到這三個(gè)指令來執(zhí)行相應(yīng)的操作，這部分代碼沒有放在其他文件中，而是直接放在了 文件中的頁面體部分。在本系統(tǒng)中，購(gòu)物車是存儲(chǔ)在 Session 中，根據(jù)所需要保存的數(shù)據(jù)，需要用到兩個(gè) Session 變量，作用如下：Session(“productlist”)：購(gòu)買的商品 ID 列表，以英文逗號(hào)分隔。Session(“quantitylist”)：與 Session(“productlist”)對(duì)應(yīng)，分別表示購(gòu)買商品數(shù)量，以英文逗號(hào)分隔。例如對(duì)于下面的值：Session(“productlist”)=”70,71,72”Session(“quantitylist”)=”2,3,1”它所表示的意思是購(gòu)買編號(hào)為 70 的商品 2 件，購(gòu)買編號(hào) 71 的商品 3 件，購(gòu)買編號(hào)為 72 的商品 1 件。購(gòu)物車執(zhí)行程序流程圖如下圖 614 所示：圖 614 購(gòu)物車執(zhí)行程序流程圖 提交訂單模塊設(shè)計(jì)提交訂單模塊的主要功能：輸入用戶信息頁面（） ，輸入用戶信息表單（） ，確認(rèn)用戶信息頁面（） ，確認(rèn)用戶信息表單（） ，提交結(jié)果頁面（ ） ，提交結(jié)果表單（） 。提交訂單過程就是一個(gè)填寫顧客信息，然后向 Orderlist 和 Orderdetail 表中插入記錄的過程，一共分為三步，前兩步教為簡(jiǎn)單，第三步教復(fù)雜。圖 615為輸入用戶信息頁面。Y購(gòu)物車查看商品是否滿意下訂單調(diào)整商品N開始結(jié)束圖 615 輸入用戶信息頁面當(dāng)會(huì)員登陸后，此頁會(huì)自動(dòng)根據(jù)會(huì)員信息填寫這些內(nèi)容，會(huì)員只需要修改和確認(rèn)即可，省去了重新輸入送貨信息的麻煩。圖 616 為輸入信息用戶信息表單。這頁是對(duì)用戶上一步所輸入信息的確認(rèn)，實(shí)現(xiàn)方法與管理端界面中的查看訂單和客戶界面中的查看購(gòu)物車都很相似。圖 616 輸入用戶信息表單確認(rèn)提交后，就到了提交訂單的最后一步，在這里，需要將訂單數(shù)據(jù)寫入到數(shù)據(jù)庫中，如果操作成功，則給出成功信息，并提示顧客訂單號(hào)，用于查詢訂單，如圖 617 所示。圖 617 訂單提交成功提交訂單最后一步對(duì)應(yīng)的頁面是 。在這個(gè)文件中包含了 文件，用于實(shí)現(xiàn)具體功能，并且所的數(shù)據(jù)庫操作也都位于 文件中。在 文件中，首先利用 Request 對(duì)象獲取提交表單的數(shù)據(jù)，將一個(gè)訂單的信息寫入 Orderlist 表中，然后再將這個(gè)訂單所包含的詳細(xì)信息寫入Orderdetail 表中。因?yàn)檫@兩個(gè)操作要么同時(shí)發(fā)生，要么都不發(fā)生，所以要用到事務(wù)。在進(jìn)行第一個(gè)數(shù)據(jù)庫操作之前開始事務(wù)，在最后一個(gè)數(shù)據(jù)庫操作完成之后結(jié)束事塊務(wù)，期間如果有錯(cuò)誤發(fā)生的話，則將事務(wù)回滾。客戶端系統(tǒng)程序流程圖如下圖 618 所示：YNNY