基于Html5可視化設計平臺的Html5課程設計與制作

摘要：Html5可視化設計平臺具有操作簡單，分享快捷的技術優勢。用戶可以根據自己的需求，設計與制作Html5課程。本文根據學生需求和教學目標確定課程內容，歸納課程要點，設計Html5頁面內容。搭配適當的色彩、文字、圖形、音樂、視頻等多媒體內容制作Html5課程，為線上線下立體混合式課程構建提供一個補充內容。

關鍵詞：Html5? 可視化設計平臺? Html5課程設計與制作

HTML5，簡稱“H5”，是第五代超文本標記語言。Html5技術通過互動頁面、交互動畫、可視化文字、豐富的視頻、音頻資源給用戶帶來豐富的交互體驗。在沒有代碼基礎的情況下，可以通過HTML5可視化設計平臺快速地制作，編輯、開發和維護Html5頁面。結合一定的技術基礎，可以制作出非常優秀的作品。除此以外，Html5可視化設計平臺還可以根據用戶需求，依托數據庫提供數據統計服務，分析瀏覽和交互行為數據，對課程內容評價提供數據依據。

借助Html5可視化設計平臺和智慧工具的信息化優勢，整合教學資源，可以進一步激發學生的學習動力，打造立體混合式課堂，提高教學效果。

一、平臺的選擇

伴隨著HTML5技術的出現，面世了大量簡單易上手的Html5可視化設計平臺，大家通?？吹降淖髌罚蠖嗍怯蛇@些平臺制作完成的。易企秀、兔展、MAKA、iH5、木疙瘩等都是比較出色的Html5可視化設計平臺，對于初學者來說易企秀和MAKA的容易上手。iH5和木疙瘩適合有更多需求的專業設計師或專業技術人員使用。對于剛開始使用Html5可視化設計平臺，又有與Photoshop文件交互使用需求的用戶，可以選擇兔展作為Html5可視化設計平臺。兔展可以將Photoshop源文件直接導入工作臺進行編輯處理，把Html5頁面做得更加美觀。

二、確定選題

Photoshop圖形圖像處理這門課程注重學生的實踐運用，包含了圖像編輯與選區、圖層應用、蒙版等知識點，在對Html5課程進行設計時，不能照搬傳統課堂上的教學內容。因為Html5課程本身力求簡潔，如果想將課程的全部內容進行呈現可能達不到想要的效果，還容易讓學生產生疲憊感，失去學習興趣。所以在確定選題時對內容要有所選擇，應該是對具體知識點的講解。Html5課程除了承擔基本的教學作用以外，還可以作為課堂資源的補充內容，成為學生可以隨時隨地查看的課堂筆記。Photoshop圖形圖像處理這門課程要在Html5頁面中標注常用的快捷方式，幫助學生在學習過程中掌握使用方法。

三、Html5可視化設計平臺課程設計與制作

1.課程內容

Html5課程的學習內容根據要根據具體的教學目標來確定范圍，以蒙版為例，教學目標包含三個方面的內容。首先是會使用圖層蒙版修圖（對智能對象的編輯）的能力目標，其次是理解什么是蒙版的知識目標，最后是激發學生對Photoshop的學習興趣的素質目標。結合教學目標，確定Html5課程內容包含圖層蒙版的作用、原理、圖層蒙版的添加、圖層蒙版的停用與啟用、剪貼蒙版的特性、剪貼蒙版的創建與釋放。

2.課程要點

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

3.課程設計

學生在用手機觀看Html5課程時如果耗時太長，可能喪失學習興趣。因此Html5課程不同于微課，在時間上應控制在3分鐘以內。所以在對Html5課程設計時，要力求內容簡潔、主題鮮明、重難點突出。盡可能用最少的頁面，呈現出Html5課程的主要內容。

4.課程制作

兔展可以制作翻頁、長頁、短視頻等，不需要扎實的技術基礎，直接就可以上手，其中翻頁最適合用來制作Html5課程。登錄兔展，通過個人中心直接進入工作臺。

根據對課程內容劃分，第一部分用一張頁面，第二部分用一張頁面，第三部分用兩張頁面。

第一頁：

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

第二頁：

圖層蒙版用黑白灰來控制圖像的顯示或隱藏。白色可以顯示本圖層的內容，黑色可以使對應的區域隱藏，顯示下一層的圖像?；疑尸F半透明區域，灰度值越高，不透明度越低。圖層蒙版可以作為輔助工具修剪智能對象。

第三頁：

添加圖層蒙版：在圖層面板下方單擊“添加圖層蒙版”按鈕，可對當前層添加圖層蒙版。

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

第四頁：

剪貼蒙版使用上一層圖層的內容，覆蓋到相鄰圖層的形上。通過形狀、選區等內容，來控制剪貼蒙版圖層的顯示范圍和不透明度。使用圖層樣式創建的圖層，也包含有剪貼蒙版。在剪貼蒙版圖層上，還可以再創建圖層蒙版。

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

創建與釋放：按住Alt鍵，用鼠標單擊相鄰圖層間就可以創建與釋放剪貼蒙版。

在對頁面進行設計制作時，選擇恬淡的頁面色彩來襯托Html5頁面主體文字內容。對顏色的選擇要考慮視覺障礙群體的需求，避免黑底紅字或紅底灰字，向他們傳遞有效的頁面信息。

編輯頁面順序時，可以通過Html5可視化設計平臺設置各種有趣的動畫效果，結合手指的滑動來動態播放。把原本生硬的知識點，通過這種動態互動變得簡單有趣，調動學生的學習積極性。

添加柔和的背景音樂，可以讓學生在舒緩的音樂中對內容進行學習。此外，還可以添加關鍵步驟的畫面或講解的視頻素材，將內容進行直觀呈現，但時間要短，內容要直接。

編輯頁面內容時，還可以加入兔展提供的彈幕形式播放留言，適時地設置留言、點贊、閱讀數等互動形式，借助一些小插件來增強學生的人機互動體驗，增強Html5課程的趣味性。制作完成后，一鍵生成宣傳海報、二維碼、鏈接等形式分享給學生，還可以將課程二維碼附在教學資源中。既能宣傳課程又能快速傳遞課程信息。

四、總結

圖形圖像處理、數字媒體技術等方向的用戶，結合Html5可視化設計平臺既可以設計制作出精美的作品，還可以將其與教學內容銜接起來，進行綜合應用。通過實踐，結合Html5可視化設計平臺設計制作的Html5課程，可以作為線上線下相融合的課程教學補充內容。

利用新平臺、新技術能進一步提高教師的課程設計制作水平，要有效運用這些數字化工具，提升教學質量。

參考文獻

[1]劉俁宏，趙國宏.H5技術在信息技術教學中的應用研究[J].教育現代化，2019，6（57）：120-121.

[2]林健輝.UMU互動學習平臺在手機HTML5頁面制作課程中的應用[J].電子技術與軟件工程，2018（23）：71-72.

[3]趙騰.基于H5的科普移動微課的設計與開發[D].上海師范大學，2017.

[4]劉華，敖謙.基于微信公眾平臺的混合式教學——以“網線制作六步法”課程為例[J].現代教育技術，2017，27（01）：48-54.

作者簡介

劉小瑩（1985—），女，漢族，四川射洪人，碩士，現就職于重慶電信職業學院，講師，研究方向：圖形圖像處理、數字媒體、數字文化創意、數字界面（UI）設計、數字產品創意設計。