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