基于Html5可視化設(shè)計(jì)平臺(tái)的Html5課程設(shè)計(jì)與制作

摘要：Html5可視化設(shè)計(jì)平臺(tái)具有操作簡(jiǎn)單，分享快捷的技術(shù)優(yōu)勢(shì)。用戶(hù)可以根據(jù)自己的需求，設(shè)計(jì)與制作Html5課程。本文根據(jù)學(xué)生需求和教學(xué)目標(biāo)確定課程內(nèi)容，歸納課程要點(diǎn)，設(shè)計(jì)Html5頁(yè)面內(nèi)容。搭配適當(dāng)?shù)纳?、文字、圖形、音樂(lè)、視頻等多媒體內(nèi)容制作Html5課程，為線(xiàn)上線(xiàn)下立體混合式課程構(gòu)建提供一個(gè)補(bǔ)充內(nèi)容。

關(guān)鍵詞：Html5? 可視化設(shè)計(jì)平臺(tái)? Html5課程設(shè)計(jì)與制作

HTML5，簡(jiǎn)稱(chēng)“H5”，是第五代超文本標(biāo)記語(yǔ)言。Html5技術(shù)通過(guò)互動(dòng)頁(yè)面、交互動(dòng)畫(huà)、可視化文字、豐富的視頻、音頻資源給用戶(hù)帶來(lái)豐富的交互體驗(yàn)。在沒(méi)有代碼基礎(chǔ)的情況下，可以通過(guò)HTML5可視化設(shè)計(jì)平臺(tái)快速地制作，編輯、開(kāi)發(fā)和維護(hù)Html5頁(yè)面。結(jié)合一定的技術(shù)基礎(chǔ)，可以制作出非常優(yōu)秀的作品。除此以外，Html5可視化設(shè)計(jì)平臺(tái)還可以根據(jù)用戶(hù)需求，依托數(shù)據(jù)庫(kù)提供數(shù)據(jù)統(tǒng)計(jì)服務(wù)，分析瀏覽和交互行為數(shù)據(jù)，對(duì)課程內(nèi)容評(píng)價(jià)提供數(shù)據(jù)依據(jù)。

借助Html5可視化設(shè)計(jì)平臺(tái)和智慧工具的信息化優(yōu)勢(shì)，整合教學(xué)資源，可以進(jìn)一步激發(fā)學(xué)生的學(xué)習(xí)動(dòng)力，打造立體混合式課堂，提高教學(xué)效果。

一、平臺(tái)的選擇

伴隨著HTML5技術(shù)的出現(xiàn)，面世了大量簡(jiǎn)單易上手的Html5可視化設(shè)計(jì)平臺(tái)，大家通常看到的作品，大多是由這些平臺(tái)制作完成的。易企秀、兔展、MAKA、iH5、木疙瘩等都是比較出色的Html5可視化設(shè)計(jì)平臺(tái)，對(duì)于初學(xué)者來(lái)說(shuō)易企秀和MAKA的容易上手。iH5和木疙瘩適合有更多需求的專(zhuān)業(yè)設(shè)計(jì)師或?qū)I(yè)技術(shù)人員使用。對(duì)于剛開(kāi)始使用Html5可視化設(shè)計(jì)平臺(tái)，又有與Photoshop文件交互使用需求的用戶(hù)，可以選擇兔展作為Html5可視化設(shè)計(jì)平臺(tái)。兔展可以將Photoshop源文件直接導(dǎo)入工作臺(tái)進(jìn)行編輯處理，把Html5頁(yè)面做得更加美觀(guān)。

二、確定選題

Photoshop圖形圖像處理這門(mén)課程注重學(xué)生的實(shí)踐運(yùn)用，包含了圖像編輯與選區(qū)、圖層應(yīng)用、蒙版等知識(shí)點(diǎn)，在對(duì)Html5課程進(jìn)行設(shè)計(jì)時(shí)，不能照搬傳統(tǒng)課堂上的教學(xué)內(nèi)容。因?yàn)镠tml5課程本身力求簡(jiǎn)潔，如果想將課程的全部?jī)?nèi)容進(jìn)行呈現(xiàn)可能達(dá)不到想要的效果，還容易讓學(xué)生產(chǎn)生疲憊感，失去學(xué)習(xí)興趣。所以在確定選題時(shí)對(duì)內(nèi)容要有所選擇，應(yīng)該是對(duì)具體知識(shí)點(diǎn)的講解。Html5課程除了承擔(dān)基本的教學(xué)作用以外，還可以作為課堂資源的補(bǔ)充內(nèi)容，成為學(xué)生可以隨時(shí)隨地查看的課堂筆記。Photoshop圖形圖像處理這門(mén)課程要在Html5頁(yè)面中標(biāo)注常用的快捷方式，幫助學(xué)生在學(xué)習(xí)過(guò)程中掌握使用方法。

三、Html5可視化設(shè)計(jì)平臺(tái)課程設(shè)計(jì)與制作

1.課程內(nèi)容

Html5課程的學(xué)習(xí)內(nèi)容根據(jù)要根據(jù)具體的教學(xué)目標(biāo)來(lái)確定范圍，以蒙版為例，教學(xué)目標(biāo)包含三個(gè)方面的內(nèi)容。首先是會(huì)使用圖層蒙版修圖（對(duì)智能對(duì)象的編輯）的能力目標(biāo)，其次是理解什么是蒙版的知識(shí)目標(biāo)，最后是激發(fā)學(xué)生對(duì)Photoshop的學(xué)習(xí)興趣的素質(zhì)目標(biāo)。結(jié)合教學(xué)目標(biāo)，確定Html5課程內(nèi)容包含圖層蒙版的作用、原理、圖層蒙版的添加、圖層蒙版的停用與啟用、剪貼蒙版的特性、剪貼蒙版的創(chuàng)建與釋放。

2.課程要點(diǎn)

確定了Html5課程內(nèi)容后，要對(duì)課程內(nèi)容重新進(jìn)行整理、歸納。根據(jù)各個(gè)知識(shí)點(diǎn)之間的邏輯關(guān)系、前后順序、繁難程度等特點(diǎn)綜合考慮，將知識(shí)點(diǎn)進(jìn)行重新編排，讓它更符合學(xué)生的學(xué)習(xí)習(xí)慣，借助Html5可視化設(shè)計(jì)平臺(tái)逐層呈現(xiàn)課程內(nèi)容。根據(jù)“是什么——為什么——怎么做”這樣的層次結(jié)構(gòu)，將蒙版的課程內(nèi)容劃分為三部分。第一部分：圖層蒙版的作用，第二部分：圖層蒙版的原理，第三部分：圖層蒙版的添加、圖層蒙版的停用與啟用、剪貼蒙版的特性、剪貼蒙版的創(chuàng)建與釋放。

3.課程設(shè)計(jì)

學(xué)生在用手機(jī)觀(guān)看Html5課程時(shí)如果耗時(shí)太長(zhǎng)，可能喪失學(xué)習(xí)興趣。因此Html5課程不同于微課，在時(shí)間上應(yīng)控制在3分鐘以?xún)?nèi)。所以在對(duì)Html5課程設(shè)計(jì)時(shí)，要力求內(nèi)容簡(jiǎn)潔、主題鮮明、重難點(diǎn)突出。盡可能用最少的頁(yè)面，呈現(xiàn)出Html5課程的主要內(nèi)容。

4.課程制作

兔展可以制作翻頁(yè)、長(zhǎng)頁(yè)、短視頻等，不需要扎實(shí)的技術(shù)基礎(chǔ)，直接就可以上手，其中翻頁(yè)最適合用來(lái)制作Html5課程。登錄兔展，通過(guò)個(gè)人中心直接進(jìn)入工作臺(tái)。

根據(jù)對(duì)課程內(nèi)容劃分，第一部分用一張頁(yè)面，第二部分用一張頁(yè)面，第三部分用兩張頁(yè)面。

第一頁(yè)：

Photoshop中的圖層蒙版，可以控制圖層的不透明度、制作圖像特效，還能作為編輯智能對(duì)象的輔助工具。

第二頁(yè)：

圖層蒙版用黑白灰來(lái)控制圖像的顯示或隱藏。白色可以顯示本圖層的內(nèi)容，黑色可以使對(duì)應(yīng)的區(qū)域隱藏，顯示下一層的圖像?；疑尸F(xiàn)半透明區(qū)域，灰度值越高，不透明度越低。圖層蒙版可以作為輔助工具修剪智能對(duì)象。

第三頁(yè)：

添加圖層蒙版：在圖層面板下方單擊“添加圖層蒙版”按鈕，可對(duì)當(dāng)前層添加圖層蒙版。

停用與啟用：1.選擇圖層菜單—圖層蒙版—停用或啟用命令。2.選擇圖層面板當(dāng)前圖層，單擊鼠標(biāo)右鍵，停用或啟用圖層蒙版。3.按住Shift鍵，單擊蒙版縮略圖。

第四頁(yè)：

剪貼蒙版使用上一層圖層的內(nèi)容，覆蓋到相鄰圖層的形上。通過(guò)形狀、選區(qū)等內(nèi)容，來(lái)控制剪貼蒙版圖層的顯示范圍和不透明度。使用圖層樣式創(chuàng)建的圖層，也包含有剪貼蒙版。在剪貼蒙版圖層上，還可以再創(chuàng)建圖層蒙版。

特性：剪貼蒙版可以疊加，但優(yōu)先顯示上面的圖層。

創(chuàng)建與釋放：按住Alt鍵，用鼠標(biāo)單擊相鄰圖層間就可以創(chuàng)建與釋放剪貼蒙版。

在對(duì)頁(yè)面進(jìn)行設(shè)計(jì)制作時(shí)，選擇恬淡的頁(yè)面色彩來(lái)襯托Html5頁(yè)面主體文字內(nèi)容。對(duì)顏色的選擇要考慮視覺(jué)障礙群體的需求，避免黑底紅字或紅底灰字，向他們傳遞有效的頁(yè)面信息。

編輯頁(yè)面順序時(shí)，可以通過(guò)Html5可視化設(shè)計(jì)平臺(tái)設(shè)置各種有趣的動(dòng)畫(huà)效果，結(jié)合手指的滑動(dòng)來(lái)動(dòng)態(tài)播放。把原本生硬的知識(shí)點(diǎn)，通過(guò)這種動(dòng)態(tài)互動(dòng)變得簡(jiǎn)單有趣，調(diào)動(dòng)學(xué)生的學(xué)習(xí)積極性。

添加柔和的背景音樂(lè)，可以讓學(xué)生在舒緩的音樂(lè)中對(duì)內(nèi)容進(jìn)行學(xué)習(xí)。此外，還可以添加關(guān)鍵步驟的畫(huà)面或講解的視頻素材，將內(nèi)容進(jìn)行直觀(guān)呈現(xiàn)，但時(shí)間要短，內(nèi)容要直接。

編輯頁(yè)面內(nèi)容時(shí)，還可以加入兔展提供的彈幕形式播放留言，適時(shí)地設(shè)置留言、點(diǎn)贊、閱讀數(shù)等互動(dòng)形式，借助一些小插件來(lái)增強(qiáng)學(xué)生的人機(jī)互動(dòng)體驗(yàn)，增強(qiáng)Html5課程的趣味性。制作完成后，一鍵生成宣傳海報(bào)、二維碼、鏈接等形式分享給學(xué)生，還可以將課程二維碼附在教學(xué)資源中。既能宣傳課程又能快速傳遞課程信息。

四、總結(jié)

圖形圖像處理、數(shù)字媒體技術(shù)等方向的用戶(hù)，結(jié)合Html5可視化設(shè)計(jì)平臺(tái)既可以設(shè)計(jì)制作出精美的作品，還可以將其與教學(xué)內(nèi)容銜接起來(lái)，進(jìn)行綜合應(yīng)用。通過(guò)實(shí)踐，結(jié)合Html5可視化設(shè)計(jì)平臺(tái)設(shè)計(jì)制作的Html5課程，可以作為線(xiàn)上線(xiàn)下相融合的課程教學(xué)補(bǔ)充內(nèi)容。

利用新平臺(tái)、新技術(shù)能進(jìn)一步提高教師的課程設(shè)計(jì)制作水平，要有效運(yùn)用這些數(shù)字化工具，提升教學(xué)質(zhì)量。

參考文獻(xiàn)

[1]劉俁宏，趙國(guó)宏.H5技術(shù)在信息技術(shù)教學(xué)中的應(yīng)用研究[J].教育現(xiàn)代化，2019，6（57）：120-121.

[2]林健輝.UMU互動(dòng)學(xué)習(xí)平臺(tái)在手機(jī)HTML5頁(yè)面制作課程中的應(yīng)用[J].電子技術(shù)與軟件工程，2018（23）：71-72.

[3]趙騰.基于H5的科普移動(dòng)微課的設(shè)計(jì)與開(kāi)發(fā)[D].上海師范大學(xué)，2017.

[4]劉華，敖謙.基于微信公眾平臺(tái)的混合式教學(xué)——以“網(wǎng)線(xiàn)制作六步法”課程為例[J].現(xiàn)代教育技術(shù)，2017，27（01）：48-54.

作者簡(jiǎn)介

劉小瑩（1985—），女，漢族，四川射洪人，碩士，現(xiàn)就職于重慶電信職業(yè)學(xué)院，講師，研究方向：圖形圖像處理、數(shù)字媒體、數(shù)字文化創(chuàng)意、數(shù)字界面（UI）設(shè)計(jì)、數(shù)字產(chǎn)品創(chuàng)意設(shè)計(jì)。