2022年HTML網(wǎng)頁(yè)設(shè)計(jì)教案

1、章節(jié)課題授課日期教學(xué)目的 HTML網(wǎng)頁(yè)設(shè)計(jì)教案列 1 號(hào)共 5 頁(yè)第一章 HTML網(wǎng)頁(yè)設(shè)計(jì)入門(mén)批閱者簽名9 月 4 日 第一周星期（二）第 12 節(jié)授課時(shí)數(shù)2 學(xué)時(shí)學(xué)問(wèn)目標(biāo)：明白HTML 的進(jìn)展歷史,把握網(wǎng)頁(yè)設(shè)計(jì)原就；學(xué)會(huì)操作DREAMWEA VER 8 ,學(xué)會(huì)結(jié)合 Dreamweaver 幫助編寫(xiě)HTML 代碼；才能目標(biāo)：培育同學(xué)們軟件操作的技能、協(xié)作學(xué)習(xí)的才能以及應(yīng)用所學(xué)學(xué)問(wèn)解決實(shí)際問(wèn)題的能 力；品德目標(biāo)：引發(fā)同學(xué)學(xué)習(xí)制作網(wǎng)頁(yè)學(xué)問(wèn)的愛(ài)好,進(jìn)展創(chuàng)新精神,培育實(shí)事求是,理論與實(shí)際相結(jié)合的科學(xué)態(tài)度與科學(xué)精神；通過(guò)師生、生生互動(dòng),增進(jìn)增強(qiáng)同學(xué)的自主性和合作精神；教學(xué)方法 多媒體教室,采納“ 演示式

2、” 教學(xué)法；教學(xué)重點(diǎn) 把握網(wǎng)頁(yè)設(shè)計(jì)原就,引發(fā)學(xué)習(xí)愛(ài)好；教學(xué)難點(diǎn)教具、掛圖作業(yè)題號(hào)教學(xué)過(guò)程及時(shí)間安排圖樣課1.DREAMWEAVER 8 基本操作技能；2.結(jié)合 Dreamweaver 幫助編寫(xiě) HTML代碼；見(jiàn)課前預(yù)備工作 見(jiàn)教案：附加題主要教學(xué)內(nèi)容及步驟圖 11：騰迅 QQ 網(wǎng)站首頁(yè)；圖 12：網(wǎng)址之家首頁(yè)截圖；圖 13： IBM 藍(lán)色巨人網(wǎng)站截圖；圖 14：愛(ài)情交友網(wǎng)站首頁(yè)截圖；圖 15：兒童網(wǎng)站首頁(yè)截圖；圖 16：新浪網(wǎng)站首頁(yè)截圖；前演1第一章 HTML 網(wǎng)頁(yè)設(shè)計(jì)入門(mén) PPT 演示文稿, 13 頁(yè)；2HAO123 網(wǎng)站代碼, 1 套；準(zhǔn)示備素工材作軟 件DREAMWEA VER 8 綠色

3、企業(yè)版, 1 套；教學(xué)過(guò)程及 時(shí)間安排組織教學(xué) 3 分鐘（一）創(chuàng)設(shè)情境,引入課題 10 分鐘HTML網(wǎng)頁(yè)設(shè)計(jì)教 案 （續(xù)頁(yè)）第 2 頁(yè)教學(xué)內(nèi)容師生致禮、點(diǎn)名、檢查同學(xué)預(yù)備情形、使同學(xué)集中留意力上課；（組織教學(xué)貫徹于上課的始終）在實(shí)際生活中,我們經(jīng)常會(huì)上網(wǎng)獵取各種各樣的信息,完成各種各樣的工作,上網(wǎng)展現(xiàn)在大家面前的是豐富多彩的網(wǎng)頁(yè),比如 留意：（1） 網(wǎng)站與網(wǎng)頁(yè)的概述（2） 網(wǎng)頁(yè)的基本元素（3） 網(wǎng)頁(yè)布局（4） 配色原就（5） HTML與渲染老師活動(dòng)：利用多媒體展現(xiàn)實(shí)際網(wǎng)頁(yè),引導(dǎo)同學(xué)摸索；圖 1- 1 教學(xué)意圖：創(chuàng)設(shè)問(wèn)題情境,激發(fā)學(xué)習(xí)動(dòng)機(jī)；（二）例 1中國(guó)最勝利的個(gè)人網(wǎng)站 -hao123 網(wǎng)址之

4、家,在經(jīng)過(guò)大家仰慕仿照復(fù)制以實(shí)例探究 后,為什么照舊風(fēng)采照舊,而且是獨(dú)樹(shù)一幟,hao123 網(wǎng)址之家最好的亮點(diǎn)就是他例 1 的創(chuàng)意了,在他運(yùn)作起來(lái)并且快速被大家認(rèn)可的時(shí)候,大量站點(diǎn)的仿照以及復(fù)制5+8 分鐘 其實(shí)是等于對(duì)他的運(yùn)作模式的認(rèn)可,對(duì)于這么個(gè)站點(diǎn)的結(jié)構(gòu)內(nèi)容以及程序方面,大家都已經(jīng)認(rèn)為了他一點(diǎn)技術(shù)含量沒(méi)有,但是為什么他就這樣始終做的很好,而別的網(wǎng)站倒的倒,改行的改行,那么“hao123網(wǎng)址之家” 他究竟好在哪里？老師活動(dòng)：?jiǎn)⑹菊T導(dǎo),師生互動(dòng),把實(shí)際問(wèn)題轉(zhuǎn)化為專業(yè)問(wèn)題；同學(xué)活動(dòng)：通過(guò)爭(zhēng)論、摸索回答疑題,把實(shí)際問(wèn)題轉(zhuǎn)化為摸索專業(yè)問(wèn)題；教學(xué)意圖：通過(guò)詳細(xì)網(wǎng)頁(yè)發(fā)起問(wèn)題探究,把握網(wǎng)頁(yè)設(shè)計(jì)的原就；增

5、強(qiáng)同學(xué)應(yīng) 用專業(yè)學(xué)問(wèn)的意識(shí)；圖 1- 2 教學(xué)過(guò)程及HTML網(wǎng)頁(yè)設(shè)計(jì)教 案 （續(xù)頁(yè)）第 3 頁(yè)教學(xué)內(nèi)容時(shí)間安排條件變化變化：5+5 分鐘hao123網(wǎng)址之家內(nèi)容不變（1）假如 hao123網(wǎng)址之家的網(wǎng)站瀏覽速度不夠快？（2）假如網(wǎng)站里的連接打開(kāi)后是一些錯(cuò)誤連接或者沒(méi)有品位的站點(diǎn)？（3）假如網(wǎng)站打開(kāi)后廣告在首頁(yè)滿天飛？老師活動(dòng)：師：是否由于 功了呢？hao123 網(wǎng)址之家的網(wǎng)頁(yè)美觀、內(nèi)容豐富、有用就成同學(xué)活動(dòng)：同學(xué)積極摸索、爭(zhēng)論得出結(jié)果；教學(xué)意圖：加深同學(xué)對(duì)網(wǎng)頁(yè)設(shè)計(jì)原就的懂得,加強(qiáng)同學(xué)應(yīng)用專業(yè)學(xué)問(wèn)的愛(ài)好 和才能的培育；實(shí)例講解 例 2：網(wǎng)頁(yè)顏色的搭配問(wèn)題探究：例 2、例 3 （1）IBM （藍(lán)色

6、巨人）網(wǎng)站圖 1- 3 5+8 分鐘（2）愛(ài)情交友網(wǎng)例 3：網(wǎng)頁(yè)風(fēng)格的設(shè)計(jì)問(wèn)題探究：（1）兒童網(wǎng)站（2）新浪網(wǎng)站圖 1- 4 圖 1- 5 圖 1- 6 老師活動(dòng)：?jiǎn)⑹菊T導(dǎo),展現(xiàn)實(shí)際不同網(wǎng)頁(yè)配色方案；準(zhǔn)時(shí)點(diǎn)評(píng),留意：不同 應(yīng)用場(chǎng)合、不同人群；同學(xué)活動(dòng)：同學(xué)分組爭(zhēng)論,溝通互動(dòng)；最終到講臺(tái)說(shuō)思路；教學(xué)意圖：通過(guò)實(shí)際問(wèn)題的探究,準(zhǔn)時(shí)鞏固同學(xué)網(wǎng)頁(yè)構(gòu)思的才能；拓展同學(xué) 的思維空間,培育同學(xué)的創(chuàng)新意識(shí)和創(chuàng)新才能；教學(xué)過(guò)程及HTML網(wǎng)頁(yè)設(shè)計(jì)教 案 （續(xù)頁(yè)）第 4 頁(yè)教學(xué)內(nèi)容時(shí)間安排（三）小結(jié)網(wǎng)頁(yè)設(shè)計(jì)原就是：5.適用性；6.反復(fù)性；8 分鐘1.結(jié)構(gòu)性；2.通用性；3.差異性；4.習(xí)慣性；留意： 老師活動(dòng)：老師

7、準(zhǔn)時(shí)引導(dǎo)同學(xué)小結(jié)；同學(xué)活動(dòng)：同學(xué)準(zhǔn)時(shí)整理出網(wǎng)頁(yè)設(shè)計(jì)原就；教學(xué)意圖：同學(xué)準(zhǔn)時(shí)形成才能；（四）練習(xí)一： DREAMWEA VER8 操作技能 基本操作：練習(xí)一（1）安裝與啟動(dòng)；練習(xí)二（2）文檔使用；10+5 分鐘（3）工作區(qū)結(jié)構(gòu)（上）（下）；（4）菜單概述（上）（下）；（5）插入欄詳解；（6）面板組；練習(xí)二：操作技能 建立 HTML 代碼文件（1）HTML 概念；（2）一個(gè) HTML 的示例；老師活動(dòng)：?jiǎn)⑹菊T導(dǎo)、構(gòu)思、實(shí)際操作演示；留意：配色方案、風(fēng)格問(wèn)題；軟件操作的方法；同學(xué)活動(dòng)：同學(xué)爭(zhēng)論,溝通互動(dòng),發(fā)散探究；教學(xué)意圖：通過(guò)軟件實(shí)際操作,準(zhǔn)時(shí)鞏固專業(yè)技能；拓展同學(xué)的思維空間,培育同學(xué)的動(dòng)手才能；

8、（五）歸納總結(jié)：歸納總結(jié) 小結(jié)本節(jié)課的主要內(nèi)容、主要思想方法和主要操作技能；8 分鐘 1、把握網(wǎng)頁(yè)設(shè)計(jì)原就,引發(fā)學(xué)習(xí)愛(ài)好；2、把握 DREAMWEA VER 操作技能；3、本節(jié)課主要用了轉(zhuǎn)化的思想、理論結(jié)合實(shí)際的思想；教學(xué)過(guò)程及HTML網(wǎng)頁(yè)設(shè)計(jì)教 案 （續(xù)頁(yè)）第 5 頁(yè)教學(xué)內(nèi)容時(shí)間安排老師活動(dòng)：指導(dǎo)小結(jié),鼓勵(lì)評(píng)判,概括總結(jié)；同學(xué)活動(dòng)：同學(xué)回憶本節(jié)內(nèi)容,小結(jié)網(wǎng)頁(yè)設(shè)計(jì)思想方法和解決問(wèn)題的思路；教學(xué)意圖：把本節(jié)學(xué)問(wèn)納入同學(xué)已有的熟悉結(jié)構(gòu)中,有利于同學(xué)對(duì)設(shè)計(jì)思路 的有序儲(chǔ)存和轉(zhuǎn)化,培育同學(xué)的抽象思維才能；（六）附加題 課外作業(yè) 課后作業(yè)（本周五 3、4 節(jié)前上交）：5 分鐘 1簡(jiǎn)述網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)的異

9、同；2網(wǎng)頁(yè)標(biāo)準(zhǔn)主要由哪三部分組成？分別說(shuō)明其含義；3簡(jiǎn)述網(wǎng)站開(kāi)發(fā)的工作流程；4常用的網(wǎng)頁(yè)制作工具有哪些？分別有哪些特點(diǎn)？課外練習(xí)：1、依據(jù)自己的愛(ài)好、愛(ài)好、特點(diǎn),構(gòu)思一個(gè)個(gè)人網(wǎng)站的首頁(yè),并在草稿紙上 勾畫(huà)出來(lái)；2、用 DREAMVEA VER 制作一個(gè)簡(jiǎn)潔的網(wǎng)頁(yè),題材自定,不要復(fù)制網(wǎng)上的；同學(xué)活動(dòng)：同學(xué)看書(shū)學(xué)習(xí),上機(jī)操作；教學(xué)意圖：培育同學(xué)良好的看書(shū)習(xí)慣,培育自學(xué)才能,培育創(chuàng)新精神、增強(qiáng) 實(shí)踐才能、拓展學(xué)問(wèn)結(jié)構(gòu)；課后反思 師生溝通,同學(xué)之間溝通；5 分鐘教學(xué)意圖：“ 前事不忘,后事之師”,老師上課也是如此,每一堂課都有得有失,只有準(zhǔn)時(shí)明白了課堂上的勝利和失誤之處,才能揚(yáng)長(zhǎng)避短,不斷取得新的進(jìn) 步；通過(guò)師生之間的溝通,老師明白到有哪些教學(xué)環(huán)節(jié)比較新奇,比較科學(xué),學(xué) 生樂(lè)于接受；解決的問(wèn)題中,有哪些同學(xué)比較中意,哪些問(wèn)題仍有更好的解決辦 法；老師在上課過(guò)程中,有哪些