電子商務PPT教學課件第四章 電子商務網(wǎng)站建設

《電子商務PPT教學課件第四章 電子商務網(wǎng)站建設》由會員分享，可在線閱讀，更多相關《電子商務PPT教學課件第四章 電子商務網(wǎng)站建設（38頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.1 網(wǎng)頁與網(wǎng)頁與HTML最簡單的網(wǎng)頁編寫：工具：“記事本”(Notepad)大家好！大家好！這是我們制做的第一個網(wǎng)頁。點擊超級鏈接進入新浪保存網(wǎng)頁文件名：“index.htm”（*.htm，超文本文件），效果。代碼查看第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設網(wǎng)頁語言：HTML（ HyperText Markup Language，超文本標記語言）HTML組成： 標記(Tag)：“” 雙邊標記“/” 單邊標記 文本第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設HTML基本結構： HTML文件開始 文件頭部開始 文件頭部內(nèi)容（文檔的相關信息，

2、標題和關鍵字） 文件頭部結束 文件體開始 文件頭部內(nèi)容（正文部分，所有出現(xiàn)在網(wǎng)頁上的正文內(nèi)容） 文件體結束 HTML文件結束第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設超媒體：超文本與多媒體（圖片、動畫、聲音、視頻）的融合，使用超文本獲取結點存儲的多媒體信息帶圖的網(wǎng)頁編寫：大家好！大家好！這是我們制做的第一個網(wǎng)頁。點擊超級鏈接進入新浪保存網(wǎng)頁文件名：“img.htm” ，效果。代碼查看(圖片存放路徑)第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.2 所見即所得所見即所得型網(wǎng)頁制作工具型網(wǎng)頁制作工具4.2.1 所見即所得型網(wǎng)頁制作工具標記型網(wǎng)頁制作工具：手工輸入標記 優(yōu)點：用戶能很方便地控

3、制代碼，同時保證代碼是最精簡的 缺點：用戶必須相當熟悉HTML，效率太低，容易發(fā)生錯誤“所見即所得”型網(wǎng)頁制作工具：Htm文件在編輯過程中的顯示與在瀏覽器中的顯示是一樣的。工作：“畫頁面”，由工具自動生成代碼。 第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設主要工具：FrontPage和Dreamweaverindex_fp.htm（用FrontPage 2000），效果。代碼查看比較：FrontPage：容易使用，與Word兼容性好，豐富的內(nèi)置模板；不靈活Dreamweaver：強大的網(wǎng)頁控制、設計能力，創(chuàng)意的完全發(fā)揮，快速、復雜、創(chuàng)意性強；入門難，高級功能學習難。眾多獨具特色的設計新概念，

4、支持層疊式樣表(CSS)和動態(tài)網(wǎng)頁設計。第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.3 頁面動態(tài)效果頁面動態(tài)效果4.3.1 頁面動態(tài)效果 實現(xiàn)頁面元素的二維空間移動 DHTML(Dynamic HTML，動態(tài)HTML)，各種技術的綜合，不同的瀏覽器實現(xiàn)的程度不一樣 JavaScript VBScript Cascading Style Sheets(層疊樣式表，CSS) Document Object Model(文件目標模塊，DOM)第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.3.2 JavaScriptJavaScript，腳本語言（Scripting Language） 嵌入

5、到HTML 文件中 由客戶瀏覽器編譯運行，在客戶機上執(zhí)行 實現(xiàn)交互式Web網(wǎng)頁?！芭荞R燈”的動態(tài)效果：第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設var msg=大家好！這里是跑馬燈的動態(tài)效果！; var interval = 300;seq = 0;function Scroll() len = msg.length; window.status = msg.substring(0, seq+1);seq+;if ( seq = len ) seq = 0 ;window.setTimeout(Scroll();, interval );大家好！跑馬燈效果的制作！第四章第四章 電子商務網(wǎng)站

6、建設電子商務網(wǎng)站建設JavaScript程序段。JavaScript程序段的調(diào)用：第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.3.3 VBScript VBScript和JavaScript的功能基本上是相同的，實現(xiàn)頁面動態(tài)效果。 Microsoft公司為了對抗JavaScript而推出的第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.3.4 Cascading Style Sheets（CSS，層疊樣式表）彌補HTML在頁面排版和格式控制上面的不足，對網(wǎng)頁中的文本內(nèi)容進行精確的格式化控制，實現(xiàn)很多頁面效果。CSS程序段。第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設使用例子：鼠標放到

7、超級鏈接上的時候，超級鏈接會改變顏色大家好！a:link color: #0000FF;a:visited color: #0000FF;a:hover color: #FF0000;新浪搜狐第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.3.5 Document Object Model (文檔對象模型，DOM)DTHML對象模型：每個HTML標記作為對象，具有單獨的屬性、方法和事件，可以通過它的ID和Name屬性被操縱（訪問或更新），操縱由事件觸發(fā)，通過對象的方法完成。DOM：改進的DTHML對象模型，脫離手冊操作對象；將整個文檔描繪為一個樹形（ Tree ）結構，樹的每個節(jié)點表現(xiàn)為一個

8、HTML標記或者HTML標記內(nèi)的文本項。需要操作時： 查看HTML源代碼，推算出Tree結構模型 按照頁面的層次結構關系直接操作的對象的屬性第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.4 網(wǎng)網(wǎng) 站站 的的 發(fā)發(fā) 布布4.4.1 WWW（ World Wide Web ）技術基于Internet的，提供/獲取各種格式信息的技術Web： 客戶機/服務器(C/S，Client/Server)模型 HTML語言（ HyperText Markup Language，超文本標記語言），組織構建網(wǎng)絡頁面的各種超文本對象 HTTP協(xié)議（ HyperText Transfer Protocol ，超文本

9、傳輸協(xié)議），請求、傳送、更新各種超文本對象，包括頁面及頁面內(nèi)的對象 提供面向各種Internet服務的用戶界面第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設1. Web的體系結構： C/S（ B/S）交互的實現(xiàn) 瀏覽器：客戶(Client)端軟件，發(fā)出請求 服務器：為客戶提供服務是的軟、硬件系統(tǒng)，響應請求 C/S的聯(lián)系基于HTTP協(xié)議Internet服務，包括靜態(tài)HTML頁面、E-mail服務、FTP服務、Telnet服務、新聞組(Newsgroup)服務等WWW：在統(tǒng)一的用戶界面內(nèi)獲取各種Internet服務客戶端Web瀏覽器服務器端Web服務器發(fā)出HTTP請求返回HTML文檔第四章第四章

10、電子商務網(wǎng)站建設電子商務網(wǎng)站建設2. Web瀏覽器的功能向Web服務器發(fā)出服務請求接收Web服務器送回的請求響應，解釋并以Web頁面的形式顯示出來具體功能：1) 檢索查詢，獲得信息2) 通過鏈接獲取文件3) 熱表管理（歷史記錄）4) 離線瀏覽把已獲取數(shù)據(jù)存放在磁盤緩存中，并建立相應的文檔索引。檢索時，瀏覽器首先檢索磁盤緩存，如果有則直接讀取、顯示。位置： Documents and SettingsUser_NameLocal SettingsTemporary Internet Files5)獲取其他Internet服務的統(tǒng)一平臺（FTP、E-mail、Telnet、UseNet等）B/S體

11、系結構：基于Browser強大的解釋功能、系統(tǒng)應用接口、控件加載和專用插件等，集成多種Client的功能，提供多樣化的Internet服務基于中心數(shù)據(jù)庫和工作流的Lotus Notes / 基于分布式處理的Google Apps流媒體播放第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設3. Web服務器的功能響應用戶請求，發(fā)送數(shù)據(jù)，與用戶進行交互具體功能：1) 靜態(tài)信息發(fā)布2) 動態(tài)信息發(fā)布，根據(jù)用戶要求，結合服務器數(shù)據(jù)庫和實時處理程序，生成動態(tài)生成頁面第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.4.2發(fā)布站點主頁空間： 自己安裝服務器(安裝Web服務器軟件) 向?qū)ｉT的ISP申請主頁空間后

12、進行主頁上傳自己安裝服務器簡單舉例： 操作系統(tǒng)：Windows2000 Server 服務器軟件：個人Web服務器（PWS，Personal Web Server) 系統(tǒng)服務管理新建站點 設置地址、路徑 選擇首頁啟動服務 如果要讓外部的用戶訪問，還需要 向電信公司申請IP地址和專線接入，或者將服務器放入電信公司的機房(稱為服務器托管)， 申請域名第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.4.3虛擬主機自營主機 自己擁有并維護服務器 優(yōu)點：完全的控制權、隨時接近硬件和完全的靈活性 缺點：維護人員、昂貴的設備和接入線路虛擬主機 (Virtual Host/Virtual Server) I

13、SP把一臺服務器分成若干臺“虛擬”的主機，使多個用戶可以共用一臺服務器，且每一臺“虛擬主機”都具有獨立的域名或IP地址，互相之間完全獨立 優(yōu)點：降低建站成本和維護費用 缺點：性能上不如專有的服務器第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.5 數(shù)據(jù)庫與動態(tài)網(wǎng)頁設計數(shù)據(jù)庫與動態(tài)網(wǎng)頁設計4.5.1 動態(tài)網(wǎng)頁 靜態(tài)頁面：任何人訪問該頁面，看到的都是同樣的結果。傳統(tǒng)媒體的電子化 動態(tài)頁面：根據(jù)用戶的需求，服務器動態(tài)生成頁面的代碼，然后提供給用戶；實現(xiàn)交互功能，用戶可以獲取和處理服務器上的資源和數(shù)據(jù)。第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.5.2 數(shù)據(jù)庫 動態(tài)網(wǎng)頁的核心技術 向WWW服務

14、器提供數(shù)據(jù)資源，再由服務器傳遞給用戶 幫助系統(tǒng)管理員方便地維護和更新數(shù)據(jù)（新聞頁面的制作）數(shù)據(jù)庫的基本概念表(Table)：根據(jù)數(shù)據(jù)的類型和特征來存儲數(shù)據(jù)的空間 數(shù)據(jù)庫管理軟件(DBMS，Database Management System)： 創(chuàng)建和維護數(shù)據(jù)庫 向用戶提供查詢功能 生成用戶所需界面(如報表、視圖等) SQL（Structured Query Language，結構化查詢語言）：關系型數(shù)據(jù)庫管理系統(tǒng)的標準操作語言第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.5.3 CGICGI(Common Gateway Interface，公共網(wǎng)關接口) 后臺數(shù)據(jù)庫與前臺服務器的“連接

15、”技術 服務器與外部擴展程序交互的一個標準接口客戶端Web瀏覽器服務器端Web服務器中間件（如CGI、API等）超文本內(nèi)容數(shù)據(jù)庫應用軟件發(fā)出HTTP請求返回HTML文檔第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設一個好的比喻： 顧客=網(wǎng)絡用戶 商場柜臺=瀏覽器，顧客在柜臺選購 售貨員=WWW服務器，獲取顧客需求，轉(zhuǎn)達給取貨人 倉庫取貨人=CGI等中間件 倉庫=數(shù)據(jù)庫 貨物=信息數(shù)據(jù)，存在倉庫里CGI的其他應用：網(wǎng)頁計數(shù)器、留言版、搜索引擎、實時交易等第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.5.4使用腳本語言編寫服務器端的應用程序的技術1. ASP (Active Server Pa

16、ges，動態(tài)服務器頁) 使用腳本語言VBScript或JavaScript 工作原理：收到瀏覽請求時，服務器將ASP的程序碼解釋為標準HTML格式的網(wǎng)頁，再送到瀏覽者的瀏覽器上顯示出來 優(yōu)點：靈活性、代碼的安全性；簡單、直觀、易學 缺點：使用局限于Microsoft的操作系統(tǒng)，跨平臺性差2. JSP (Java Server Pages) 使用JavaScript作為其腳本語言 工作實質(zhì)：在客戶端，將.jsp轉(zhuǎn)化成Servlet，運行Servlet得到靜態(tài)網(wǎng)頁的數(shù)據(jù)輸出和Servlet服務 先進、安全和跨平臺第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設3. ASP與JSP的比較(1) 編程使

17、用的腳本語言(2) 跨平臺性 (3) 語言引擎 ASP：VBScript代碼被ASP引擎解釋執(zhí)行 JSP： JavaScript代碼被編譯成Servlet并由Java虛擬機執(zhí)行第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.5.5 PHP （HyperText Preprocessor，超文本預處理器） 跨平臺 運行效率高 支持目前絕大多數(shù)數(shù)據(jù)庫 完全免費第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.5.5 全開源建站體系LAMPLinux+Apache+Mysql+PHP，一組常用來搭建動態(tài)網(wǎng)站或者服務器的開源軟件，本身都是各自獨立的程序，但是因為常被放在一起使用，擁有了越來越高的兼容

18、度，共同組成了一個強大的Web應用程序平臺。 Apache是最通用的網(wǎng)絡服務器；mySQL是帶有基于網(wǎng)絡管理附加工具的關系數(shù)據(jù)庫；PHP是流行的對象腳本語言，它包含了多數(shù)其它語言的優(yōu)秀特征來使得它的網(wǎng)絡開發(fā)更加有效。隨著開源潮流的蓬勃發(fā)展，開放源代碼的LAMP已經(jīng)與J2EE和.Net商業(yè)軟件形成三足鼎立之勢，并且該軟件開發(fā)的項目在軟件方面的投資成本較低，因此受到整個IT界的關注。從網(wǎng)站的流量上來說，70%以上的訪問流量是LAMP來提供的，LAMP是最強大的網(wǎng)站解決方案開發(fā)者在Windows操作系統(tǒng)下使用這些Linux環(huán)境里的工具稱為使用WAMP。第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4

19、.5.5 基于MVC的應用開發(fā)模型在傳統(tǒng)的基于Web的應用系統(tǒng)中，例如ASP，CGI等，通常開發(fā)者將業(yè)務邏輯，數(shù)據(jù)邏輯、展示邏輯等混雜在一起，在同一個界面面里既進行后臺數(shù)據(jù)庫的訪問和操作，同時還包含業(yè)務流程和頁面表示。這樣編寫出來的程序，既不利于程序員對業(yè)務代碼的調(diào)試，同時也不利于編輯人員進行交互頁面的設計。同時系統(tǒng)也不具備可擴展性，當要在現(xiàn)有業(yè)務上進行擴展的時候，通常無法借助于現(xiàn)有的資源和應用，而只能夠重新編寫，大大增加了投資，延長了系統(tǒng)上線的時間。采用通行的MVC模式來構建Web應用系統(tǒng)，可解決前面所述的問題。MVC英文即Model-View-Controller，即把一個應用的輸入、處理

20、、輸出流程按照Model、View、Controller的方式進行分離，這樣一個應用被分成三個層模型層、視圖層、控制層。第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.5.5 基于MVC的應用開發(fā)模型第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.5.5 基于MVC的應用開發(fā)模型視圖(View)代表用戶交互界面，對于Web應用來說，可以概括為HTML界面，但有可能為XHTML、XML和Applet。隨著應用的復雜性和規(guī)模性，界面的處理也變得具有挑戰(zhàn)性。一個應用可能有很多不同的視圖，MVC設計模式對于視圖的處理僅限于視圖上數(shù)據(jù)的采集和處理，以及用戶的請求，而不包括在視圖上的業(yè)務流程的處理。業(yè)

21、務流程的處理交予模型(Model)處理。比如一個訂單的視圖只接受來自模型的數(shù)據(jù)并顯示給用戶，以及將用戶界面的輸入數(shù)據(jù)和請求傳遞給控制和模型。第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.5.5 基于MVC的應用開發(fā)模型模型(Model)：就是業(yè)務流程/狀態(tài)的處理以及業(yè)務規(guī)則的制定。業(yè)務流程的處理過程對其它層來說是黑箱操作，模型接受視圖請求的數(shù)據(jù)，并返回最終的處理結果。業(yè)務模型的設計可以說是MVC最主要的核心。對一個開發(fā)者來說，可以專注于業(yè)務模型的設計。MVC并沒有提供模型的設計方法，而只告訴你應該組織管理這些模型，以便于模型的重構和提高重用性。業(yè)務模型還有一個很重要的模型那就是數(shù)據(jù)模型。數(shù)

22、據(jù)模型主要指實體對象的數(shù)據(jù) 保存（持續(xù)化）。比如將一張訂單保存到數(shù)據(jù)庫，從數(shù)據(jù)庫獲取訂單。我們可以將這個模型單獨列出，所有有關數(shù)據(jù)庫的操作只限制在該模型中。 第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.5.5 基于MVC的應用開發(fā)模型控制(Controller)可以理解為從用戶接收請求, 將模型與視圖匹配在一起，共同完成用戶的請求。劃分控制層的作用也很明顯，它清楚地告訴你，它就是一個分發(fā)器，選擇什么樣的模型，選擇什么樣的視圖，可以完成什么樣的用戶請求?？刂茖硬⒉蛔鋈魏蔚臄?shù)據(jù)處理。例如，用戶點擊一個連接，控制層接受請求后, 并不處理業(yè)務信息，它只把用戶的信息傳遞給模型，告訴模型做什么，選擇

23、符合要求的視圖返回給用戶。因此，一個模型可能對應多個視圖，一個視圖可能對應多個模型。 模型、視圖與控制器的分離，使得一個模型可以具有多個顯示視圖。如果用戶通過某個視圖的控制器改變了模型的數(shù)據(jù)，所有其它依賴于這些數(shù)據(jù)的視圖都應反映到這些變化。因此，無論何時發(fā)生了何種數(shù)據(jù)變化，控制器都會將變化通知所有的視圖，導致顯示的更新。這實際上是一種模型的變化-傳播機制。第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.5.5 基于MVC的應用開發(fā)模型第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.6電子商務站點需求電子商務站點需求電子商務網(wǎng)站的Web頁設計的幾個基本功能：商品目錄顯示功能需要建立商品目錄數(shù)

24、據(jù)庫，并提供導航工具或搜索引擎搜索引擎網(wǎng)絡蜘蛛、索引和實用程序（匹配頁面的尋找和排序）購物車功能根據(jù)用戶請求下定單識別用戶并保存其選擇的方法：1）生成并保存Cookie，用戶數(shù)據(jù)保存在用戶主機；2）根據(jù)顧客來源給顧客自動簽發(fā)一個臨時編號， 用戶數(shù)據(jù)保存在服務器交易處理功能安全性及交易相關工作（計算折扣、銷售稅和送貨費等）第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設4.7小小 結結本章主要介紹了電子商務網(wǎng)站建設的基本方法和流程。網(wǎng)站建設首先是網(wǎng)頁的設計，網(wǎng)頁文件是一種比較特殊的文本文件，稱為超文本文件，擴展名為.htm或者.html。制作網(wǎng)頁使用的語言為HTML。HTML的主要內(nèi)容是HTML標

25、記，學習HTML就是要掌握HTML標記的含義、屬性和使用方法。我們可以使用標記型網(wǎng)頁制作工具和所見即所得型網(wǎng)頁制作工具來制作網(wǎng)頁。由于標記型網(wǎng)頁制作工具開發(fā)效率太低，所以現(xiàn)在一般選擇所見即所得型網(wǎng)頁制作工具作為開發(fā)工具。市面上流行的兩種所見即所得型網(wǎng)頁制作工具是FrontPage和Dreamweaver。第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設頁面動態(tài)效果主要依靠DHTML來實現(xiàn)。DHTML并不指一種專門技術，而是通過各種技術的綜合發(fā)展而得以實現(xiàn)的概念。DHTML涉及的技術包括JavaScript、VBScript、Cascading Style Sheets(層疊樣式表，簡稱CSS)、

26、Document Object Model(文件目標模塊，簡稱DOM)等。網(wǎng)頁上傳時如果自建服務器，可以選擇Windows NT/2000、UNIX/Linux等網(wǎng)絡平臺。自建服務器需要專線接入或服務器托管，所需費用較高，但性能更好。中小型網(wǎng)站可以使用虛擬主機，費用很低，并能達到較好的效果。第四章第四章 電子商務網(wǎng)站建設電子商務網(wǎng)站建設靜態(tài)頁面對電子商務網(wǎng)站建設來說還是不夠的，我們還需要使用動態(tài)網(wǎng)頁設計。動態(tài)網(wǎng)頁設計是網(wǎng)站建設的較高階段，需要制作人員具備較高的計算機水平。動態(tài)網(wǎng)頁設計涉及數(shù)據(jù)庫、CGI、ASP、JSP、PHP等技術。用戶可以選擇CGI、ASP、JSP、PHP中的一門技術來實現(xiàn)對服務器端的數(shù)據(jù)庫操作。此外，作為電子商務網(wǎng)站來說，還必須具備商品目錄顯示功能、搜索引擎、購物車功能和交易處理功能，可通過前面介紹的各種技術實現(xiàn)。