網頁的“服裝設計師”——《CSS樣式表》教學設計

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

網頁的“服裝設計師”——《CSS樣式表》教學設計
南京市第二十七高級中學魏勁 210001
【教材分析】
《CSS樣式表》是普通高中信息技術選修《網絡技術應用》第五章的內容，學生如能很好的掌握這部分內容，切實感受到CSS樣式表的魅力和魔力，體會CSS的神奇之處，將會進一步激發學生學習的興趣，培養他們運用信息技術的能力，發揮學生的潛能和創造能力。
【學情分析】
對于高中學生來說，網頁制作是學生非常感興趣的內容，學生已經學會了建立自已的網站，初步認識HTML基本標簽及動態網頁的相關概念，為CSS的學習做了鋪墊。
【教學模式】
采用“網絡課程教學”模式，教師提出問題后，學生共同討論、探索、實踐，教師適當地加以引導，針對不同的學生提出不同的要求，利用網絡課件實施“分層次教學”，充分開發每個學生的主觀能動性和潛能。
【教學手段】
多媒體交互式教學平臺結合多媒體網絡教學課件。
【教學目標】
知識與技能：體會CSS樣式的功能，初步認識css樣式表基本語法結構，掌握CSS應用于HTML文件的三種方法。
過程與方法：能根據學習任務，探究學習css樣式應用于HTML文件的3種方法，通過自主學習，交流探討、探究實踐的過程來實踐、加深知識的理解掌握。
情感態度和價值觀：通過在專題學習網站的學習過程中，提高學生的探究和實踐精神，產生學習用CSS樣式設計網頁的興趣和愿望，提高善于思考總結，綜合應用技能的能力。本論文由論文格式網整理,轉載請注明來源www.donglienglish.cn,更多論文,請點論文格式范文查看
【教學重點與難點】
重點： CSS應用于HTML文件的3種方法
難點：能夠根據實際的需要選擇適當的樣式表應用方式，并正確使用。
【教學過程】
教學
過程教師活動學生活動
新課
引入大家是否為自己的QQ或博客“換過皮膚”？是如何實現“換膚”的呢？在網絡世界中，要為網頁換一幅新面孔無非也只是需要一個新的樣式表而已。點擊教學課件中的“感受魅力”，激發學生的學習興趣。
教師總結引出課題。這一節課我們就通過網站添加樣式，美化網站頁面。來學習CSS樣式表的使用

學生觀看教學網站中的“感受魅力”，通過觀察網頁頁面使用CSS樣式表產生的效果,產生學習興趣和動手操作嘗試的愿望。

通過簡單實例介紹CSS基本語法

教師演示，講解知識要點。
所有H1元素顏色是紅色，背景是亮灰色
規則包含兩個關鍵的要素——選擇符，定義要給個元素添加樣式；聲明塊，定義要為選擇的元素添加什么樣式。

認真聽課，積極思考，猜出本條語句預期結果，掌握CSS的基本語法。
觀看演示，了解樣式表建立的過程，積極探索，根據教師引導，接受任務挑戰。

任務一 (1)設置H2元素顏色是白色，背景是綠色
(2)給網頁背景替換成一種亮綠色
(3)設置網頁中文本為粗體或斜體文本
想一想：仔細觀察任務完成后，網頁有什么變化？網頁中的文本有變化嗎？如沒有？應如何稍加改動？

點擊“學習任務”完成任務一
積極思考嘗試，找出答案H1{font-style:italic;}
P{font-weight:bold;}
小結
一條完整的樣式規則，必須同時包含選擇符和聲明塊。  師生共同回顧“基本語法”小結
理解CSS樣式類型中的嵌入和內聯樣式表
任務二 1、嵌入式樣式表
在每個要應用樣式的HTML的標記后寫上CSS屬性就可以了。這種方式主要用于對具體的標記作具體的調整，其作用的范圍只限于本標記。
格式為：<Tag style=”properties”>網頁內容</tag>
任務二、改變網頁中某段文本的顏色和大小
2、內聯樣式表
把樣式表放在<head></head>的中間，從而使樣式表對當前整個HTML頁面產生作用，這就是一個內聯樣式表。
其引用方式如下：
<style type=”text/css”>

</style>

相互討論，合作交流，

積極回答老師的問題。請學生講解，教師補充。
認真操作，掌握規律。學生積極去探索，嘗試，開展小組合作，同學之間互助。

任務三
理解CSS樣式類型中的外部式樣式表
3、外部樣式表
我們可以只編寫一個CSS文件，借助于引入外部樣式表來實現不同頁面的風格，并且當外部樣式表被更改時，各引用該樣式表的網頁風格也隨之發生變化，不需要手工逐個修改。
定義方法為：
在需要引用的HTML文件的<head>和</head>之間通過下面語句對base.css文件中的樣式定義進行引用。
<link rel=”stylesheet” type=”text/css” href=”base.css” media="all">
Stylesheet：指定使用一個外部樣式表
任務三：導入一個外部樣式表
<link rel="stylesheet" type="text/css" href="base.css" media="all">

打開ex02，通過完成相應的任務了解CSS樣式類型。

學習
拓展  打開網頁 ex03,ex04,ex05根據代碼提示，理解含意，對網頁自行設計修改。
通過查看css代碼，請學生分析這些樣式屬于哪種樣式？
學生操作，加樣式，改參數……
提高實踐能力，對代碼稍做修改，領會含義。
總結
評價  采用CSS技術，能有效地針對頁面的布局、字體、顏色、背景和其他效果實現更加精確的控制。只要對相應的代碼做簡單的修改，就可以改變網頁的外觀和格式。利用CSS網頁“設計師”的魔力管理美化你的網站。
切換屏幕到同學，點評同學實踐。切換屏幕到同學，點評同學實踐。  加深對CSS樣式的理解，掌握常規步驟及要點。學生上傳作業lxhtml文件夾，學生交流操作結果，自評并互評。

【教學反思】
CSS樣式表涉及到語言代碼，部分學生在學習過程會產生畏懼心理，不愿花時間理解思考，所以網站中“感受魅力”中用了大量的精美的網頁和實例給學生以視覺的沖擊力，使學生產生極大的學習熱情和積極性，通過學習任務和三種樣式相對應使學生進步步深入了解CSS樣式表，克服畏難情緒，能對樣式表有新的理解，產生學習關于樣式表的更多的知識愿望。考慮到學生的學習差異，學生可以通過使用學習網站自主探究學習，因材施教，使每位同學都能很好的完成學習任務，提高了課堂教學效率，取得良好的教學效果。

相關論文


上一篇：信息獲取的一般過程教學設計	下一篇：《字處理軟件》教學設計

Tags：網頁服裝設計師 CSS 樣式教學設計

【收藏】【返回頂部】