【正文】 擊注冊(cè)按鈕則跳到注冊(cè)頁(yè)，將注冊(cè)按鈕命名為“button1”，注冊(cè)事件的程序?qū)?xiě)在button1_click事件中。用戶注冊(cè)部分可以看做是一個(gè)表格的填寫(xiě)，表格中包含用戶名、密碼、確認(rèn)密碼、真實(shí)姓名、性別、電話、身份證號(hào)、聯(lián)系地址等信息。第2節(jié) 用戶注冊(cè)靜態(tài)頁(yè)面設(shè)計(jì) 本網(wǎng)站用戶注冊(cè)頁(yè)面命名為：“”。nbsp。nbsp。nbsp。nbsp。nbsp。 用戶登陸/td/tr/tableuc1:left1 id=Left11 runat=server/uc1:left1商品分類導(dǎo)航首頁(yè)部分代碼為：TABLE id=Table2 style=WIDTH: 191px。amp。amp。amp。amp。HEIGHT:32px background=images/ border=0tr tdamp。（4） 網(wǎng)站首頁(yè)前臺(tái)代碼簡(jiǎn)介,在程序的頭部“head/head”之間填上網(wǎng)站名稱以及連接圖片image和樣式表css，程序如下：head runat=server title手表館/title LINK href=images/ type=text/css rel=stylesheet/head首頁(yè)所包含的幾個(gè)內(nèi)容中，導(dǎo)航部分在前臺(tái)代碼中體現(xiàn)為：TD height=5uc1:hsgtop2 id=Hsgtop21 runat=server OnLoad=Hsgtop21_Load/uc1:hsgtop2/TD用戶登陸注冊(cè)部分首頁(yè)代碼如下，其中l(wèi)eft1為登陸注冊(cè)功能模塊，登陸之前顯示用戶名密碼的文本框，登陸之后顯示用戶的名字以及修改密碼和退出鏈接?？紤]本網(wǎng)站為B2C網(wǎng)站，且擁有者為一家手表店，現(xiàn)將網(wǎng)站首頁(yè)頭部設(shè)置為手表店名稱，下方為網(wǎng)站導(dǎo)航，導(dǎo)航部分主要包含首頁(yè)、用戶注冊(cè)、商品列表、購(gòu)物幫助、購(gòu)物車、在線交談以及后臺(tái)管理的鏈接。再加以考慮用戶顯示屏的大小以及IE瀏覽器下窗口的大小，可以將網(wǎng)頁(yè)寬度設(shè)置在773px。亞馬遜網(wǎng)站則是使用拐角型布局，與國(guó)字型類似，只是把搜索下面的正文廣告部分占了一大半頁(yè)面，左側(cè)依舊是分類導(dǎo)航，下面則是分類展示商品。淘寶網(wǎng)的布局可以看做是一個(gè)國(guó)字型，中間部分著重展示特賣產(chǎn)品的廣告，左側(cè)為產(chǎn)品分類，導(dǎo)航條與搜索條位于網(wǎng)頁(yè)上方通屏，下面是各個(gè)賣點(diǎn)的分塊展示。本課題研究的為購(gòu)物網(wǎng)站，想要設(shè)計(jì)好購(gòu)物網(wǎng)站的首頁(yè)，就要先對(duì)目前網(wǎng)絡(luò)上的各大購(gòu)物網(wǎng)進(jìn)行分析，再結(jié)合自己的能力進(jìn)行本網(wǎng)站的首頁(yè)布局。網(wǎng)站經(jīng)過(guò)多年的發(fā)展，主要產(chǎn)生出了幾大布局，有標(biāo)題正文型、國(guó)字型、左右框架型和拐角型等。 網(wǎng)站首頁(yè)布局（一） 布局介紹網(wǎng)站首頁(yè)是用戶進(jìn)入網(wǎng)站首先看到的頁(yè)面，首頁(yè)一般命名為index或default，本網(wǎng)站命名為“”?，F(xiàn)在，網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)成為了一個(gè)專業(yè)的藝術(shù)學(xué)科，網(wǎng)頁(yè)設(shè)計(jì)至關(guān)重要，他是在網(wǎng)站受眾面前首先出現(xiàn)的，是對(duì)一個(gè)網(wǎng)站整體的詮釋。表46 表“allusers”具體結(jié)構(gòu)屬性字段名稱數(shù)據(jù)類型是否允許為空留言編號(hào)IDint否管理員用戶名usernamevarchar（20）否管理員密碼pwdnvarchar（20）否管理員權(quán)限cxvarchar（10）是添加時(shí)間addtimedatetime是第5章 網(wǎng)站前臺(tái)頁(yè)面設(shè)計(jì)第1節(jié) 首頁(yè)靜態(tài)頁(yè)面設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)概述當(dāng)今社會(huì)，網(wǎng)絡(luò)為我們帶來(lái)了很多便捷，網(wǎng)絡(luò)時(shí)代已經(jīng)降臨。在數(shù)據(jù)庫(kù)中新建公告表，命名為“allgonggao”，結(jié)構(gòu)如下表所示。表44 表“book”具體結(jié)構(gòu)屬性字段名稱數(shù)據(jù)類型是否允許為空留言編號(hào)idint否用戶名稱usernamenvarchar（20）否用戶性別sexnvarchar（4）是內(nèi)容bodynvarchar（500）是用戶qqnvarchar（10）是用戶Emailnvarchar（20）是頭像facenvarchar（10）是添加時(shí)間adddatedatetime是悄悄話選項(xiàng)ishiddenbit是首頁(yè)homepagenvarchar（20）是（7） 新聞模塊的實(shí)現(xiàn)本網(wǎng)站的數(shù)據(jù)庫(kù)中，新聞模塊與購(gòu)物幫助模塊合為一個(gè)表，節(jié)省空間。要想實(shí)現(xiàn)這個(gè)模塊的功能，就要在數(shù)據(jù)庫(kù)中新建一個(gè)表，用于存儲(chǔ)用戶對(duì)商品或網(wǎng)站的反饋信息。新建購(gòu)物車表，命名為“gwc”，此表的具體內(nèi)容與結(jié)構(gòu)如表44所示，主鍵設(shè)置同上。表43 表“allpro”具體結(jié)構(gòu)屬性字段名稱數(shù)據(jù)類型是否允許為空商品編號(hào)IDint否商品名稱mcvarchar（50）否商品類別lbvarchar(20)否商品原價(jià)price1float是商品現(xiàn)價(jià)price2float是商品描述[content]varchar(500)是圖片fnvarchar(20)是添加時(shí)間addtimedatetime是庫(kù)存量shuliangint是（5） 購(gòu)物車模塊的實(shí)現(xiàn)購(gòu)物車模塊在前臺(tái)的功能主要是顧客添加購(gòu)物車，后臺(tái)功能為管理員對(duì)購(gòu)物車所生成的訂單進(jìn)行管理。這就自然而然的形成了一個(gè)商品表，用于存放商品的名稱、庫(kù)存、類別等基本信息，其中商品表的類別是外鍵。其中“ID”為主鍵，標(biāo)識(shí)增量為1。所以要單獨(dú)建立一個(gè)商品分類表，命名為：“alllb”。其中主鍵為id，設(shè)置自動(dòng)增長(zhǎng)，標(biāo)識(shí)增量為1。（2） 會(huì)員用戶管理的實(shí)現(xiàn)會(huì)員用戶管理模塊的主要功能是：顧客進(jìn)入網(wǎng)站后，進(jìn)行注冊(cè)或登錄時(shí)需要填寫(xiě)用戶名、密碼等個(gè)人信息，為了存儲(chǔ)和操作這些信息，需要建立一個(gè)存放會(huì)員信息的表，命名為“khusers”。新建一個(gè)數(shù)據(jù)庫(kù)，命名為“net05shfwdzsw”，以下稱為“net05數(shù)據(jù)庫(kù)”。數(shù)據(jù)庫(kù)邏輯結(jié)構(gòu)設(shè)計(jì)就是將上文的概念結(jié)構(gòu)設(shè)計(jì)得出的ER圖體現(xiàn)到我們所用的數(shù)據(jù)庫(kù)管理系統(tǒng)（SQL Server2005）中，將關(guān)系模型轉(zhuǎn)換為SQL Server2005所支持的數(shù)據(jù)模型，即將ER圖轉(zhuǎn)化為數(shù)據(jù)庫(kù)中的表。 概念設(shè)計(jì)之網(wǎng)站實(shí)體ER圖根據(jù)需求分析得到的數(shù)據(jù)結(jié)構(gòu)，繪制出如下幾個(gè)實(shí)體的ER圖。一般的數(shù)據(jù)庫(kù)概念結(jié)構(gòu)設(shè)計(jì)有兩種方法，一種是集中式模式設(shè)計(jì)法，主要設(shè)計(jì)的是一種全局模式，對(duì)于小型的系統(tǒng)比較適用；另一種是視圖設(shè)計(jì)法，這種方法與第一種不同之處在于將體統(tǒng)分解開(kāi)，形成幾個(gè)小的子系統(tǒng)，通過(guò)建立局部視圖來(lái)形成全局模式。根據(jù)前文在網(wǎng)站前后臺(tái)的幾個(gè)功能模塊上的描述可知，本數(shù)據(jù)庫(kù)系統(tǒng)主要目的是實(shí)現(xiàn)會(huì)員、商品、商品類別、新聞等信息的收錄、修改、刪除、查詢等操作，前后臺(tái)功能與數(shù)據(jù)庫(kù)關(guān)系具體如圖41所示。本購(gòu)物網(wǎng)站所使用的為SQL Server數(shù)據(jù)庫(kù)管理工具，利用數(shù)據(jù)庫(kù)來(lái)存儲(chǔ)和管理信息，讓購(gòu)物網(wǎng)站更加完善，使用者更加方便。（8） 修改密碼在后臺(tái)功能中，修改密碼是必不可少的，管理員可以隨時(shí)修改自己的密碼。從網(wǎng)站優(yōu)化方面看，友情鏈接是增加網(wǎng)站流量和PR值的一個(gè)重要手段。管理員對(duì)新聞和購(gòu)物幫助都可以進(jìn)行添加、修改、刪除的操作。（5） 訂單管理管理員在訂單管理界面可以查看訂單，修改發(fā)貨狀態(tài)，刪除訂單。對(duì)于商品類別，管理員可以進(jìn)行添加、修改、刪除操作。（3） 留言交流管理管理員可以查看用戶留言，并通過(guò)郵箱或者電話對(duì)顧客的問(wèn)題進(jìn)行回復(fù)，在留言管理中，管理員仍然只具有刪除留言的權(quán)限。 后臺(tái)管理部分功能模塊（一） 管理員管理此項(xiàng)為超級(jí)管理員的權(quán)限，可以管理網(wǎng)站的其他普通管理員，賦予權(quán)限或者進(jìn)行添加、修改、刪除的工作。（5） 新聞查看功能用戶進(jìn)入本網(wǎng)站不僅可以單純的購(gòu)物，還顆粒瀏覽最新新聞動(dòng)態(tài)，更加人性化。（3） 購(gòu)物車管理功能：顧客選擇完商品后可進(jìn)入購(gòu)物車頁(yè)面，查看自己購(gòu)買的商品，若購(gòu)物車中的商品不是顧客想要的或者數(shù)量不對(duì)，顧客可以刪除購(gòu)物車重新下單。（2） 產(chǎn)品分類與搜索功能用戶瀏覽網(wǎng)上商城，將自己需要的產(chǎn)品添加到購(gòu)物車。注冊(cè)時(shí)要完成個(gè)人信息的填寫(xiě)。根據(jù)前臺(tái)以及模塊功能，并加以分析其他購(gòu)物網(wǎng)站可總結(jié)得出：此手表網(wǎng)店的后臺(tái)管理系統(tǒng)主要需要實(shí)現(xiàn)的功能有：后臺(tái)管理員管理、用戶管理、商品管理、商品類別管理、新聞管理、訂單管理等。（3） 后臺(tái)管理之后臺(tái)主要功能網(wǎng)站的后臺(tái)是由網(wǎng)站管理員使用的，是一個(gè)用來(lái)管理網(wǎng)站，對(duì)網(wǎng)站的內(nèi)容進(jìn)行增加、刪除或修改的界面。第五步：顧客挑選結(jié)束，進(jìn)入購(gòu)物車，確認(rèn)無(wú)誤后系統(tǒng)默認(rèn)為訂單。第三步：顧客查看商品詳細(xì)說(shuō)明，了解商品性能，價(jià)格與庫(kù)存數(shù)量等。第二步：顧客登陸成功，進(jìn)入手表商店，挑選商品。（2） 前臺(tái)系統(tǒng)之顧客操作步驟根據(jù)網(wǎng)站的主要用戶，顧客訪問(wèn)網(wǎng)站進(jìn)行購(gòu)物的操作流程基本如下：第一步：顧客進(jìn)入網(wǎng)站首頁(yè)，首先進(jìn)行注冊(cè)會(huì)員，填寫(xiě)會(huì)員名稱、密碼、郵箱等基本信息。第2節(jié) 網(wǎng)站需求分析 功能需求分析（1） 項(xiàng)目目的本項(xiàng)目目的為開(kāi)發(fā)一個(gè)網(wǎng)上商店，幫助手表店老板打通網(wǎng)絡(luò)渠道，通過(guò)網(wǎng)站實(shí)現(xiàn)手表的銷售與管理功能。此網(wǎng)站涉及到的內(nèi)容有手表網(wǎng)店的前臺(tái)界面設(shè)計(jì)，功能模塊的開(kāi)發(fā)，以及測(cè)試和維護(hù)。其中管理員相當(dāng)于手表店的員工，其權(quán)限為：管理產(chǎn)品，管理會(huì)員，管理訂單，而超級(jí)管理員也就是網(wǎng)站的老板，除了擁有管理員的所有權(quán)限外，還擁有管理員工的權(quán)限。為一家擁有手表實(shí)體店的商戶所建設(shè)。他使得網(wǎng)站的制作更加簡(jiǎn)便化、形象化，不懂HTML語(yǔ)言的人使用Dreamweaver也可制作出簡(jiǎn)單的網(wǎng)頁(yè)。Dreamweaver使用所見(jiàn)即所得接口，擁有自動(dòng)檢測(cè)標(biāo)簽功能以及強(qiáng)大的CSS支持，適應(yīng)當(dāng)前所有主流瀏覽器。而Dreamweaver則使得網(wǎng)頁(yè)的編輯與制作可視化，更加便于使用。在使用這種結(jié)構(gòu)時(shí)，首先要對(duì)頁(yè)面有一個(gè)整體的規(guī)劃，先將頁(yè)面用DIV分塊，設(shè)計(jì)好每個(gè)塊的大小和位置，再連接CSS，對(duì)每個(gè)塊進(jìn)行定位，實(shí)現(xiàn)網(wǎng)站頁(yè)面的整體規(guī)劃。（2） CSS+DIVCSS+DIV是一種網(wǎng)站布局，這種結(jié)構(gòu)已經(jīng)獲得大多數(shù)人的認(rèn)可，目前大部分網(wǎng)頁(yè)的設(shè)計(jì)都是采用這種布局。而CSS可以看做是網(wǎng)頁(yè)的格式，使用CSS制作網(wǎng)頁(yè)，不僅使得網(wǎng)頁(yè)風(fēng)格統(tǒng)一，更加大大的縮減了頁(yè)面代碼提高了網(wǎng)頁(yè)制作的速度和瀏覽速度。用戶在瀏覽網(wǎng)頁(yè)時(shí)所需的僅是網(wǎng)頁(yè)的內(nèi)容，而網(wǎng)頁(yè)的格式卻不是用戶希望或者說(shuō)需要看到的。