《網(wǎng)頁(yè)格式刷》教學(xué)案例.doc

網(wǎng)頁(yè)格式刷CSS樣式表教學(xué)案例【教材分析】“CSS樣式表”是高中信息技術(shù)選修網(wǎng)絡(luò)技術(shù)應(yīng)用的第五章“動(dòng)態(tài)網(wǎng)頁(yè)制作”中的內(nèi)容。教材中將這塊內(nèi)容分為“什么是CSS”、“CSS實(shí)現(xiàn)”、“在HTML中加入CSS”三部分。本節(jié)內(nèi)容的重點(diǎn)應(yīng)該是“運(yùn)用CSS進(jìn)行樣式設(shè)置的方法和格式”及“在HTML中加入CSS的三種方法”。因此我認(rèn)為將“CSS實(shí)現(xiàn)”與“在HTML中加入CSS”兩部分結(jié)合在一起講比較好。此外，我認(rèn)為“體會(huì)CSS樣式表的優(yōu)點(diǎn)”也應(yīng)該是一個(gè)教學(xué)重點(diǎn)。學(xué)生以往用FrontPage做網(wǎng)頁(yè)都習(xí)慣用工具按鈕、菜單命令來(lái)進(jìn)行網(wǎng)頁(yè)外觀設(shè)置，使用代碼對(duì)學(xué)生來(lái)說(shuō)是件令他們頭疼的事，所以我認(rèn)為有必要通過(guò)讓學(xué)生體會(huì)CSS樣式表的優(yōu)點(diǎn)讓學(xué)生明白為何我們要學(xué)習(xí)這部分內(nèi)容?！窘虒W(xué)目標(biāo)分析】1、知識(shí)與技能(1)什么是CSS樣式表。(2)CSS樣式表的優(yōu)點(diǎn)。(3)嵌入式、內(nèi)聯(lián)式、外聯(lián)式三種樣式表的使用方法。(4)通過(guò)對(duì)三種樣式表的親身實(shí)踐，感受這三種樣式表的優(yōu)缺點(diǎn)。2、過(guò)程與方法(1)通過(guò)WORD排版中的“格式刷”引入網(wǎng)頁(yè)中的“CSS樣式表”，通過(guò)類(lèi)比，使學(xué)生初步了解CSS樣式表的作用，激發(fā)學(xué)習(xí)興趣。(2)對(duì)于CSS樣式表的概念和優(yōu)點(diǎn)主要由教師講解，并讓學(xué)生在實(shí)踐操作中感受樣式表的優(yōu)點(diǎn)。(3)對(duì)于嵌入式、內(nèi)聯(lián)式、外聯(lián)式三種樣式表的使用，由教師講授方法和代碼的書(shū)寫(xiě)格式要求，由學(xué)生根據(jù)實(shí)例要求自我實(shí)踐操作。(4)在學(xué)生的實(shí)踐操作過(guò)程中，讓完成較快的學(xué)生充當(dāng)小老師，幫助其他同學(xué)發(fā)現(xiàn)和改成錯(cuò)誤。3、情感態(tài)度與價(jià)值觀(1)通過(guò)CSS樣式表的學(xué)習(xí)，提高學(xué)生美化網(wǎng)頁(yè)的技能。(2)培養(yǎng)學(xué)生的探索、實(shí)踐能力。(3)通過(guò)實(shí)踐過(guò)程中的“小老師”角色，讓學(xué)生感受同學(xué)之間的互助友愛(ài)，團(tuán)結(jié)協(xié)作?！緦W(xué)情分析】通過(guò)前階段的學(xué)習(xí)，學(xué)生已經(jīng)認(rèn)識(shí)了動(dòng)態(tài)網(wǎng)頁(yè)，并對(duì)HTML的標(biāo)簽及屬性也有了了解?？紤]到我所在學(xué)校的學(xué)生學(xué)習(xí)能力、領(lǐng)悟能力比較強(qiáng)。因此雖然CSS樣式表對(duì)于學(xué)生來(lái)說(shuō)是全新的內(nèi)容，但如果教師采用“講授概念操作演示學(xué)生操作”的模式上課，將無(wú)法激發(fā)學(xué)生自主探索學(xué)習(xí)的興趣和熱情，所以我采用了教師講授概念和方法，然后由學(xué)生自主探索實(shí)踐操作，使學(xué)生的學(xué)習(xí)更具挑戰(zhàn)性?！窘虒W(xué)重點(diǎn)、難點(diǎn)分析】1、教學(xué)重點(diǎn)(1)CSS樣式表的概念。(2)體會(huì)CSS樣式表的優(yōu)點(diǎn)。(3)嵌入式、內(nèi)聯(lián)式、外聯(lián)式三種樣式表的使用方法。(4)CSS代碼的書(shū)寫(xiě)格式，輸入的準(zhǔn)確性。2、教學(xué)難點(diǎn)(1)三種樣式表在使用上區(qū)別。(2)CSS代碼的書(shū)寫(xiě)格式?！窘虒W(xué)過(guò)程】新課導(dǎo)入：教師活動(dòng)：教師展示兩篇WORD文檔A和文檔B，文檔A已經(jīng)進(jìn)行了文字字號(hào)、字體、顏色、行距、首行縮進(jìn)等排版，文檔B未進(jìn)行任何排版。教師提問(wèn)：同學(xué)們，在WORD編輯中，有什么方法能讓文檔B以最快捷的速度排版成文檔A的字號(hào)、字體、顏色、行距呢？學(xué)生活動(dòng)：部分學(xué)生思考后回答“格式刷”。教師活動(dòng)：教師迅速的利用格式刷將文檔B設(shè)置成文檔A的排版外觀。教師活動(dòng)：教師展示兩張網(wǎng)頁(yè)，網(wǎng)頁(yè)A已經(jīng)進(jìn)行了文字字號(hào)、字體、顏色、文字鏈接動(dòng)態(tài)效果、彩色滾動(dòng)條等外觀設(shè)置，網(wǎng)頁(yè)B未進(jìn)行任何設(shè)置。教師提問(wèn)：現(xiàn)在老師想把網(wǎng)頁(yè)B也設(shè)置成網(wǎng)頁(yè)A的外觀，有什么方法能夠快捷而方便地幫我們做到呢？學(xué)生活動(dòng)：部分學(xué)生回答說(shuō)“格式刷”。教師提問(wèn)：如果我們?cè)谧鼍W(wǎng)頁(yè)的過(guò)程中，也有一把“格式刷”，是不是就能很方便的將網(wǎng)頁(yè)B設(shè)置成網(wǎng)頁(yè)A的外觀呢？網(wǎng)頁(yè)制作中，到底有沒(méi)有這樣的“格式刷”呢？教師操作：打開(kāi)網(wǎng)頁(yè)A的源代碼，將CSS樣式代碼復(fù)制到網(wǎng)頁(yè)B，立刻使網(wǎng)頁(yè)B具有了與網(wǎng)頁(yè)A相同的外觀。教師提問(wèn)：老師剛才復(fù)制粘貼的那段代碼是不是具有與“格式刷”相同的作用？今天我們就來(lái)學(xué)習(xí)“網(wǎng)頁(yè)中的格式刷”CSS樣式表。新課講授：一：什么是CSS樣式表？教師活動(dòng)：講授CSS樣式表的概念。用一個(gè)指定的名字來(lái)標(biāo)識(shí)和保存的一組相關(guān)字符和段落格式的選項(xiàng)集合。讓學(xué)生了解CSS樣式表的優(yōu)點(diǎn)。(結(jié)合實(shí)例)1、避免在標(biāo)識(shí)字符和設(shè)置段落格式等操作時(shí)重復(fù)定義需要的樣式（如字體、字號(hào)、顏色），從而使應(yīng)用該樣式的網(wǎng)頁(yè)具有相同的風(fēng)格。2、只需要修改一個(gè)CSS代碼就可以改變頁(yè)數(shù)不定的網(wǎng)頁(yè)外觀和格式，提高網(wǎng)頁(yè)編輯效率。3、可以“隨心所欲”地控制頁(yè)面布局和外觀。4、在所有瀏覽器和平臺(tái)之間具有較好的兼容性。二：如何在HTML中加入樣式？1、嵌入式樣式表教師活動(dòng)：教師講授嵌入式樣式表的使用方法。方法：只需在每個(gè)要應(yīng)用樣式的HTML的標(biāo)記后寫(xiě)上CSS屬性就可以了。CSS屬性書(shū)寫(xiě)格式：style=“color:red;font-family:黑體;font-size:24pt”注意：color的屬性值還可以用顏色代碼，如：#ff0000。教師活動(dòng)：布置課堂練習(xí)題1。打開(kāi)example1文件夾下的qzwx.htm，將網(wǎng)頁(yè)中文章標(biāo)題文字“秋天的童話如夢(mèng)”用嵌入式樣式表設(shè)置成：#ff9900，30pt，黑體。（效果如下圖）學(xué)生活動(dòng)：依據(jù)教師講的方法，進(jìn)行練習(xí)。教師活動(dòng)：巡回輔導(dǎo)，提醒學(xué)生輸入字母、標(biāo)點(diǎn)一定要準(zhǔn)確。教師提問(wèn)：如果用嵌入式樣式表來(lái)為網(wǎng)頁(yè)中的文字設(shè)置外觀，方不方便？學(xué)生回答：不方便。教師活動(dòng)：總結(jié)嵌入式樣式表的不足。嵌入式樣式表主要用于對(duì)具體的標(biāo)簽作具體的調(diào)整，其作用的范圍只限于本標(biāo)簽。這種樣式表并不能充分體現(xiàn)出CSS樣式表的優(yōu)越性。引入內(nèi)聯(lián)式樣式表。2、內(nèi)聯(lián)式樣式表（1）作用于網(wǎng)頁(yè)中的部分文字教師活動(dòng)：教師講授第一種內(nèi)聯(lián)式樣式表的使用方法。方法：(1)在網(wǎng)頁(yè)的 定義樣式，如：.a1 color:green;font-size:14pt;font-family:黑體(2)在要設(shè)置此樣式的文字頭插入,文字尾插入,如：1、提示一些不相干的話。注意：a1為定義的樣式名，不同的網(wǎng)頁(yè)，樣式名可以不同。教師活動(dòng)：布置課堂練習(xí)題2。打開(kāi)example2文件夾下的bingdu.htm，用內(nèi)聯(lián)式樣式將網(wǎng)頁(yè)中的9個(gè)小標(biāo)題字體設(shè)置為：綠色、14pt、黑體。（效果如下圖）學(xué)生活動(dòng)：依據(jù)教師講的方法，進(jìn)行練習(xí)。教師活動(dòng)：巡回輔導(dǎo)，提醒學(xué)生定位插入點(diǎn)要準(zhǔn)確，樣式名前的點(diǎn)不能丟，輸入字母、標(biāo)點(diǎn)也一定要準(zhǔn)確。教師活動(dòng)：發(fā)現(xiàn)很多學(xué)生的錯(cuò)誤都來(lái)自輸入錯(cuò)誤，自己檢查半天也查不出來(lái)，于是提議讓同桌同學(xué)幫忙找錯(cuò)。學(xué)生活動(dòng)：學(xué)生很認(rèn)真的幫同學(xué)找錯(cuò)。教師提問(wèn)：如果要把“bingdu.htm”網(wǎng)頁(yè)中的小標(biāo)題的顏色由綠色改為藍(lán)色，想一想該如何做？學(xué)生回答：只要在定義樣式的代碼中將“green”改為“blue”就行了。教師提問(wèn)：但是如果我們沒(méi)有用內(nèi)聯(lián)式樣式表，那又該如何做？學(xué)生回答：那就得九個(gè)標(biāo)題一個(gè)一個(gè)改顏色，改九次。教師活動(dòng)：引導(dǎo)學(xué)生體會(huì)樣式表的使用提高了我們修改網(wǎng)頁(yè)的效率！（2）作用于整個(gè)網(wǎng)頁(yè)教師活動(dòng)：教師講授第一種內(nèi)聯(lián)式樣式表的使用方法。方法：在網(wǎng)頁(yè)的 插入代碼：樣式表CSS內(nèi)容教師活動(dòng)：布置課堂練習(xí)題3。打開(kāi)example3文件夾下的teacher.htm，用內(nèi)聯(lián)式樣式表制作超鏈接文字的動(dòng)態(tài)效果：當(dāng)鼠標(biāo)劃過(guò)時(shí)，設(shè)為超連接的文字，變成橘黃色，并出現(xiàn)下劃線。（效果如下圖）此題代碼由教師提供代碼圖片，學(xué)生自己輸入。學(xué)生活動(dòng)：依據(jù)教師講的方法，進(jìn)行練習(xí)。教師活動(dòng)：巡回輔導(dǎo)，提醒學(xué)生定位插入點(diǎn)要準(zhǔn)確，輸入字母、標(biāo)點(diǎn)也一定要準(zhǔn)確。提示學(xué)生利用復(fù)制粘貼相同代碼后修改，提高自己的輸入速度。繼續(xù)鼓勵(lì)同學(xué)互相幫忙找錯(cuò)誤。教師提問(wèn)：如果網(wǎng)站內(nèi)有幾十網(wǎng)頁(yè)都要用到此浮動(dòng)鏈接效果，該如何做呢？ 學(xué)生回答：每張網(wǎng)頁(yè)都插入同樣的CSS代碼。教師提問(wèn)：有沒(méi)有什么方法可以簡(jiǎn)化這項(xiàng)操作呢？既然幾十張網(wǎng)頁(yè)都要用同樣的代碼，能不能把這段代碼制作成一個(gè)獨(dú)立的文件，然后由每張網(wǎng)頁(yè)調(diào)用呢？3、外聯(lián)式樣式表教師活動(dòng)：教師講授外聯(lián)式樣式表的使用方法。方法：(1)將樣式定義成一個(gè)“.css”的文件：可在記事本中輸入樣式代碼，然后保存為擴(kuò)展名為“.css”的文件。(2)在網(wǎng)頁(yè)的head區(qū)插入引用代碼：注意：標(biāo)簽中的屬性沒(méi)有前后次序要求。教師活動(dòng)：布置課堂練習(xí)題4。打開(kāi)example4文件夾下的teacher.htm，用外聯(lián)式樣式表制作超鏈接文字的動(dòng)態(tài)效果：當(dāng)鼠標(biāo)劃過(guò)時(shí)，設(shè)為超連接的文字，變成橘黃色，并出現(xiàn)下劃線。學(xué)生活動(dòng)：依據(jù)教師講的方法，進(jìn)行練習(xí)。教師活動(dòng)：巡回輔導(dǎo)，提醒學(xué)生定位插入點(diǎn)要準(zhǔn)確，輸入字母、標(biāo)點(diǎn)也一定要準(zhǔn)確。樣式文件和網(wǎng)頁(yè)文件要保存于同一個(gè)文件夾內(nèi)。課堂小結(jié)：教師活動(dòng)：通過(guò)兩節(jié)課的學(xué)習(xí)，同學(xué)們知道了什么是CSS樣式表，掌握了三種CSS樣式表的使用。同學(xué)們通過(guò)實(shí)踐操作，也體會(huì)到了使用CSS樣式表可以避免很多重復(fù)操作，從而提高網(wǎng)頁(yè)編輯和修改的效率。希望同學(xué)們以后在自己制作網(wǎng)站時(shí)，能靈活運(yùn)用CSS樣式表來(lái)美化自己的網(wǎng)頁(yè)。【自我評(píng)析】本節(jié)內(nèi)容如果但看教學(xué)內(nèi)容，感覺(jué)1課時(shí)就可以完成，但是考慮到高二會(huì)考對(duì)CSS代碼的輸入有一定的要求，所以我決定所有練習(xí)題的代碼都由學(xué)生自己輸入，由于學(xué)生的輸入速度及準(zhǔn)確性問(wèn)題，比預(yù)計(jì)多用了一課時(shí)。雖然多用了一課時(shí)，但是由于知識(shí)點(diǎn)講得比較清晰，給學(xué)生練習(xí)的時(shí)間比較充裕，自我感覺(jué)學(xué)生的學(xué)習(xí)效果比較好。雖然課題引入用去的時(shí)間比較多，但是通過(guò)WORD文檔中的“格式刷”類(lèi)比引入，