《CSS樣式表》教學(xué)設(shè)計

楊志方 江蘇省鹽城市時楊中學(xué)

劉蘇梅 江蘇省鹽城市時楊中學(xué)

曹恒來 江蘇省鹽城市教育科學(xué)研究院

● 學(xué)習(xí)內(nèi)容分析

《CS S樣式表》是高中選修教材《網(wǎng)絡(luò)技術(shù)應(yīng)用》（教科版）第5章第2節(jié)中的內(nèi)容。CSS是Cascading Style Sheet的縮寫，是用于增強(qiáng)或控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言，在所有瀏覽器和平臺之間具有較好的兼容性。學(xué)好CSS樣式表，就可以“隨心所欲”地控制頁面布局和外觀，在修改網(wǎng)頁外觀和格式時只需修改CSS代碼即可，能夠避免重復(fù)勞動和代碼冗余，提高網(wǎng)頁下載速度。

● 學(xué)習(xí)者分析

本課的學(xué)習(xí)對象是高一年級學(xué)生，處于這一階段的學(xué)生，思維更加靈活流暢，獨(dú)立自主的意識不斷增強(qiáng)。通過前階段的學(xué)習(xí)和實踐，學(xué)生已經(jīng)較為熟悉Frontpage、Dreamweaver這類“所見即所得”的網(wǎng)頁制作軟件，能夠使用這類軟件設(shè)計制作網(wǎng)頁，但這種“所見即所得”的設(shè)計方式屏蔽了技術(shù)細(xì)節(jié)，在編排相同的格式時，需一次次地對它們進(jìn)行重復(fù)的操作，因而效率不高，這樣的體驗促使學(xué)生尋求解決問題的更好方法。

● 學(xué)習(xí)目標(biāo)

知識與技能目標(biāo)：理解CSS的基本概念；了解CSS代碼的語法規(guī)則；熟練掌握外聯(lián)式、內(nèi)聯(lián)式、嵌入式三種樣式表的插入方法，理解CSS的層疊優(yōu)先次序。

過程與方法目標(biāo)：在實踐中總結(jié)出三類樣式表各自的作用范圍和適用場合，學(xué)會利用CSS樣式表設(shè)計修改網(wǎng)頁外觀。

情感態(tài)度與價值觀目標(biāo)：體會CSS樣式表的優(yōu)勢及“樣式”中蘊(yùn)含的標(biāo)準(zhǔn)化、自動化、批處理的思想。

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

教學(xué)重點(diǎn)：CSS的基本概念及語法規(guī)則；三類樣式表的插入方法與適用場合。

教學(xué)難點(diǎn)：三類樣式表的插入方法與適用場合。

● 教學(xué)過程

1.呈現(xiàn)問題

活動1：案例分析，發(fā)現(xiàn)問題。

（1）觀察初始網(wǎng)站“mysite”（如圖1），其外觀有哪些地方需要調(diào)整？

（2）網(wǎng)站變身（如圖2）。在平時上網(wǎng)的過程中有沒有過相似的體驗？嘗試分析其技術(shù)特征，如何解決？

小結(jié)：網(wǎng)站由初始時圖片大小不一、布局凌亂，瞬間變身為圖片大小統(tǒng)一、布局整齊，網(wǎng)站的風(fēng)格也可任意切換。變身后的網(wǎng)站內(nèi)容沒有改變，僅僅改變外觀，這樣的變化可以通過CSS技術(shù)來實現(xiàn)，它能夠?qū)崿F(xiàn)網(wǎng)站內(nèi)容與外觀的分離。

圖1 初始網(wǎng)站

圖2 網(wǎng)站變身

設(shè)計意圖：通過網(wǎng)站mysite變身前后的比較，引導(dǎo)學(xué)生分析其技術(shù)特征，迅速將學(xué)生的注意力吸引至CSS這一新知識、新技術(shù)。

2.認(rèn)識CSS樣式表

活動2：對比分析，認(rèn)識樣式。

修改初始網(wǎng)站“mysite”站點(diǎn)下所有頁面中的圖片大小，除首頁第一張圖片外，統(tǒng)一調(diào)整為寬300像素、高200像素。

圖3 首頁圖片逐個調(diào)整之后的代碼

圖4 “設(shè)計”視圖中定義樣式修改圖像大小

圖5 “代碼”視圖中自動生成的CSS代碼

（1）運(yùn)用現(xiàn)有的技術(shù)解決：在Frontpage設(shè)計視圖下，通過“所見即所得”的操作或HTML語言代碼直接編輯修改圖像大小（如圖3）。

思考：能否將相同的格式代碼提取出來只定義一次，需要使用時直接調(diào)用？

（2）通過樣式修改圖像大小：圖4為所見即所得的“樣式”操作示意，或在網(wǎng)站各個網(wǎng)頁的相應(yīng)位置直接插入如圖5所示的代碼，并與第一種修改方法進(jìn)行對比。

小結(jié)：“樣式”是用一個指定的名字來標(biāo)識和保存的一組格式的集合。在編輯相同的格式時，使用“所見即所得”方式需對每一個元素逐個修改，而樣式只需要在定義的格式里修改一次，更加高效，代碼也更為精簡。

活動3：比較分析，掌握CSS樣式表基本語法。

“樣式”不僅應(yīng)用于圖片，也可應(yīng)用于網(wǎng)頁中的其他元素，精確地控制布局、背景、超鏈接和其他圖文效果。CSS樣式表的屬性代碼非常多，以圖片的樣式為例，與HTML比較其書寫規(guī)則的區(qū)別如表1所示。

表1 CSS代與HTML代碼的比較

小結(jié)：CSS代碼和HTML代碼，其核心語句與實現(xiàn)的功能是一致的，只是書寫的規(guī)則不同。CSS代碼在書寫時，首先要有樣式規(guī)則選擇器，如表1CSS代碼中的“img”，樣式規(guī)則放在一對{}中，屬性和屬性對應(yīng)的值之間使用冒號，不同的屬性之間使用分號進(jìn)行分隔。

設(shè)計意圖：通過兩種操作方法的對比，幫助學(xué)生認(rèn)識到樣式更加高效、代碼更為精簡的優(yōu)勢，最大程度地激發(fā)學(xué)生學(xué)習(xí)CSS的熱情；將HTML代碼與CSS代碼放在一起比較，降低理解難度，尊重學(xué)生的最近發(fā)展區(qū)，有利于學(xué)生主動學(xué)習(xí)、積極建構(gòu)。

3.理解CSS樣式表

在HTML中加入CSS樣式表并不是只有一種方法，根據(jù)CSS樣式表作用范圍的不同，可分為三種方式：外聯(lián)式、內(nèi)聯(lián)式、嵌入式。圖5所示代碼的作用范圍僅限于一個頁面，此為內(nèi)聯(lián)式樣式表。若要統(tǒng)一整個網(wǎng)站中的所有圖片大小為寬218像素、高143像素，且網(wǎng)站首頁第一張圖片的大小保持其原來的尺寸，寬為700像素、高為379像素，如何實現(xiàn)呢？

活動4：體驗外聯(lián)式、嵌入式樣式表，并觀察網(wǎng)站中圖片元素的變化。

（1）使用外聯(lián)式樣式表修改多個頁面。所謂外聯(lián)式樣式表，是把樣式定義成一個“.css”文件，然后在網(wǎng)頁中調(diào)用該文件。如圖6左側(cè)所示，先將圖片樣式用記事本定義成一個“.css”文件，再在網(wǎng)站中各個網(wǎng)頁的相應(yīng)位置逐個添加如圖6右側(cè)所示的調(diào)用外聯(lián)式樣式表的代碼，也可運(yùn)用所見即所得的操作。

圖6 外聯(lián)式樣式表代碼

圖7 嵌入式樣式表代碼

（2）使用嵌入式樣式表僅修改一個元素。在網(wǎng)站首頁第一張圖片所對應(yīng)的標(biāo)記后直接添加如圖7所示的嵌入式樣式表代碼。

活動5：比較外聯(lián)式、內(nèi)聯(lián)式、嵌入式三種樣式表。

在活動4的基礎(chǔ)上，比較總結(jié)外聯(lián)式、內(nèi)聯(lián)式、嵌入式三種樣式表的書寫規(guī)范、插入位置、作用范圍及層疊優(yōu)先順序（如表2）。

表2 三種樣式表比較

表3 個人網(wǎng)站的修改

表4 評價標(biāo)準(zhǔn)

思考：應(yīng)用CSS樣式表修改網(wǎng)站外觀有什么優(yōu)勢？

小結(jié)：①嵌入式樣式表只對一個標(biāo)簽起作用；內(nèi)聯(lián)式樣式表僅能對該頁面的指定元素進(jìn)行控制；外聯(lián)式樣式表可改變多個頁面，甚至是整個網(wǎng)站，其充分體現(xiàn)了CSS樣式表易于修改、更加高效的優(yōu)勢，所以應(yīng)用得最多。②首頁第一張圖片被三種類型的樣式表都定義過，依據(jù)其呈現(xiàn)效果，可以判斷其最終采用的嵌入式樣式表聲明類型，所以樣式表的“層疊”遵循“就近”原則，嵌入式樣式表擁有最高的優(yōu)先級。

設(shè)計意圖：理解樣式表是本節(jié)課的重點(diǎn)，三類樣式表都是對網(wǎng)站中的圖片進(jìn)行樣式的調(diào)整，這樣的選擇便于學(xué)生觀察并比較三類樣式表應(yīng)用之后的效果，對各自的應(yīng)用范圍有更直觀的認(rèn)識，同時利于學(xué)生理解樣式的“層疊”次序，為今后能根據(jù)不同的情況合理選擇并利用樣式表美化網(wǎng)頁奠定基礎(chǔ)。

4.應(yīng)用CSS樣式表解決問題

活動6：應(yīng)用CSS修改網(wǎng)站外觀。

（1）根據(jù)自己的偏好和個性特質(zhì)，列出個人網(wǎng)站要修改的內(nèi)容及對應(yīng)的選擇器與樣式規(guī)則，選擇合適的樣式表類型，完成表3。此處，教師提供部分樣式表常用屬性及對應(yīng)的值作為學(xué)生的學(xué)習(xí)資源。

（2）依據(jù)表3，在網(wǎng)站相應(yīng)位置插入相應(yīng)的樣式表代碼，觀察其效果，參照評價標(biāo)準(zhǔn)（如上頁表4）對網(wǎng)站外觀進(jìn)行評價，并根據(jù)評價結(jié)果進(jìn)一步修改完善。

圖8 《CSS樣式表》一課的思維導(dǎo)圖

設(shè)計意圖：此環(huán)節(jié)給了學(xué)生充分創(chuàng)意的空間，從獨(dú)立思考、規(guī)劃設(shè)計網(wǎng)站外觀到CSS技術(shù)支持的效果實現(xiàn)，最后對修改結(jié)果進(jìn)行評價與調(diào)整，這一過程既加深了學(xué)生對CSS的理解，又能夠讓學(xué)生在活動的過程中獲得問題解決的能力。

5.思維拓展，再識樣式

樣式不僅在網(wǎng)頁制作中出現(xiàn)，其他應(yīng)用程序中也存在樣式定義，如Photoshop中的圖層樣式，Excel中的表格樣式、單元格樣式等，使用樣式可以輕松完成以前需要很多步驟實現(xiàn)的效果。樣式還出現(xiàn)在我們的生活中，如活字印刷排版、鞋底模具設(shè)計等，為后續(xù)量產(chǎn)提供標(biāo)準(zhǔn)，省去了重復(fù)的操作，大大提高了效率。諸如此類，樣式體現(xiàn)了標(biāo)準(zhǔn)化、自動化、批處理的思想。

6.回顧總結(jié)

借助思維導(dǎo)圖（如圖8），對樣式表的概念、語法規(guī)則、分類、功能等知識進(jìn)行梳理總結(jié)。

設(shè)計意圖：借助思維導(dǎo)圖的梳理，進(jìn)一步完善學(xué)生的認(rèn)知結(jié)構(gòu)。

點(diǎn) 評

《CSS樣式表》這節(jié)課的內(nèi)容既包含抽象的陳述性知識，又包含一定的技能學(xué)習(xí)，為避免單純的知識灌輸與技能訓(xùn)練，這節(jié)課的教學(xué)在“三層架構(gòu)”核心素養(yǎng)理論的指導(dǎo)下，通過創(chuàng)建真實的問題情境，嘗試從“雙基”“問題解決”“學(xué)科思維”三個層面設(shè)計一系列學(xué)習(xí)活動，來落實信息技術(shù)學(xué)科核心素養(yǎng)。

面對修改初始網(wǎng)站mysite外觀這一真實的問題情境，學(xué)生首先要分析網(wǎng)站外觀需要調(diào)整的地方，并嘗試用已有經(jīng)驗解決問題。在嘗試的過程中，學(xué)生體驗到逐個設(shè)置相同格式的操作效率低下，從而產(chǎn)生運(yùn)用新方法解決問題的需求——樣式。在用“樣式”解決問題的過程中，創(chuàng)設(shè)了“對比分析，認(rèn)識樣式”“比較分析，掌握CSS樣式表基本語法”“體驗外聯(lián)式、嵌入式樣式表，并觀察網(wǎng)站中圖片元素的變化”“比較外聯(lián)式、內(nèi)聯(lián)式、嵌入式三種樣式表”“應(yīng)用CSS修改網(wǎng)站外觀”等一系列學(xué)習(xí)活動，帶領(lǐng)學(xué)生層層深入，習(xí)得“CSS的概念”“CSS代碼的語法規(guī)則”“外聯(lián)式、內(nèi)聯(lián)式、嵌入式三種樣式表各自的插入方法、作用范圍和適用場合”“CSS的層疊順序”等基本知識和基本技能，掌握應(yīng)用CSS精確控制網(wǎng)頁中元素的方法。這些是從“雙基”層和“問題解決”層來把握的。

在此基礎(chǔ)上，既不停留在“雙基”層的掌握，也不止步于問題解決式學(xué)習(xí)活動的層面，而是繼續(xù)引導(dǎo)學(xué)生思考應(yīng)用CSS樣式表修改網(wǎng)站外觀時有什么優(yōu)勢，發(fā)現(xiàn)CSS樣式表具有易于修改，可以多頁面應(yīng)用，更加高效等優(yōu)勢，并進(jìn)一步引導(dǎo)學(xué)生思考生活中還有哪些地方體現(xiàn)了樣式的思想，從而打開學(xué)生的視野，拓展思維的深度，最終走向思維方式的內(nèi)化，獲得與本技能點(diǎn)相應(yīng)的學(xué)科思維方式——標(biāo)準(zhǔn)化、自動化、批處理，使得學(xué)生學(xué)習(xí)的知識與技能能夠遷移到新的情境中去，走向更有意義的學(xué)習(xí)。