網(wǎng)頁神奇魔術(shù)師——CSS層疊樣式表

本論文在其他論文欄目，由論文格式網(wǎng)整理,轉(zhuǎn)載請注明來源www.donglienglish.cn,更多論文,請點論文格式范文查看

網(wǎng)頁神奇魔術(shù)師——CSS層疊樣式表
茅海莉射陽縣陳洋中學
設計思想：　　本設計遵循新課程標準的指導思想，以建構(gòu)主義理論為理論依據(jù)，以學生為主體、教師為主導，借助于多媒體網(wǎng)絡教室，充分利用網(wǎng)絡資源，關(guān)注學生的學習興趣和經(jīng)驗，不是僅僅將目標鎖定于CSS相關(guān)知識學習，而是通過更多、更深地體驗，建立了知識與技能、過程與方法、情感態(tài)度與價值觀的三維教學目標。表面上是要使學生掌握網(wǎng)頁制作中CSS相關(guān)知識，實際上是要使信息文化內(nèi)化為學生的自然意識和自然需求。整個教學過程為學生創(chuàng)造了在獲取知識的過程中親歷、體驗、感悟、提升的條件，使學生在學習理解基本的CSS技術(shù)的同時，體驗CSS樣式表的優(yōu)勢和神奇，激發(fā)學生對CSS層疊樣式表學習的興趣，真正做到了使學生在感受信息文化的同時，提升了審美意識和體驗、享受成功的樂趣，真正達到在感受中發(fā)現(xiàn)，在領(lǐng)悟中升華的美好境界。

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

學生分析：
高一年級的學生在必修課本中已經(jīng)掌握了網(wǎng)站制作的基本要領(lǐng)。但對于動態(tài)網(wǎng)頁這部分內(nèi)容比較生疏。CSS樣式表對于學生來說枯燥、無趣，學生僅有一點html知識，因此要在html的基礎(chǔ)上，讓學生理解和掌握幾類樣式表的功能、特點，需要有針對性地授課設計。

教學目標：
知識與技能：
了解什么是CSS及CSS的功能。
了解CSS樣式表的樣式規(guī)則。
(3)理解將CSS加入網(wǎng)頁的主要方式，能讀懂簡單的CSS樣式表代碼，并能根據(jù)需要選擇適當?shù)姆绞?內(nèi)聯(lián)樣式表，外部樣式表)和適當?shù)膶盈B樣式表，插入到當前網(wǎng)頁的HTML代碼中。
過程與方法：
(1)通過學習理解將CSS加入網(wǎng)頁的主要方式，能根據(jù)需要，選擇適當?shù)姆绞?內(nèi)聯(lián)樣式表，外部樣式表)和適當?shù)膶盈B樣式表，插入到當前網(wǎng)頁的HTML代碼中。
(2)通過“魔術(shù)表演”，體驗CSS樣式表的優(yōu)勢和神奇，并通過實例學習理解基本的CSS技術(shù)(如：改變文字樣式、改變鏈接樣式等)
情感態(tài)度與價值觀：本論文由論文格式網(wǎng)整理,轉(zhuǎn)載請注明來源www.donglienglish.cn,更多論文,請點論文格式范文查看
(1)用切合實際的展示、親歷等方式，激發(fā)學生對CSS層疊樣式表學習的興趣，為新的學習打下基礎(chǔ)。
(2)通過CSS層疊樣式表學習與簡單使用操作，提高學生的信息技術(shù)能力和信息素養(yǎng)，提升學生審美意識和體驗、享受成功的樂趣。

教學重點、難點
(1)理解將CSS加入網(wǎng)頁的主要方式。
(2)根據(jù)需要，選擇適當?shù)姆绞?內(nèi)聯(lián)樣式表，外部樣式表)和適當?shù)膶盈B樣式表，插入到當前網(wǎng)頁的HTML代碼中。

教學方法：作品展示法、演示法、分層教學法、自主學習探究法等多種教學法。

教學環(huán)境、教學手段：多媒體網(wǎng)絡教學、導學課件、極域廣播系統(tǒng)。

教學過程設計：
設計思路：創(chuàng)設情景，導入新課、嘗試學習，實踐與探究、學習過程評價(作品展示)，教學拓展，合作交流(協(xié)作學習)，總結(jié)性評價(鞏固練習)，總結(jié)反思。

教學過程：
教師活動學生活動教學意圖
一、【魔術(shù)表演】
師：“同學們，春晚中劉謙的魔術(shù)給大家?guī)砹艘唤z震撼，眼下魔術(shù)非常流行，我們中的不少同學對此也特別著迷，今天我們的課程就從魔術(shù)開始，我也給大家變一個魔術(shù)，露一手”。
教師屏幕廣播，展示網(wǎng)站——加工前主頁.htm
|
教師關(guān)閉屏幕廣播，快速css文件鏈接語句插入
|
請一個學生上講臺，單擊瀏覽器中的“刷新”按鈕
|
網(wǎng)站“大變身” ，學生驚呼
|
魔術(shù)結(jié)束，學生小聲討論



觀看魔術(shù)變化前后網(wǎng)站的變化。








利用魔術(shù)展開情境教學，吸引學生興趣，激發(fā)學習熱情。

魔術(shù)前頁面效果魔術(shù)后頁面效果
請同學比較討論

二、【揭示魔術(shù)真相】
師：“剛才我們表演了一個‘網(wǎng)站大變身’的魔術(shù)，同學們一定很想知道這個魔術(shù)的秘密，今天就要教會大家這個魔術(shù)。魔術(shù)之前，我們先來熱身”。
魔術(shù)前熱身：給學生提供變魔術(shù)的兩個“道具”，兩個網(wǎng)頁，先請學生對這兩個網(wǎng)頁進行簡單評價，找出需要修改的地方。


網(wǎng)頁1：加工前主頁.htm 網(wǎng)頁2：加工前煙雨紅塵心情日記1.htm

讓學生利用已有的網(wǎng)站制作的知識，分別對這兩個網(wǎng)站進行加工修改。（修改所有的文字格式）
分兩組分別對兩個網(wǎng)頁進行修改
（教師巡視指導）

屏幕轉(zhuǎn)播某學生操作過程：逐一修改文字，從而產(chǎn)生重復勞動，效率低。有沒有簡單的方法呢？教師由此引入CSS內(nèi)聯(lián)樣式表的功能及使用方法
（教師演示，插入內(nèi)聯(lián)樣式表）
<head>
<style type=”text/css”>……
</style>
</head>




學生找出網(wǎng)站中需要修改的地方。


學生利用已有知識對網(wǎng)站進行修改。





觀看教師的操作過程






為CSS樣式表內(nèi)容做鋪墊。




這是一個讓學生 “碰壁”的過程，從中產(chǎn)生需求——尋找解決問題的新方法。


學生此時僅是“依葫蘆畫瓢”的學習過程，是一種對樣式表的體驗過程。


          師：比較一下剛才兩個網(wǎng)頁？
          生：樣式基本上差不多，在每一個網(wǎng)頁中插入代碼。
          （學生插入內(nèi)聯(lián)樣式表）
          師：這樣效率高嗎？
          生：……

師：每一個網(wǎng)頁都插入內(nèi)聯(lián)樣式表，會造成工作繁瑣，語句重復，導致運行速度減慢。怎么辦？
舉例：給大家出一道數(shù)學題
師：ab+ac+ad=？
生：a(b+c+d)
師：什么方法？
生：提取公因式

（板書）由數(shù)學中的“提取公因式”引出：
一樣的道理，此時可以編寫一個CSS文件，借助外部樣式表來實現(xiàn)不同頁面的風格。這樣可以減少代碼，提高網(wǎng)站運行速度，這就是外聯(lián)樣式表。

操作方法：
教師演示，插入外聯(lián)式
大家想一下：如果只有在一個地方使用這種樣式，還需要我們剛才講的兩種方法嗎？
學生思考得出結(jié)論：不需要，直接寫代碼就行了，這就是第3種方法嵌入式。
舉例：教師演示


學生利用所體驗到的樣式表的知識，重新對兩個網(wǎng)站進行整改。

引出第三種方式嵌入式
使學生產(chǎn)生認知沖突


找到了數(shù)學中“提取公因式”這一知識點，成為講解外聯(lián)樣式表的突破口。讓學生自然的接受了外聯(lián)樣式表。
三、【你來試試】
教師發(fā)送網(wǎng)站“mysite”。
  學生自我操作，實現(xiàn)剛才所講的內(nèi)容。(style.css是改變文字樣式)

如果想修改網(wǎng)頁背景，將如何操作？（隨便使用今天講的哪種方式.背景.css是改變網(wǎng)頁背景代碼）
根據(jù)所學知識，靈活選擇樣式表，將網(wǎng)站成功美化。

學生演示

讓學生不僅僅“依葫蘆畫瓢”，還要活學活用。


通過學生的講解帶領(lǐng)全班同學對樣式表進行鞏固。

四、【魔術(shù)課總結(jié)】
（板書總結(jié)）
（板書討論）CSS定義
（學生）說出三類樣式表的名稱、作用范圍和使用方法。
（教師）加上線條，順利完成板書表格：

學生總結(jié)
對樣式表的概念、功能、分類等知識再梳理。


五、【魔術(shù)師考級】
分層次：沒有完成網(wǎng)站美化任務的同學繼續(xù)完成，完成好的同學進行魔術(shù)師考核，檢驗自己的學習效果。
填寫表格
嵌入式內(nèi)聯(lián)式外聯(lián)式
什么時候用比較好
如何操作


分層次
完成任務

通過自我考核，讓學生對自己的學習效果進行檢驗。
  教學反思：
CSS層疊樣式表這部分內(nèi)容本來比較枯燥乏味，教師講解起來有一定的難度，如何把這三種樣式表的概念、特點和功能說清楚是至關(guān)重要的。因此需要創(chuàng)設一定的情境教學，讓學生更容易接受。全文共分五個部分：【魔術(shù)表演】【揭示魔術(shù)真相】【你來試試】【魔術(shù)課總結(jié)】【魔術(shù)師考級】。
課堂導入利用時下比較流行的劉謙魔術(shù)作為開場，激發(fā)學生興趣，這樣能很好地把學生吸引過來。讓學生利用已有知識修改網(wǎng)頁，讓學生在這樣的“重復勞動”中產(chǎn)生認知沖突，這樣的做法對不對？適不適合？從而產(chǎn)生需求——尋找找到解決問題的新方法。這樣引人方法讓學生更能接受。
本節(jié)課，整體效果不錯，學生們基本上都能夠順利完成教學目標。課堂氣氛也比較活躍。

參考文獻：教育科學出版社《網(wǎng)絡技術(shù)應用》
          網(wǎng)絡資源

相關(guān)論文


上一篇：“大問題”串起“小知識”——《..	下一篇：不可能完成的任務——《信息獲取..

Tags：網(wǎng)頁神奇魔術(shù)師 CSS 樣式

【收藏】【返回頂部】