葛牧天

（南京市廣播電視大學(xué)，江蘇 南京 210002）

基于Lectora的響應(yīng)式課件的設(shè)計(jì)與制作

葛牧天

（南京市廣播電視大學(xué)，江蘇 南京 210002）

隨著我國(guó)社會(huì)的不斷發(fā)展，信息化技術(shù)水平的突飛猛進(jìn)，在教育改革方面，取得了巨大進(jìn)步。教育信息化也成了當(dāng)前形勢(shì)下必然的發(fā)展趨勢(shì)。同時(shí)，隨著在線教育、終身教育等的興起，學(xué)生的學(xué)習(xí)模式也在發(fā)生了巨大的變化。在這樣一種環(huán)境下，傳統(tǒng)的類(lèi)似PPT的演示型課件已經(jīng)無(wú)法勝任信息化教育的模式，其缺點(diǎn)也日漸放大，如內(nèi)容展示枯燥、無(wú)法與學(xué)生進(jìn)行互動(dòng)、不方便進(jìn)行移動(dòng)學(xué)習(xí)等。在新的環(huán)境下，需要一種不同于傳統(tǒng)的新的課件，來(lái)滿足新形式下學(xué)生的學(xué)習(xí)需求。文章詳述了基于Lectora的響應(yīng)式課件的設(shè)計(jì)與制作，并分析了其應(yīng)用效果和不足，以期更好地為廣大學(xué)習(xí)者提供服務(wù)。

Lectora；響應(yīng)式課件；教育信息化

1 響應(yīng)式課件

對(duì)于目前的教育領(lǐng)域來(lái)說(shuō)，課件主要有兩種形式，一種是PPT類(lèi)的展示型課件，一種是基于B/S架構(gòu)的網(wǎng)絡(luò)課件。其中，展示型課件只適用于傳統(tǒng)的課堂教學(xué)，課件內(nèi)容相對(duì)枯燥，與學(xué)生之間缺乏互動(dòng)，并且對(duì)移動(dòng)設(shè)備的支持性很差，已經(jīng)逐漸無(wú)法適應(yīng)新環(huán)境下的教育教學(xué)。而基于B/S架構(gòu)的網(wǎng)絡(luò)課件，可以支持網(wǎng)絡(luò)學(xué)習(xí)，內(nèi)容上可以與學(xué)習(xí)者互動(dòng)，如果設(shè)計(jì)時(shí)考慮周到，還可以支持電腦、智能手機(jī)、平板電腦等不同設(shè)備訪問(wèn)。也正是這些優(yōu)點(diǎn)，使得這種結(jié)構(gòu)的課件更受到學(xué)習(xí)者的歡迎。

同時(shí)，根據(jù)研究顯示，目前越來(lái)越多的人習(xí)慣用智能設(shè)備而不是傳統(tǒng)的電腦進(jìn)行學(xué)習(xí)，這些智能設(shè)備在尺寸、屏幕分辨率、操作方式上均和傳統(tǒng)的電腦有所區(qū)別，為了提高課件的使用體驗(yàn)，這時(shí)就需要開(kāi)發(fā)響應(yīng)式課件來(lái)滿足各種不同設(shè)備的訪問(wèn)需求。響應(yīng)式課件就是指課件響應(yīng)式設(shè)計(jì)。同樣的內(nèi)容在不同的設(shè)備屏幕上呈現(xiàn)出不同的顯示效果，但會(huì)盡量減少放大縮小或者平移的影響，使得學(xué)習(xí)者無(wú)論使用何種設(shè)備，都可以獲得最佳的學(xué)習(xí)體驗(yàn)。響應(yīng)式課件的展示效果具體如圖1所示。

圖1 響應(yīng)式課件在不同設(shè)備的展示效果

2 Lectora課件開(kāi)發(fā)工具

目前，響應(yīng)式內(nèi)容的開(kāi)發(fā)都使用了相同的原理，就是內(nèi)容的放置是基于流動(dòng)網(wǎng)格，而這些流動(dòng)網(wǎng)格又基于使用中設(shè)備的寬度而發(fā)生變化。當(dāng)視圖區(qū)域減小，網(wǎng)格也同時(shí)縮小，同時(shí)內(nèi)容的版面重新安排，這樣就不需要使用水平滾動(dòng)條或者縮小版面。這樣的設(shè)計(jì)需要開(kāi)發(fā)者掌握和具備較強(qiáng)的網(wǎng)頁(yè)編寫(xiě)能力，例如CSS媒體框架的編寫(xiě)能力以及Java Script網(wǎng)絡(luò)的腳本語(yǔ)言的使用能力，也正是這些因素導(dǎo)致很多教師不愿意或沒(méi)有能力開(kāi)發(fā)響應(yīng)式課件。因此，教育行業(yè)也迫切需要支持響應(yīng)式課件的快速開(kāi)發(fā)工具。而Lectora系列軟件，就能很好地滿足這方面課件開(kāi)發(fā)的需求。Lectora是美國(guó)Trivantis公司開(kāi)發(fā)的一款功能強(qiáng)大、操作簡(jiǎn)單的快速課件設(shè)計(jì)制作軟件，軟件提供給開(kāi)發(fā)者一個(gè)豐富的編輯環(huán)境，它的多功能性和易操作性可以幫助開(kāi)發(fā)者制作出各類(lèi)適用范圍廣的課件和各種在線演示。并且可以直接發(fā)布為支持scorm標(biāo)準(zhǔn)的Web html格式，方便學(xué)習(xí)者直接使用學(xué)習(xí)，并且在最新的版本Lectora 16中，開(kāi)始支持響應(yīng)式課件的設(shè)計(jì)。利用Lectora 16開(kāi)發(fā)響應(yīng)式課件，并不需要設(shè)計(jì)者考慮復(fù)雜的屏幕大小問(wèn)題，軟件本身設(shè)計(jì)了5種可能遇到的視圖：臺(tái)式機(jī)視圖、平板電腦橫版視圖、平板電腦豎版視圖、手機(jī)橫版視圖和手機(jī)豎版視圖。理想狀態(tài)下，設(shè)計(jì)者只需要在臺(tái)式機(jī)模式下進(jìn)行一次版面設(shè)計(jì)，課件內(nèi)容就會(huì)在其他幾種模式下自動(dòng)放縮和排列出來(lái)。如果對(duì)系統(tǒng)自動(dòng)的調(diào)整效果不滿意，還可以在每一種視圖模式根據(jù)當(dāng)前的特殊情況進(jìn)行微調(diào)，來(lái)達(dá)到最好的展示效果。

3 基于Lectora 16制作響應(yīng)式課件

這里以筆者利用Lectora 16制作的“玩轉(zhuǎn)Android”為例，來(lái)探討Lectora 16制作響應(yīng)式課件的基本方法。“玩轉(zhuǎn)Android”是服務(wù)于開(kāi)放大學(xué)終身教育的一門(mén)微課程，主要介紹了關(guān)于安卓手機(jī)的一些基礎(chǔ)知識(shí)，具體內(nèi)容共分為了10個(gè)微課，在網(wǎng)絡(luò)上供學(xué)習(xí)者訪問(wèn)使用。課件的學(xué)習(xí)對(duì)象為社會(huì)所有學(xué)習(xí)者。也正是因?yàn)閷W(xué)習(xí)者的性質(zhì)，可能會(huì)有大量來(lái)自于移動(dòng)智能設(shè)備的訪問(wèn)，因此將“玩轉(zhuǎn)Android”設(shè)計(jì)成響應(yīng)式課件是十分有必要的。

3.1 課件設(shè)計(jì)結(jié)構(gòu)

整個(gè)“玩轉(zhuǎn)Android”課件，采用了類(lèi)似APP的導(dǎo)航結(jié)構(gòu)，進(jìn)入具體內(nèi)容學(xué)習(xí)時(shí)，頂部為當(dāng)前所學(xué)習(xí)的具體內(nèi)容，左側(cè)為隱藏式的導(dǎo)航菜單，默認(rèn)為隱藏，需要時(shí)可以滑動(dòng)調(diào)出進(jìn)行內(nèi)容跳轉(zhuǎn)，主要區(qū)域?yàn)槲⒄n的內(nèi)容展示區(qū)，具體內(nèi)容是事先編輯制作好的“玩轉(zhuǎn)Android”動(dòng)畫(huà)視頻，整個(gè)課件的框架如表1所示。

表1 “玩轉(zhuǎn)Android”課件框架設(shè)計(jì)

整個(gè)課件的設(shè)計(jì)，充分考慮了可能的學(xué)習(xí)人群，以及學(xué)習(xí)者所使用的設(shè)備，尤其重點(diǎn)考慮了手機(jī)等智能設(shè)備的特性和訪問(wèn)習(xí)慣，因此設(shè)計(jì)時(shí)要求課件界面清晰明了，智能設(shè)備的初學(xué)者也可以方便使用；課件盡可能地少出現(xiàn)大段的文字內(nèi)容；按鈕盡量設(shè)計(jì)明顯且分開(kāi)，防止移動(dòng)設(shè)備上出現(xiàn)誤觸摸的情況；導(dǎo)航菜單默認(rèn)為隱藏，減少屏幕占用，將幾乎100%的屏幕空間留給微課視頻，需要時(shí)可以通過(guò)標(biāo)題欄的菜單呼出按鈕調(diào)出菜單導(dǎo)航按鈕，實(shí)現(xiàn)學(xué)習(xí)內(nèi)容的跳轉(zhuǎn)。

3.2 課件的具體制作

確定了課件的設(shè)計(jì)，接下來(lái)利用Lectora 16軟件對(duì)課件進(jìn)行設(shè)計(jì)制作。打開(kāi)軟件，注意和以往版本的Lectora軟件不同，這里需要?jiǎng)?chuàng)建一個(gè)具有響應(yīng)能力的作品（見(jiàn)圖2）。

圖2 Lectora創(chuàng)建具有響應(yīng)能力的作品

進(jìn)入了設(shè)計(jì)模式，課件設(shè)計(jì)的頂部出現(xiàn)了5種設(shè)計(jì)視圖（見(jiàn)圖3），從左往右分別為手機(jī)縱向模式、平板電腦縱向模式、電腦桌面模式、平板電腦橫向模式和手機(jī)橫向模式。一般情況下，我們只需要在桌面模式下進(jìn)行編輯設(shè)計(jì)，系統(tǒng)會(huì)自動(dòng)調(diào)整其他模式下課件的布局。當(dāng)然這樣自動(dòng)生成的布局不可能完美，很多情況下，需要我們手工進(jìn)行重新調(diào)整，來(lái)達(dá)到各種模式下的完美呈現(xiàn)效果。

圖3 Lectora響應(yīng)式課件的5種設(shè)計(jì)模式

具體課件設(shè)計(jì)時(shí)，參考了很多手機(jī)程序的界面設(shè)計(jì)，和以往的課件不同，這里沒(méi)有采用傳統(tǒng)的按鈕式設(shè)計(jì)，而是圖標(biāo)式的設(shè)計(jì)，大小合適的圖標(biāo)看上去一目了然，并且方便手機(jī)點(diǎn)擊，不會(huì)造成操作上的困難以及誤操作的產(chǎn)生。進(jìn)行調(diào)整后，整個(gè)課件的界面在5種訪問(wèn)模式下均可以完美呈現(xiàn)，受到版面的限制，這里展示兩種典型的情況，分別為桌面訪問(wèn)模式視圖以及手機(jī)縱向訪問(wèn)模式視圖（見(jiàn)圖4—5）。

圖4 “玩轉(zhuǎn)Android”桌面模式視圖

完成了課件首頁(yè)結(jié)構(gòu)設(shè)計(jì)，接著是具體的內(nèi)容頁(yè)面。由于10節(jié)微課的動(dòng)畫(huà)視頻已經(jīng)提前做好，這里只需要在做好具體頁(yè)面后，直接導(dǎo)入視頻動(dòng)畫(huà)即可。Lectora軟件支持MP4的視頻文件，并且本身提供了視頻播放器可供瀏覽器使用。需要注意的是由于課件考慮到了移動(dòng)設(shè)備的流媒體播放，因此采用了分辨率為1 920×1 080 ppi，編碼方式為H.264的MP4視頻，可以幾乎在所有設(shè)備上獲得較為完美的播放效果。

圖5 “玩轉(zhuǎn)Android”手機(jī)豎版模式視圖

最后是導(dǎo)航菜單的設(shè)計(jì)。為了最好的學(xué)習(xí)效果，在默認(rèn)情況下，菜單為隱藏，在需要時(shí)，通過(guò)設(shè)計(jì)的菜單呼出按鈕呼出。通過(guò)菜單可以跳轉(zhuǎn)到任意的微課內(nèi)容，可以回到課件的主界面或者直接隱藏菜單繼續(xù)當(dāng)前的學(xué)習(xí)。菜單的編輯以及最終效果如圖6所示。

完成了全部的設(shè)計(jì)過(guò)程，接下來(lái)是生成具體的課件。Lectora支持將課件發(fā)布為離線模式（exe文件）或者在線的Web格式（html5標(biāo)準(zhǔn)）。這里根據(jù)課件的使用需求，將其發(fā)布為Web格式。發(fā)布完成后，經(jīng)過(guò)測(cè)試沒(méi)有錯(cuò)誤之后，直接上傳至學(xué)校的學(xué)習(xí)平臺(tái)，提供給學(xué)習(xí)者進(jìn)行學(xué)習(xí)反饋。

圖6 “玩轉(zhuǎn)Android”菜單編輯

4 課件的使用效果與不足

課件發(fā)布以后，也在多個(gè)設(shè)備上進(jìn)行了測(cè)試，包括了電腦端的IE瀏覽器，Edge瀏覽器，F(xiàn)irefox瀏覽器，Android手機(jī)，各代iPhone以及iPad。經(jīng)過(guò)實(shí)際測(cè)試表明，在以上各類(lèi)常見(jiàn)設(shè)備中，無(wú)論橫屏或者豎屏的情況，課件均能夠自動(dòng)響應(yīng)，達(dá)到了預(yù)期的設(shè)計(jì)效果。

課件的使用人群沒(méi)有特定的限制，所有愿意學(xué)習(xí)的人都可以使用本課件。為此筆者也詢問(wèn)了身邊的一些人群以及觀看使用過(guò)本課件的一些學(xué)習(xí)者。大家都沒(méi)有意料到這樣類(lèi)似的響應(yīng)式布局能在課件中出現(xiàn)，并且對(duì)課件的訪問(wèn)效果表示滿意，并且希望將“玩轉(zhuǎn)Android”這門(mén)微課程深入地開(kāi)發(fā)下去，更好地服務(wù)于終身教育。

當(dāng)然，用Lectora開(kāi)發(fā)響應(yīng)式課件目前也存在著一些缺點(diǎn)。Lectora軟件雖然功能十分強(qiáng)大，但在視頻動(dòng)畫(huà)方面依然存在不足。因此制作這門(mén)課程時(shí)，先利用別的軟件完成了視頻部分的制作，直接導(dǎo)入Lectora使用。此外，雖然軟件自動(dòng)會(huì)生成不同的響應(yīng)式布局，但是自動(dòng)生成的效果難以令人滿意，如果想達(dá)到一個(gè)好的效果，需要花費(fèi)時(shí)間耐心地調(diào)整不同模式下的具體布局。軟件本地中文化后，一些功能的翻譯令人難以理解，需要多次摸索領(lǐng)悟其具體含義。但是，這些小缺陷并不能掩蓋Lectora是一門(mén)課件開(kāi)發(fā)的利器。

5 結(jié)語(yǔ)

在教育信息化飛速發(fā)展的時(shí)代，一些傳統(tǒng)的學(xué)習(xí)方式已經(jīng)不能滿足人們的需求，新的移動(dòng)自主式的終身學(xué)習(xí)模式也必將引領(lǐng)起新的潮流。我們?cè)谥谱鹘虒W(xué)資源的同時(shí)，也要盡可能做到一次制作，任何設(shè)備均可用。這樣，不僅大大提高了資源的使用效率，也可以更好地適應(yīng)信息化教育的趨勢(shì)，更好地為廣大學(xué)習(xí)者提供服務(wù)。

[1]張一春.精品微課設(shè)計(jì)與開(kāi)發(fā)[M].北京：高等教育出版社，2016.

[2]陸靈明.M-learning時(shí)代網(wǎng)絡(luò)課程設(shè)計(jì)新范式—響應(yīng)式課程設(shè)計(jì)[J].中國(guó)教育信息化，2016（10）：49-51.

[3]孫濤，鄒蓓，袁順，等.Lectora軟件制作課件應(yīng)用研究與實(shí)踐[J].福建電腦，2015（11）：157.

[4]Lectora中國(guó)博客.Lectora 16快速入門(mén)指南[EB/OL].（2016-05-19）[2017-10-25].http://blog.sina.com.cn/lectora.

Design and implementation of response courseware based on Lectora

Ge Mutian
（Nanjing Radio and TV University, Nanjing 210002, China）

With the continuous development of society in China, the level of information technology has been advancing rapidly, and great progress has been made in the educational reform. Educational informatization has become an inevitable trend in the current situation. At the same time, with the rise of online education and lifelong education, the learning mode of students has also undergone tremendous changes.In such an environment, similar to the traditional PPT demo courseware has been not qualified for the informatization of education mode, its disadvantages are also increasingly enlarged, such as the presentation of the content boring, unable to interact with the students, which is not convenient for mobile learning and so on. In the new environment, a new courseware which is different from the traditional one is proposed to meet the students’ learning needs. This paper elaborates the design and production of response courseware based on Lectora, and analyzes its application effect and deficiency in order to better serve the majority of learners.

Lectora; response courseware; educational informatization

葛牧天（1985— ），男，江蘇南京人，工程師，學(xué)士；研究方向：教育資源。