《H5快速制作網頁》教學設計

陳慧 曹恒來

● 學習內容分析

《H5快速制作網頁》是蘇教版《初中信息技術》八年級第3章《主題網站設計與制作》第2節《制作網頁》第1課時的內容。H5是指第5代HTML標記語言，其搭建的站點可方便地應用于PC、Android、iOS等多種平臺，它為互聯網內容的呈現提供了一種全新的框架和平臺，包括免插件的音視頻、圖像、動畫、本地存儲以及更多酷炫的功能。通俗地說，H5是一種創建網頁的方式，用H5創建的網頁以文字、圖片、動畫、聲音等相結合的富媒體出現，頁面圖文并茂、生動活潑、傳達方便、易于推廣。

● 學習者分析

本節課的學習對象是八年級的學生，處于這一年齡段的學生，思維活躍，具備一定的理解能力和較強的自學能力。通過前面的學習，學生已熟練使用WPS、Photoshop等軟件，也掌握了規劃設計主題網站的方法。本節課以iH5軟件工具為平臺，學習用H5快速制作網頁。然而，學生從未接觸過iH5，對陌生軟件的學習，有些畏難情緒，覺得無從下手。但是，在日常生活中，學生能經常接觸到各種各樣的手機H5網頁，如企業宣傳、個人簡歷、邀請函、紀念冊等，這些H5網頁給學生帶來了全新的體驗，技術本身帶來的新奇感讓他們心生向往。

● 學習目標

知識與技能：能列舉H5網頁的特點;掌握在iH5軟件中添加和編輯文字、圖片、動畫等元素的方法以及設置對象屬性的方法，理解舞臺、頁面、對象之間的層級關系。

過程與方法：通過制作校園文化藝術節邀請函，經歷制作H5網頁的基本過程。

情感態度與價值觀：感悟網頁制作并非難事，軟件使用有共通之處。

● 教學過程

1.創設情境，初認H5

以藝載德、以藝促智，一年一度的校園文化藝術節又開始了，同學們踴躍報名，比拼才藝。八年級將舉行以“多彩校園，閃亮你我”為主題的匯報演出，充分展示八年級同學的青春活力和精神面貌。

思考：本次演出將要邀請家長參加，你會選擇什么樣的方式來做出邀請呢？（口頭傳達、短信、紙質邀請函等）

活動1：體驗“校園文化藝術節邀請函H5”，初認H5。

（1）兩人一組，一位同學在手機瀏覽器中打開（如圖1），另一位同學在電腦瀏覽器中打開（網址：https：//file1c666f51560f.iamH5.cn/v3/idea/sE7mGA2R）。瀏覽后回答以下問題：

①不同平臺的瀏覽效果是否一致？為什么？

②這支H5中具有哪些媒體元素？

③用戶能參與其中嗎？

④你會用什么方式推廣這支H5？

小結：H5具有跨平臺、支持多媒體、可交互、易推廣等優勢，以上特點使得H5可能成為我們發出邀請的首選。

（2）“校園文化藝術節邀請函H5”為何如此吸引人？觀看視頻（視頻截圖如圖2），思考到底什么是H5？

小結：H5是指第5代HTML標記語言，也指用H5語言制作的一切數字產品。通俗地說，H5是一種創建網頁的方式。用H5創建的網頁圖文并茂、生動活潑、傳達方便、易于推廣。

設計意圖：與H5相關的概念性知識抽象、枯燥、難懂，如果采用講授法，學生并不容易理解。因此，本節課創設了學生現實生活中的情境，以制作校園文化藝術節邀請函H5為主題，設計了4個問題，每個問題目標指向明確，容易引起學生的共鳴，激發學生的思考并得出結論。通過微視頻用通俗易懂的語言幫助學生進一步認識H5，內化知識。

2.根據需求，規劃H5

凡事預則立，不預則廢。要制作匯報演出邀請函，首先要對每個頁面的內容、素材等進行一個簡單規劃。

活動2：根據需求，選擇素材，規劃邀請函（如表1）。

設計意圖：學生已經學習過網站的規劃，所以容易理解規劃的重要性。教師通過搭建“規劃表”這個支架，引導學生根據制作校園文化藝術節邀請函的需求，對所要制作的邀請函進行初步的規劃，幫助學生理清楚每個頁面的內容和所需添加的元素。

3.知識遷移，制作H5

能夠用于開發H5網頁的工具很多，今天以iH5軟件工具為平臺，學習使用H5快速制作網頁。

活動3：找“共性”，探“個性”，認識iH5軟件。

（1）使用課前申請的賬號，登錄網址www.iH5.cn，進入在線編輯平臺。

（2）對比Photoshop界面，認識iH5界面，找出相同之處和不同之處（如圖3）。

小結：相同之處：_____________（菜單欄、工具面板、編輯區）

不同之處：______________（對象樹面板）

（3）比較Photoshop中的圖層面板和iH5中的對象樹面板（如表2），思考對象樹面板的作用。

小結：對象樹面板可以用來管理舞臺中的對象，對象樹中的層級關系為“舞臺→頁面→文本、圖片等素材”，每個頁面中的對象上層覆蓋下層。