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

網(wǎng)頁的“服裝設(shè)計師”——《CSS樣式表》教學(xué)設(shè)計

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

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

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

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

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

認(rèn)真聽課，積極思考，猜出本條語句預(yù)期結(jié)果，掌握CSS的基本語法。
觀看演示，了解樣式表建立的過程，積極探索，根據(jù)教師引導(dǎo)，接受任務(wù)挑戰(zhàn)。

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

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

</style>

相互討論，合作交流，

積極回答老師的問題。請學(xué)生講解，教師補(bǔ)充。
認(rèn)真操作，掌握規(guī)律。學(xué)生積極去探索，嘗試，開展小組合作，同學(xué)之間互助。

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

打開ex02，通過完成相應(yīng)的任務(wù)了解CSS樣式類型。

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

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

相關(guān)論文


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

Tags：網(wǎng)頁服裝設(shè)計師 CSS 樣式教學(xué)設(shè)計

【收藏】【返回頂部】