【正文】 （8）框架標(biāo)記第三章、JavaScript語(yǔ)言（4學(xué)時(shí)）（1）JavaScript語(yǔ)言簡(jiǎn)介（2）JavaScript編程基礎(chǔ)（3）基于對(duì)象的JavaScript語(yǔ)言（4）JavaScript程序?qū)嵗谒恼?、層疊樣式表CSS（1學(xué)時(shí)）（1）CSS概述（2）CSS屬性第五章、可視化網(wǎng)頁(yè)設(shè)計(jì)工具（1）網(wǎng)頁(yè)的基本操作（2）圖像、表格與超鏈接（3）表單與框架（4）添加網(wǎng)頁(yè)元素（5）發(fā)布站點(diǎn)第六章、動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言ASP（4學(xué)時(shí)）（1）ASP簡(jiǎn)介（2）VBScript腳本基礎(chǔ)（3）ASP的內(nèi)置對(duì)象（4）實(shí)用文件第七章、利用AD0訪問(wèn)數(shù)據(jù)庫(kù)（1學(xué)時(shí)）（1）數(shù)據(jù)庫(kù)的連接（2）數(shù)據(jù)庫(kù)的檢索（3）數(shù)據(jù)庫(kù)的操作總結(jié)復(fù)習(xí)（1學(xué)時(shí)）四、實(shí)驗(yàn)教學(xué)內(nèi)容與要求五、作業(yè)六、考核方式期末考核每個(gè)同學(xué)為自己設(shè)計(jì)制作一個(gè)博客網(wǎng)站。七、成績(jī)?cè)u(píng)定自制網(wǎng)站（80%）平時(shí)考勤、作業(yè)（20%）平時(shí)成績(jī)分配：平時(shí)考勤5次，每次2分，共占10%作業(yè)5次，每次2分，共占10%八、執(zhí)行大綱時(shí)應(yīng)注意的問(wèn)題根據(jù)學(xué)生對(duì)課程內(nèi)容的掌握和理解程度會(huì)對(duì)進(jìn)度做適當(dāng)?shù)恼{(diào)整。網(wǎng)頁(yè)制作教學(xué)設(shè)計(jì)4一、學(xué)習(xí)內(nèi)容分析《H5快速制作網(wǎng)頁(yè)》是蘇教版《初中信息技術(shù)》8年級(jí)第3章《主題網(wǎng)站設(shè)計(jì)與制作》第2節(jié)《制作網(wǎng)頁(yè)》中第1課時(shí)的內(nèi)容。H5是指第5代HTML標(biāo)記語(yǔ)言，其搭建的站點(diǎn)可方便地應(yīng)用于PC、Android、iOS等多種平臺(tái)，它為互聯(lián)網(wǎng)內(nèi)容的呈現(xiàn)提供了一種全新的框架和平臺(tái)，包括免插件的音視頻、圖像、動(dòng)畫(huà)、本地存儲(chǔ)以及更多酷炫的功能。通俗地說(shuō)，H5是一種創(chuàng)建網(wǎng)頁(yè)的方式，用H5創(chuàng)建的網(wǎng)頁(yè)以文字、圖片、動(dòng)畫(huà)、聲音等相結(jié)合的富媒體出現(xiàn)，頁(yè)面圖文并茂、生動(dòng)活潑、傳達(dá)方便、易于推廣。二、學(xué)習(xí)者分析本節(jié)課的學(xué)習(xí)對(duì)象是八年級(jí)的學(xué)生，處于這一年齡段的學(xué)生，思維活躍，具備一定的理解能力和較強(qiáng)的自學(xué)能力。通過(guò)前面的學(xué)習(xí)，學(xué)生已熟練使用WPS、Photoshop等軟件，也掌握了規(guī)劃設(shè)計(jì)主題網(wǎng)站的方法。本節(jié)課以iH5軟件工具為平臺(tái)，學(xué)習(xí)用H5快速制作網(wǎng)頁(yè)。然而學(xué)生從未接觸過(guò)iH5，對(duì)于陌生軟件的學(xué)習(xí)，有些畏難情緒，覺(jué)得無(wú)從下手。但是在日常生活中，他們經(jīng)常能接觸到各種各樣的手機(jī)H5網(wǎng)頁(yè)，如企業(yè)宣傳、個(gè)人簡(jiǎn)歷、邀請(qǐng)函、紀(jì)念冊(cè)等，這些H5網(wǎng)頁(yè)給大家?guī)?lái)了全新的體驗(yàn)，技術(shù)本身帶來(lái)的新奇感讓學(xué)生心生向往。三、學(xué)習(xí)目標(biāo)知識(shí)與技能：能列舉H5網(wǎng)頁(yè)的特點(diǎn)；掌握在iH5軟件中添加和編輯文字、圖片、動(dòng)畫(huà)等元素的方法以及設(shè)置對(duì)象屬性的方法，理解舞臺(tái)、頁(yè)面、對(duì)象之間的層級(jí)關(guān)系。過(guò)程與方法：通過(guò)制作校園文化藝術(shù)節(jié)邀請(qǐng)函，經(jīng)歷制作H5網(wǎng)頁(yè)的基本過(guò)程。情感態(tài)度及價(jià)值觀：感悟網(wǎng)頁(yè)制作并非難事，軟件使用有共通之處。四、教學(xué)過(guò)程（一）創(chuàng)設(shè)情境，初認(rèn)H5以藝載德、以藝促智，一年一度的校園文化藝術(shù)節(jié)又開(kāi)始了，同學(xué)們踴躍報(bào)名，比拼才藝。八年級(jí)將舉行以“多彩校園，閃亮你我”為主題的匯報(bào)演出，充分展示八年級(jí)同學(xué)的青春活力和精神面貌。思考：本次演出將要邀請(qǐng)家長(zhǎng)參加，你會(huì)選擇什么樣的方式來(lái)做出邀請(qǐng)呢？（口頭傳達(dá)、短信、紙質(zhì)邀請(qǐng)函等）活動(dòng)1：體驗(yàn)“校園文化藝術(shù)節(jié)邀請(qǐng)函H5”，初認(rèn)H5。（1）二人一組，一位同學(xué)在手機(jī)瀏覽器中打開(kāi)；另一位同學(xué)在電腦瀏覽器中打開(kāi)（網(wǎng)址：xxxxxx）。瀏覽后回答以下問(wèn)題：不同平臺(tái)的瀏覽效果是否一致？為什么？這支H5中具有哪些媒體元素？用戶能參與其中嗎？你會(huì)用什么方式推廣這支H5？小結(jié)：（1）H5具有跨平臺(tái)、支持多媒體、可交互、易推廣等優(yōu)勢(shì)。以上特點(diǎn)使得H5可能成為我們發(fā)出邀請(qǐng)的首選。（2）“校園文化藝術(shù)節(jié)邀請(qǐng)函H5”為何如此吸引人？觀看視頻，思考到底什么是H5？小結(jié)：H5是指第5代HTML標(biāo)記語(yǔ)言，也指用H5語(yǔ)言制作的一切數(shù)字產(chǎn)品。通俗地說(shuō)，H5是一種創(chuàng)建網(wǎng)頁(yè)的方式。用H5創(chuàng)建的網(wǎng)頁(yè)圖文并茂、生動(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è)問(wèn)題，每個(gè)問(wèn)題目標(biāo)指向明確，容易引起學(xué)生的共鳴，激發(fā)學(xué)生的思考并得出結(jié)論。通過(guò)微視頻用通俗易懂的語(yǔ)言幫助學(xué)生進(jìn)一步認(rèn)識(shí)H5，內(nèi)化知識(shí)。（二）根據(jù)需求，規(guī)劃H5凡事預(yù)則立，不預(yù)則廢，要制作匯報(bào)演出邀請(qǐng)函，首先對(duì)每個(gè)頁(yè)面的內(nèi)容、素材等進(jìn)行一個(gè)簡(jiǎn)單規(guī)劃?；顒?dòng)2：根據(jù)需求，選擇素材，規(guī)劃邀請(qǐng)函。設(shè)計(jì)意圖：學(xué)生已經(jīng)學(xué)習(xí)過(guò)網(wǎng)站的規(guī)劃，所以容易理解規(guī)劃的重要性。教師通過(guò)搭建“規(guī)劃表”這個(gè)支架，引導(dǎo)學(xué)生根據(jù)制作校園文化藝術(shù)節(jié)邀請(qǐng)函的需求，對(duì)所要制作的邀請(qǐng)函進(jìn)行初步的規(guī)劃，幫助學(xué)生理清楚每個(gè)頁(yè)面的內(nèi)容和所需添加的元素。（三）知識(shí)遷移，制作H5能夠用于開(kāi)發(fā)H5網(wǎng)頁(yè)的工具很多，今天以iH5軟件工具為平臺(tái)，學(xué)習(xí)使用H5快速制作網(wǎng)頁(yè)?；顒?dòng)3：找“共性”，探“個(gè)性”，認(rèn)識(shí)iH5軟件。（1）使用課前申請(qǐng)的賬號(hào)，登錄網(wǎng)址：，進(jìn)入在線編輯平臺(tái)。（2）對(duì)比Photoshop界面，認(rèn)識(shí)iH5界面，找出相同之處和不同之處。小結(jié)：相同之處：_______________________（菜單欄、工具面板、編輯區(qū)）不同之處：_______________________（對(duì)象樹(shù)面板）（3）比較PS中的圖層面板和iH5中的對(duì)象樹(shù)面板，思考對(duì)象樹(shù)面板的作用。小結(jié)：對(duì)象樹(shù)面板可以用來(lái)管理舞臺(tái)中的對(duì)象，對(duì)象樹(shù)中的層級(jí)關(guān)系為：舞臺(tái)→頁(yè)面→文本、圖片等素材，每個(gè)頁(yè)面中的對(duì)象上層覆蓋下層?；顒?dòng)4：利用iH5軟件，制作邀請(qǐng)函H5。（1）觀看操作指導(dǎo)微視頻，自主探究頁(yè)面的制作，完成以下問(wèn)題：設(shè)置背景：選中頁(yè)面1，在屬性面板中找到_____________選項(xiàng)，添加背景圖片。添加文字：選中頁(yè)面1，在工具面板中選擇_____________選項(xiàng)。添加圖片：選中頁(yè)面1，在工具面板中選擇_____________選項(xiàng)。小結(jié)：添加文字、圖片的一般步驟：選擇位置—添加對(duì)象。（2）展示學(xué)生作品，師生共同分析存在的問(wèn)題，尋求解決方式。問(wèn)題1：首頁(yè)、內(nèi)容頁(yè)都播放同一素材。原因分析：素材全部都添加在了舞臺(tái)之中，其層級(jí)關(guān)系在內(nèi)容頁(yè)和首頁(yè)的上一級(jí)。問(wèn)題2：內(nèi)容頁(yè)沒(méi)有顯示內(nèi)容。原因分析：素材全部都添加在了首頁(yè)之中，而不是對(duì)應(yīng)的內(nèi)容頁(yè)中。設(shè)計(jì)意圖：遷移是人類認(rèn)知的一個(gè)普遍特征，因?yàn)樾碌膶W(xué)習(xí)總是建立在原有學(xué)習(xí)基礎(chǔ)之上。學(xué)生原有的知識(shí)是Photoshop軟件使用，將Photoshop和iH5進(jìn)行對(duì)比，引導(dǎo)學(xué)生發(fā)現(xiàn)界面組成的“共性”與“個(gè)性“，讓學(xué)生初步認(rèn)識(shí)對(duì)象樹(shù)面板，學(xué)會(huì)利用對(duì)象樹(shù)面板來(lái)管理素材。在制作H5時(shí)采用局部“翻轉(zhuǎn)課堂”的形式，通過(guò)高效、簡(jiǎn)短的微視頻和幾個(gè)思考題，引導(dǎo)學(xué)生思考探究；在學(xué)生遇到問(wèn)題和困難時(shí)，師生共同分析問(wèn)題，解決問(wèn)題。給學(xué)生“瑞士奶酪式”知識(shí)建構(gòu)時(shí)間，使學(xué)生從規(guī)律的獲得到知識(shí)的應(yīng)用有一個(gè)過(guò)渡和漸進(jìn)的過(guò)程。（四）自主探究，美化H5活動(dòng)5：美化完善邀請(qǐng)函H5。（1）邀請(qǐng)函中的標(biāo)題、內(nèi)容文字等選用什么樣的字體、字號(hào)合適？如何設(shè)置？（2）如何改變圖片大小，修改圖片的亮度、對(duì)比度等？（3）如何設(shè)置元素的動(dòng)態(tài)效果，使得網(wǎng)頁(yè)更生動(dòng)？小結(jié)：（1）選中文字或圖片——屬性面板——修改設(shè)置?！把?qǐng)函”等標(biāo)題文字字號(hào)一般選用大些，宜用飽滿的字體，以達(dá)到醒目的作用；內(nèi)容用于提供具體信息，文字字號(hào)可以小些。（2）圖片選用要符合主題，色彩和諧。字體顏色與背景要有一定的對(duì)比度。（3）選擇要添加動(dòng)態(tài)效果的對(duì)象——選擇動(dòng)效命令。注意：設(shè)置合理、適度的動(dòng)態(tài)效果，可以給觀賞者帶來(lái)較好的視覺(jué)體驗(yàn)。設(shè)計(jì)意圖：對(duì)邀請(qǐng)函的美化可分成兩個(gè)部分：一是對(duì)邀請(qǐng)函中的文字、圖片進(jìn)行美化，二是合理設(shè)置動(dòng)態(tài)效果。單從技術(shù)角度來(lái)講，這些操作是比較簡(jiǎn)單的，只要學(xué)會(huì)設(shè)置屬性面板即可。但是邀請(qǐng)函的美化不是天馬行空，隨心所欲，還需要一定的藝術(shù)欣賞能力。因此首先讓學(xué)生帶著問(wèn)題思考如何設(shè)置文字、圖片？設(shè)置動(dòng)效時(shí)需要注意的問(wèn)題？得出一定的結(jié)論后，讓學(xué)生帶著構(gòu)思去美化邀請(qǐng)函，以減少學(xué)生操作的盲目性。（五）作品展示，共析H5活動(dòng)6：發(fā)布和評(píng)價(jià)作品。（1）對(duì)于制作好的作品，將其發(fā)布到網(wǎng)上，這樣其他人就可以通過(guò)電腦和手機(jī)訪問(wèn)你的作品。請(qǐng)保存當(dāng)前的網(wǎng)頁(yè)并發(fā)布到網(wǎng)上。（2）同桌之間用發(fā)布的網(wǎng)址或二維碼相互訪問(wèn)對(duì)方的作品。（3）根據(jù)評(píng)價(jià)表對(duì)同桌的作品進(jìn)行評(píng)價(jià)。（4）根據(jù)同伴及老師意見(jiàn)進(jìn)一步修改作品。設(shè)計(jì)意圖：學(xué)生在制作完成邀請(qǐng)函后，進(jìn)行保存，發(fā)布就可以瀏覽到自己的成品，極大地提高了學(xué)生的學(xué)習(xí)興趣。將學(xué)生的作品進(jìn)行展示，師生共同賞析作品，根據(jù)評(píng)價(jià)表進(jìn)行點(diǎn)評(píng)，給出建議，然后進(jìn)一步完善作品。（六）知識(shí)梳理，展望H5展示思維導(dǎo)圖，梳理本節(jié)課內(nèi)容：總結(jié)利用iH5制作網(wǎng)頁(yè)的基本過(guò)程：觀看視頻，結(jié)束本課：隨著信息技術(shù)的高速發(fā)展，H5可謂是無(wú)處不在。H5可以是各種宣傳網(wǎng)頁(yè)、在線游戲，甚至戶外大屏中的互動(dòng)也是H5。在未來(lái)5內(nèi)，H5或?qū)?huì)成為移動(dòng)互聯(lián)網(wǎng)領(lǐng)域的主宰者。設(shè)計(jì)意圖：借助思維導(dǎo)圖，將關(guān)鍵知識(shí)點(diǎn)結(jié)構(gòu)化，清晰形象地呈現(xiàn)出各知識(shí)點(diǎn)的脈絡(luò)關(guān)系，有助于學(xué)生從整體上把握知識(shí)，完成知識(shí)的建構(gòu)。最后觀看H5應(yīng)用視頻，了解H5的日常應(yīng)用，對(duì)未來(lái)展望，進(jìn)行情感升華。網(wǎng)頁(yè)制作教學(xué)設(shè)計(jì)5教學(xué)目標(biāo)知識(shí)與技能：靈活運(yùn)用添加超鏈接和在網(wǎng)頁(yè)中插入表格方法，根據(jù)網(wǎng)頁(yè)內(nèi)容進(jìn)行頁(yè)面布局，完善網(wǎng)頁(yè),