活學活用如何快速美化網頁

2018-02-24 05:34:34于敏

中學課程輔導·教學研究 2018年36期

于敏

摘要：一個雜亂無序的網頁讓人枯燥乏味，而一個美觀大方的網頁則讓人流連忘返。擁有簡約的頁面及高訪問量的網站是每個網頁設計者的追求。對于中學生而言，要有這樣的網頁制作功底，就必須掌握真正的技術。它能對頁面的布局、字體、顏色、背景和其他圖文效果的實現提供更加精確的控制，這就是CSS。本文的主題就是要從學生的認知水平出發，重組層疊樣式表的教學內容，讓學生能通過自主探索學習的方法掌握這門技術。

關鍵詞：美化網頁;CSS;信息技術

中圖分類號：G632.0? ?文獻標識碼：A? ?文章編號：1992-7711（2018）12-0103

一、教學目標

1. 知識與技能

通過網頁的比較演示、讓學生會分析使用CSS樣式表的優勢;并能敘述出CSS樣式表的概念。要求學生掌握運用CSS進行樣式設置的方法和格式，并能夠歸納出如何實現在HTML中加入CSS的三種方法。學生能舉例說明CSS樣式表的一小段代碼，并能嘗試編寫類似的新的CSS代碼。

2. 過程與方法

在活動中指導學生學會利用各種學習資源，自主探究出CSS樣式表的三種應用方法。學生通過讀書指導法式的學習，逐步掌握CSS代碼，提高他們讀、寫、編代碼的能力。學生在問題情境下學會主動探索，提高問題解決的遷移能力，掌握CSS樣式表對網頁美化的一般過程與方法。

3. 情感、態度與價值觀

通過學生的自主探究、獨立思考、自主完成CSS樣式表的編輯任務，能將經驗活學活用到今后的主題網站設計中。通過學習運用CSS樣式表優化網頁制作，讓學生正確學習、合理運用技術，了解技術服務于內容的原則。

通過網頁的美化任務，在活動中潛移默化地培養學生發現美、創造美的能力，提高學生的綜合素質。

二、教學重、難點

教學重點：CSS樣式表的基本語法結構。知道CSS加入HTML中的三種方式，能說出三種方式的使用環境。

教學難點：讀懂CSS樣式表中的具體代碼的含義。CSS樣式表三種加入方式同時使用在一個網頁中的層疊關系即優先級。

三、教學過程

1. 創設問題情境、主動探索

師：我們都是“金陵人”，我為自己是金陵人而自豪。自古至今，有很多文人都通過優美的文筆抒發了自己對金陵的熱愛。你能說出哪些呢？

學生在教師的引導下多多少少都能背出一些名詩名句，教師將課前收集整理到的詩歌都放到網頁中。取名“詩詞話金陵”。學生欣賞優美的詩句，都覺得很美。那網頁美不美？教師展示的是網頁的初始狀態：一些詩詞、圖片、景點介紹文字堆砌在頁面。這樣并不美觀，教師可以讓學生幾分鐘時間來修飾一下。然后，教師通過瞬間變魔術式的給出網頁的終極目標：經過CSS樣式表美化的網頁。

學生也完成“詩詞話金陵”網頁的編輯，但是時間略長，強烈的神秘感讓他們很想知道教師是如何瞬間完成的，也很愿意學會這套本領。學生的注意力被充分吸引過來，教師緊接著拋出幾個問題，讓學生積極思考并回答。（1）進過對比，哪個網頁更精美？又是如何實現的？（2）網頁中的各個對象在進行編輯時采用了什么方法？（3）教師的瞬間美化網頁，你看到并想到了什么？（4）你覺得用CSS樣式表美化網頁的優勢是什么？在課堂上，不僅教師的提問層層深入，而且在活動中也一直努力創設民主氛圍，適時對話、從而實現指導并啟發學生。

2. 教師講授層疊樣式表的知識點，并采用范例教學法，讓學生思考

師：講解CSS樣式表的定義及功能、分析CSS樣式表的基本語法。以“設計百度LOGO”為例子，簡單示范如何在網頁中使用CSS并解讀它的基本語法。

下圖為范例中的CSS代碼：

這段在<head> </head>標簽中的CSS代碼設計好后，還需要在<body> </body>區的需要設置樣式的文字前后加上<p> </p>，<span> </span>標簽。例子如下：

通過教師的范例教學，學生看到了經過CSS樣式表的修飾完成了百度LOGO的制作。

教師的知識點剖析加上優秀例子的示范，強烈激發了學生的學習熱情，個個都很活躍地想要看看自己能否也完成一個優秀的作品。同時，教師在演示完這個實例后，又拋出一個問題讓學生思考。在HTML中加入CSS的常用方法有哪些？本實例中是屬于哪種方式。學生帶著問題有目標的進入課堂的下一個環節。

3. 情境任務實現，學生根據學習任務和材料自主學習完成

下面是學生實踐過程，按要求依次完成下面的各個小任務。（1）為標題是“詩歌話金陵”的網頁中的五首詩歌全部設置相同的文字效果、并為網頁添加背景。該任務的代碼在css1.txt記事本中。（2）深層任務，只需要將五首詩歌的標題重新進行設置，具體代碼在css2.txt記事本中。（3）將所有屬于金陵景點介紹的網頁都加上相同效果的修飾，采用css3.txt記事本中的代碼。第三個任務中，要求采用的方法是最便捷的，并且該方法能夠精簡網頁代碼，減少網頁在瀏覽器中加載代碼的時間。

學生獨立思考、自主學習完成這三個小任務。當然，學生在實踐中也是需要參考教師提供的學習資料。其中每個任務的重難點都用微視頻進行分析，能力強的學生直接看文字和操作提示就能完成，能力弱的學生可以看微視頻來自學完成。

學生在情境任務完成過程中不僅僅是完成具體操作，還需要思考每個任務的本質目標是什么。教師在任務中也準備了一些問題，采用競賽制加獎品的方法激勵學生回答。（1）三個任務中分別采用的是什么方式將CSS加入HTML中。（2）每種樣式表的特點是什么？（3）CSS樣式表中如何體現“層疊”思想。

4. 任務展示、總結提升

課程進入這個環節時間已經過去一大半了，在任務展示中，筆者精選了3名學生的作品進行比較。3名學生在展示自己的作品過程中，口述自己本節課學到的知識點。教師應要求3名學生在講述過程中不能重復前面學生說到的知識，所以第3位學生在回答過程中有點困難。教師也給予一定提示，最后教師用思維導圖的形式梳理了本節課CSS的知識點，再次標注了重難點。

也許這節課將要結束，但是對于CSS的學習其實才是剛剛開始。所以教師又講解了關于CSS的代碼知識，讓學生會修改CSS代碼，按照自己的喜好設計網頁。教師主要給出四個拓展任務，學生閱讀教學資料至少選擇一樣完成即可。（1）運用CSS控制鼠標樣式變換，需要使用的關鍵代碼段“style=cursor：值”。（2）網頁中大標題字體設置。主要用到的CSS文字屬性如下：font-family字體、font-size字號、font-style字體風格、font-weight加粗字體、color字體顏色。（3）網頁中邊框的設置。主要邊框屬性：border-style邊框樣式、border-color字體顏色、border-width邊框線寬。（4）CSS樣式表控制超鏈接的顏色。

A：link{text-decoration： none;color：blue}是說明了超鏈接還沒有被訪問，它沒有下劃線，顏色為藍色。

A：visited{color：red;text-decoration：line-through}說明了超鏈接被訪問后，它的顏色變成了紅色，有了一條刪除線。

A：active{color：white;text-decoration：underline}說明超鏈接處于活動狀態的時候，它的顏色變成了白色，有了下劃線。

A：hover{text-decoration：none;color：#FF0000;background-color：black}說明鼠標移動到超鏈接后，它沒有下劃線，文字顏色變成了黃色，背景顏色是黑色。

根據這些解釋，學生可以把超鏈接在各種狀態下的顯示顏色修改成自己喜歡的那種，以便能更好地展示自己的個性。

5. 多樣評價與課堂反饋

學生的能力是參差不齊的，能力弱的只能做完基礎任務、能力強的已經能完成總結后的2個拓展任務并且意猶未盡，還想課后繼續學習下去。教師給學生設計了評價表，分別從課堂任務的達成率以及本節課的教學目標的三個維度來給他們自己打分，采用ABC等級制進行選擇。最后通過這些等級看出自己哪些能力還需要課后進一步加強。

在課堂反饋過程中，教師最后也對學生的完成情況及課堂搶答情況進行了點評，并把CSS代碼的詳細知識放到本年級360云盤中，鼓勵學生課后能自由選擇進行深入學習，教師也會在課后進行持續關注。

四、教學反思

信息技術作為開放型課堂，應該是注重活動體驗與能力培養的課堂。培養學生的能力就是要求學生能根據問題要求，分析問題，提出解決問題的方案，根據方案內容運用技術手段解決問題，以讓學生在課堂上學會閱讀、并能通過搜索辨別出正確的方法。

本文在課堂教學中采用了多種教學方法相結合，為了就是提高課堂學生的達成率。教師在課堂中主要采用拋錨式教學策略，即“基于問題的教學”，這樣利于學生以技術學基礎的學習。首先，教師創設了“金陵之美”的情境、確定問題讓學生自由對話、指導啟發、然后再讓學生自主學習，最后進行效果評價。在課堂問題引出之后，學生不能很快理解CSS理論知識和操作要領，教師就先采用了講授教學法。在講解過程中，用生動幽默的語言來敘述和描繪所講知識，從而保持學生的注意力。緊接著用范例教學法，選用學生感興趣的百度LOGO作為精選范例，進一步激發學生的學習欲望與動機。

學生在獨立完成各個任務的過程中，課堂就完全由學生掌控，他們是學習的主體，教師只是在一旁啟發指導。當然，學生在活動中首先確定學習任務，其次閱讀相關教材及教師提供的課堂資源，然后再進行師生之間、生生之間的問題討論與交流。這種類似讀書指導法的教學，就是要培養學生的自學能力，在閱讀學習資料的過程中逐步學會抓住中心和思路。學生也能根據自己的實際能力選擇采用文字樣張提示、或具體操作提示、或微視頻提示來完成自己的學習目標。

學生自主學習后的歸納也顯得尤其重要，教師在學生訓練后，通過問題啟發學生思考、讓學生能將歸納的知識真正變成自己的經驗，從而提高他們的綜合運用能力。

筆者在課堂提問環節和拓展任務活動中都采用了競賽式，優先回答的學生和完成拓展任務的學生都有獎品發放。從物質上刺激學生主動學習，并能全身心投入到學習中，盡自己最大的努力完成所有任務。他們雖然在課上并不能全部完成但是他們已經有了這種意愿就能促使他更進一步學習。學生在一次又一次的操練中，提高了自己快速美化網頁的能力。持續性的學習也讓他們對CSS樣式表進行活學活用。

（作者單位：江蘇省南京市行知實驗中學 210000）