第6章 電子商務網(wǎng)站設計技術

1、第6章 電子商務網(wǎng)站設計技術,目 錄,6.1 WEB技術概述6.2 電子商務網(wǎng)站概述6.3 電子商務網(wǎng)站開發(fā)技術6.4 電子商務網(wǎng)站的設計,實踐訓練 網(wǎng)上交易與網(wǎng)上商店的搭建,上頁,下頁,6.1.1 Web的基本知識6.1.2 Web標準6.1.3 常用Web開發(fā)工具,6.1 WEB技術概述,Web是WWW（World Wide Web）的簡稱，又稱 “萬維網(wǎng)”。WWW是一個全球性的通信系統(tǒng)，也是世界上最大

2、的電子信息倉庫，以HTML語言和HTTP協(xié)議為基礎，能夠提供面向各種Internet服務的、一致的用戶界面的一種信息服務系統(tǒng)。Web 應用的客戶端通常為瀏覽器（Browser），服務端為Web 服務器（Web Server），即通常所說的B/S結(jié)構。1. B/S 結(jié)構2. B/S 結(jié)構常用技術3. Web服務器,6.1.1 Web的基本知識,1．結(jié)構標準語言（2）XHTML （1）XML 2. 表現(xiàn)標準語言3.行為標準,

3、6.1.2 Web標準,1.Macromedia Dreamweaver2.Visual InterDev3.Zend Studio4.Macromedia JRun5.其他Web 開發(fā)工具,6.1.3常用Web開發(fā)工具,6.2.1電子商務網(wǎng)站定義6.2.2電子商務網(wǎng)站功能6.2.3電子商務網(wǎng)站分類6.2.4企業(yè)電子商務網(wǎng)站模式,6.2 電子商務網(wǎng)站概述,電子商務網(wǎng)站是樹立企業(yè)形象和實現(xiàn)現(xiàn)代化辦公的標志，是與用戶交流及溝通

4、的窗口；是買方和賣方信息交匯與傳遞的渠道；是企業(yè)或商家展示其產(chǎn)品與服務的舞臺；是企業(yè)或商家體現(xiàn)其形象和經(jīng)營戰(zhàn)略的載體。,6.2.1電子商務網(wǎng)站定義,（1）企業(yè)形象宣傳功能（2）信息編輯功能（3）咨詢洽談功能（4）網(wǎng)上商品訂購功能（5）網(wǎng)上支付功能（6）用戶信息管理功能（7）服務傳遞功能（8）銷售業(yè)務信息管理功能,6.2.2電子商務網(wǎng)站功能,1．初級電子商務網(wǎng)站2．中級電子商務網(wǎng)站3．高級電子商務網(wǎng)站,6.2.3電子商務

5、網(wǎng)站分類,1．基于ERP的內(nèi)聯(lián)網(wǎng)電子商務網(wǎng)站模式2．基于EDI的外聯(lián)網(wǎng)電子商務網(wǎng)站模式3．基于Web的互聯(lián)網(wǎng)電子商務模式（1）聯(lián)機商店型。（2）專業(yè)服務型。（3）混合型。（4）中介型。,6.2.4企業(yè)電子商務網(wǎng)站模式,6.3.1電子商務網(wǎng)站的體系結(jié)構6.3.2客戶端技術6.3.3服務器端技術,6.3 電子商務網(wǎng)站開發(fā)技術,6.3.1電子商務網(wǎng)站的體系結(jié)構,圖6-3 基于Web的電子商務網(wǎng)站體系結(jié)構,1．HTML2．D

6、HTML3．XML4．腳本技術,6.3.2客戶端技術,1．CGI技術CGI是Common Gateway Interface的縮寫，是一種公共網(wǎng)關接口。本質(zhì)上，CGI是一個運行在服務器上的程序，是Web Server調(diào)用外部程序的一個接口。通過CGI，Web Server能將用戶從瀏覽器中輸入的數(shù)據(jù)作為參數(shù)，調(diào)用本機上的程序，并把運行結(jié)果返回用戶瀏覽器。,6.3.3服務器端技術,2．ASP技術ASP是Active Server

7、Pages 的縮寫，是一種動態(tài)服務器主頁。ASP是一套服務器端的腳本運行環(huán)境。通過ASP可以結(jié)合HTML網(wǎng)頁、ASP指令、ActiveX元素和JavaScript腳本或VBScript腳本建立動態(tài)、交互、高效的Web服務器應用程序。,,3．PHP技術PHP是Personal Home Page的縮寫，是—種跨平臺的服務器端的嵌入式腳本語言，它大量地借用c、Java和Perl語言的語法，并結(jié)合PHP自己的特性，使Web開發(fā)者能夠快速地寫

8、出動態(tài)生成頁面。它支持目前絕大多數(shù)數(shù)據(jù)庫。最重要的一點，PHP是完全免費的，不用花錢就可以從各個站點自由下載，而且可以不受限制地獲得源碼，甚至可以從中加進用戶自己需要的特色。,,4．JSP技術JSP是Java Server Pages的縮寫，是SUN公司于1999年6月推出的新技術，是Servlet2.1 API的擴展。利用這一技術可以建立先進、安全和跨平臺的動態(tài)網(wǎng)站，而且它能夠適應市場上包括Apache Web Server、IIS

9、在內(nèi)的大部分的服務器產(chǎn)品。,,6.4.1 電子商務網(wǎng)站內(nèi)容設計6.4.2 網(wǎng)站信息結(jié)構的設計6.4.3 網(wǎng)頁的可視化設計6.4.4 典型的電子商務網(wǎng)站案例,6.4 電子商務網(wǎng)站的設計,1．網(wǎng)站內(nèi)容設計的原則（1）新、精、專的信息內(nèi)容（2）安全快速的訪問（3）美感十足、方便用戶訪問的頁面,6.4.1 電子商務網(wǎng)站內(nèi)容設計,2．網(wǎng)站內(nèi)容設計流程（1）收集與該網(wǎng)站有關的一些關鍵信息（2）網(wǎng)站信息結(jié)構的設計（3）網(wǎng)站運行環(huán)境的

10、選擇（4）進行網(wǎng)頁可視化設計（5）網(wǎng)頁制作（6）網(wǎng)站測試（7）網(wǎng)站發(fā)布,,1．網(wǎng)站信息內(nèi)容及其功能模塊信息發(fā)布型電子商務網(wǎng)站中信息結(jié)構的設計主要是從公司、產(chǎn)品、服務等幾個方面來進行的。（1）公司概況（2）員工信息（3）產(chǎn)品目錄（4）產(chǎn)品價格表（5）產(chǎn)品搜索（6）公司動態(tài)（7）網(wǎng)上訂購（8）銷售網(wǎng)絡,6.4.2 網(wǎng)站信息結(jié)構的設計,（9）售后服務（10）技術支持信息（11）聯(lián)系信息（12）財務報告（13）

11、輔助信息（14）其他內(nèi)容信息（15）增值服務,2．網(wǎng)站鏈接結(jié)構的設計（1）樹狀鏈接結(jié)構（一對一）（2）網(wǎng)狀鏈接結(jié)構（一對多）3．網(wǎng)站整體風格的設計網(wǎng)站的整體風格設計在網(wǎng)站的內(nèi)容設計中，既是 設計的重點又是難點，是所有網(wǎng)頁開發(fā)者最希望掌握 的，其原因在于沒有一個固定的程式可以參照和模仿。給定一個主題，任何兩個人都不可能設計出完全一樣 的網(wǎng)站，這就是風格。,,1．網(wǎng)頁設計應遵循的原則（1）網(wǎng)頁命名要簡潔（2）確保頁面的

12、導航性好（3）網(wǎng)頁要易讀（4）合理設計視覺效果（5）為圖片添加文字說明（6）不宜使用太多的動畫和靜態(tài)圖片（7）頁面長度要適中（8）Java 程序少用為宜（9）整個頁面風格要一致（10）盡量使用相對超級鏈接（11）不要濫用尖端技術,6.4.3 網(wǎng)頁的可視化設計,2．網(wǎng)頁版面布局設計3．網(wǎng)頁色彩設計4．網(wǎng)頁中圖片和文字的設計,,1．信息發(fā)布類的電子商務網(wǎng)站,6.4.4典型的電子商務網(wǎng)站案例,2．拍賣類的電子商務網(wǎng)站,,

13、3.零售類的電子商務網(wǎng)站,,【實訓目的】1.了解電子商務網(wǎng)站的功能。2.熟悉和掌握電子商務網(wǎng)站的開發(fā)技術。3.了解和掌握電子商務網(wǎng)站設計流程?！緦嵱杻?nèi)容】1.直接從網(wǎng)站“淘寶網(wǎng)”中尋找信息，創(chuàng)建自己的淘寶店鋪。（1）進入Internet網(wǎng)后，直接在IE瀏覽器中的URL地址上鍵入：http://www.taobao.com淘寶網(wǎng)站主頁地址后，出現(xiàn)該網(wǎng)站主頁內(nèi)容。（2）觀看該主頁的整體布局、框架等情況、觀看該主頁的顏色搭配情況

14、。,實踐訓練 網(wǎng)上交易與網(wǎng)上商店的搭建,（3）觀看電子商務網(wǎng)站的具體內(nèi)容，結(jié)構以及鏈接方法。（4）實際感受一下電子購物的整體過程。點擊某一個您認為所需的電子商品并對該物進行網(wǎng)上交易。（5）開通一個自己的淘寶店鋪，并進行裝修和設計。2.上網(wǎng)搜索5個不同類型的網(wǎng)站, 比較其電子商務功能, 寫出比較分析報告。3．通過自己在網(wǎng)上購物的實際經(jīng)歷，從一個客戶的角度寫出有關購物網(wǎng)站運行與管理情況的分析報告。4．策劃并書寫創(chuàng)辦一個網(wǎng)上網(wǎng)站