HTML＋TIME技术在网络教学环境中的应用
开篇：润墨网以专业的文秘视角，为您筛选了一篇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" style="position:absolute; top:460;left:100;"＞forward＜/button＞＜br＞
＜button id="oforward" 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技术，可以在没有脚本或者脚本代码很少的情况下快速的创建具有丰富媒体类型的，交互式的网页。是一种值得广泛推广的一种技术手段。