多媒體技術(shù)與應(yīng)用第3章超文本原理-修改

1、多媒體技術(shù)與應(yīng)多媒體技術(shù)與應(yīng)用第用第3 3章超文本原章超文本原理理2第3章 超文本原理學(xué)習(xí)提示：基于XML規(guī)范的多媒體應(yīng)用有XHTML、SVG/XAML、X3D等，可形成媒體的整體解決方案。本章將系統(tǒng)敘述XML超文本應(yīng)用XHTML的基本原理，為后文介紹超文本的具體應(yīng)用奠定理論基礎(chǔ)。本章主要以代碼的方式敘述XHTML，建議結(jié)合第8章進(jìn)行上機(jī)實驗。本章學(xué)習(xí)目標(biāo)如下：l理解XHTML是XML超文本媒體應(yīng)用。l掌握XHTML常用元素的功能和用法l理解XHTML文檔的布局機(jī)制。l理解XHTML文檔內(nèi)容與格式，掌握XHTML文檔CSS樣式的基本原理。l理解XHTML文檔內(nèi)容、格式與功能，了解XHTML結(jié)合

2、JScript、C#、Java等編程。93.5.1 XHTML文本XHTML是是XML在超文本領(lǐng)域的具體應(yīng)用，所以文本定義是在超文本領(lǐng)域的具體應(yīng)用，所以文本定義是XHTML的最基本功能。字符形成段落，段落形成文檔，整個文的最基本功能。字符形成段落，段落形成文檔，整個文檔就是一頁。如果一頁超過滿屏的高度或?qū)挾?，將提供滾動條檔就是一頁。如果一頁超過滿屏的高度或?qū)挾龋瑢⑻峁L動條滾動瀏覽。滾動瀏覽。XHTML文檔沒有分頁的概念。文檔沒有分頁的概念。XHTML是為定義是為定義(超超)文本文檔而誕生的，所以文本文檔而誕生的，所以XHTML設(shè)計為并設(shè)計為并不提供專門定義文本的元素不提供專門定義文本的元素(

3、而而XAML、X3D則分別面向二維圖則分別面向二維圖形動畫、三維圖形動畫，都提供專門的文本定義元素，將分別形動畫、三維圖形動畫，都提供專門的文本定義元素，將分別在在4.8節(jié)、節(jié)、5.8節(jié)敘述節(jié)敘述)。文本主要由段落類元素。文本主要由段落類元素p，列表類元素，列表類元素ol、ul、li，表格類元素，表格類元素table、tr、td，分塊元素，分塊元素div，內(nèi)嵌元，內(nèi)嵌元素素span等格式類元素定義并初步格式化，已在等格式類元素定義并初步格式化，已在3.4節(jié)結(jié)合布局節(jié)結(jié)合布局進(jìn)行過詳述，在此不贅述。上述元素定義文本后，可進(jìn)一步通進(jìn)行過詳述，在此不贅述。上述元素定義文本后，可進(jìn)一步通過過CSS樣式

4、機(jī)制實現(xiàn)字體、背景、文本、布局、定位等強(qiáng)大的樣式機(jī)制實現(xiàn)字體、背景、文本、布局、定位等強(qiáng)大的格式功能格式功能(將在將在3.6.9節(jié)詳述節(jié)詳述)。103.5.2 XHTML外部媒體、組件的引用1. 直接引用外部媒體直接引用外部媒體2. 引用組件引用組件(1) 組件本質(zhì)上是程序代碼。(2) 應(yīng)用程序或系統(tǒng)軟件必須開放式地提供組件的功能，然后各程序員根據(jù)應(yīng)用程序或系統(tǒng)軟件的組件規(guī)范編寫組件。(3) 可以使用任何支持組件對象模型(COM)的編程語言(如C、C+、Java、Visual Basic或大量腳本編輯語言)編寫組件。編寫者提供組件給用戶，同時提供用法說明。用戶安裝組件，根據(jù)用法說明調(diào)用組件的功

5、能。(4) 隨著應(yīng)用程序或系統(tǒng)軟件的發(fā)展，可能會逐步提供當(dāng)前以組件方式實現(xiàn)的功能，而不再需要安裝組件。(5) 組件在XHTML文檔中運(yùn)行后，組件界面處的操作由組件響應(yīng)，典型地如右鍵菜單是組件的右鍵菜單功能了，而不再是IE的右鍵菜單功能了。(6) XHTML文檔中引用的組件是瀏覽器端的組件；ASPX文檔中引用的是Web服務(wù)器端的組件。(7) 組件(Component)根據(jù)是否提供自身的界面、功能特點等又稱為控件(Control)、插件(Plugin)等。能夠在XHTML文檔中引用(通過IE調(diào)用運(yùn)行)的組件又稱為Web組件、Web插件、ActiveX控件等。113.5.2 XHTML外部媒體、組件

6、的引用3. 通過組件引用外部媒體通過組件引用外部媒體引用外部媒體時，如果瀏覽XHTML文檔的瀏覽器自身不能直接播放這些媒體(如在XHTML文檔中引用.wmv、.rmvb、.mov等流式視頻，.swf、.xaml等二維圖形動畫，.x3d三維圖形動畫)，必須首先引用相關(guān)的組件，再由組件引用該媒體。代碼3-6是引用了.wmv、.swf、.xaml、.x3d的一個XHTML文檔示例。參見教材P58123.6 XHTML格式與CSS3.6.1 CSS XHTML應(yīng)用簡介應(yīng)用簡介XHTML文檔可理解為內(nèi)容、格式、功能三類主要信息。前面敘述了XHTML中定義內(nèi)容，內(nèi)容需要進(jìn)一步賦予格式，XHTML文檔同XM

7、L文檔一樣，選用CSS樣式技術(shù)(參見2.6節(jié))格式化文檔。CSS是Web標(biāo)準(zhǔn)之一(/TR/CSS/)。關(guān)鍵是了解CSS的語法和所有屬性的基本功能，然后通過軟件輔助(如Expression Web)具體實現(xiàn)CSS。還必須提及的是，由于兼容歷史的原因，XHTML一些定義文本的元素(如、等)具有直接樣式化文本的功能。但這些元素的種類是有限的，只能對文檔的樣式進(jìn)行微弱的控制。為了對XHTML文檔格式進(jìn)行更強(qiáng)大的控制，如字體、背景、文本、布局、定位等，必須使用CSS。133.6.2 CSS代碼結(jié)構(gòu)、屬性1. CSS代碼結(jié)構(gòu)基本結(jié)構(gòu)代碼結(jié)構(gòu)基本結(jié)構(gòu)2. CSS屬性概述屬性概

8、述1) 顏色(Color)2) 背景(Background)3) 字體(Font)4) 文本(Text)5) 用戶界面(Interface)6) 布局(Layout)143.6.3 CSS代碼編輯與瀏覽1. CSS編輯編輯2. XHTML文檔瀏覽文檔瀏覽153.6.4 CSS顏色CSS顏色屬性是用來為元素的文本內(nèi)容或背景顏色屬性是用來為元素的文本內(nèi)容或背景等指定顏色的。下面的示例為元素的文本內(nèi)容等指定顏色的。下面的示例為元素的文本內(nèi)容指定紅色：指定紅色：li color: rgb(255,0,0) /*指定所有的文本內(nèi)容為紅色，rgb(255,0,0)使用的是RGB顏色表示方式來表示紅色，該方

9、法可滿足任何顏色的表示 */顏色機(jī)制參見顏色機(jī)制參見1.3.1節(jié)。為了方便使用和兼顧兼節(jié)。為了方便使用和兼顧兼容性，容性，CSS顏色可以選用如下表示方法：顏色可以選用如下表示方法： (1) 可以用一個顏色關(guān)鍵詞。(2) 一個rgb()函數(shù)來表示。(3) #符號后緊跟6位十六進(jìn)制的數(shù)值來表示。163.6.5 CSS背景CSS背景屬性可以為一個具有布局屬性的元素指定背背景屬性可以為一個具有布局屬性的元素指定背景顏色或以一個背景圖像來獲得所需要的背景效果。景顏色或以一個背景圖像來獲得所需要的背景效果。下面的示例為元素指定紅色背景色：下面的示例為元素指定紅色背景色：td background-colo

10、r: rgb(0,255,0) /*指定所有的背景色為綠色*/下面的示例為元素指定一個背景圖像：下面的示例為元素指定一個背景圖像：td background-image: url(background.gif) /* 指定所有的背景圖像, 背景圖像通過url(background.gif)函數(shù)來獲取,其中參數(shù)background.gif是一個圖像文件的url*/當(dāng)使用背景圖像時，背景圖像的原始尺寸可能與元素當(dāng)使用背景圖像時，背景圖像的原始尺寸可能與元素的尺寸不相等，這時可附加的尺寸不相等，這時可附加background-repeat、repeat、 repeat-x、 repeat-y 、no

11、-repeat等屬性來等屬性來控制背景的重復(fù)屬性?？刂票尘暗闹貜?fù)屬性。173.6.6 CSS字體1. font-family2. font-style3. font-size183.6.7 CSS文本1. text-align2. vertical-align3. text-decoration4. letter-spacing5. word-spacing193.6.8 CSS用戶界面CSS用戶界面屬性用來指定用戶界面相關(guān)用戶界面屬性用來指定用戶界面相關(guān)的一些特性，其中經(jīng)常使用到的是的一些特性，其中經(jīng)常使用到的是cursor屬性。屬性。cursor屬性為鼠標(biāo)指定一個光標(biāo)類屬性為鼠標(biāo)指定一個光

12、標(biāo)類型型(如如auto、crosshair、default.、pointer、move、text、wait和和help 等等)下下面是一個示例：面是一個示例：p cursor :move /*指定當(dāng)鼠標(biāo)在所有位置上時顯示移動方式類型的光標(biāo)*/203.6.9 CSS布局1. 元素尺寸、填塞、邊框、邊白元素尺寸、填塞、邊框、邊白1) 元素尺寸2) 填塞3) 邊框4) 邊白2. 顯示顯示3. 層層4. 流式定位、絕對定位、相對定位流式定位、絕對定位、相對定位5. CSS布局思考布局思考213.6.10 CSS繼承像面向?qū)ο蟮某绦驒C(jī)制那樣，像面向?qū)ο蟮某绦驒C(jī)制那樣，CSS支持繼承。支持繼承。CSS繼繼

13、承是指后代元素自動承是指后代元素自動“遺傳遺傳”祖先元素樣式的機(jī)制，祖先元素樣式的機(jī)制，是簡化樣式生成的捷徑。當(dāng)為一個元素指定了樣式時，是簡化樣式生成的捷徑。當(dāng)為一個元素指定了樣式時，無須特別聲明即可將其樣式屬性賦予其后代元素。無須特別聲明即可將其樣式屬性賦予其后代元素。如果有如下一個如果有如下一個CSS定義：定義：bodyfont-size:50;示例中只定義了示例中只定義了的樣式。但因為包含在的樣式。但因為包含在中的所有元素都是中的所有元素都是的后代，如果這些的后代，如果這些元素沒有專門指定元素沒有專門指定CSS屬性，這些元素將繼承屬性，這些元素將繼承的的CSS屬性，即所有包含在屬性，即所

14、有包含在中的元素中的元素的文本內(nèi)容都以的文本內(nèi)容都以50像素的大小顯示。像素的大小顯示。223.6.11 CSS類型、層級機(jī)制一個一個XHTML元素可能會應(yīng)用到多重的元素可能會應(yīng)用到多重的CSS定義，這時需要通過定義，這時需要通過CSS層級機(jī)制來層級機(jī)制來解決樣式?jīng)_突。解決樣式?jīng)_突。CSS 層級機(jī)制是當(dāng)多個層級機(jī)制是當(dāng)多個CSS樣式定義應(yīng)用到同一個樣式定義應(yīng)用到同一個XHTML元素元素時，分配一個權(quán)重給每一個樣式定義，最時，分配一個權(quán)重給每一個樣式定義，最高權(quán)重的樣式定義優(yōu)先。下面是層級的規(guī)高權(quán)重的樣式定義優(yōu)先。下面是層級的規(guī)則。圖則。圖3-10 XHTML_Casscade.htm的運(yùn)的運(yùn)行

15、結(jié)果行結(jié)果(1) 外部CSS、內(nèi)部CSS、嵌入式CSS三種方式的樣式定義的權(quán)重依次增大。(2) 同一方式的樣式定義發(fā)生沖突時，后定義樣式的權(quán)重大于先定義的樣式。XHTML_Casscade.htm的運(yùn)行結(jié)果如圖的運(yùn)行結(jié)果如圖 3 10所示。所示。233.6.12 CSS類1. 關(guān)于關(guān)于CSS類類2. 類型類類型類3. 通用類通用類4. 假類假類243.6.13 CSS選擇器1. 嵌入式嵌入式CSS與與style (樣樣式式)特性選擇器特性選擇器2. element(元素元素)選擇器選擇器3. class(類類)特性選擇器特性選擇器4. id(標(biāo)識標(biāo)識)特性選擇器特性選擇器253.7 XHTML

16、功能HTML文檔可理解為內(nèi)容、格式、功能三文檔可理解為內(nèi)容、格式、功能三類主要信息。前面敘述了類主要信息。前面敘述了XHTML文檔內(nèi)文檔內(nèi)容定義，并通過容定義，并通過CSS格式化格式化XHTML文檔。文檔。本節(jié)概述本節(jié)概述XHTML文檔功能，例如超鏈接、文檔功能，例如超鏈接、通過表單與服務(wù)器通信等。此外，通過表單與服務(wù)器通信等。此外，XHTML文檔還可通過文檔還可通過JScript、C#、Java等程序語言擴(kuò)展強(qiáng)大的功能，但涉及系統(tǒng)等程序語言擴(kuò)展強(qiáng)大的功能，但涉及系統(tǒng)的編程知識，根據(jù)立體化課程觀，將在后的編程知識，根據(jù)立體化課程觀，將在后續(xù)課程詳述。續(xù)課程詳述。263.7.1 XHTML超鏈接

17、1. 關(guān)于超鏈接關(guān)于超鏈接2. 跳轉(zhuǎn)到其他文件的超鏈跳轉(zhuǎn)到其他文件的超鏈接接3. 跳轉(zhuǎn)到跳轉(zhuǎn)到XHTML文檔文檔(自身自身或其他或其他)中預(yù)定義部分的超中預(yù)定義部分的超鏈接鏈接273.7.2 XHTML表單XHTML文檔放置在文檔放置在Web服務(wù)器端，服務(wù)器端，由客戶端的瀏覽器裝載并運(yùn)行。為由客戶端的瀏覽器裝載并運(yùn)行。為了實現(xiàn)瀏覽器端和服務(wù)器端之間的了實現(xiàn)瀏覽器端和服務(wù)器端之間的信息交互，信息交互，XHTML文檔必須有向文檔必須有向Web服務(wù)器端提交信息的機(jī)制，這服務(wù)器端提交信息的機(jī)制，這就要通過表單來實現(xiàn)。就要通過表單來實現(xiàn)。XHTML表單由表單由嵌套嵌套等稱為表單域的元素來實現(xiàn)，代碼等稱為

18、表單域的元素來實現(xiàn)，代碼3-15是含有表單的是含有表單的XHTML文檔示例。文檔示例。參見教材P77283.8 小 結(jié)本章根據(jù)本章根據(jù)XHTML布局、布局、XHTML內(nèi)容、內(nèi)容、XHTML格式格式(CSS樣式樣式)、XHTML功能的思路，系統(tǒng)敘述了功能的思路，系統(tǒng)敘述了XML在在Web超文本領(lǐng)域的應(yīng)用超文本領(lǐng)域的應(yīng)用XHTML的基本原理。的基本原理。XHTML是是Web上信息進(jìn)行超文本傳播的標(biāo)準(zhǔn)。上信息進(jìn)行超文本傳播的標(biāo)準(zhǔn)。XHTML擁有許多預(yù)定義的擁有許多預(yù)定義的XHTML元素，可用來將文本、圖形圖像、元素，可用來將文本、圖形圖像、音頻等聽覺和視覺媒體進(jìn)行樣式化和集成傳播，并使它們具有超鏈接音頻等聽覺和視覺媒體進(jìn)行樣式化和