《CSS層疊樣式表》教學設計——認識CSS

本論文在其他論文欄目，由論文格式網整理,轉載請注明來源m.donglienglish.cn,更多論文,請點論文格式范文查看

《CSS層疊樣式表》教學設計
——認識CSS

高淳縣湖濱高級中學芮菊芳
一、教學分析
(一)教材分析
CSS層疊樣式表內容屬于網絡選修模塊中的難點。學生沒有實際應用過，甚至從來沒有接觸過相關知識點。由于這部分內容較難，我們主要以引入介紹為主，應用操作為輔，拓寬學生對程序代碼的認識，激發學生的開發意識和開發興趣。

(二)教學對象分析
學習者的認知特點：在教師引導下有一定的創新探究能力。
學生已有知識經驗及能力水平：學生熟悉所見及所得的網頁制作軟件（Frontpage2000），了解HTML的概念。絕大多數同學能熟練操作鼠標和鍵盤。
對教學內容的了解程度：幾乎是沒有接觸過樣式表相關知識，對于學生來說是新鮮有吸引力的。

(三)教學重點、難點
教學重點：內聯式CSS樣式表的含義
教學難點：內聯式CSS樣式的應用
本課以文字應用為例，重點講解內聯式CSS樣式表的應用，以內聯式顯示CSS樣式表在網頁布局中的作用，對于理解外聯式樣式表以及樣式表在網頁排版布局上的更廣泛應用具有基礎意義。本論文由論文格式網整理,轉載請注明來源m.donglienglish.cn,更多論文,請點論文格式范文查看

二、教學目標
1、教學目標
知識與技能：（1）了解CSS層疊樣式表的基本概念及分類。
（2）掌握CSS在文字格式方面的簡單應用。
過程與方法：（1）嘗試使用網頁代碼優化自己的網頁，能夠合作或獨立完成特效應用。
（2）在探究問題的過程中發散思維，拓展想象空間，培養創新意識。
情感態度與價值觀：（1）學會科學分析信息材料，并利用合理的信息表達方式來表達、傳遞信息。
（2）學會客觀地評價自己與他人的作品，養成辯證的信息評價與認識觀。

三、教學策略設計
（1）教學方法設計
本課是一節理論與實踐相結合的課程，理論方面對于學生比較陌生，教師的講解必不可少。整節課采取教師引導，學生合作探究的教學模式，在解決任務過程中理解知識。由于學生在CSS的實際應用方面接觸過少，且理論相對枯燥，所以教師要進行有效引導，由淺入深，從文字格式入手，與以前學過的HTML代碼作比較，先培養感性認識，再層層深入，介紹css的其它應用。
教學方法：演示講解法、任務驅動法、小組合作法，分層指導法

（2）學生上機操作安排和教師應用信息技術的情況
本課在多媒體教學機房中進行，教師機配有廣播監控軟件。
學生安排三個活動，完成教師布置的相關任務。
活動一：分析兩組網頁，形成對網頁風格的認識；
活動二：模仿教師講解，按要求修改代碼；
活動三：根據所學知識，小組合作，自主探究，完成對poem.htm的代碼設置。
說明：教師巡視指導的時候要注意學生層次，有的學生理解了教師的講解，但是輸入過程中出現了失誤；有的學生片面模仿教師的操作，沒有真正理解，在拓展任務中遇到了困難。教師的指導和小組成員的協作相結合，幫助后進生完成任務，反過來促進知識點的融會貫通。

5、教學評價：
本節課評價采用教師點評和學生互評，以能完成教師布置任務為主，突出代碼設置的準確性。

三、教與學的實際過程描述
教學階段及所用時間教師活動學生活動對學生學習過程的觀察和考查
創設情境
問題引入
5分鐘 1、兩組網頁演示，以訪問者的姿態作出比較
第一組風格統一和諧
第二組色彩布局混亂
2、引入到樣式的概念范疇 1、學生觀察
作出比較
2、在教師引導下認識到網站風格和諧的重要性學生很快就能進入狀態，分析兩組網頁在感觀上的不同

新授課

15分鐘
簡述CSS在網頁制作中的作用
類比WORD中“格式”菜單中的“樣式項”。初步了解CSS的概念和作用對CSS的認識仍不清晰，停留在對字面意思的理解。
詳解CSS的分類應用（以定義文字為主）
嵌入式樣式表
舉例說明：
如：規定一個<table>標簽中的文字為紅色，字體大小為10pt；
代碼的書寫形式：
<table style="color:red;font-size:10pt">
與HTML代碼中定義文字字體相比較

2、說明：作用范圍只限于本標簽，沒有充分體現CSS樣式表的優越性，應用較少學生比較嵌入式CSS代碼與普通HTML代碼的區別
得出結論：
CSS嵌入式的優勢不明顯，并沒有顯著的簡化作用知道嵌入式代碼的應用方法，還不能認識到CSS的優勢
內聯式樣式表：
把樣式表規則放在<head>和</head>的中間，從而使樣式表對整個當前HTML頁面產生作用。
<style type=”text/css”>
<!- -
樣式表CSS的內容
- ->
</style>
舉例解釋說明
在CSS代碼中，定義一個名稱為“S3”的樣式。
操作步驟：
（1）、啟動Frontpage，切換到HTML視圖，
在<head>和</head>中插入下面的代碼：
<style type=“text/css”>
<!- -
S3{
   font-family：”宋體”；
   font-size：9pt；
   color：green；
   font-style：italic；
   }
- ->
</style>
（2）、在<body>和</body>中插入下面的代碼：
<S3>歡迎進入信息技術世界!</S3>
（3）、預覽查看
重點解釋代碼格式：<！--
                   -- >的意義
           樣式表名稱S3可任意指定 1、學生了解內聯式的應用范圍
2、學習代碼格式，理解代碼含義理解了代碼段內部的含義，能模仿教師進行代碼定義和應用
操作過程中代碼及符號輸入錯誤頻頻出現
布置任務20分鐘 1、將教師講解的上述例子作修改，字體大小改為14pt，顏色改為紅色（red）,將字體改為“楷體”，看看效果。
拓展題，小組合作完成。
打開網頁素材 poem.htm，按照要求把下面這首詩的字體格式作修改：
《明日歌》
明日復明日，(宋體、12pt、#0000ff)
明日何其多。(楷體、12pt、red)
我生待明日，(華文行楷、13pt、#800000)
萬事成蹉跎。（同第一句）
世人苦被明日累，（同第二句）
春去秋來老將至。（同第三句）
朝看水東流，    （同第一句）
暮看日西墜。    （同第二句）
百年明日能幾何？（同第三句）
請君聽我明日歌! （同第一句） 1、學生修改CSS代碼
2、學生在理解的基礎上嘗試運用理論解決實際問題第一項任務完成較容易，這是下面拓展任務的基礎
第二項任務學生先討論確定方法，然后才能嘗試完成，需要教師指導
總結評價
5分鐘 1、教師對學生活動中出現的典型問題作點評
2、從文字應用方面推而廣之
舉例說明：
查看網站首頁的源代碼，分析其CSS的應用
分析作課堂引入時用的第一組網頁的CSS代碼。
3、引入到外聯式代碼應用（下一課）學生認識CSS的其他應用，激發進一步探究學習的意愿
初步了解CSS的外聯式代碼了解了CSS的更廣泛的應用，同時也增加了對這一知識點難度的認識。
期待更多的素材來幫助認識CSS。

關鍵環節
（1）內聯式代碼舉例說明時，格式規范的解釋
這一環節體現出對代碼的初步理解，如果認識不清，在完成教師布置任務時出現諸多問題：有些中英文符號不分，有些定義樣式表名稱時延用“S3”名稱，認為是固定不變的等。
（2）指導完成任務《明日歌》
能根據任務設定正確的方法的，首先掌握了文字格式樣式的定義方法
通過反復調用定義的樣式表，進一步理解樣式在控制網頁布局方面的作用

四、教學反思
作為現階段農村高級中學的學生，由于小學初中的信息技術課程開設還不完善，日常生活中又缺少相關的實踐活動，因此信息素養普遍不高。在教學內容上，教師必須從最淺近的講起，引起學生的關注，耐心引導他們理解和應用，不能過于求精。
教師在流動輔導中，對于有些學生在輸入方面的容易錯誤要提前提示，及時指導改正，否則會因為錯字母而導致內容已理解，任務卻不能在有效時間內完成。

相關論文


上一篇：電腦的管家——有效管理我的計算機	下一篇：《因特網上的福爾摩斯——搜索引..

Tags：CSS 樣式教學設計認識

【收藏】【返回頂部】

日韩一区国产在线观看_亚洲999一在线观看www_久久欧美在线电影_97人人做人人人难人人做_欧美黄色成人网_91超碰在线免费观看_欧美在线xxx_国产有码在线一区二区视频_精品国产一区二区三_久久久久久久久久久av

《CSS層疊樣式表》教學設計——認識CSS