浅谈三分屏课件制作方法

晁仕德 CHAO Shi-de

（青海广播电视大学，西宁 810008）

（Qinghai Radio & Television University，Xining 810008，China）

摘要：本文针对三分屏课件的制作，分析了免费代码与收费软件的优缺点，给出了两种免费的制作代码。

Abstract： Aimed at the manufacture method of three split screen courseware, this paper analyzes the advantages and disadvantages of the free code and charge software and gives two kinds of free production code.

教育期刊网 http://www.jyqkw.com
关键词：三分屏；课件制作；网页

Key words： three split screen；courseware making；webpage

中图分类号：G724.4 文献标识码：A 文章编号：1006-4311（2014）34-0268-02

作者简介：晁仕德（1969-），男，青海乐都人，青海广播电视大学教授，研究方向为课件制作。

0 引言

三分屏课件在目前的网络上十分流行，尤其在远程教育中使用十分广泛，它的表现形式是，在网页中将一个网页分为三个区域，左上角为视频区，左下角为导航区，右边为讲义显示区，当浏览者打开网页后，点击导航区域中的目录链接，可以视频和讲义同时跳转到指定的位置。

三分屏课件的实现方法有很多，主要分为两种，第一种是采用免费代码，第二种是采用成形的产品。

采用免费代码实现的方法也有很多，最为流行的可分为两种，一种是导航的链接与视频及文本形式的网页同步跳转[2]。第二种形式是导航的链接与视频及PPT图片形式的网页同步跳转。

1 导航链接与视频及文本形式的网页同步跳转

1.1 采用在网页中插入VB脚本命令，具体代码如下：

sub aaa_onclick

nsplay.stop

nsplay.CurrentPosition = 0

nsplay.selectionstart = 0

nsplay.SelectionEnd = 215

nsplay.play

end sub

……（//这里可以加上很多锚点，代码与上七行一样，只是锚点标记不同及标记的时间不同）

</script>

1.2 在嵌入式框架中输入相应的文本，然后在各章节内容前设置书签如a、b、c ……，在目录导航区输入各章节目录，并建立每章目录与嵌入式框架网页中的书签的超级链接，再在各章目录前加上视频锚点如aaa、bbb、ccc ……。最后，在导航的标题上做超链接时即可用如下方式：

其中I1为嵌入式框架网页，jy.htm#a为讲义网页中的a书签，aaa为视频锚点的第一个标记，通过上面这样的超链接，即可实现当点击导航时，视频与文本的同步。

2 导航的链接与视频及PPT图片形式的网页同步跳转

这种方式的关键代码是：

function MM_openBrWindow(theURL,winName,features) { //v2.0

window.open(theURL,winName,features);}

function playItem(startTime,textUrl)

{this.startTime = startTime;

this.seconds = 0;

this.textUrl = textUrl;

this.getSeconds = function getSeconds()

{ var time = this.startTime.split(":");

for(var ii=0;ii<time.length;ii++)

{ if( time.length-1-ii == 0)

{ this.seconds += parseInt(time[ii]); }

else

{ var n = 60;

for(var jj=ii;jj<time.length-2;jj++)

{n = n*60;}

this.seconds += parseInt(time[ii])*n; } }}

this.getSeconds();}

function LearnPlayer(id,mediaPlay,textFrameContainer)

{this.id = id;

this.mediaPlay = mediaPlay;

this.textFrameContainerName = textFrameContainer;

this.selectedPosition = null;

this.playItems = Array();

this.playItemIndex = 0;

this.addPlayItem = function (playItem)

{this.playItems[this.playItems.length] = playItem;}

this.autoShowText = function autoShowText()

{setInterval(this.id + ".showText();", 500);}

this.showText = function showText()

{var position = eval(this.mediaPlay).CurrentPosition;

if ( position > this.selectedPosition ) this.selectedPosition = null;

if (this.selectedPosition != null) return;

for(var ii=0;ii<this.playItems.length;ii++)

{if ((ii == this.playItems.length-1 && this.playItems[ii].seconds<position ) || (this.playItems[ii].seconds<position && this.playItems[ii+1].seconds>position ))

{ if ( this.playItemIndex != ii )

{ window.open(this.playItems[ii].textUrl, this.textFrameContainerName);

this.playItemIndex = ii;

break;}

else break;} }}

this.palyChange = function palyChange()

{this.selectedPosition = null;}

this.movePosition = function movePosition(position)

{eval(this.mediaPlay).CurrentPosition = position;

this.selectedPosition = position;

if (eval(this.mediaPlay). PlayStateChange == undefined)

{eval(this.mediaPlay).PlayStateChange = this.palyChange;}}}

var lp = new LearnPlayer("lp","ifrm_Media.MediaPlayer1", "ifrm_Text");

lp.addPlayItem(new playItem("0","htm/01.htm"));

lp.addPlayItem(new playItem("66","htm/02.htm"));

。。。

lp.autoShowText();

</script>

上述代码中，最主要的部分是有几张PPT图片，就需要形成几个图片网页，一个图片就是一个网页，后面链接的01.htm、02.htm等即为图片网页，这种形式下，首先是视频和音频的选择，因此，需要有视频和音频两个文件，当点击视频时，切换到视频的页面下，这时，点击导航，可实现视频和PPT同时跳转；当点击音频时，切换到音频的页面下，这时，点击导航，可实现音频和PPT同时跳转。

3 结语

对于普通制作者来讲，花钱去买个三分屏制作软件是不现实的，因此，用上述免费的代码来制作还是很实用的，最主要的是需要找到有免费代码的模板，方法是上网去查找，目前，全国高校制作的精品课程已非常多，很多精品课程中都采用了免费的代码形式，有些可以整包下载，即可以作为修改用的模板，有了模板以后，就可以把自己的课件修改为所需要的三分屏课件了。

教育期刊网 http://www.jyqkw.com
参考文献：

[1]北京翰伯尔公司.http://www.powercreator.com.cn/.

[2]苏少岩，晁仕德.三分屏课件制作方法探索[J].青海大学学报，2010（3）.

[3]郑颖，王明，孙效松.分化型甲状腺癌侵犯喉气管临床分析[J].中国耳鼻咽喉头颈外科，2014（03）.