ＨＴＭＬ＋ＴＩＭＥ技術在網絡教學環境中的應用

[摘要]隨著互聯網的發展，網絡教育越來越普及，同時涌現出一些新技術，這些技術能更方便，更好的實現教學。本文主要介紹了HTML+TIME技術的特點，以及如何通過HTML+TIME技術實現幻燈片的制作和播放。

[關鍵詞]HTML+TIME技術 網絡教學 幻燈片

一、HTML+TIME技術的特點

在網絡教學中，知識通過電腦以不同的人類處理信息的模式，傳遞給學習者。如互動模式(interaction modes)，導航模式(navigation modes)，回饋模式(feedback modes)，均能滿足網絡輔助教學的需求。而知識的表現形式也多種多樣，比如文字，聲音，圖片等；而這些信息都可以在電腦上被表述。因此如何在網頁上整合各種媒體，用戶與計算機如何交互變得相當重要。為此，W3制定了同步多媒體整合語言——SMIL(Synchronized Multimedia Integration Language)。它就像HTML一樣，運用標簽描述來整合各種獨立創建的媒體。媒體可以存放在不同空間，不同的展示時間和同步機制。有了這些機制，媒體可依時間變量不同次序的展現在屏幕上；或基于同步的要求整合各媒體，讓媒體同步展現在屏幕上。SMIL有上述優點，但要經由特定的播放器來呈現媒體內容，例如RealOne或 GRiNS。它不能直接由瀏覽器實現，大大減低它的方便性。它雖然可plug-in到瀏覽器上，但和瀏覽器有互動差。 而HTML+TIME(Timed Interactive Multimedia Extensions)則能直接由瀏覽器實現，HTML+TIME是Microsoft，Macromedia，Compaq/Digital和 Digital Renaissance等幾家公司合作發表的技術；它將SMIL的觀念導入HTML和網頁瀏覽器。也就是說，HTML+TIME是在HTML網頁中新增時序，媒體可以存放在不同空間，不同的展示時間和同步機制。

微軟的Microsoft Internet Explorer 從5版本開始就提供了HTML+TIME技術，即定時交互多媒體擴展技術。該增加對 HTML頁面的定時和媒體同步支持。使用若干基于XML的元素和屬性，就可以把圖像，視頻，聲音等元素增加在HTML頁上，并在指定的時間內讓它們和HTML文本同步。采用HTML+TIME技術可以用很少甚至不用任何腳本就可以在網頁中創建出富媒體的、交互的內容。因為HTML+TIME通過對文檔上已有的HTML元素增加了某些新的屬性而使文檔中的內容具有可時控性，當希望在HTML頁應用時控效果的時候，只要在已有的HTML知識上少加學習即可。HTML+TIME屬性可以讓你指定在WEB頁上的元素何時出現、保持多長時間以及如何對HTML元素施加影響效果，可以添加動態效果。除了這些屬性外，已經被建立的基于XML的元素也會使媒體融入網頁簡單化。采用HTML+TIME技術可以很容易的實現圖片播放器或幻燈片播放；通過子標題實現視頻和音頻的播放；創建具有動畫屬性的文字或圖片等工作。目前為HTML+TIME2，通常簡稱time2。其工作方式大致如下：首先，必須使用IE5。5版本以上的瀏覽器，并在頁面上增加相應的time2行為申明。當需要在頁面使用time2時，必須在頁面申明一個XML命名空間，并將前綴t關聯到一個XML命名空間。其次，采用IMPORT處理命令傳入定義time2行為的標記。最后，將time2行為和相關的元素關聯。如果在頁面有超過一對的元素使用相同的HTML+TIME，可以通過創建CSS來達到目的。

二、如何通過HTML+TIME技術實現幻燈片的制作和播放

下面以在IE中實現幻燈片及其播放的方法說明該技術的應用。用戶可以建立幻燈片，并可以通過按瀏覽器上的“向前”、“向后”按鈕實現幻燈片的播放。其基本要點有:網頁如果要正確的工作一般需要編寫混合代碼；其中包括初始化HTML+TIME行為的必不可少的代碼，以及需要寫在STYLE標簽內的格式化代碼。創建包含幻燈片的DIV元素。創建交互式幻燈片放映的適當按鈕。寫混雜代碼需要為樣品適當地工作。創建適當的腳本函數代碼。具體的方法如下。

首先，在網頁增加如下代碼，以讓瀏覽器支持HTML+TIME技術。

＜HTML XMLNS:t = \"urn:schemas-microsoft-com:time\"＞

＜HEAD＞

＜STYLE＞

.time{behavior: url(#default#time2);}

＜/STYLE＞

＜import namespace = t urn = \"urn:schemas-microsoft-com:time\"

implementation = \"#default#time2\" /＞

＜/HEAD＞

其次，在STYLE標簽內增加格式代碼，以便對幻燈片內容的格式進行相應的設置，使幻燈片文字達到所需要的效果。

＜STYLE＞

.time{behavior: url(#default#time2);}

#oDiv1 {

font-size:28pt;

font-family: arial;

font-weight:bold;

color: #000000;

…}＜/STYLE＞

下面需要做的是設置幻燈片內容，通過DIV元素可以方便的進行每張幻燈片內容的設定，如下代碼描述了三張幻燈片內容，分別為文字信息“第一張幻燈片”、“第二張幻燈片”和“最后一張幻燈片”。

＜DIV ID=\"oWrapperDiv\"＞

＜DIV ID=\"oDiv1\" CLASS=\"time\" STYLE=\"z-index:2\"＞

＜t:TRANSITIONFILTER ID=\"oTran1\" BEGIN=\"indefinite\" TYPE=\"ellipseWipe\" DUR=\"1\"/＞

第一張幻燈片

＜/DIV＞

在這個例子中，用戶可以通過網頁上的“前一張”“后一張”按鈕實現交互，因此還需要在網頁上設置相應的按鈕，代碼如下。

＜BUTTON ID=\"oForward\" onclick=\"fnGo('forward');\" STYLE=\"position:absolute; top:460;left:100;\"＞Forward＜/BUTTON＞＜br＞

＜BUTTON ID=\"oForward\" onclick=\"fnGo('back');\" STYLE=\"position:absolute; top:460;\"＞Back＜/BUTTON＞＜br＞

最后，還需要設置相關函數。

在函數中，首先幻燈片DIV元素創建，元素的個數是已知條件，本例中為3張幻燈片。因此，該循環用以遍歷幻燈片集合中的每個元素。IF語句檢查集合的當前元素是否為其他幻燈片的最頂層。變量direction接受向前翻頁或者向后翻頁的參數，以決定幻燈片如何翻頁。

function fnGo(direction)

{

var divCollection = oWrapperDiv.childNodes;

var ColLength = divCollection.length;

for(i=0; i＜ColLength; i++)

{

if (divCollection(i).style.zIndex == 2)

{if (direction == \"forward\" i!=2)

var next = i + 1;

else if (direction == \"back\" i!=0)

var next = i - 1;

else

break;

for(j=0; j＜ColLength; j++)

divCollection(j).style.zIndex = 0;

divCollection(next).style.zIndex = 2;

divCollection(i).style.zIndex = 1;

var transitionFilterCol = divCollection(next).childNodes;

var nextTransitionFilter = new Object();

nextTransitionFilter = transitionFilterCol(0);

nextTransitionFilter.beginElement();

var nextDiv = new Object();

nextDiv = divCollection(next);

nextDiv.beginElement();

break;

}

}

}

通過上面的例子可以看出，采用HTML+TIME技術構建幻燈片的優越性。同時可以看出，采用HTML+TIME技術，可以在沒有腳本或者腳本代碼很少的情況下快速的創建具有豐富媒體類型的，交互式的網頁。是一種值得廣泛推廣的一種技術手段。

（作者單位：山東交通職業學院）