用“所見即所得”來學習CSS樣式表

☆黃敏

（南京市寧海中學，江蘇南京 210024）

用“所見即所得”來學習CSS樣式表

☆黃敏

（南京市寧海中學，江蘇南京 210024）

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

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

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

一、引入：昨天的樣子

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

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

學生關(guān)注場景圖片。

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

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

圖1

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

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

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

圖2

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

學生驚嘆不已。

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

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

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

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

學生迅速回憶猜測。

師：宮崎駿。

學生：知道（一片議論）。

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

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

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

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

教師巡視指導。

教師屏幕轉(zhuǎn)播一學生的成品，提出表揚。并請該學生重新演示一遍。

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

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

◆ 格式——樣式表鏈接。

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

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

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

2.外部樣式文件的修改

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

教師引導分析原因。

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

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

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

學生廣播演示成功步驟。

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

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

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

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

學生根據(jù)學件PPT思考操作（網(wǎng)頁屬性－背景）失??；通過格式/樣式/修改成功。

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

圖7

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

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

（設計意圖：強化由普通視圖中的操作切換HTML試圖找出相應代碼的方法。再次用事實證明代碼不可怕，也不需要強行記憶，使學生真正掌握學習的技巧——CSS樣式表應用的技巧，有利于學習難點的突破。）

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

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

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

教師以屏幕廣播進行分析（如圖8）。

圖8

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

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

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

圖9

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

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

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

◆ 應用格式/樣式修改 （x）

師：通過前面的學習，我們知道要改變所有網(wǎng)頁的圖片，可以使用外聯(lián)；如果改變一張網(wǎng)頁中的全部圖片，可以用內(nèi)聯(lián)；但是現(xiàn)在我們要改變的范圍更小，是一張網(wǎ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)頁中所有圖片 x嵌入式＜img border ＝″0″src ＝″images/3379＿big.jpg″width＝″270″height＝″360″style＝″border:3px ridge ＃FFFF00″＞一張網(wǎng)頁中一個圖片 √

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

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

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

五、總結(jié)反饋

讓學生將所學知識點“連連看”（如圖10）。

學生完成后回答。

圖10

教師（屏幕廣播）請學生回答并加上線條。

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

圖11

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

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

六、今天依舊美好

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

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

學生刪除外部文件CSS代碼。

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

七、教學反思

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

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

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

2.教學組織的完整性

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

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

3.利用認知規(guī)律，找到突破點

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

G434

B

1671－7503(2013)05－0052－04

[編輯：昌曙平]