第6章 電子商務(wù)網(wǎng)站設(shè)計(jì)技術(shù)

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

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

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

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

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

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

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

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

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

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

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

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

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

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