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