【正文】 體規(guī)劃合理性，創(chuàng)意等幾方面進(jìn)行點(diǎn)評。學(xué)生間相互交流探討。合作成功展示作品成果匯報(bào)交流探討［交流探討］教師引導(dǎo)學(xué)生探討頁面布局的方法和技巧；談看完作品后，對其改進(jìn)意見；進(jìn)行組間互評和組內(nèi)自評。由小組代表展示組內(nèi)作品，并詳細(xì)說明旅游景點(diǎn)規(guī)劃的呈現(xiàn)形式，內(nèi)容選擇及整體構(gòu)思。［展示作品］下面請各組派代表，到教師機(jī)前展示以下你們的旅游行程。）學(xué)生根據(jù)角色分工，按小組形式開始完善網(wǎng)站。學(xué)生研究探索合作交流創(chuàng)作作品［創(chuàng)作作品］播放舒緩音樂，為學(xué)生營造自由和諧氣氛。提示學(xué)生有三條幫助熱線：組長鄰座學(xué)習(xí)伙伴教師自學(xué)課件學(xué)生明確要求。技術(shù)表現(xiàn)：頁面布局設(shè)計(jì)合理，顏色搭配和諧，主題突出，作品演示運(yùn)行正常，操作熟練。學(xué)生共同研究選組長,并協(xié)調(diào)分配好任務(wù).鍛煉學(xué)生自主協(xié)調(diào)分工能力。使學(xué)生明確各自任務(wù)后，通過研究，探討，操作，通過電腦媒體來完成任務(wù)。學(xué)生明確任務(wù)明確總?cè)蝿?wù)［作品形式及分工參考］形式：創(chuàng)建并完善主頁，并展示整個(gè)網(wǎng)站。［分組方法］根據(jù)對各旅游景點(diǎn)的興趣及當(dāng)初搜索信息的分工情況及本節(jié)課任務(wù)分工，四人一小組。［出示課題］今天我們就圍繞“西安七日游”，在主頁中利用表格規(guī)劃設(shè)計(jì)旅游行程，本節(jié)課的課題是《“黃金周”—規(guī)劃網(wǎng)上西安七日游》學(xué)生明確本節(jié)課課題，初步了解任務(wù)。為細(xì)化任務(wù)埋下伏筆。提供信息活條件，激發(fā)起學(xué)生的興趣。（三）、教與學(xué)的過程1．教與學(xué)的過程活動內(nèi)容教師活動學(xué)生活動設(shè)計(jì)意圖創(chuàng)設(shè)情境激發(fā)興趣［創(chuàng)設(shè)情境］“要想了解中國上下五千年文明歷史，請到西安來！”近幾年，越來越多的外地游客涌向西安。利用信息技術(shù)中計(jì)算機(jī)技術(shù)進(jìn)行網(wǎng)頁設(shè)計(jì)，實(shí)現(xiàn)教學(xué)目標(biāo)，完成讓世界各地的人實(shí)現(xiàn)“網(wǎng)上游古都”。基于構(gòu)建主義的探究性學(xué)習(xí)模式，我的設(shè)想是整個(gè)教學(xué)過程是動態(tài)的，學(xué)生是學(xué)習(xí)的主體，教師是學(xué)生學(xué)習(xí)環(huán)境的創(chuàng)設(shè)者、學(xué)習(xí)動力的激發(fā)者、學(xué)習(xí)過程的指引者和學(xué)生學(xué)習(xí)的協(xié)作者。（2）．教學(xué)流程和教學(xué)活動的設(shè)計(jì)思路整個(gè)教學(xué)活動，尤其是學(xué)習(xí)活動，我采用探究式學(xué)習(xí)法，又稱研究性學(xué)習(xí)，我強(qiáng)調(diào)的是學(xué)生在教師指導(dǎo)下，根據(jù)各自的興趣、愛好和條件，再結(jié)合與自己有相同或相近的興趣、愛好的同學(xué)組成合作伙伴，共同選擇西安不同的旅游景點(diǎn)，確定研究課題，借助“表格布局”功能規(guī)劃七天的旅游行程，獨(dú)立自主結(jié)合小組合作開展研究，進(jìn)行合理的網(wǎng)頁布局設(shè)計(jì)，達(dá)到從中培養(yǎng)創(chuàng)新精神和創(chuàng)造能力及審美能力的一種學(xué)習(xí)方式，實(shí)現(xiàn)“雙贏”。本節(jié)課采用研究體驗(yàn)式教學(xué)法,建構(gòu)主義模式下的任務(wù)驅(qū)動式教學(xué)法組織教學(xué)。此部分教學(xué)內(nèi)容在整個(gè)網(wǎng)頁設(shè)計(jì)知識體系中處于綜合處理信息的重要部分。內(nèi)容分析教學(xué)重點(diǎn)：利用表格對網(wǎng)頁頁面進(jìn)行布局。學(xué)生基本學(xué)會使用在網(wǎng)頁中插入表格的方法，但分析信息、處理信息和應(yīng)用信息能力較弱。情感與態(tài)度：使學(xué)生感受中國源遠(yuǎn)流長的歷史文明，并通過網(wǎng)頁傳遞給世界；幫助學(xué)生樹立良好的信息道德意識；讓學(xué)生享受成就感，樹立自信心。網(wǎng)頁制作教學(xué)設(shè)計(jì)5教學(xué)目標(biāo)知識與技能：靈活運(yùn)用添加超鏈接和在網(wǎng)頁中插入表格方法，根據(jù)網(wǎng)頁內(nèi)容進(jìn)行頁面布局，完善網(wǎng)頁,掌握網(wǎng)頁布局的技能和技巧。設(shè)計(jì)意圖：借助思維導(dǎo)圖，將關(guān)鍵知識點(diǎn)結(jié)構(gòu)化，清晰形象地呈現(xiàn)出各知識點(diǎn)的脈絡(luò)關(guān)系，有助于學(xué)生從整體上把握知識，完成知識的建構(gòu)。H5可以是各種宣傳網(wǎng)頁、在線游戲，甚至戶外大屏中的互動也是H5。將學(xué)生的作品進(jìn)行展示，師生共同賞析作品，根據(jù)評價(jià)表進(jìn)行點(diǎn)評，給出建議，然后進(jìn)一步完善作品。（4）根據(jù)同伴及老師意見進(jìn)一步修改作品。（2）同桌之間用發(fā)布的網(wǎng)址或二維碼相互訪問對方的作品。（1）對于制作好的作品，將其發(fā)布到網(wǎng)上，這樣其他人就可以通過電腦和手機(jī)訪問你的作品。因此首先讓學(xué)生帶著問題思考如何設(shè)置文字、圖片？設(shè)置動效時(shí)需要注意的問題？得出一定的結(jié)論后，讓學(xué)生帶著構(gòu)思去美化邀請函，以減少學(xué)生操作的盲目性。單從技術(shù)角度來講，這些操作是比較簡單的，只要學(xué)會設(shè)置屬性面板即可。注意：設(shè)置合理、適度的動態(tài)效果，可以給觀賞者帶來較好的視覺體驗(yàn)。字體顏色與背景要有一定的對比度。“邀請函”等標(biāo)題文字字號一般選用大些，宜用飽滿的字體，以達(dá)到醒目的作用；內(nèi)容用于提供具體信息，文字字號可以小些。（四）自主探究，美化H5活動5：美化完善邀請函H5。在制作H5時(shí)采用局部“翻轉(zhuǎn)課堂”的形式，通過高效、簡短的微視頻和幾個(gè)思考題，引導(dǎo)學(xué)生思考探究；在學(xué)生遇到問題和困難時(shí)，師生共同分析問題，解決問題。設(shè)計(jì)意圖：遷移是人類認(rèn)知的一個(gè)普遍特征，因?yàn)樾碌膶W(xué)習(xí)總是建立在原有學(xué)習(xí)基礎(chǔ)之上。問題2：內(nèi)容頁沒有顯示內(nèi)容。問題1：首頁、內(nèi)容頁都播放同一素材。小結(jié)：添加文字、圖片的一般步驟：選擇位置—添加對象。添加文字：選中頁面1，在工具面板中選擇_____________選項(xiàng)?；顒?：利用iH5軟件，制作邀請函H5。小結(jié)：相同之處：_______________________（菜單欄、工具面板、編輯區(qū)）不同之處：_______________________（對象樹面板）（3）比較PS中的圖層面板和iH5中的對象樹面板，思考對象樹面板的作用。（1）使用課前申請的賬號，登錄網(wǎng)址：，進(jìn)入在線編輯平臺。（三）知識遷移，制作H5能夠用于開發(fā)H5網(wǎng)頁的工具很多，今天以iH5軟件工具為平臺，學(xué)習(xí)使用H5快速制作網(wǎng)頁。設(shè)計(jì)意圖：學(xué)生已經(jīng)學(xué)習(xí)過網(wǎng)站的規(guī)劃，所以容易理解規(guī)劃的重要性。（二）根據(jù)需求，規(guī)劃H5凡事預(yù)則立，不預(yù)則廢，要制作匯報(bào)演出邀請函，首先對每個(gè)頁面的內(nèi)容、素材等進(jìn)行一個(gè)簡單規(guī)劃。因此本節(jié)課創(chuàng)設(shè)了學(xué)生現(xiàn)實(shí)生活中的情境，以制作校園文化藝術(shù)節(jié)邀請函H5為主題，設(shè)計(jì)了4個(gè)問題，每個(gè)問題目標(biāo)指向明確，容易引起學(xué)生的共鳴，激發(fā)學(xué)生的思考并得出結(jié)論。用H5創(chuàng)建的網(wǎng)頁圖文并茂、生動活潑、傳達(dá)方便、易于推廣。（2）“校園文化藝術(shù)節(jié)邀請函H5”為何如此吸引人？觀看視頻，思考到底什么是H5？小結(jié)：H5是指第5代HTML標(biāo)記語言，也指用H5語言制作的一切數(shù)字產(chǎn)品。瀏覽后回答以下問題：不同平臺的瀏覽效果是否一致？為什么？這支H5中具有哪些媒體元素？用戶能參與其中嗎？你會用什么方式推廣這支H5？小結(jié)：（1）H5具有跨平臺、支持多媒體、可交互、易推廣等優(yōu)勢。思考：本次演出將要邀請家長參加，你會選擇什么樣的方式來做出邀請呢？（口頭傳達(dá)、短信、紙質(zhì)邀請函等）活動1：體驗(yàn)“校園文化藝術(shù)節(jié)邀請函H5”，初認(rèn)H5。四、教學(xué)過程（一）創(chuàng)設(shè)情境，初認(rèn)H5以藝載德、以藝促智，一年一度的校園文化藝術(shù)節(jié)又開始了，同學(xué)們踴躍報(bào)名，比拼才藝。過程與方法：通過制作校園文化藝術(shù)節(jié)邀請函，經(jīng)歷制作H5網(wǎng)頁的基本過程。但是在日常生活中，他們經(jīng)常能接觸到各種各樣的手機(jī)H5網(wǎng)頁，如企業(yè)宣傳、個(gè)人簡歷、邀請函、紀(jì)念冊等，這些H5網(wǎng)頁給大家?guī)砹巳碌捏w驗(yàn)，技術(shù)本身帶來的新奇感讓學(xué)生心生向往。本節(jié)課以iH5軟件工具為平臺，學(xué)習(xí)用H5快速制作網(wǎng)頁。二、學(xué)習(xí)者分析本節(jié)課的學(xué)習(xí)對象是八年級的學(xué)生，處于這一年齡段的學(xué)生，思維活躍，具備一定的理解能力和較強(qiáng)的自學(xué)能力。H5是指第5代HTML標(biāo)記語言，其搭建的站點(diǎn)可方便地應(yīng)用于PC、Android、iOS等多種平臺，它為互聯(lián)網(wǎng)內(nèi)容的呈現(xiàn)提供了一種全新的框架和平臺，包括免插件的音視頻、圖像、動畫、本地存儲以及更多酷炫的功能。七、成績評定自制網(wǎng)站（80%）平時(shí)考勤、作業(yè)（20%）平時(shí)成績分配：平時(shí)考勤5次，每次2分，共占10%作業(yè)5次，每次2分，共占10%八、執(zhí)行大綱時(shí)應(yīng)注意的問題根據(jù)學(xué)生對課程內(nèi)容的掌握和理解程度會對進(jìn)度做適當(dāng)?shù)恼{(diào)整。本課程的主要教學(xué)目的是使學(xué)生掌握網(wǎng)頁設(shè)計(jì)與制作的基礎(chǔ)知識，能運(yùn)用網(wǎng)頁工具設(shè)計(jì)和制作常用網(wǎng)頁。參考書：網(wǎng)頁設(shè)計(jì)與制作教程，熊前興閔聯(lián)營，科學(xué)出版社；網(wǎng)站與網(wǎng)頁設(shè)計(jì)，張貴明，清華大學(xué)出版社；網(wǎng)頁美術(shù)設(shè)計(jì)原理及實(shí)戰(zhàn)策略，王曉峰焦燕，清華大學(xué)出版社；網(wǎng)站建設(shè)典型案例，張梟，清華大學(xué)出版社；二、課程教學(xué)目標(biāo)：網(wǎng)頁和網(wǎng)站是Internet的重要組成部分，企業(yè)、公司和機(jī)構(gòu)通過網(wǎng)站來宣傳推介自己的技術(shù)和產(chǎn)品，個(gè)人發(fā)布主頁展示自己的風(fēng)采，人們從不同類型的網(wǎng)站來獲取需要的信息。采用案例分析和親自實(shí)踐的方式突出、突破課程的重點(diǎn)和難點(diǎn)。網(wǎng)頁制作教學(xué)設(shè)計(jì)3一、課程基本信息課程編號：中文名稱：網(wǎng)頁設(shè)計(jì)與制作英文名稱：Web Design and Production課程類別：選修課適用專業(yè)：所有專業(yè)開課學(xué)期：20xx—20xx第2學(xué)期總學(xué)時(shí)：24學(xué)時(shí)總學(xué)分：1課程簡介：本課程突出網(wǎng)頁設(shè)計(jì)與制作的現(xiàn)代特點(diǎn)，從Internet的基礎(chǔ)知識入手，重點(diǎn)介紹HTML超文本標(biāo)記語言，以及所見即所得的網(wǎng)頁設(shè)計(jì)制作工具Dreamweaver的基本操作流程。師評：對學(xué)生作品進(jìn)行評價(jià)，并對其它學(xué)生的評價(jià)加以更完整的解釋。教師進(jìn)行指導(dǎo)。選中文字，點(diǎn)擊右鍵選擇超鏈接在列表中選擇你要鏈接的網(wǎng)頁，單擊“確定”按鈕。進(jìn)一步設(shè)置單元格的背景，來美化網(wǎng)頁。并講解在單元格中可以插入圖片、文字。修改表格：調(diào)整表格行高和列寬。如：行、列的操作，對齊方式等。制作網(wǎng)頁的標(biāo)題：輸入文字，并設(shè)置文字的格式?，F(xiàn)在我們就一起來制作吧！二、新知探究首先我們來打開上節(jié)課的班級網(wǎng)站，在這個(gè)網(wǎng)站中新建一個(gè)網(wǎng)頁，并保存成“學(xué)習(xí)園地”。你們的觀察能力真的很強(qiáng)啊，對，這些都是我們學(xué)校美術(shù)的特色作口，盤畫。引導(dǎo)學(xué)生分類總結(jié)本節(jié)課的知識點(diǎn)。有了以上基礎(chǔ)，可安排學(xué)生自學(xué)教材中有關(guān)熱區(qū)鏈接的相關(guān)內(nèi)容，學(xué)生探究操作后教師再安排學(xué)生進(jìn)行演示，輔助以提問的形式檢驗(yàn)學(xué)生的自學(xué)情況。（2）站間超級鏈接僅憑我們課堂上制作的這些頁面還不足以詳細(xì)介紹我們的主題，此時(shí)我們還可以借助超鏈接，鏈接到因特網(wǎng)上的其他網(wǎng)站，以豐富我們的內(nèi)容。提示：書簽鏈接的雙向性問題（返回）。以上是同一站點(diǎn)內(nèi)不同網(wǎng)頁之間的鏈接，有時(shí)一個(gè)頁面中內(nèi)容過多，需要不斷拖動滾動條實(shí)現(xiàn)閱讀，能否實(shí)現(xiàn)快速跳轉(zhuǎn)呢？任務(wù)2同一站點(diǎn)內(nèi)同一頁面內(nèi)的跳轉(zhuǎn)（鏈接）：在“動物趣聞”頁面內(nèi)制作書簽鏈接。老師可以提問學(xué)生：演示者操作的對嗎？有沒有問題？引導(dǎo)學(xué)生發(fā)現(xiàn)問題：超鏈接制作完成后需要檢驗(yàn)（保存后預(yù)覽）。教師巡視，及時(shí)指導(dǎo)，安排學(xué)生示范操作并講解如何制作超鏈接?！?給表格頁內(nèi)交互式按鈕設(shè)置超級鏈接，鏈接到相關(guān)頁面。設(shè)計(jì)意圖：通過對比操作、交流，再輔以知識遷移，明確本節(jié)課教學(xué)內(nèi)容。教學(xué)過程：引入展示兩個(gè)主頁，一個(gè)已經(jīng)創(chuàng)建了鏈接，一個(gè)沒有創(chuàng)建鏈接，讓學(xué)生進(jìn)行比較并找出區(qū)別，引出本課課題——超級鏈接。教學(xué)方法與教學(xué)手段：任務(wù)驅(qū)動法、討論探究法、講解與演示法、類比知識遷移法。教學(xué)難點(diǎn)（1）書簽鏈接中名稱及對應(yīng)鏈接位置的設(shè)定。教學(xué)重、難點(diǎn)：教學(xué)重點(diǎn)：（1）超級鏈接的含義及鏈接源和鏈接目標(biāo)的含義。情感態(tài)度與價(jià)值觀（1）通過鏈接我國主要自然保護(hù)區(qū)網(wǎng)頁，激發(fā)學(xué)生熱愛祖國、熱愛自然、熱愛生命的激情。（2）通過對不同對象設(shè)置超級鏈接的操作，使學(xué)生總結(jié)出操作的規(guī)律，培養(yǎng)學(xué)生自主學(xué)習(xí)與操作的能力。（3）理解熱區(qū)鏈接的含義及創(chuàng)建方法。第二篇：網(wǎng)頁制作教學(xué)設(shè)計(jì)網(wǎng)頁制作教學(xué)設(shè)計(jì)網(wǎng)頁制作教學(xué)設(shè)計(jì)1