您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 建站之電子商務網(wǎng)站前臺功能設計

建站之電子商務網(wǎng)站前臺功能設計

文章來源：365jz.com 點擊數(shù)：487 更新時間：2018-01-27 11:36 參與評論

電子商務網(wǎng)站前臺功能設計

前臺系統(tǒng)直接與客戶打交道，其內(nèi)容的完整性和合理性是電子商務網(wǎng)站是否吸引客戶的關鍵因素之一，所以在設計前臺系統(tǒng)時應盡量從用戶的角度和網(wǎng)絡營銷的角度出發(fā)考慮其功能的實現(xiàn)。本節(jié)所介紹的電子商務系統(tǒng)主要包括商品信息查看、會員注冊及登錄、購物車、收銀臺、商品查詢及留言板等功能。

電子商務網(wǎng)站的規(guī)劃

在中國，搜索引擎已成為企業(yè)認可的網(wǎng)站推廣手段之一，是網(wǎng)絡營銷服務商最主要的服務內(nèi)容。中小企業(yè)已成為搜索引擎營銷最活躍的群體，大型企業(yè)也開始關注搜索引擎營銷策略。經(jīng)歷了2005年的繁華之后，中國搜索引擎市場規(guī)模呈穩(wěn)步增長之勢。2006年中國搜索引擎市場規(guī)模達到16.6億元，較2005年實現(xiàn)了40.6%的增長。這是中國搜索引擎市場連續(xù)三年增幅超過40%，前兩年的增幅分別為53.7%和42.2%。而2007年中國搜索引擎市場更是以76.5％的高速增長達到了29.3億元的規(guī)模。2012年中國搜索引擎企業(yè)收入規(guī)模為281億元，2013年達到388億元，預期到2016年，中國搜索引擎企業(yè)收入規(guī)模將達到754億元。但是搜索引擎營銷服務市場仍以搜索引擎廣告產(chǎn)品銷售為主，基于自然搜索排名的搜索引擎優(yōu)化市場非常混亂，搜索引擎營銷的應用尚處于較低層次。此外，中國搜索引擎服務市場還存在著進入成本高、產(chǎn)品同質(zhì)化現(xiàn)象嚴重、行業(yè)內(nèi)部競爭激烈等諸多問題。

本網(wǎng)站立足于日用產(chǎn)品的銷售、用戶可以完成查看商品信息、查詢商品信息、購物等操作。用戶可通過瀏覽網(wǎng)頁，輸入要查詢的產(chǎn)品或相關知識，網(wǎng)站將自動快速地在數(shù)據(jù)庫中搜索并向用戶反饋搜索結果，對于用戶滿意的產(chǎn)品直接提供網(wǎng)上購買服務，從而改善目前用戶獲取產(chǎn)品信息過程過于繁瑣且不夠全面和準確的現(xiàn)狀，為消費者提供清新的用戶體驗。

網(wǎng)站定位的主要消費群體：學生、教師、白領、高端用戶、企業(yè)單位等。該消費群體的特點：具有一定購買力，部分追求時尚，部分追求實用。

網(wǎng)站的功能結構設計如下。

⑴ 商品搜索引擎：通過搜索引擎方便快捷地向用戶提供商品信息，方便用戶購物。

⑵ 購物車：具有向顧客提供存放購買商品的信息、計算商品的數(shù)目和價格等功能，用戶通過購物車還可以修改商品數(shù)目、退回某商品或全部商品。

⑶ 客戶服務中心：為客戶提供各種操作的說明及網(wǎng)站的各種服務，包括購物向導、服務特點、服務承諾、能否退換貨、商場支持的付款方式、送貨上門是否另收費、在確認收到貨款后的發(fā)貨時間等客戶關心的信息。

⑷ 訂單查詢：用戶可根據(jù)訂單號和相應信息進入訂單狀態(tài)界面，該界面提供訂單日期、是否已收到貨款、是否已發(fā)貨和發(fā)貨日期等信息。

⑸ 留言板：運用留言板方式，記錄客戶在瀏覽網(wǎng)站或購物之后，對網(wǎng)站內(nèi)容、提供的服務等的意見。通過留言板一方面可以了解客戶需求，改進服務，豐富商品種類；另一方面通過答復，讓用戶了解商場提供的服務，增加用戶對網(wǎng)站的信任度。

創(chuàng)建數(shù)據(jù)庫及數(shù)據(jù)表

整個電子商務系統(tǒng)需要4張數(shù)據(jù)表，分別為商品信息表、會員信息表、后臺管理員信息表、商品類別表。下面創(chuàng)建數(shù)據(jù)庫及數(shù)據(jù)表。

1 打開 SQL Server Management Studio，在【對象資源管理器】對話框中右鍵單擊【數(shù)據(jù)庫】對話框，在彈出菜單中選擇【新建數(shù)據(jù)庫】命令，如下圖所示，在【數(shù)據(jù)庫名稱】文本框中輸入創(chuàng)建的數(shù)據(jù)庫名稱“dzsw”，單擊【確定】按鈕。

2 在【對象資源管理器】頁框中單擊【數(shù)據(jù)庫】圖標，展開數(shù)據(jù)庫選項，單擊【dzsw】前的圖標，展開選項，右鍵單擊【表】，在彈出的對話框中選擇【新建表】，打開【新建表】頁面，如下圖所示，表的默認名字為“Table_1”，在【屬性】列表中將名稱修改為“spxx”。

3 在工作區(qū)中添加列名并對數(shù)據(jù)類型進行說明，如下圖所示。

4 按照步驟 2 和步驟 3 分別創(chuàng)建“會員信息表”、“后臺管理員信

息表”、“商品類別表”，并將表的名稱分別命名為“hyxx”、“htgly”、“splb”，其表結構分別如下圖（上）、下圖（下左）、下圖（下右）所示。

5 分別為這些表添加部分數(shù)據(jù)。

電子商務網(wǎng)站的主頁結構

主頁結構的具體制作步驟如下。

1 新建HTML，并保存為index.html作為網(wǎng)站的主頁。

2 總體來講，網(wǎng)站的首頁包括四大部分，需要在頁面中建立4個1行1列的表格，每個表格的寬度設置為“778像素”，填充、間距和邊框都設置為“0”，背景顏色設置為“白色”，并將對齊方式設置為“居中對齊”。將第1個表格拆分為3列，分別插入相應內(nèi)容；第2個表格拆分為8列，分別輸入相應文字并對其進行編輯；第4個表格輸入版權信息。將上述保存為模板，效果如下圖所示。

3 在主頁的中間部分加入具體內(nèi)容，本頁面主要以表格布局內(nèi)容。

打開【頁面屬性】對話框，選擇【鏈接】選項，對其中涉及的各項進行設置，如下圖（左）所示。

4 選擇【標題/編碼】選項，對其中涉及的各項進行設置，如下圖（右）所示。

5 利用表格將中間部分內(nèi)容分成兩大塊，將光標定位在第3個表格中，右擊【表格】?【拆分單元格】命令，在左側單元格中插入兩個寬度為213像素的表格，在第1個表格中插入背景圖片，代碼為

background="image/bj.gif"，將光標定位在第1個表格中，將其拆分成兩列單元格，并適當調(diào)整左右兩側單元格的寬度。

說明將其拆分成兩個單元格，是可以通過調(diào)整左側單元的寬度來調(diào)整右側單元格距表格左側的距離的，方便文本內(nèi)容的格式調(diào)整。

將光標定位于右側單元格，輸入文本內(nèi)容。設置內(nèi)容滾動的代碼如下：

01　< td><ma rquee width= "200" direction= "up "　height= "100"onmouseout= " this .start（）" onmouseover= " this .stop（）"
scrollamount= "2 "scrolldelay="120">本網(wǎng)站現(xiàn)在在進行定期維護，維護時間內(nèi)無法訪問網(wǎng)站，以后可以正常使用網(wǎng)站。我們將會繼續(xù)努力為大家提供更優(yōu)質(zhì)的服務！謝謝大家 !02　　</marquee>03　　</td>

效果如下圖所示。

6 在左側第2個表格插入“聯(lián)系我們”的文本內(nèi)容，效果如下圖（左）所示。

7 在右側表格插入4個表格，并分別將第2、4個表格拆分成兩列，分別插入文本和圖像信息，效果如下圖（右）所示。

8 主頁效果如下圖所示。

商品分類及列表

創(chuàng)建本網(wǎng)頁可以利用模板提高工作效率，具體步驟如下。

1 新建一個HTML頁面，保存為shangpinfenlei.html。選擇菜單【修改】?【模板】?【應用模板到頁】命令，在彈出的【選擇模板】對話框中的【站點】下拉列表框中選擇【電子商務】選項，在【模板】文本框中輸入創(chuàng)建的模板文件“moban”，如下圖所示。

2 應用模板之后網(wǎng)頁效果如下圖所示。

3 在【內(nèi)容】可編輯區(qū)域插入10個div標簽，并分別輸入相應文本信息，效果如下圖所示。

商品詳細信息頁面

利用模板設計本頁面，可以提高工作效率，具體步驟如下。

1 新建一個HTML頁面，保存為shangpinxiangxi.html。選擇菜單【修改】?【模板】?【應用模板到頁】命令，將模板應用到shangpinxiangxi.html網(wǎng)頁。

2 在【內(nèi)容】可編輯區(qū)域插入3個表格，將第1個表格拆分為兩列，第1列插入圖片，第2列拆分為6行，分別輸入相應文本，在第5行分別插入【表單】菜單中的一個“文本域”、兩個“按鈕”，修改它們的屬性。在第2、3個表格分別輸入相應文字信息。效果如下圖所示。

會員注冊及登錄

會員注冊頁面設計的具體步驟如下。

1 新建一個HTML頁面，保存為zhuce.html。選擇菜單【修改】?【模板】?【應用模板到頁】命令，將模板應用到zhuce.html網(wǎng)頁。

2 在【內(nèi)容】可編輯區(qū)域插入1個5行4列的表格，調(diào)整至合適的寬度，在第2列單元格內(nèi)分別輸入相應文本信息，第3列插入“文本域”，分別設置其寬度為合適值，第4列單元格內(nèi)輸入相應文本信息，效果如下圖所示。

3 選中第1行的文本域，為其連接數(shù)據(jù)庫，單擊【服務器行為】

面板的圖標，在彈出菜單中選中【插入記錄】命令，如下圖所示。

4 彈出【插入記錄】對話框，在【連接】下拉列表框中選擇本次連接的數(shù)據(jù)庫名“dzsw”，在【插入到表格】下拉列表框中選擇“會員信息”表“dbo.hyxx”，在【插入后，轉到】文本框中插入成功之后轉到的頁面“chenggong.html”，在【獲取值自】下拉列表框中選擇插入的相應文本域，在【列】下拉列表框中選擇該文本域插入到的數(shù)據(jù)表的列，如下圖所示，單擊【確定】按鈕，完成插入記錄。

5 完成之后，頁面如下圖所示。