《網(wǎng)頁格式刷》教學案例

1、教學案例基本信息設計者韓曉 單位江蘇省常州咼級中學案例名稱網(wǎng)頁格式化一一CSS樣式表教學案例適應范圍(標明年級和模塊)高一網(wǎng)絡技術應用(選修)課時2課時(80分鐘)網(wǎng)頁格式刷CSS樣式表教學案例【教材分析】“css樣式表”是高中信息技術選修網(wǎng)絡技術應用的第五章“動態(tài)網(wǎng)頁制作”中的內(nèi)容。教材中將這塊內(nèi)容分為“什么是CSS”、“CSS實現(xiàn)”、“在HTML中加入CSS”三部分。本節(jié)內(nèi)容的重點應該是“運用 CSS進行樣式設置的方法和格式”及“在 HTML中加入CSS的三種方法”。因此 我認為將“ CSS實現(xiàn)”與“在HTML中加入CSS”兩部分結(jié)合在一起講比較好。此外，我認為“體 會CSS樣式表的優(yōu)點”

2、也應該是一個教學重點。學生以往用FrontPage做網(wǎng)頁都習慣用工具按鈕、菜單命令來進行網(wǎng)頁外觀設置，使用代碼對學生來說是件令他們頭疼的事，所以我認為有必要通過 讓學生體會CSS樣式表的優(yōu)點讓學生明白為何我們要學習這部分內(nèi)容?！窘虒W目標分析】1、知識與技能(1) 什么是CSS樣式表。(2) CSS樣式表的優(yōu)點。(3) 嵌入式、內(nèi)聯(lián)式、外聯(lián)式三種樣式表的使用方法。(4) 通過對三種樣式表的親身實踐，感受這三種樣式表的優(yōu)缺點。2、過程與方法(1) 通過WORD排版中的“格式刷”引入網(wǎng)頁中的“CSS樣式表”，通過類比，使學生初步了解 CSS樣式表的作用，激發(fā)學習興趣。(2) 對于CSS樣式表的概念和

3、優(yōu)點主要由教師講解，并讓學生在實踐操作中感受樣式表的優(yōu)點。(3) 對于嵌入式、內(nèi)聯(lián)式、外聯(lián)式三種樣式表的使用，由教師講授方法和代碼的書寫格式要求，由學 生根據(jù)實例要求自我實踐操作。(4) 在學生的實踐操作過程中，讓完成較快的學生充當小老師，幫助其他同學發(fā)現(xiàn)和改成錯誤。3、情感態(tài)度與價值觀(1) 通過CSS樣式表的學習，提高學生美化網(wǎng)頁的技能。(2) 培養(yǎng)學生的探索、實踐能力。(3) 通過實踐過程中的“小老師”角色，讓學生感受同學之間的互助友愛，團結(jié)協(xié)作。【學情分析】通過前階段的學習，學生已經(jīng)認識了動態(tài)網(wǎng)頁，并對HTML的標簽及屬性也有了了解?？紤]到我所在學校的學生學習能力、領悟能力比較強。因此

4、雖然CSS樣式表對于學生來說是全新的內(nèi)容，但如果教師采用“講授概念t操作演示t學生操作”的模式上課，將無法激發(fā)學生自主探索學習的 興趣和熱情，所以我采用了教師講授概念和方法，然后由學生自主探索實踐操作，使學生的學習更 具挑戰(zhàn)性。【教學重點、難點分析】1、教學重點(1)CSS 樣式表的概念。(2)體會 CSS 樣式表的優(yōu)點。(3)嵌入式、內(nèi)聯(lián)式、外聯(lián)式三種樣式表的使用方法。(4) CSS 代碼的書寫格式，輸入的準確性。2、教學難點(1)三種樣式表在使用上區(qū)別。(2)CSS 代碼的書寫格式?！窘虒W過程】 新課導入： 教師活動：教師展示兩篇 WORD 文檔 A 和文檔 B ，文檔 A 已經(jīng)進行了文字

5、字號、字體、顏色、行 距、首行縮進等排版，文檔 B 未進行任何排版。教師提問：同學們，在 WORD 編輯中，有什么方法能讓文檔 B 以最快捷的速度排版成文檔 A 的字 號、字體、顏色、行距呢？學生活動：部分學生思考后回答“格式刷” 。 教師活動：教師迅速的利用格式刷將文檔 B 設置成文檔 A 的排版外觀。 教師活動：教師展示兩張網(wǎng)頁，網(wǎng)頁 A 已經(jīng)進行了文字字號、字體、顏色、文字鏈接動態(tài)效果、彩 色滾動條等外觀設置，網(wǎng)頁 B 未進行任何設置。教師提問：現(xiàn)在老師想把網(wǎng)頁 B 也設置成網(wǎng)頁 A 的外觀，有什么方法能夠快捷而方便地幫我們做到 呢？學生活動：部分學生回答說“格式刷” 。教師提問：如果我

6、們在做網(wǎng)頁的過程中，也有一把 “格式刷”，是不是就能很方便的將網(wǎng)頁 B 設置成 網(wǎng)頁 A 的外觀呢？網(wǎng)頁制作中，到底有沒有這樣的“格式刷”呢？教師操作：打開網(wǎng)頁 A的源代碼，將 CSS樣式代碼復制到網(wǎng)頁 B,立刻使網(wǎng)頁B具有了與網(wǎng)頁 A 相同的外觀。教師提問：老師剛才復制粘貼的那段代碼是不是具有與“格式刷”相同的作用？今天我們就來學習 “網(wǎng)頁中的格式刷” CSS 樣式表。 新課講授： 一：什么是 CSS 樣式表？ 教師活動：講授 CSS 樣式表的概念。用一個指定的名字來標識和保存的一組相關字符和段落格式的選項集合。讓學生了解CSS樣式表的優(yōu)點。(結(jié)合實例)1、 避免在標識字符和設置段落格式等操

7、作時重復定義需要的樣式(如字體、 字號、顏色)， 從而使應用該樣式的網(wǎng)頁具有相同的風格。2、只需要修改一個 CSS 代碼就可以改變頁數(shù)不定的網(wǎng)頁外觀和格式，提高網(wǎng)頁編輯效 率。3、可以“隨心所欲”地控制頁面布局和外觀。4、在所有瀏覽器和平臺之間具有較好的兼容性。二：如何在 HTML 中加入樣式？1、嵌入式樣式表 教師活動：教師講授嵌入式樣式表的使用方法。 方法：只需在每個要應用樣式的HTML的標記后寫上 CSS屬性就可以了。CSS 屬性書寫格式： style= “ color:red;font-family:黑體 ;font-size:24pt ”注意： color 的屬性值還可以用顏色代碼，

8、如： #ff0000 。教師活動：布置課堂練習題1。打開examplel文件夾下的qzwx.htm，將網(wǎng)頁中文章標題文字秋天的童話如夢”用嵌 入式樣式表設置成：#ff9900, 30pt，黑體。（效果如下圖）秋天的童話如夢學生活動：依據(jù)教師講的方法，進行練習。教師活動：巡回輔導，提醒學生輸入字母、標點一定要準確。教師提問：如果用嵌入式樣式表來為網(wǎng)頁中的文字設置外觀，方不方便？學生回答：不方便。教師活動：總結(jié)嵌入式樣式表的不足。嵌入式樣式表主要用于對具體的標簽作具體的調(diào)整，其作用的范圍只限于本標簽。這種 樣式表并不能充分體現(xiàn)出CSS樣式表的優(yōu)越性。引入內(nèi)聯(lián)式樣式表。2、內(nèi)聯(lián)式樣式表（1）作用于網(wǎng)

9、頁中的部分文字教師活動：教師講授第一種內(nèi)聯(lián)式樣式表的使用方法。方法：（1）在網(wǎng)頁的 定義樣式，如：style type= “ text/css ”.a1 color:gree n;fon t-size:14pt;fo nt-family:黑體（2）在要設置此樣式的文字頭插入 ,文字尾插入,女口： 1 、提示一些不相干的話。注意：a1為定義的樣式名，不同的網(wǎng)頁，樣式名可以不同。教師活動：布置課堂練習題2。打開example2文件夾下的bingdu.htm，用內(nèi)聯(lián)式樣式將網(wǎng)頁中的9個小標題字體設置為：綠色、14pt、黑體。（效果如下圖）0計好機病潯發(fā)作時的找現(xiàn)現(xiàn)象計斧機痹歪岌乍寸足特漓足計算機擒辛

10、反作茨斡件-計耳機精寺程序+ w r b計聲畑毒叢作韋-t種花怡爐鐵寫廿算t鳩看者卜匕恙以P列舉T 一些卄其楓病每笈作則常嘰的表現(xiàn)現(xiàn)霖；K提示一些不相干的話u最営見的是提示一些K相干的話，|伽打產(chǎn)虧染了宏廟無豹WnrdX憐 黒皓了丨：并且墓求禰輸尺“丸正確丁抄后按碾定腳2.蚩出一段的音樂.學生活動：依據(jù)教師講的方法，進行練習。教師活動：巡回輔導，提醒學生定位插入點要準確，樣式名前的點不能丟，輸入字母、標點也一定要準確。教師活動：發(fā)現(xiàn)很多學生的錯誤都來自輸入錯誤，自己檢查半天也查不出來，于是提議讓同桌同學 幫忙找錯。學生活動：學生很認真的幫同學找錯。教師提問：如果要把bingdu.htm ”網(wǎng)頁

11、中的小標題的顏色由綠色改為藍色，想一想該如何做？ 學生回答：只要在定義樣式的代碼中將green”改為blue”就行了。教師提問：但是如果我們沒有用內(nèi)聯(lián)式樣式表，那又該如何做？學生回答：那就得九個標題一個一個改顏色，改九次。教師活動：引導學生體會樣式表的使用提高了我們修改網(wǎng)頁的效率！ （2 ）作用于整個網(wǎng)頁教師活動：教師講授第一種內(nèi)聯(lián)式樣式表的使用方法。方法：在網(wǎng)頁的 插入代碼： style type= “ text/css ”樣式表CSS內(nèi)容教師活動：布置課堂練習題3。打開example3文件夾下的teacher.htm，用內(nèi)聯(lián)式樣式表制作超鏈接文字的動態(tài)效果：當 鼠標劃過時，設為超連接的文字

12、，變成橘黃色，并出現(xiàn)下劃線。（效果如下圖）f.甲華人民井和國穀腫袪匚中半人民期C飪席令第1 5呂（1993161 雋見牝袁上館昱姜艮倉筆口辻瓷設通泣）幕二盤皀利和冥奔此題代碼由教師提供代碼圖片，學生自己輸入。A:linlA:actiue COLOR: IIFCA68 fl ;FOUT-FfiHILV z 宋 TEKT-DECDRATIOH : none A：haur （COLOR： ttFCfi080；F0HT-Fftl1ILV：栄f* ； TEXI-DECORfiTION： underline BODY FOHr-SIZE： 12px；COLOR： f66fifi6；FONT-FfiMILV

13、z 束體；TO FONr-SIZE： 9pt學生活動：依據(jù)教師講的方法，進行練習。教師活動：巡回輔導，提醒學生定位插入點要準確，輸入字母、標點也一定要準確。提示學生利用復制粘貼相同代碼后修改，提高自己的輸入速度。繼續(xù)鼓勵同學互相幫忙找錯誤。教師提問：如果網(wǎng)站內(nèi)有幾十網(wǎng)頁都要用到此浮動鏈接效果，該如何做呢？學生回答：每張網(wǎng)頁都插入同樣的CSS代碼。教師提問：有沒有什么方法可以簡化這項操作呢？既然幾十張網(wǎng)頁都要用同樣的代碼，能不能把這段代碼制作成一個獨立的文件，然后由每張網(wǎng)頁調(diào)用呢？3、外聯(lián)式樣式表教師活動：教師講授外聯(lián)式樣式表的使用方法。方法： (1)將樣式定義成一個“ .css ”的文件： 可

14、在記事本中輸入樣式代碼，然后保存為擴展名為“ .css ”的文件。(2) 在網(wǎng)頁的 head 區(qū)插入引用代碼：注意：標簽中的屬性沒有前后次序要求。教師活動：布置課堂練習題 4。打開example4文件夾下的teacher.htm，用外聯(lián)式樣式表制作超鏈接文字的動態(tài)效果： 當鼠標劃過時，設為超連接的文字，變成橘黃色，并出現(xiàn)下劃線。學生活動：依據(jù)教師講的方法，進行練習。 教師活動：巡回輔導，提醒學生定位插入點要準確，輸入字母、標點也一定要準確。樣式文件和網(wǎng) 頁文件要保存于同一個文件夾內(nèi)。 課堂小結(jié)： 教師活動：通過兩節(jié)課的學習，同學們知道了什么是CSS樣式表，掌握了三種 CSS樣式表的使用。同學們通過實踐操作，也體會到了使用CSS樣式表可以避免很多重復操作，從而提高網(wǎng)頁編輯和修改的效率。希望同學們以后在自己制作網(wǎng)站時，能靈活運用CSS樣式表來美化自己的網(wǎng)頁?！咀晕以u析】本節(jié)內(nèi)容如果但看教學內(nèi)容，感覺1課時就可以完成，但是考慮到高二會考對CSS代碼的輸入有一定的要求，所以我決定所有練習題的代碼都由學生自己輸入，由于學生的輸入速度及準確性問 題，比預計多用了一課時。雖然多用了一課時，但是由于知識點講得比較清晰，給學生練習的時間 比較充裕，自我感覺學生的學習效果比較好。雖然課題引入