《網頁格式刷》教學案例.doc

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