超級(jí)“魔術(shù)師”

巫雪琴

一、教材分析

《CSS樣式表》是高中信息技術(shù)選修《網(wǎng)絡(luò)技術(shù)應(yīng)用》第五章的內(nèi)容。根據(jù)多年教學(xué)經(jīng)驗(yàn),學(xué)生如果沒能很好地掌握這部分內(nèi)容,就容易形成畏懼心理,影響后面的學(xué)習(xí)。為了讓學(xué)生學(xué)得既輕松又扎實(shí),切實(shí)地體驗(yàn)樣式表的超凡“魔力”就顯得尤為重要。

二、教學(xué)目標(biāo)

知識(shí)與技能:體會(huì)CSS樣式表在網(wǎng)頁制作中的功能;初步認(rèn)識(shí)樣式表的書寫格式及基本含義;會(huì)簡單應(yīng)用自定義樣式。

過程與方法:掌握CCS的應(yīng)用方法。

情感、態(tài)度與價(jià)值觀:通過對(duì)“百年恩來”站點(diǎn)的美化,感受偉人的人格魅力。

三、教學(xué)重點(diǎn)、難點(diǎn)

重點(diǎn):體會(huì)CSS樣式表的優(yōu)點(diǎn),掌握樣式的不同應(yīng)用方式及其控制范圍。

難點(diǎn):能夠分辨嵌入式樣式與自定義樣式;掌握CSS代碼的書寫格式。

四、學(xué)情分析

學(xué)生已經(jīng)歷了站點(diǎn)的制作及發(fā)布過程,初步認(rèn)識(shí)HTML基本標(biāo)簽及動(dòng)態(tài)網(wǎng)頁的相關(guān)概念,了解了客戶端腳本語言的特點(diǎn)并學(xué)會(huì)輸入簡單的Javascript代碼,為CSS的學(xué)習(xí)做了鋪墊。

五、教學(xué)過程

1.創(chuàng)設(shè)情境,引入新課

師:大家是否為自己的博客“換過皮膚”?據(jù)我所知部分同學(xué)在新建博客時(shí)用過這個(gè)功能,下面我為大家演示一下“換膚”的過程。

教師展示博客,進(jìn)入博客后臺(tái)換模板,更新。再刷新首頁,并瀏覽分頁面。

師:除了博客,“換膚”還應(yīng)用在哪些地方?

生:論壇、QQ空間、QQ、播放器……

師:如何實(shí)現(xiàn)“換膚”呢?

教師打開“皮膚”文件夾,包括主模板與分模板文本文件、圖、一個(gè)CSS文件。

師:大家知道CSS文件的作用是什么?

生:不知道。

教師進(jìn)入主模板,剪切鏈接代碼,更新,首頁發(fā)生變化。之后,教師把剛才剪切下的代碼重新粘貼,更新,頁面恢復(fù)正常。

師:剛才老師剪切下來的這句話,是不是很重要?它的作用是什么呢?這句話是將CSS文件應(yīng)用到相應(yīng)的模板中,從而控制頁面顯示效果。那么,CSS是什么?

2.轉(zhuǎn)入新課

師:相信大家在制作網(wǎng)頁時(shí)對(duì)HTML早已熟悉。隨著Internet的發(fā)展,HTML排版和界面效果的局限性日益暴露,CSS解決了這個(gè)難題?？梢哉f,HTML的Tag定義了網(wǎng)頁的內(nèi)容,而CSS決定網(wǎng)頁內(nèi)容如何顯示。CSS有4種方式可以將樣式表加入到HTML文件中,分別為外聯(lián)、內(nèi)聯(lián)、嵌入和自定義。

3.第一次任務(wù)環(huán)節(jié):體驗(yàn)外聯(lián)樣式的應(yīng)用

師:本節(jié)課,我們以“百年恩來”主題站點(diǎn)為載體來體驗(yàn)樣式表。

學(xué)生實(shí)踐:瀏覽“百年恩來”半成品網(wǎng)站(如圖1,應(yīng)用了外聯(lián)樣式),手動(dòng)操作“換膚”。打開文件夾,用記事本打開名為q.css的文件,把代碼中bg1.jpg改為bg.jpg,得圖2。q.css就是外聯(lián)樣式文件,先在網(wǎng)站中應(yīng)用外聯(lián)樣式文件,之后可以通過修改此文件達(dá)到控制全站的目的。

師:本環(huán)節(jié)我們要學(xué)習(xí)如何應(yīng)用外聯(lián)樣式。

教師分發(fā)半成品站點(diǎn)(如圖3,沒有應(yīng)用樣式),包括現(xiàn)成的CSS文件、4個(gè)網(wǎng)頁文件及image和其他素材文件夾(包括外聯(lián)、內(nèi)聯(lián)、嵌入和自定義樣式代碼與應(yīng)用提示)。操作步驟如下:

(1)打開index文件,瀏覽相關(guān)網(wǎng)頁。

(2)打開名為“外聯(lián)樣式代碼”的文件,復(fù)制鏈接代碼,粘貼到4個(gè)網(wǎng)頁文件的head區(qū)。

(3)刷新IE,瀏覽效果。

師:大家來挑一挑當(dāng)前頁面的不足之處。

生:字太大了,顏色不協(xié)調(diào);首頁鏈接不好看,周總理的圖片更突出些就好了;效果少了。

解決第一個(gè)問題,體驗(yàn)對(duì)CSS樣式表的簡單修改。

師:第一個(gè)問題大家一定能解決。簡單分析CSS文件的內(nèi)容(對(duì)body字號(hào)大小、顏色控制的代碼側(cè)重點(diǎn)撥)。文件中最后一句有些特別,它是什么意思呢?現(xiàn)在是一個(gè)謎,到時(shí)候我將為大家揭開謎底。首先請(qǐng)大家自行解決第一個(gè)問題。

教師分析CSS文件內(nèi)容,學(xué)生操作,解決第一個(gè)問題。教師利用大屏幕轉(zhuǎn)播某個(gè)學(xué)生的屏幕,請(qǐng)他展示改動(dòng)的代碼及效果,并做最后補(bǔ)充。

設(shè)問引入,解決第二個(gè)問題。

師:大家已經(jīng)解決了第一個(gè)問題?？梢钥吹?CSS能控制所有應(yīng)用此樣式的頁面,這為網(wǎng)站建設(shè)帶來了方便。但所有的網(wǎng)頁樣式相同,又失去了個(gè)性。如果希望個(gè)別頁面與眾不同,應(yīng)當(dāng)怎么辦呢?

學(xué)生思考。

師:內(nèi)聯(lián)樣式表可以解決這個(gè)難題,這種樣式的應(yīng)用方式只能控制本頁面。打開素材包中名為“內(nèi)聯(lián)樣式代碼”的文本文件,復(fù)制,然后用記事本打開index文件,把代碼粘貼到首頁的head區(qū),瀏覽網(wǎng)頁是否有變化?

生:沒有。

師:大家想想為什么沒變化?原因是HTML不能識(shí)別代碼?？梢栽谶@段代碼的首尾分別加上標(biāo)簽。之后會(huì)出現(xiàn)什么效果呢?這個(gè)蓋頭留給大家自己來揭!

4.第二次任務(wù)環(huán)節(jié):體驗(yàn)內(nèi)聯(lián)樣式表的應(yīng)用

學(xué)生復(fù)制相應(yīng)文件中的內(nèi)聯(lián)代碼,粘貼到首頁head區(qū),并加