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