《H5快速制作網(wǎng)頁》教學(xué)設(shè)計(jì)

陳慧 曹恒來

● 學(xué)習(xí)內(nèi)容分析

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

● 學(xué)習(xí)者分析

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

● 學(xué)習(xí)目標(biāo)

知識(shí)與技能：能列舉H5網(wǎng)頁的特點(diǎn);掌握在iH5軟件中添加和編輯文字、圖片、動(dòng)畫等元素的方法以及設(shè)置對(duì)象屬性的方法，理解舞臺(tái)、頁面、對(duì)象之間的層級(jí)關(guān)系。

過程與方法：通過制作校園文化藝術(shù)節(jié)邀請(qǐng)函，經(jīng)歷制作H5網(wǎng)頁的基本過程。

情感態(tài)度與價(jià)值觀：感悟網(wǎng)頁制作并非難事，軟件使用有共通之處。

● 教學(xué)過程

1.創(chuàng)設(shè)情境，初認(rèn)H5

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

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

活動(dòng)1：體驗(yàn)“校園文化藝術(shù)節(jié)邀請(qǐng)函H5”，初認(rèn)H5。

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

①不同平臺(tái)的瀏覽效果是否一致？為什么？

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

③用戶能參與其中嗎？

④你會(huì)用什么方式推廣這支H5？

小結(jié)：H5具有跨平臺(tái)、支持多媒體、可交互、易推廣等優(yōu)勢(shì)，以上特點(diǎn)使得H5可能成為我們發(fā)出邀請(qǐng)的首選。

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

小結(jié)：H5是指第5代HTML標(biāo)記語言，也指用H5語言制作的一切數(shù)字產(chǎn)品。通俗地說，H5是一種創(chuàng)建網(wǎng)頁的方式。用H5創(chuàng)建的網(wǎng)頁圖文并茂、生動(dòng)活潑、傳達(dá)方便、易于推廣。

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

2.根據(jù)需求，規(guī)劃H5

凡事預(yù)則立，不預(yù)則廢。要制作匯報(bào)演出邀請(qǐng)函，首先要對(duì)每個(gè)頁面的內(nèi)容、素材等進(jìn)行一個(gè)簡單規(guī)劃。

活動(dòng)2：根據(jù)需求，選擇素材，規(guī)劃邀請(qǐng)函（如表1）。

設(shè)計(jì)意圖：學(xué)生已經(jīng)學(xué)習(xí)過網(wǎng)站的規(guī)劃，所以容易理解規(guī)劃的重要性。教師通過搭建“規(guī)劃表”這個(gè)支架，引導(dǎo)學(xué)生根據(jù)制作校園文化藝術(shù)節(jié)邀請(qǐng)函的需求，對(duì)所要制作的邀請(qǐng)函進(jìn)行初步的規(guī)劃，幫助學(xué)生理清楚每個(gè)頁面的內(nèi)容和所需添加的元素。

3.知識(shí)遷移，制作H5

能夠用于開發(fā)H5網(wǎng)頁的工具很多，今天以iH5軟件工具為平臺(tái)，學(xué)習(xí)使用H5快速制作網(wǎng)頁。

活動(dòng)3：找“共性”，探“個(gè)性”，認(rèn)識(shí)iH5軟件。

（1）使用課前申請(qǐng)的賬號(hào)，登錄網(wǎng)址www.iH5.cn，進(jìn)入在線編輯平臺(tái)。

（2）對(duì)比Photoshop界面，認(rèn)識(shí)iH5界面，找出相同之處和不同之處（如圖3）。

小結(jié)：相同之處：_____________（菜單欄、工具面板、編輯區(qū)）

不同之處：______________（對(duì)象樹面板）

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

小結(jié)：對(duì)象樹面板可以用來管理舞臺(tái)中的對(duì)象，對(duì)象樹中的層級(jí)關(guān)系為“舞臺(tái)→頁面→文本、圖片等素材”，每個(gè)頁面中的對(duì)象上層覆蓋下層。