☆黃敏

（南京市寧海中學(xué)，江蘇南京 210024）

用“所見(jiàn)即所得”來(lái)學(xué)習(xí)CSS樣式表

☆黃敏

（南京市寧海中學(xué)，江蘇南京 210024）

按照教材編排意圖，教師教學(xué)CSS樣式表內(nèi)容應(yīng)直接以代碼形式來(lái)講解，但會(huì)使學(xué)生感受到枯燥。本文另辟蹊徑，將學(xué)生的學(xué)習(xí)重點(diǎn)定位在分析樣式表加入到網(wǎng)頁(yè)中的三種方式，要求學(xué)生通過(guò)學(xué)習(xí)把握外聯(lián)、內(nèi)聯(lián)、嵌入樣式表的應(yīng)用，即利用網(wǎng)頁(yè)制作所見(jiàn)即所得來(lái)自動(dòng)產(chǎn)生代碼，來(lái)學(xué)習(xí)掌握CSS樣式表內(nèi)容。

CSS樣式表；外聯(lián)；內(nèi)聯(lián)；嵌入；網(wǎng)頁(yè)（網(wǎng)站）

CSS層疊樣式表為中國(guó)地圖出版社信息技術(shù)選修3《網(wǎng)絡(luò)技術(shù)應(yīng)用》第四單元第四節(jié)內(nèi)容。通常這個(gè)內(nèi)容直接以代碼形式進(jìn)行講解。這對(duì)于有較高網(wǎng)頁(yè)編程基礎(chǔ)的學(xué)習(xí)者是可以的。但如果深入剖析CSS文件的代碼、參數(shù)、結(jié)構(gòu)和規(guī)則、基本語(yǔ)法，以這樣的方式教學(xué)，學(xué)生普遍感受枯燥乏味。若從CSS能實(shí)現(xiàn)的網(wǎng)頁(yè)效果出發(fā)，則會(huì)加強(qiáng)其實(shí)用性、增加其趣味性。筆者無(wú)意地嘗試實(shí)踐發(fā)現(xiàn)，原來(lái)CSS教學(xué)可以脫離代碼的編寫(xiě)，同樣可以實(shí)現(xiàn)改變網(wǎng)站風(fēng)格的功能。筆者在教學(xué)該內(nèi)容時(shí)做了全盤(pán)調(diào)整。其中，把學(xué)習(xí)重點(diǎn)定位在分析樣式表加入到網(wǎng)頁(yè)中三種方式。要求學(xué)生通過(guò)學(xué)習(xí)準(zhǔn)確把握外聯(lián)、內(nèi)聯(lián)、嵌入樣式表的應(yīng)用。將學(xué)習(xí)難點(diǎn)定位在“巧”上，利用網(wǎng)頁(yè)制作的所見(jiàn)即所得來(lái)自動(dòng)產(chǎn)生代碼，進(jìn)而便于學(xué)生的理解運(yùn)用。

一、引入：昨天的樣子

教師引導(dǎo)（屏幕廣播）：放映一組幻燈片圖片，帶領(lǐng)學(xué)生回憶汶川、玉樹(shù)大地震、日本地震海嘯這幾個(gè)近年亞洲的大災(zāi)難。

眾網(wǎng)站媒體在全國(guó)哀悼日期間，將風(fēng)格顏色改為“黑、白、灰”，以表示對(duì)遇難同胞的哀悼之情。

學(xué)生關(guān)注場(chǎng)景圖片。

師：大型網(wǎng)站的網(wǎng)頁(yè)多達(dá)幾十萬(wàn)張，哀悼日期間我們也親身感受了網(wǎng)站的素顏面示。而這些網(wǎng)站僅在很短的時(shí)間都改變了模樣，可謂是高效率。這是如何做到的？同學(xué)們也學(xué)習(xí)了制作網(wǎng)站的內(nèi)容，我們能不能也做出素顏的效果呢？

（屏幕廣播）展示網(wǎng)站《綠色家園》（如圖1）。

圖1

師：現(xiàn)在老師將在數(shù)秒內(nèi)使這個(gè)網(wǎng)站以素顏出現(xiàn)（事先已聯(lián)入外部樣式表，沒(méi)刷新）。請(qǐng)大家和老師一起倒數(shù)3個(gè)數(shù)。

學(xué)生齊聲倒數(shù)“3、2、1”。

此時(shí)，網(wǎng)站立即色彩全無(wú)（如圖2）。

圖2

師：如此多的網(wǎng)頁(yè)如果逐一修改文字、背景，重復(fù)勞動(dòng)，效率低。騰訊、網(wǎng)易等國(guó)內(nèi)大型站點(diǎn)，更是不會(huì)采用。剛才，同學(xué)們也看到了老師的高招，這會(huì)兒老師來(lái)解密。（屏幕廣播）格式——樣式表鏈接，網(wǎng)站瞬間轉(zhuǎn)變。

學(xué)生驚嘆不已。

教師用幻燈片演示——CSS的概念和作用。

（設(shè)計(jì)意圖：以學(xué)生熟知的近年來(lái)國(guó)內(nèi)外大地震等事件為第一引入，再以全國(guó)哀悼日期間網(wǎng)站黑白灰的基調(diào)現(xiàn)象為第二引入，都是學(xué)生親耳所聞?dòng)H眼所見(jiàn)的生活場(chǎng)景。貼近學(xué)生生活的因素促使他們的注意力集中到課堂，很想解開(kāi)網(wǎng)站瞬間轉(zhuǎn)變的秘密，有效激發(fā)了學(xué)習(xí)興趣。）

二、網(wǎng)站變幻——華麗變身

師：在回憶了大地震給人們帶來(lái)的災(zāi)難時(shí)，我們都知道2011年3月發(fā)生在日本的地震海嘯引起的核輻射更是危及到全球。提到日本，有一個(gè)人同學(xué)們一定都認(rèn)識(shí)。

學(xué)生迅速回憶猜測(cè)。

師：宮崎駿。

學(xué)生：知道（一片議論）。

教師展示（廣播瀏覽）網(wǎng)站《歲月的童話》（如圖3）。與學(xué)生分析其不足后展示修改后的網(wǎng)站。告知學(xué)生們要學(xué)習(xí)運(yùn)用高效改變網(wǎng)站面貌的CSS樣式表，使《歲月的童話》變新顏（如圖4）。

教師提供學(xué)生《歲月的童話》素材網(wǎng)站、學(xué)件PPT、CSS顏色代碼。

1.外聯(lián)樣式表的應(yīng)用

學(xué)生根據(jù)教師提供的素材和學(xué)件獨(dú)立完成“華麗轉(zhuǎn)身”（如圖5）。

教師巡視指導(dǎo)。

教師屏幕轉(zhuǎn)播一學(xué)生的成品，提出表?yè)P(yáng)。并請(qǐng)?jiān)搶W(xué)生重新演示一遍。

完成“改頭換面”的必要步驟。

◆ 自制CSS文件（利用更改文件擴(kuò)展名，由txt改為CSS變?yōu)闃邮奖砦募?/p>

◆ 格式——樣式表鏈接。

◆ 切換html視圖，找到由剛才格式——樣式表鏈接的操作產(chǎn)生的代碼：

教師屏幕廣播教學(xué)課件。首先，分析在html視圖產(chǎn)生的代碼，由此引出CSS與HTML文檔的結(jié)合方法之一即外聯(lián)樣式表；再進(jìn)而簡(jiǎn)單分析為何它可以統(tǒng)一網(wǎng)站風(fēng)格（如圖6）。

（設(shè)計(jì)意圖：回避直接學(xué)習(xí)CSS代碼，而是運(yùn)用可視化操作（格式/樣式表鏈接），輕易得到CSS與 HTML文檔的結(jié)合方法之一：外聯(lián)樣式表（學(xué)習(xí)難點(diǎn)的突破）。通過(guò)由普通視圖自然過(guò)渡到HTML中代碼，更符合學(xué)生習(xí)慣——可見(jiàn)即所得的操作。有助于學(xué)生對(duì)外聯(lián)樣式表的記憶和理解。）

2.外部樣式文件的修改

學(xué)生提出問(wèn)題（由于背景圖片是藍(lán)色，網(wǎng)頁(yè)中表格文字也是近似藍(lán)色，看不清楚，希望變字體顏色）。嘗試修改（字體/顏色）失敗。

教師引導(dǎo)分析原因。

外聯(lián)樣式表中的代碼有表格中字體顏色的設(shè)置。

學(xué)生思考回答更改樣式表中顏色代碼（利用學(xué)習(xí)資料CSS顏色代碼找到適合顏色的代碼取代原來(lái)的顏色＃0000ff）。

教師巡視，發(fā)現(xiàn)有的學(xué)生已經(jīng)領(lǐng)悟要點(diǎn)并成功改變字體的顏色。

學(xué)生廣播演示成功步驟。

（設(shè)計(jì)意圖：在解決了改變網(wǎng)站整體風(fēng)格后又產(chǎn)生新的問(wèn)題，在讓學(xué)生體會(huì)成功的同時(shí)又有了新挑戰(zhàn)，這就是學(xué)習(xí)的樂(lè)趣。連環(huán)問(wèn)題激發(fā)了學(xué)生的興趣。）

三、網(wǎng)站變幻——卓爾不群

1.內(nèi)聯(lián)樣式表

師：網(wǎng)站內(nèi)容屬宮崎駿先生的作品列表的頁(yè)面最為引人關(guān)注。我們希望這一頁(yè)具有一種視覺(jué)跳躍，以強(qiáng)化這部分內(nèi)容的重要性。比如：我們可以改變它的背景圖片來(lái)顯示出它的與眾不同。

學(xué)生根據(jù)學(xué)件PPT思考操作（網(wǎng)頁(yè)屬性－背景）失?。煌ㄟ^(guò)格式/樣式/修改成功。

教師屏幕廣播展示：格式/樣式/body標(biāo)簽/修改（如圖 7）。

圖7

引導(dǎo)學(xué)生再次由普通視圖下的所見(jiàn)即所得操作得出其操作結(jié)果在HTML視圖下生成的代碼（學(xué)生回答告之）：

教師引出CSS與HTML文檔的結(jié)合方法之二——內(nèi)聯(lián)樣式表。并簡(jiǎn)單分析。

（設(shè)計(jì)意圖：強(qiáng)化由普通視圖中的操作切換HTML試圖找出相應(yīng)代碼的方法。再次用事實(shí)證明代碼不可怕，也不需要強(qiáng)行記憶，使學(xué)生真正掌握學(xué)習(xí)的技巧——CSS樣式表應(yīng)用的技巧，有利于學(xué)習(xí)難點(diǎn)的突破。）

2.外聯(lián)樣式表與內(nèi)聯(lián)樣式表的設(shè)置有效的優(yōu)先級(jí)別

教師引導(dǎo)學(xué)生分析同在年鑒網(wǎng)頁(yè).htm的2個(gè)樣式表，樣式設(shè)置沖突時(shí)，哪一個(gè)樣式表起作用。

學(xué)生回答內(nèi)聯(lián)樣式表（根據(jù)操作結(jié)果）。

教師以屏幕廣播進(jìn)行分析（如圖8）。

圖8

（設(shè)計(jì)意圖：以同一網(wǎng)頁(yè)的樣式文件（外聯(lián)、內(nèi)聯(lián)）中共有的背景代碼，結(jié)合網(wǎng)頁(yè)背景最終的呈現(xiàn)效果，以事實(shí)得出結(jié)論外聯(lián)樣式表＜內(nèi)聯(lián)樣式表的優(yōu)先權(quán)。）

四、網(wǎng)站變化——突如其來(lái)

教師提出建議，將站點(diǎn)首頁(yè)的宮崎駿人物圖像加上黃色邊框（如圖9）。

圖9

學(xué)生參考學(xué)件的不同方法嘗試操作，結(jié)果三種方法都失敗了，感到疑惑。

◆ 普通視圖中修改圖片屬性 （x）

◆ 直接在html視圖中更改代碼 （x）

◆ 應(yīng)用格式/樣式修改 （x）

師：通過(guò)前面的學(xué)習(xí)，我們知道要改變所有網(wǎng)頁(yè)的圖片，可以使用外聯(lián)；如果改變一張網(wǎng)頁(yè)中的全部圖片，可以用內(nèi)聯(lián)；但是現(xiàn)在我們要改變的范圍更小，是一張網(wǎng)頁(yè)的局部圖片。

樣式表類別 相應(yīng)代碼 效果的應(yīng)用范圍 需求外聯(lián) ＜link rel＝″stylesheet″type＝″text/css“ href＝″q.css″＞ 網(wǎng)站中所有圖片 x內(nèi)聯(lián)＜style type＝“text/css” ＞＜選－－img邀border:3px ridge ＃FFFF00″妖－－＞＜/style＞一張網(wǎng)頁(yè)中所有圖片 x嵌入式＜img border ＝″0″src ＝″images/3379＿big.jpg″width＝″270″height＝″360″style＝″border:3px ridge ＃FFFF00″＞一張網(wǎng)頁(yè)中一個(gè)圖片 √

教師以幻燈片引出CSS與HTML文檔的結(jié)合方法三：嵌入樣式表。并簡(jiǎn)單分析其書(shū)寫(xiě)格式和嵌入的位置。

學(xué)生結(jié)合學(xué)件PPT加深學(xué)習(xí)，完成一張圖片的邊框效果設(shè)置。

（設(shè)計(jì)意圖：以步步為營(yíng)的網(wǎng)站修改要求緊湊出現(xiàn)，使學(xué)習(xí)知識(shí)點(diǎn)環(huán)環(huán)相扣。嵌入樣式表的學(xué)習(xí)不會(huì)讓學(xué)生感到知識(shí)點(diǎn)的跳躍和突兀。由利用內(nèi)聯(lián)樣式表的代碼寫(xiě)出嵌入樣式表。）

五、總結(jié)反饋

讓學(xué)生將所學(xué)知識(shí)點(diǎn)“連連看”（如圖10）。

學(xué)生完成后回答。

圖10

教師（屏幕廣播）請(qǐng)學(xué)生回答并加上線條。

學(xué)生將PPT中相應(yīng)內(nèi)容放入表格中（如圖11），說(shuō)出對(duì)應(yīng)的樣式表類別、應(yīng)用范圍、優(yōu)先等級(jí)。

圖11

即便在網(wǎng)上沒(méi)有現(xiàn)成的代碼搜索，如果教師沒(méi)有給出更多的代碼，學(xué)生自己可以通過(guò)普通視圖了解創(chuàng)造出不同的樣式表文件。

（設(shè)計(jì)意圖：通過(guò)連線和表格填空的方式替代教師的總結(jié)，也是對(duì)學(xué)生課堂學(xué)習(xí)效果的及時(shí)反饋。有助于學(xué)生自我梳理知識(shí)點(diǎn)，培養(yǎng)其信息的加工整理能力。）

六、今天依舊美好

教師引出宮崎駿先生寄語(yǔ)日本大地震的有關(guān)文字。

盡管災(zāi)難曾經(jīng)有，今后或許還將繼續(xù)，我們更要珍惜現(xiàn)在的平靜生活。人類也不會(huì)一直在恐懼中生存。所以，同學(xué)們，是不是可以讓剛才黑白灰的站點(diǎn)恢復(fù)到原來(lái)的面貌，可以用我們掌握的信息技術(shù)使它變得更美好。

學(xué)生刪除外部文件CSS代碼。

（設(shè)計(jì)意圖：恢復(fù)網(wǎng)頁(yè)網(wǎng)站本色與引入課堂時(shí)網(wǎng)站灰黑色首尾呼應(yīng)。在學(xué)習(xí)內(nèi)容上構(gòu)成一個(gè)相當(dāng)完整的體系，也延伸了課堂帶來(lái)的精神層次的內(nèi)涵：今天依舊美好。并以此作為本節(jié)課的結(jié)束。）

七、教學(xué)反思

本課堂從引入教學(xué)至課堂結(jié)束共由六部分組成：昨天的模樣，華麗變身，卓爾不群，突如其來(lái)，總結(jié)反饋，今天依舊美好。而【華麗變身】【卓爾不群】【突如其來(lái)】則是課堂的授課內(nèi)容，分別學(xué)習(xí)外聯(lián)樣式表、內(nèi)聯(lián)樣式表、嵌入樣式表在網(wǎng)站中的應(yīng)用。這3部分與課堂引入素材的關(guān)系是以“地震——日本——宮崎駿”這樣的線索串聯(lián)銜接。通過(guò)對(duì)整個(gè)教學(xué)過(guò)程的回顧，認(rèn)為有如下創(chuàng)新點(diǎn)。

1.教學(xué)引入與課堂結(jié)束的首尾呼應(yīng)

引入部分與結(jié)尾部分以近年來(lái)地震災(zāi)害為切入，媒體網(wǎng)站的”黑白灰”素顏呈現(xiàn)與災(zāi)難后恢復(fù)本來(lái)的色彩作為課堂的首尾呼應(yīng)。

2.教學(xué)組織的完整性

這是指教學(xué)內(nèi)容設(shè)置的環(huán)節(jié)“華麗變身”、“卓爾不群”、“突如其來(lái)”是針對(duì)修改同一個(gè)網(wǎng)站而言，即教學(xué)素材實(shí)踐的完整性。

另外，指對(duì)于知識(shí)點(diǎn)外聯(lián)樣式表、內(nèi)聯(lián)樣式表、嵌入樣式表在網(wǎng)站中的應(yīng)用，分別對(duì)應(yīng)以上三個(gè)教學(xué)環(huán)節(jié)，在設(shè)置學(xué)習(xí)任務(wù)時(shí)，也充分考慮到問(wèn)題出現(xiàn)的順序要環(huán)環(huán)相扣。

3.利用認(rèn)知規(guī)律，找到突破點(diǎn)

本課亮點(diǎn)就是利用普通視圖下易于操作的樣式來(lái)學(xué)習(xí)CSS與HTML語(yǔ)言結(jié)合。根據(jù)學(xué)生的認(rèn)知規(guī)律——喜歡所見(jiàn)即所得，本課堂順應(yīng)了學(xué)生的學(xué)習(xí)習(xí)慣，將學(xué)習(xí)內(nèi)容視覺(jué)化、易操作化，“先表再里”，采用先大局成功再局部解決、細(xì)化的形式進(jìn)行教學(xué)。

G434

B

1671－7503(2013)05－0052－04

[編輯：昌曙平]