第2章商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)設(shè)技術(shù)

1、第第2章章 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)技術(shù)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)技術(shù)2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.1 商務(wù)表達(dá)層的功能實(shí)現(xiàn)商務(wù)表達(dá)層的功能實(shí)現(xiàn)n商務(wù)表達(dá)層n客戶端：表現(xiàn)數(shù)據(jù)客戶端：表現(xiàn)數(shù)據(jù)n特點(diǎn)：界面友好，具有通用性、易用性、靈活性特點(diǎn)：界面友好，具有通用性、易用性、靈活性nweb服務(wù)器：發(fā)布信息，與客戶端和應(yīng)用服務(wù)端進(jìn)行交互服務(wù)器：發(fā)布信息，與客戶端和應(yīng)用服務(wù)端進(jìn)行交互n商務(wù)表達(dá)層的實(shí)現(xiàn)方式計(jì)算機(jī)、便攜設(shè)備 無(wú)線移動(dòng)設(shè)備、 信息家電html/xml/dhtml wml/xmlweb服務(wù)器web服務(wù)器應(yīng)用服務(wù)器web服務(wù)器表達(dá)層工具支持平臺(tái)表達(dá)層工具2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商

2、務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.1 商務(wù)表達(dá)層的功能實(shí)現(xiàn)商務(wù)表達(dá)層的功能實(shí)現(xiàn)n硬件設(shè)備硬件設(shè)備n瘦客戶端、胖客戶端瘦客戶端、胖客戶端n胖客戶端：基于傳統(tǒng)的客戶端應(yīng)用程序；胖客戶端：基于傳統(tǒng)的客戶端應(yīng)用程序；n瘦客戶端：基于瀏覽器。瘦客戶端：基于瀏覽器。n靜態(tài)內(nèi)容和動(dòng)態(tài)內(nèi)容靜態(tài)內(nèi)容和動(dòng)態(tài)內(nèi)容n靜態(tài)內(nèi)容：客戶端上顯示的內(nèi)容，預(yù)先放置在靜態(tài)內(nèi)容：客戶端上顯示的內(nèi)容，預(yù)先放置在web服務(wù)器上；服務(wù)器上；n動(dòng)態(tài)內(nèi)容：客戶端上顯示的內(nèi)容，預(yù)先服務(wù)器上沒有，是在客戶請(qǐng)求發(fā)動(dòng)態(tài)內(nèi)容：客戶端上顯示的內(nèi)容，預(yù)先服務(wù)器上沒有，是在客戶請(qǐng)求發(fā)出后，根據(jù)請(qǐng)求內(nèi)容和后臺(tái)數(shù)據(jù)庫(kù)中的數(shù)據(jù)，通過調(diào)用執(zhí)行一個(gè)文件（出后，根據(jù)請(qǐng)求內(nèi)容和后臺(tái)

3、數(shù)據(jù)庫(kù)中的數(shù)據(jù)，通過調(diào)用執(zhí)行一個(gè)文件（通常為動(dòng)態(tài)腳本）動(dòng)態(tài)產(chǎn)生的。通常為動(dòng)態(tài)腳本）動(dòng)態(tài)產(chǎn)生的。2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.2 web系統(tǒng)與http協(xié)議n2.2.1 web系統(tǒng)n原理：商業(yè)數(shù)據(jù)被組織到一個(gè)超文本文件中，借助http協(xié)議，通過網(wǎng)絡(luò)來(lái)傳送web瀏覽器web瀏覽器web瀏覽器tcp/iphttpweb服務(wù)器cgi、script程序數(shù)據(jù)庫(kù)2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.2 web系統(tǒng)與http協(xié)議n2.2.1 web系統(tǒng)nweb五大要素五大要素nurln幾種形式幾種形式n域名域名+目錄名目錄名+文件名文件名n域名域名+目錄名目錄名n域名域名n含有程序的

4、網(wǎng)址含有程序的網(wǎng)址n超文本置標(biāo)語(yǔ)言（超文本置標(biāo)語(yǔ)言（html）nweb服務(wù)器服務(wù)器nweb瀏覽器瀏覽器n超文本傳輸協(xié)議（超文本傳輸協(xié)議（http）2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.2 web系統(tǒng)與http協(xié)議n2.2.2 http協(xié)議n一個(gè)實(shí)例：測(cè)試一個(gè)實(shí)例：測(cè)試http協(xié)議協(xié)議2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.2 web系統(tǒng)與http協(xié)議n2.2.2 http協(xié)議n一個(gè)實(shí)例：測(cè)試一個(gè)實(shí)例：測(cè)試http協(xié)議（程序代碼）協(xié)議（程序代碼）dim str1 as stringprivate sub close_click() winsock1.closeend subpr

5、ivate sub connect_click() winsock1.remotehost = “ winsock1.remoteport = 80 winsock1.protocol = scktcpprotocol winsock1.connectend sub2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)private sub get_click() if winsock1.state 7 then state=0表示winsock處于close狀態(tài) state=1表示winsock處于open狀態(tài) state=2表示winsock處于listening狀態(tài) state=7表示winsoc

6、k處于connected狀態(tài) state=9表示winsock處于error狀態(tài) msgbox 還未與web server連接號(hào)，請(qǐng)等待或重新連接. exit sub else winsock1.senddata get /index.html http/1.1 + chr(13) + chr(10) + host: + vbcrlf + vbcrlf 發(fā)送http的get命令 end ifend sub2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè) private sub head_click() winsock1.senddata head /index.html http/1.1 + vb

7、crlf + host: + vbcrlf + vbcrlfend sub private sub post_click() winsock1.senddata post /index.html http/1.1 + vbcrlf + host: + vbcrlf + content-type:text/plain + vbcrlf + content-length:7 + vbcrlf + vbcrlf+brand=a + vbcrlf + vbcrlfend sub private sub winsock1_dataarrival(byval bytestotal as long) win

8、sock1.getdata str1 text1.text = str1end sub private sub winsock1_error(byval number as integer, description as string, byval scode as long, byval source as string, byval helpfile as string, byval helpcontext as long, canceldisplay as boolean) msgbox winsock出錯(cuò)!end sub 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)n2.2.2 htt

9、p協(xié)議n象dcom和iiop一樣，http層通過tcp/ip進(jìn)行請(qǐng)求/響應(yīng)通信。一個(gè)http的客戶端用tcp連接到web服務(wù)器。在http中使用的標(biāo)準(zhǔn)端口號(hào)是80，但任何其它端口也能被使用。在建立tcp連接后，客戶端可以發(fā)送一個(gè)請(qǐng)求消息到服務(wù)器端。服務(wù)器在處理請(qǐng)求后發(fā)回一個(gè)http響應(yīng)消息到客戶端。請(qǐng)求和響應(yīng)消息都可以包含任意的傳輸體的信息，通常用content-length和content-type的 http 頭來(lái)標(biāo)記(詳細(xì)見rfc1616)。n一個(gè)合法的http post請(qǐng)求消息示例：npost /index.html http/1.1nhost:ncontent-ty

10、pe:text/plainncontent-length:7nbrand=an n一個(gè)合法的http get請(qǐng)求消息示例：nget /index.html http/1.1nhost:n 2.2 web系統(tǒng)與http協(xié)議2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)n2.2.2 http協(xié)議nhttp響應(yīng)n在處理了請(qǐng)求之后，在處理了請(qǐng)求之后，web服務(wù)器將發(fā)回一個(gè)服務(wù)器將發(fā)回一個(gè)http響應(yīng)到客戶端。響應(yīng)中包括一個(gè)狀態(tài)代碼，表示請(qǐng)求響應(yīng)到客戶端。響應(yīng)中包括一個(gè)狀態(tài)代碼，表示請(qǐng)求的結(jié)果。的結(jié)果。n返回狀態(tài)代碼200，表示http命令已被web服務(wù)器成功解析；n返回狀態(tài)代碼400，

11、表示web服務(wù)器解析http命令失??；n返回狀態(tài)代碼30x，表示web服務(wù)器已將http請(qǐng)求轉(zhuǎn)向到另一web服務(wù)器；n返回狀態(tài)代碼50x，表示web服務(wù)器不支持此http請(qǐng)求命令；n狀態(tài)代碼1xx，為web服務(wù)器保留碼n示例：2.2 web系統(tǒng)與http協(xié)議400 bad requestcontent-length: 0200 okcontent-type: text/plaincontent-length: 12dlrow ,olleh 307 temporarily movedlocation: 4/foobarcontent-length: 02 商

12、務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)n練習(xí)：練習(xí)：n請(qǐng)將測(cè)試http命令的vb程序改寫成java程序。2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù) 2.3.1 靜態(tài)頁(yè)面的體系結(jié)構(gòu)靜態(tài)頁(yè)面的體系結(jié)構(gòu) n靜態(tài)網(wǎng)頁(yè)的特征 n靜態(tài)網(wǎng)頁(yè)的內(nèi)容固定不變;n靜態(tài)網(wǎng)頁(yè)的制作比較方便； n靜態(tài)網(wǎng)頁(yè)的體系結(jié)構(gòu) client(瀏覽器)web server硬盤html頁(yè)面從硬盤獲取文件文件返回頁(yè)面請(qǐng)求2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù) 2.3.2 置置標(biāo)語(yǔ)言標(biāo)語(yǔ)言n標(biāo)準(zhǔn)通用置標(biāo)語(yǔ)言sgml (standard generalized markup

13、 language) n置標(biāo)n標(biāo)志語(yǔ)言 nsgml sgml(standard generalized markup language)是最早的標(biāo)記語(yǔ)言，而且是一種豐富的元語(yǔ)言，幾乎可以用來(lái)定義無(wú)數(shù)種標(biāo)記語(yǔ)言，html和xml都是在此基礎(chǔ)上派生出來(lái)的。sgml是iso組織在1986年推出的一個(gè)用來(lái)創(chuàng)建標(biāo)記語(yǔ)言的元語(yǔ)言標(biāo)準(zhǔn)，它源自ibm在1969年開發(fā)的gml。正如其名所言，sgml是一種用標(biāo)記描述文檔資料的通用語(yǔ)言，包含了一系列的文檔類型定義（dtd,document type definition），dtd中定義了標(biāo)記的含義，因而sgml是可以擴(kuò)充的。sgml為出版業(yè)提供了一種將數(shù)據(jù)內(nèi)容與顯

14、示分離開來(lái)的數(shù)據(jù)表示方法，使得數(shù)據(jù)獨(dú)立于機(jī)器平臺(tái)和處理程序，在許多大型出版系統(tǒng)中發(fā)揮了重要作用2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù) 2.3.2 置置標(biāo)語(yǔ)言標(biāo)語(yǔ)言 n超文本置標(biāo)語(yǔ)言html n特點(diǎn)n平臺(tái)兼容 n文本文件n超鏈接 nweb服務(wù)器不處理標(biāo)記，由客戶端瀏覽器解釋 n豐富的多媒體顯示、各種布局處理n缺點(diǎn)nhtml更多的關(guān)注web瀏覽器如何在頁(yè)面上安排文本、圖象和按扭等，過多的考慮外觀使，缺乏對(duì)結(jié)構(gòu)化數(shù)據(jù)的表示能力；nhtml還有一些諸如鏈路丟失后不能自動(dòng)糾正、下載的內(nèi)容太多、搜索不方便、時(shí)間長(zhǎng)等缺點(diǎn)；nhtml中有限的標(biāo)記不能滿足眾多web應(yīng)用的需要

15、 ，缺乏可擴(kuò)展性2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù) 2.3.2 置置標(biāo)語(yǔ)言標(biāo)語(yǔ)言 n超文本標(biāo)記語(yǔ)言html實(shí)例 （略）n樣式n樣式種類：html樣式、內(nèi)嵌的css樣式、外接的css樣式 n實(shí)例2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè) 無(wú)標(biāo)題文檔 浮雕彩色文字 浮雕彩色文字 浮雕彩色文字 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù) 2.3.2 置置標(biāo)語(yǔ)言標(biāo)語(yǔ)言 n 擴(kuò)展標(biāo)記語(yǔ)言xml n前言 xml在sgml的基礎(chǔ)上，去除sgml中過于復(fù)雜的東西（缺點(diǎn)），保留一些作為元標(biāo)記語(yǔ)言的東西（優(yōu)點(diǎn)），用戶可以自己定義標(biāo)記，自己定

16、義的標(biāo)記可以在dtd或scheme（模式）中加以描述，并且，與sgml一定需要dtd不同，在xml中dtd可有可無(wú)，它的使用完全視使用者需要而定。用戶甚至可以通過xml制定自己的標(biāo)記語(yǔ)言，而不必得到w3c、microsoft、netscape的同意，因此xml的應(yīng)用潛力是很明顯的。2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)gml(1969)sgml(1985)xml(1998)xhtmlmathmlwmlsvgcxml(1969)ebxml(1969)html(1993)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)2.3.2 置置標(biāo)語(yǔ)言標(biāo)語(yǔ)言xml家族2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜

17、態(tài)頁(yè)面的表達(dá)及其技術(shù) 2.3.2置置標(biāo)語(yǔ)言標(biāo)語(yǔ)言n 擴(kuò)展標(biāo)記語(yǔ)言xml nxml語(yǔ)法 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù) 2.3.2 置置標(biāo)語(yǔ)言標(biāo)語(yǔ)言n 擴(kuò)展標(biāo)記語(yǔ)言xml nxml語(yǔ)法 nxml聲明n元素與屬性n注釋n處理指令 ncdata區(qū) 網(wǎng)頁(yè)設(shè)計(jì) 王大名 590 電子商務(wù)技術(shù)基礎(chǔ) 李立洪 120 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù) 2.3.2 置置標(biāo)語(yǔ)言標(biāo)語(yǔ)言n 擴(kuò)展標(biāo)記語(yǔ)言xml nxml語(yǔ)法 nxml聲明n元素與屬性n注釋n處理指令 ncdata區(qū) n說明：ncdata區(qū)以“!cdata”為起始，“”為

18、終了。區(qū)塊內(nèi)容中唯一不能包含的正是“”這個(gè)終止符號(hào)。其他內(nèi)容，只要是合格unicode字，都可以自由放置其中；nxml中要區(qū)分大小寫，因此“!cdata” 不可寫成 “!cdata” 或 “!cdata” ；n出現(xiàn)在cdata區(qū)中的內(nèi)容，解析器在解析時(shí)原封不動(dòng)、一五一十地交給下游的程序；比較：2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù) 2.3.2 置置標(biāo)語(yǔ)言標(biāo)語(yǔ)言 n 擴(kuò)展標(biāo)記語(yǔ)言xml nxml語(yǔ)法 n編寫xml的幾個(gè)原則 n所有的元素都要配對(duì)n標(biāo)記之間不得交叉 n所有屬性值都得含有引號(hào) n大小寫有區(qū)別 n一空二空有區(qū)別 在html里，存在這類自成一個(gè)單元的標(biāo)

19、記，這在xml中稱為空元素（empty element),因?yàn)檫@樣的元素不含任何文字內(nèi)容，只有屬性。xml為空元素特別發(fā)明了一種新的表示法，如下： 若帶有屬性的話，則寫成： 若： 電子商務(wù)技術(shù)基礎(chǔ) 無(wú)名氏 這就犯了”標(biāo)記之間不得相交“的大忌，會(huì)被刪除掉。xml中規(guī)定，所有的元素排列必須是嚴(yán)謹(jǐn)?shù)臉錉罱Y(jié)構(gòu)。在使用dom、xslt和xpointer來(lái)分別控制、轉(zhuǎn)換、連接xml文件時(shí)，都需要隨時(shí)對(duì)文件的內(nèi)部結(jié)構(gòu)了若指掌。 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù) 2.3.2 置置標(biāo)語(yǔ)言標(biāo)語(yǔ)言 n 擴(kuò)展標(biāo)記語(yǔ)言xml nxml語(yǔ)法 n名稱空間（namespace）n名稱

20、空間的規(guī)定，并沒有收錄在xml1.0的標(biāo)準(zhǔn)中，而是透過后來(lái)一份單獨(dú)的標(biāo)準(zhǔn)來(lái)增補(bǔ)，這份標(biāo)準(zhǔn)的全名為“namespaces in xml”；n xml1.0的標(biāo)準(zhǔn)：/tr/rec-xml; namespaces in xml: /tr/rec-xml-names )2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)n為什么需要名稱空間為什么需要名稱空間 ？n區(qū)分各個(gè)標(biāo)記，避免與其它標(biāo)記混淆 張3 無(wú)法區(qū)別這兩個(gè)不同的標(biāo)記2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)n為什么需要名稱空

21、間為什么需要名稱空間 ？n名稱空間標(biāo)記的選用名稱空間標(biāo)記的選用 新祥發(fā)新祥發(fā) . . . . . . . 同仁堂同仁堂 . . . . . . . 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)n為什么需要名稱空間為什么需要名稱空間 ？n名稱空間標(biāo)記的選用名稱空間標(biāo)記的選用nurlurl、urnurn、uriuri的區(qū)別的區(qū)別 平時(shí)所說的網(wǎng)址，就是url。其實(shí)名稱空間中的標(biāo)記規(guī)定的是使用uri，uri全名為uniform resource identifier(統(tǒng)一資源標(biāo)記碼)，這是一個(gè)internet 標(biāo)準(zhǔn)，記載于rfc2396;它與url有何不同呢？基本上，ur

22、i比較廣義，泛指所有以字符串標(biāo)示的網(wǎng)絡(luò)資源，范圍涵蓋了url和urn。url指的是標(biāo)有通信協(xié)定（如http、ftp、gopher）的字符串。urn(uniform resource name)則是用來(lái)標(biāo)示持久、而且有專門機(jī)構(gòu)負(fù)責(zé)的資源，譬如圖書館的圖書總目。 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)n為什么需要名稱空間為什么需要名稱空間 ？n名稱空間標(biāo)記的選用名稱空間標(biāo)記的選用nurlurl、urnurn、uriuri的區(qū)別的區(qū)別 n名稱空間的范圍名稱空間的范圍 ：只作用于自己所在的目錄樹只作用于自己所在的目錄樹 新祥發(fā)新祥發(fā) . . . . . . . 2

23、商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)n為什么需要名稱空間為什么需要名稱空間 ？n名稱空間標(biāo)記的選用名稱空間標(biāo)記的選用nurlurl、urnurn、uriuri的區(qū)別的區(qū)別 n名稱空間的范圍名稱空間的范圍 ：只作用于自己所在的目錄樹只作用于自己所在的目錄樹 n默認(rèn)的名稱空間默認(rèn)的名稱空間 n一個(gè)實(shí)例：含有一個(gè)實(shí)例：含有htmlhtml表單功能的表單功能的xmlxml文檔文檔 連到兩只老虎 這樣也可以連到 2t2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù) 2.3.2 置置標(biāo)語(yǔ)言標(biāo)語(yǔ)言 n 擴(kuò)展標(biāo)記語(yǔ)言xml nxml語(yǔ)法 nxml數(shù)據(jù)

24、類型定義 n問題的提出2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù) 電子商務(wù)技術(shù)基礎(chǔ) 李立洪，李衛(wèi) 120 90 電子商務(wù)技術(shù)基礎(chǔ) 李立洪 李衛(wèi) 120 90 這里究竟如何表示數(shù)據(jù)？需要定義一套法則來(lái)規(guī)范它。這套法則叫dtd（document type definition)，也就是對(duì)xml文件在格式上進(jìn)行限定。 用dtd可以清楚的定義和規(guī)范：”作者“這個(gè)元素到底是可以出現(xiàn)多次，還是在任何一個(gè)”書籍“.中只能出現(xiàn)一次？一個(gè)元素能包含哪些屬性？父子元素相互依存的關(guān)系？各個(gè)元素出現(xiàn)的順序？ 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)n問

25、題的提出問題的提出ndtddtd定義定義 網(wǎng)頁(yè)設(shè)計(jì) 張凡 590 電子商務(wù)技術(shù)基礎(chǔ) 李立洪 120 book.dtd文件的內(nèi)容如下：2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù) 2.3.2 置置標(biāo)語(yǔ)言標(biāo)語(yǔ)言 n 擴(kuò)展標(biāo)記語(yǔ)言xml nxml語(yǔ)法 nxml數(shù)據(jù)類型定義nxml數(shù)據(jù)的表現(xiàn)與樣式鏈接n 利用xml語(yǔ)言和dtd文檔，可以將數(shù)據(jù)、文件資料準(zhǔn)確完整的表示表示出來(lái)，但缺少顯示格式信息（內(nèi)容與顯示分離），xml文檔還不能像用戶所希望的那樣在ie中表現(xiàn)表現(xiàn)出來(lái)。因此除了xml文檔之外，還需要有相關(guān)的文件提供有關(guān)顯示和處理xml文檔的信息，這種文件就是樣式文件(.cs

26、s,.xsl) 或:?xml-stylesheet href=style.xsl type=text/xsl ?2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)2.3.2 置置標(biāo)語(yǔ)言標(biāo)語(yǔ)言 n 擴(kuò)展標(biāo)記語(yǔ)言xml nxml語(yǔ)法 nxml數(shù)據(jù)類型定義nxml數(shù)據(jù)的表現(xiàn)與樣式鏈接nxsl樣式文件xsl是一種用來(lái)轉(zhuǎn)換xml文檔結(jié)構(gòu)的語(yǔ)言，xsl文檔中定義了與xml文檔中各個(gè)邏輯成分相匹配的模板及匹配轉(zhuǎn)化方式，解析器裾此可將xml源文件轉(zhuǎn)換為帶樣式信息的可瀏覽文檔，如html格式、fo格式、或者其它面向顯示方式的xml文檔，限于目前瀏覽器的支持能力，大多數(shù)的情況下轉(zhuǎn)化為一個(gè)h

27、tml文件進(jìn)行顯示。至于具體的轉(zhuǎn)換過程，可以在服務(wù)器端進(jìn)行，也可以在客戶端進(jìn)行，分別對(duì)應(yīng)著不同的轉(zhuǎn)換模式。在ie5.5中內(nèi)嵌了一個(gè)msxml3解析器，由它生成的帶格式的中間文件會(huì)顯示在瀏覽器中。 張三 男 20 李四 女 27 個(gè)人檔案 姓名 性別 年齡 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù) 2.3.2 置置標(biāo)語(yǔ)言標(biāo)語(yǔ)言 n 擴(kuò)展標(biāo)記語(yǔ)言xml nxml語(yǔ)法 nxml數(shù)據(jù)類型定義nxml數(shù)據(jù)的表現(xiàn)與樣式鏈接 nxml應(yīng)用開發(fā) n構(gòu)造xml標(biāo)記語(yǔ)言 n生成xml文檔n顯示xml文檔 n操縱xml文檔 操縱xml文檔可以通過使用dom或sax(simple a

28、pi for xml)應(yīng)用編程接口來(lái)實(shí)現(xiàn)。dom是w3c為xml文檔和html文檔定制的一個(gè)獨(dú)立于平臺(tái)和語(yǔ)言的編程接口標(biāo)準(zhǔn)，使得程序和腳本都能以標(biāo)準(zhǔn)的方式存取與更新文檔的內(nèi)容、結(jié)構(gòu)和式樣。要查找完整的xml文檔對(duì)象模型，請(qǐng)?jiān)L問微軟網(wǎng)站。同時(shí)，如何你想了解xml dom以及xsl和asp的高級(jí)用法的例子，請(qǐng)?jiān)L問 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù) 置標(biāo)語(yǔ)言的特征與演變置標(biāo)語(yǔ)言的特征與演變 n 置標(biāo)語(yǔ)言xml n xhtml nhtml4.0之后為xhtml；n 什么是xhtmlnxhtml最早叫“html in xml“。簡(jiǎn)單的講，就是把過去以sgml定義的h

29、tml，改用xml來(lái)重新定義，所有xhtml的標(biāo)記都以既有的html4.0標(biāo)記來(lái)定義，各元素和屬性的名稱和用法幾乎完全不變。不過因?yàn)樽兂闪藊ml,有些地方必須遵照xhtml的規(guī)矩，嚴(yán)格執(zhí)行，不能再象以前那樣隨便。xhtml1.0這套標(biāo)準(zhǔn)，1998年8月24日升格為建議標(biāo)準(zhǔn)（proposed recommendation） 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè) 幾只老虎才夠看？!cdata function counttigers(n) if (n 一個(gè)非常短的段落。 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù) n2.3.3 網(wǎng)頁(yè)的制作與發(fā)布網(wǎng)頁(yè)的制作與發(fā)

30、布 nweb服務(wù)器的安裝與設(shè)置 n網(wǎng)頁(yè)制作與實(shí)例 n將網(wǎng)頁(yè)發(fā)布到服務(wù)器 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)napacheapache服務(wù)器的安裝與設(shè)置：服務(wù)器的安裝與設(shè)置：n1 1）apacheapache服務(wù)器簡(jiǎn)介服務(wù)器簡(jiǎn)介napache是開放源代碼的web服務(wù)器軟件，是最常用的web服務(wù)器。apache常用在unix和linux系統(tǒng)下，也有用于windows平臺(tái)下的版本n下載apache：/mirror/httpd/binaries/win32/ ，版本：1.3.x和2.0.x ，擴(kuò)展名：exe或msi

31、n安裝apache：在“network domain”里輸入域,若服務(wù)器的域名為“”，則在這里輸入“”；在“server name”里輸入服務(wù)器名，即完整的服務(wù)器域名，這里為“”；在“administrators email address”里輸入網(wǎng)站管理員的email地址 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)n4 4）配置）配置apacheapache 表2-10 apache的配置文件httpd.conf中的主要選項(xiàng)選項(xiàng)選項(xiàng)說明說明port 80apache的端口，默認(rèn)值是的端口，默認(rèn)值是80。servername web服務(wù)器的名字服務(wù)

32、器的名字,安裝時(shí)輸入的安裝時(shí)輸入的“server name”就是保存在這里。就是保存在這里。documentroot c:/program files/apache group/apache/htdocs網(wǎng) 站 的 根 目 錄 。 如 果 想 把 網(wǎng) 站 文 件 存 放 在網(wǎng) 站 的 根 目 錄 。 如 果 想 把 網(wǎng) 站 文 件 存 放 在“d:myweb”目錄下，可以把目錄下，可以把documentroot后面后面的目錄修改為的目錄修改為“d:/myweb”。options indexes followsymlinks multiviews為了安全，有時(shí)需要?jiǎng)h除為了安全，有時(shí)需要?jiǎng)h除ind

33、exes屬性，否則別人屬性，否則別人可以瀏覽到網(wǎng)站里的所有文件?？梢詾g覽到網(wǎng)站里的所有文件。directoryindex index.html默認(rèn)首頁(yè)文件名。當(dāng)在瀏覽器里輸入一個(gè)地址默認(rèn)首頁(yè)文件名。當(dāng)在瀏覽器里輸入一個(gè)地址（例如（例如http:/ /cgi-bin/ c:/program files/apache group/apache/cgi-bin/cgi文件存放路徑。文件存放路徑。2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)n設(shè)置虛擬目錄： 在主配置文件中找到行：，在這行的下面添加如下內(nèi)容：alias /vdir/ c:/comexe/ options m

34、ultiviewsallowoverride noneorder allow,denyallow from all這樣，通過訪問 http:/ 2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)n網(wǎng)頁(yè)制作與發(fā)布網(wǎng)頁(yè)制作與發(fā)布n網(wǎng)頁(yè)設(shè)計(jì)環(huán)境n在進(jìn)行網(wǎng)頁(yè)制作之前,需要了解相關(guān)的技術(shù)和外在的條件,估計(jì)網(wǎng)頁(yè)文件的大小、復(fù)雜程度、下載時(shí)間和訪問者的感受，同時(shí)也需要設(shè)計(jì)很好的導(dǎo)航結(jié)構(gòu)，這樣才能讓人不“迷路”。n網(wǎng)頁(yè)設(shè)計(jì)應(yīng)盡可能從用戶出發(fā)，根據(jù)不同的對(duì)象，采用不同的技術(shù) ，考慮用戶的具體環(huán)境進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，使之適應(yīng)不同的瀏覽器、操作系統(tǒng)和計(jì)算機(jī)平臺(tái)，最大限度的吸引用戶。 2.3 靜態(tài)頁(yè)

35、面的表達(dá)及其技術(shù)2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)n網(wǎng)頁(yè)的制作工具 n簡(jiǎn)單的文檔編輯工具n主要應(yīng)用于html等純文本文件的編輯；如windows下的記事本，dos下的editor編輯器等；n功能齊全的專用工具n可以以圖形化的界面完成所見所得的靜態(tài)網(wǎng)頁(yè)，包括基本的網(wǎng)頁(yè)文本、網(wǎng)頁(yè)外觀、超級(jí)鏈接及豐富的多媒體和動(dòng)畫處理工具，此外這些工具還提供了更多的網(wǎng)站開發(fā)和管理工具，典型的專用工具有dreamweaver、frontpage等；n集成開發(fā)環(huán)境中的web應(yīng)用n如ibm websphere集成開發(fā)環(huán)境中的web應(yīng)用工具。利用此web應(yīng)用工具可以交互地調(diào)試客戶端和

36、服務(wù)器端的代碼，無(wú)需編程或較少編程就能構(gòu)造相關(guān)的數(shù)據(jù)驅(qū)動(dòng)網(wǎng)頁(yè)，簡(jiǎn)化開發(fā)過程。 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)n網(wǎng)頁(yè)制作實(shí)例 n利用dreamweaver編寫網(wǎng)頁(yè)： 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)n將網(wǎng)頁(yè)發(fā)布到服務(wù)器 n方法：n使用專用的文件傳送工具，如cuteftp等；n使用集成在如dreamweaver中的文件發(fā)布功能 例例 將將dreamweamer中制作的網(wǎng)頁(yè)上傳到遠(yuǎn)程中制作的網(wǎng)頁(yè)上傳到遠(yuǎn)程apache站點(diǎn)。操作步驟如下：站點(diǎn)。操作步驟如下：1）用）用站點(diǎn)站點(diǎn)菜單下的菜單下的新建站點(diǎn)新建站點(diǎn)功能建立一

37、個(gè)新站點(diǎn)，站點(diǎn)屬性設(shè)置示例如下：功能建立一個(gè)新站點(diǎn)，站點(diǎn)屬性設(shè)置示例如下： 本地信息：站點(diǎn)名稱為：本地信息：站點(diǎn)名稱為：mysite1 本地根文件夾：本地根文件夾：d:mysite1 遠(yuǎn)程信息：訪問：本地遠(yuǎn)程信息：訪問：本地/網(wǎng)絡(luò)網(wǎng)絡(luò) 遠(yuǎn)程文件夾：遠(yuǎn)程文件夾：d:program filesapache groupsapachehtdocs 測(cè)試服務(wù)頁(yè)：服務(wù)器模型：無(wú)測(cè)試服務(wù)頁(yè)：服務(wù)器模型：無(wú) 2）新建一個(gè)）新建一個(gè)html頁(yè)，內(nèi)容不妨為簡(jiǎn)單的字符串頁(yè)，內(nèi)容不妨為簡(jiǎn)單的字符串“mytest mytest”,并存盤為并存盤為bb1.htm文件；文件；3）在站點(diǎn)窗口中，利用文件上傳的功能將文件）在站

38、點(diǎn)窗口中，利用文件上傳的功能將文件bb1.htm上傳到遠(yuǎn)程的上傳到遠(yuǎn)程的apache服務(wù)器上；服務(wù)器上；4）打開瀏覽器進(jìn)行測(cè)試）打開瀏覽器進(jìn)行測(cè)試 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)例例 若遠(yuǎn)程端安裝有若遠(yuǎn)程端安裝有tomcat服務(wù)器，將服務(wù)器，將dreamweamer中制作的網(wǎng)頁(yè)上傳到遠(yuǎn)程端。中制作的網(wǎng)頁(yè)上傳到遠(yuǎn)程端。操作步驟：操作步驟：1）用）用站點(diǎn)站點(diǎn)菜單下的菜單下的新建站點(diǎn)新建站點(diǎn)功能建立一個(gè)新站點(diǎn)，設(shè)置屬性設(shè)置示例如下：功能建立一個(gè)新站點(diǎn)，設(shè)置屬性設(shè)置示例如下： 本地信息：站點(diǎn)名稱為：本地信息：站點(diǎn)名稱為：mysite1 本地根文件夾：本地根文

39、件夾：d:mysite1 遠(yuǎn)程信息：訪問：本地遠(yuǎn)程信息：訪問：本地/網(wǎng)絡(luò)網(wǎng)絡(luò) 遠(yuǎn)程文件夾：遠(yuǎn)程文件夾：d:program filestomcat4webappsroot 測(cè)試服務(wù)頁(yè)：服務(wù)器模型：測(cè)試服務(wù)頁(yè)：服務(wù)器模型：jsp 訪問：本地訪問：本地/網(wǎng)絡(luò)網(wǎng)絡(luò) 測(cè)試服務(wù)器文件夾：測(cè)試服務(wù)器文件夾：d:program filestomcat4webappsroot2）建一個(gè)）建一個(gè)jsp頁(yè)，內(nèi)容不妨為表頁(yè)，內(nèi)容不妨為表2-11中的內(nèi)容中的內(nèi)容,并存盤為并存盤為cc1.jsp文件；文件；3）在站點(diǎn)窗口中，利用文件上傳的功能將文件）在站點(diǎn)窗口中，利用文件上傳的功能將文件cc1.jsp上傳到遠(yuǎn)程的上傳到遠(yuǎn)

40、程的tomcat中；中；4）打開瀏覽器進(jìn)行測(cè)試）打開瀏覽器進(jìn)行測(cè)試2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2.3 靜態(tài)頁(yè)面的表達(dá)及其技術(shù)可測(cè)試如下所示的可測(cè)試如下所示的jsp網(wǎng)頁(yè)：網(wǎng)頁(yè)：無(wú)標(biāo)題文檔 request method:servlet path:query string:content type:protocol:path info:server name:server port:remote host:remote addr:scheme: 2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)2 商務(wù)

41、表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)作業(yè)作業(yè)1n編寫一個(gè)靜態(tài)網(wǎng)頁(yè)，并發(fā)布到編寫一個(gè)靜態(tài)網(wǎng)頁(yè)，并發(fā)布到apacheapache服務(wù)器或服務(wù)器或tomcattomcat服務(wù)器中。服務(wù)器中。2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)作業(yè)2n利用利用vb(vb(或其它編程工具）編寫一個(gè)程序或其它編程工具）編寫一個(gè)程序, ,與與webweb服務(wù)器服務(wù)器進(jìn)行交互，驗(yàn)證進(jìn)行交互，驗(yàn)證httphttp協(xié)議的正確性。協(xié)議的正確性。n注：使用winsock或wininet控件編程都可以2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)附：internet客戶機(jī)與服務(wù)器交互的模式2 商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)商務(wù)表達(dá)層與靜態(tài)網(wǎng)頁(yè)執(zhí)行的順序：(client在connect