HTML網(wǎng)頁設計教案

1、HTM啊頁設計教案（續(xù)頁）第2 頁章節(jié)課題第一章HTML網(wǎng)頁設計入門審閱者簽名授課日期2007年9月4日 第一周 星期（二） 第12節(jié)授課時數(shù)2學時教學目的知識目標：了解 HTML的發(fā)展歷史，掌握網(wǎng)貝設計原則。學會操作DREAMWEAVER,8學會結(jié)合Dreamweaver輔助編寫HTML代碼。能力目標：培養(yǎng)學生們軟件操作的技能、協(xié)作學習的能力以及應用所學知識解決實際問題的能力。品德目標：引發(fā)學生學習制作網(wǎng)頁知識的興趣,發(fā)展創(chuàng)新精神，培養(yǎng)實事求是，理論與實際相結(jié)合的科學態(tài)度與科學精神。通過師生、生生互動，增進增強學生的自主性和合作精神。教學方法多媒體教室，采用“演示式”教學法。教學重點掌握網(wǎng)頁

2、設計原則，引發(fā)學習興趣。教學難點. DREAMWEAVERS 操作技能；.結(jié)合Dreamweaver輔助編寫HTMIK碼。1如、掛圖見課前準備工作作業(yè)題號見教案：附加題教學過程及 時間分配主要教學內(nèi)容及步驟課 刖 準 備 工 作圖 樣圖1 1：騰迅QQ3站首頁；圖12：網(wǎng)址之家首頁截圖；圖1 3: IBM監(jiān)色巨人網(wǎng)站截圖；圖1 4:愛情交友網(wǎng)站首貝截圖;圖1 5:兒童網(wǎng)站首貝截圖；圖16:新浪網(wǎng)站首貝截圖。演 示 素 材1 .第一章HTML網(wǎng)貝設計入門PPT演不文稿，13頁；2. HAO12軻站代碼，1套。軟 件DREAMWEAVER眼色企業(yè)版，1套。列1 號共5 頁HTM購頁設計教案HTM啊

3、頁設計教案(續(xù)頁)第 頁教學過程及時間分配組織教學3分鐘(一)創(chuàng)設情境， 引入課題10分鐘(二)實例探究例15+8分鐘教學內(nèi)容師生致禮、點名、檢查學生準備情況、使學生集中注意力上課。(組織教學貫徹于上課的始終)在實際生活中，我們常常會上網(wǎng)獲取各種各樣的信息，完成各種各樣的工作, 上網(wǎng)展示在大家面前的是豐富多彩的網(wǎng)頁，比如(1)網(wǎng)站與網(wǎng)頁的概述 *(2)網(wǎng)頁的基本元素 (3)網(wǎng)頁布局 (4)配色原則 (5) HTML與渲染 教師活動：利用多媒體展示實際網(wǎng)頁,引導學生思考。 圖1- 1教學意圖：創(chuàng)設問題情境,激發(fā)學習動機。例1.中國最成功的個人網(wǎng)站-hao123網(wǎng)址之家，在經(jīng)過大家羨慕模仿復制 以

4、后，為什么依然風采依舊，而且是獨樹一幟，hao123網(wǎng)址之家最好的亮點就是他的創(chuàng)意了，在他運作起來并且迅速被大家認可的時候，大量站點的模仿以及復 制其實是等于對他的運作模式的認可，對于這么個站點的結(jié)構內(nèi)容以及程序方面， 大家都已經(jīng)認為了他一點技術含量沒有，但是為什么他就這樣一直做的很好，而 別的網(wǎng)站倒的倒，改行的改行，那么“ hao123網(wǎng)址之家”他到底好在哪里教師活動：啟發(fā)誘導、師生互動，把實際問題轉(zhuǎn)化為專業(yè)問題。學生活動：通過討論、思考回答問題，把實際問題轉(zhuǎn)化為思考專業(yè)問題。教學意圖：通過具體網(wǎng)頁發(fā)起問題探究，掌握網(wǎng)頁設計的原則。增強學生應 用專業(yè)知識的意識。圖1- 2教學過程及時間分配條

5、件變化5+5分鐘實例講解例2、例35+8分鐘教學內(nèi)容變化：hao123網(wǎng)址之家內(nèi)容不變(1)如果hao123網(wǎng)址之家的網(wǎng)站瀏覽速度不夠快(2)如果網(wǎng)站里的連接打開后是一些錯誤連接或者沒有品位的站點(3)如果網(wǎng)站打開后廣告在首頁滿天飛教師活動：師：是否因為hao123網(wǎng)址之家的網(wǎng)頁美觀、內(nèi)容豐富、實用就成 功了呢學生活動：學生積極思考、討論得出結(jié)果。圖1- 3教學意圖：加深學生對網(wǎng)頁設計原則的理解，加強學生應用專業(yè)知識的興趣 和能力的培養(yǎng)。例2:網(wǎng)頁色彩的搭配問題探究：(1)舊M (藍色巨人)網(wǎng)站(2)愛情交友網(wǎng)例3 :網(wǎng)頁風格的設計問題探究：圖1- 4(1)兒童網(wǎng)站(2)新浪網(wǎng)站圖1- 6教師

6、活動：啟發(fā)誘導、展示實際不同網(wǎng)頁配色方案。及時點評，注意：不同 應用場合、不同人群。圖1- 5學生活動：學牛分組討論.交流互動。最后到講臺說思路。教學意圖：通過實際問題的探究，及時鞏固學生網(wǎng)頁構思的能力。拓展學生 的思維空間，培養(yǎng)學生的創(chuàng)新意識和創(chuàng)新能力。教學過程及時間分配教學內(nèi)容(三)小結(jié)網(wǎng)頁設計原則是：8分鐘1.結(jié)構性；2.通用性；3.差異性；4.習慣性;(四)性；操作技能汪忠：練習一教師活動：教師及時引導學生小結(jié)。練習二學生活動：學生及時整埋出網(wǎng)頁設計原則。10+5分鐘教學意圖：學生及時形成能力。(五)練習一：DREAMWEAVER8歸納總結(jié)基本操作：5.適用性；6.反復8分鐘(1)安裝

7、與啟動；(2)文檔使用；(3)工作區(qū)結(jié)構(上)(下)；(4)菜單概述(上)(下)；(5)插入欄詳解；(6)面板組。練習二：操作技能建立HTML弋碼文件HTML概念；一個HTML勺示例。教師活動：啟發(fā)誘導、構思、實際操作演示。注意：配色方案、風格問題; 軟件操作的方法。學生活動：學牛討論、交流互動，發(fā)散探究。教學意圖：通過軟件實際操作，及時鞏固專業(yè)技能。拓展學生的思維空間， 培養(yǎng)學生的動手能力。歸納總結(jié)：小結(jié)本節(jié)課的主要內(nèi)容、主要思想方法和主要操作技能。1、掌握網(wǎng)頁設計原則，引發(fā)學習興趣；2、掌握 DREAMWEAVER技能；3、本節(jié)課主要用了轉(zhuǎn)化的思想、理論結(jié)合實際的思想教學過程及 時間分配教

8、學內(nèi)容（六）教師活動：指導小結(jié)，激勵評價，概括總結(jié)。課外作業(yè)學生活動：學生回憶本節(jié)內(nèi)容，小結(jié)網(wǎng)頁設計思想方法和解決問題的思路。5分鐘教學意圖：把本節(jié)知識納入學生已有的認識結(jié)構中，有利于學生對設計思路課后反思的有序儲存和轉(zhuǎn)化，培養(yǎng)學生的抽象思維能力。5分鐘附加題課后作業(yè)（本周五3、4節(jié)前上交）：.簡述網(wǎng)頁、網(wǎng)站和主頁的異同。.網(wǎng)頁標準主要由哪三部分組成分別解釋其含義。.簡述網(wǎng)站開發(fā)的工作流程。.常用的網(wǎng)頁制作工具有哪些分別有哪些特點課外練習：1、根據(jù)自己的興趣、愛好、特點，構思一個個人網(wǎng)站的首頁，并在草稿紙上勾畫出來。2、用DREAMVEAVER作一個簡單的網(wǎng)頁，題材自定，不要復制網(wǎng)上的。學生活動：學生看書學習，上機操作。教學意圖：培養(yǎng)學生良好的看書習慣，培養(yǎng)自學能力，培養(yǎng)創(chuàng)新精神、增強 實踐能力、拓展知識結(jié)構。師生交流，學生之間交流。教學意圖：“前事不忘，后事之師”，教師上課也是如此，每一堂課都有得有 失，只有及時了解了課堂上的成功和失誤之處，才能揚長避短，不斷取得新的進 步。通過師生之間的交流，教師了解到有哪些教學環(huán)節(jié)比較新穎，比較科學，學 生樂于接受；解決的問題中，有哪些學生比較滿意，哪些問題還有更好的解決辦 法；教師在上課過程中，有哪些言行不得體，還有