【正文】 ichangjia varchar 100 huiyuanjia int 4 Buynum int 4 vipjia tinyint 1 bestproduct datetime 8 是 （ 5） 產(chǎn)品 單位 表 主鍵：類型 ID NOT NULL 說明：產(chǎn)品 單位表記錄產(chǎn)品單位 。其表結(jié)構(gòu)如下表 44 所示： 表 44 產(chǎn)品類型表（ danwei） 列名 數(shù)據(jù)類型 長度 允許空 ID 自動(dòng)編號(hào) 4 danweiname varchar 4 danweiorder int 20 （ 5）訂單表 主鍵：無 說明：訂單表記錄在客戶的一個(gè)訂單中，針對一件商品的訂貨信息。 其表結(jié)構(gòu)如表 45 所示： 表 45 訂單表（ telorder） 字段名 數(shù)據(jù)類型 長度 允許空 t_id 自動(dòng)編號(hào) 4 t_name int 4 t_add int 4 t_tel varchar 30 dates date 8 istate varchar 50 user_name varchar 50 rmb money 50 t_biaozhi int 4 （ 6） 送貨 表 主鍵： 送貨 編號(hào) NOT NULL 說明 ： 發(fā)貨訂單表記錄針對用戶的一個(gè)訂單的詳細(xì)信息。其表結(jié)構(gòu)如下表 46 所示： 表 46 送貨 表（ shop_songhuo） 在線手機(jī)銷售網(wǎng)站 28 字段名 數(shù)據(jù)類型 長度 允許空 songid 自動(dòng)編號(hào) 4 subject varchar 20 jsmoney varchar 10 fangshi varchar 60 songidorder varchar 6 （ 7） 評論 表 主鍵： 評論 編號(hào) NOT NULL 說明： 實(shí)現(xiàn)評論 功能。其表結(jié)構(gòu)如下表 47 所示： 表 47 評論 表（ shop_pinglun） 字段名 數(shù)據(jù)類型 長度 允許空 pinglunid 自動(dòng)編號(hào) 4 productid varchar 100 pinglunname text 16 pingluncontent varchar 200 pingluntitle varchar 50 pinglundate int 4 在線手機(jī)銷售網(wǎng)站 29 第 6 章 網(wǎng)站的風(fēng)格及頁面設(shè)計(jì) 頁面設(shè)計(jì)的原 則 設(shè)計(jì)的 3C原則：所謂 3C 原則是指簡潔、一致性、好的對比度。 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)，局部對比 ”，也就是：主頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對比。在色彩的運(yùn)用上，可 以根據(jù)主頁內(nèi)容的需要，分別采用不同的主色調(diào)。因?yàn)樯示哂邢笳餍?，例如：嫩綠色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標(biāo)志色，例如：軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺，例如冷、暖的感覺，進(jìn)、退的效果等。另外，色彩還有民族性，各個(gè)民族由于環(huán)境、文化、傳統(tǒng)等因素的影響，對于色彩的喜好也存在著較大的差異。 所以，我以藍(lán)白色搭配為主色調(diào)其它顏色相輔，給人以寧靜深遠(yuǎn)的回味，導(dǎo)航欄用七色箭頭點(diǎn)綴，彩色圖片和動(dòng)態(tài)元素的使用使頁面樸素、大方、莊重。 在線手機(jī)銷售網(wǎng)站 30 網(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ì)了一張簡單的網(wǎng)站標(biāo)題 “ 新世紀(jì)手機(jī)商城 ” 字體顏色選用淺藍(lán)，以便協(xié)調(diào)網(wǎng)站的基色。但不管怎樣，標(biāo)題的主色調(diào)應(yīng)先定下來，這對后面幾步的版面影響很大。 第二步明確頁面上要鏈接的目錄，要將他們放在較顯眼的位置，根據(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)了，我們在根據(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)頁顯得簡潔。但沒有使用共享邊框，而是單獨(dú)的設(shè)計(jì)制作了上邊框的內(nèi)容 ，下邊框的內(nèi)容 ，和作邊框的內(nèi)容 。使用 !include file=語句完成 對上述部分的調(diào)用，實(shí)現(xiàn)頁面共享使每層網(wǎng)頁具有相同的上下及左邊框統(tǒng)一了風(fēng)格，這樣的調(diào)用方法效地解決了導(dǎo)航欄及超鏈接在深層網(wǎng)頁的相對路徑偏差問題，實(shí)現(xiàn)鏈接路徑完全統(tǒng)一化。 網(wǎng)站頁面結(jié)構(gòu)布局如下圖 52 所示： 網(wǎng)站購物功能鏈接區(qū)（ ） 在線手機(jī)銷售網(wǎng)站 31 手機(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ī)銷售網(wǎng)站 32 是根據(jù)會(huì)員是否登陸來顯示歡迎信息或登陸表單。 界面左惻快捷菜單設(shè)計(jì) 左惻快捷菜單包含三部分，分別是手機(jī)廠商、熱門商品和最優(yōu)惠商品。 文件的實(shí)現(xiàn)，它所包含的每一部分都是由一個(gè)表格（ table）構(gòu)成，由于需要頁面美化，其中每個(gè)表格都包含了一些 HTML 修飾代碼。 管理端界面結(jié)構(gòu)設(shè)計(jì) 進(jìn)行 ASP 應(yīng)用程序開發(fā)的重要異步是設(shè)計(jì)一個(gè)一般的界面結(jié)構(gòu)，在這個(gè)結(jié)構(gòu)確定了之后，就可以將不同的內(nèi)容添加到這個(gè)框架中，這樣即便于整個(gè)網(wǎng)站統(tǒng)一風(fēng)格，也減少了界面設(shè)計(jì)的工作量。 在本系統(tǒng)中的界面結(jié)構(gòu)是由頭（ ），體（ iframe）和尾（ ）三部分組成。由于使用了框架（ iframe），于是只要將各個(gè)模塊的頁面裝入 iframe 即可，并且在這些頁面中無需包含頭和尾信息。 為了提高代碼的重用性，我把管理界面部分相同的頭和尾做成兩個(gè)文件分別命名為 和 。他們基本是純 HTML 代碼。 在線手機(jī)銷售網(wǎng)站 33 第 7 章 系統(tǒng)詳細(xì)設(shè)計(jì) 管理端界面設(shè)計(jì) 客戶端界面的大部分功能都是以管理端為前提的，因?yàn)榭蛻舳怂@示的數(shù)據(jù)大部分需要通過管理端來添加。因此，先從管理端進(jìn)行開發(fā)與設(shè)計(jì)。管理端相對客戶端要復(fù)雜一些，因?yàn)樵谶@里需要對所有信息進(jìn)行維護(hù)，包括瀏覽，增加，修改和刪除等操作。為了便于系統(tǒng)維護(hù)，頁面的命名采用 “模塊名 +功能名 ”的方式。 商品（手機(jī)） 管理設(shè)置 商品（手機(jī)） 管理設(shè)置 的主 要功能：顯示商品列表（ ），添加商品頁面（ ），保存添加的商品信息（ ），修改商品界面（ ），保存商品修改結(jié)果（ ），上傳圖片界面（ ），保存上傳圖片（ ），推薦或取消推薦商品（ ）。 商品維護(hù)模塊可以說是在所有管理模塊中最復(fù)雜的一個(gè)，也是整個(gè)系統(tǒng)的核心，商品維護(hù)與廠商管理相比，難點(diǎn)在于不僅涉及數(shù)據(jù)較多，而且還涉及商品 圖片上傳，推薦或取消推薦商品等。 商品列表主要用到 這個(gè)文件，圖 61 為管理端商品列表的運(yùn)行結(jié)果，在這里可以看到它與廠商維護(hù)界面非常相似，這樣便于網(wǎng)站管理人員使用。 在線手機(jī)銷售網(wǎng)站 34 圖 61 管理端商品列表運(yùn)行結(jié)果 此頁的原理是每次訪問此頁時(shí)，都會(huì)從 Request 對象的 QuerString 集合和 Form 集合中尋找以下三個(gè)參數(shù)： Page：當(dāng)前頁號(hào)，位于 QuerString集合中，如果找不到，默認(rèn)為 “1”。 Mykeyword：過濾產(chǎn)品的關(guān)鍵字，位于 Form 集合中，如果找不 到，默認(rèn)為空。 Producttype：產(chǎn)品類型編號(hào)，位于 Form 集合中，如果找不到，默認(rèn)為 “0”。 然后根據(jù) mykeyword 和 producttype 的只值來組織 SQL語句從 product 表中檢索數(shù)據(jù)。另外，由于本頁需要在下拉列表中顯示所有的廠商名稱，并且在商品列表中也有相應(yīng)的列需要顯示廠商名稱，所以需要在檢索 product 表之前先從 producttype表中檢索出所有的廠商編號(hào)和名稱。 添加商品用到 和 兩個(gè)文件，圖 62 為在商品列表頁面中單擊[添加 ]按鈕后所看到的添加商品頁面。從圖中可以看到，在添加商品時(shí)仍需要一個(gè)下拉列表框指定它所屬的廠商，在這里一定要對輸入進(jìn)行驗(yàn)證，包括輸入是否為空，所輸入的價(jià)格必須是數(shù)字，以及輸入長度的限制等。這些是純 HTML 和 JavaScript 技巧。 在線手機(jī)銷售網(wǎng)站 35 圖 62 添加商品頁面 在添加商品截面中單擊 [添加 ]按鈕后，就會(huì)將數(shù)據(jù)提交到 文件中，這個(gè)文件將 文件所提交的數(shù)據(jù)寫到數(shù)據(jù)庫中，其實(shí)原理與天家廠商很相似，就是將一個(gè)表單中的數(shù)據(jù)利用 ADO 對象或 SQL 語句寫入到數(shù)據(jù)庫中。 在這個(gè)頁面中，仍然要注意操作完數(shù)據(jù)庫以后，要手工釋放連接。另外，這里只進(jìn)行了簡單的數(shù)據(jù)驗(yàn)證，如果提交的價(jià)格不是數(shù)字的話，加工它們默認(rèn)置為 “1”，而不恩能夠直接用 CInt 轉(zhuǎn)為 “0”，否則在將來計(jì)算商品打折時(shí)由于分母為 “0”會(huì)出錯(cuò)。 修改商品用到文件 和 。修改商品與添加商品的界面非常相似，事實(shí)上也的確如此，所不同的是，在 元素中，而在 中根本不存在檢索商品數(shù)據(jù)的問題。 商品 ID 通過 URL參數(shù)傳入，因此首先要從 Request 的 QueryString集合中取出商品 ID，并需要將其兩邊的空格和可能存在的單引號(hào)去除，然后組織 SQL 語句刪除。這里的原理很簡單，但仍然要注意的是安全問題，在用 id 后，必須對其合法性進(jìn)行判斷。 商品管理程序流程圖如下圖 63 所示： 商品管理