第一篇：電子教案-CSS層疊樣式表
CSS層疊樣式表
學習目標：
1.了解樣式表的概念
2.掌握樣式表的分類及編寫規則的語法 3.掌握CSS樣式表的使用 要點導航：
1.樣式表簡介 2.樣式表的規則 3.樣式表中的屬性 4.樣式表的引用 案例 帶樣式表的網頁
步驟1：通過依次單擊任務欄上的【開始】→【程序】→【附件】→【記事本】菜單命令打開記事本。
步驟2：在記事本的編輯面板中輸入如下代碼代碼，創建了使用樣式的頁面css1.html
這段文字將顯示為紅色
這段文字的背景色為黃色
這段文字將以黑體顯示
今天學習樣式表的相關知識。
第二篇：CSS樣式表學習從門到精通
CSS樣式表學習從門到精通
第1講 CSS簡介
CSS是Cascading Style Sheets（層疊樣式表單）的簡稱。不過大家都把它稱作樣式表，它是一種設計網頁樣式的工具。借助CSS的強大功能，網頁將在您豐富的想象力下千變萬化。
看到上面的兩幅圖片，您可能會認為這是用photoshop或者是其他圖形處理軟件制作的吧。可是上面的例子卻完全是用CSS編寫的。我們來看一下它的源代碼（仔細看就很簡單）：
＜html＞
＜head＞
＜title＞css word＜/title＞
＜style＞//*CSS樣式定義開始*//
＜!--
div
{width：200;filter
blur(add=true,direction=135,strengh=20);
} //*定義DIV范圍內的樣式，包括寬度(width)、模糊濾鏡屬性(blur)*//
--＞
＜/style＞//*樣式定義結束*//
＜/head＞
＜body＞
＜div＞//*以下的區域內采用＜head＞中＜style＞里面定義的格式*//
＜p style=“font-size：48;font-style：bold;
color:red;”＞hongen ＜/p＞
//*定義字體樣式(font-style)，包括字體大小(size)、粗細(bold)、顏色
(color)*//
＜/div＞
＜/body＞
＜/html＞
上面的代碼中以紅色顯示的是注釋部分，用于幫助您更好的理解代碼的含義。上面的這一段代碼產生的是如圖2的效果。而其中字體的模糊效果就是運用了CSS的濾鏡功能。濾鏡功能是CSS非常有趣也非常吸引人的一個功能，我們將在后面的章節中介紹。
實際上CSS的代碼都是由一些最基本的語句構成的。它的基本語句的結構是這樣的：
選擇符{屬性：屬性值}
看，是不是很簡單，只有三部分。
我們結合上面的代碼來講解，比如上面代碼的＜head＞…＜/head＞中，使用＜style＞來指定樣式。
一般說來，＜style＞下面的CSS語句是以注釋語句的形式書寫的，也就是上面代碼中的＜!--…--＞符號包含的部分。所以，上面的例子中定義頁面樣式的語句是：
div{width：200;filter：blur(add=true,direction=35,strengh=20);}
在上面的語句中，DIV是選擇符，選擇符可以是HTML中任何的標識符，比如P、DIV、IMG甚至BODY都可以作為選擇符。
這里用DIV做選擇符，就是說在HTML中，編輯在＜DIV＞中的頁面格式將以上面語句中大括號內定義的格式顯示。
括號內的WIDTH和FILTER就是屬性。
WIDTH定義了DIV區域內的頁面的寬度，200是屬性值。
FILTER定義了濾鏡屬性，BLUR是它的屬性值，該屬性值產生的是一種模糊效果，其小括號內定義的是BLUR屬性值的一些參數。
ADD參數有兩個值：True和False。分別指定圖片是否被設置成模糊效果。
Direction參數是用來設置模糊的方向。0度代表垂直向上，然后每45度一個單位，例子中的135代表底部向右135度，每一個度數單位都代表一個模糊方向，如果您感興趣的話，可以參照后面的講解中詳細的參數設定。
Strengh代表有多少像素的寬度將受到模糊影響，參數值是用整數來設置的。
我們看到除了在＜HEAD＞中有CSS 的定義，在＜BODY＞中也有一段CSS定義：
＜p style=“font-size：48;font-style：bold;color：red;”＞hongen＜/p＞
這里Style是內嵌到＜P＞中來定義該段落內的格式的。我們發現在＜BODY＞中的CSS語句與定義在＜HEAD＞中還有些不同，它是用＜ STYLE = ＞直接定義的。這種定義方法非常適用于編寫的代碼比較多的情況。
而上面的代碼的CSS定義格式則非常適用于代碼較少、結構較簡單的情況。
按照CSS語句的基本格式，我們可以看出上面定義P段落內的CSS代碼中font-size、font-style和color是屬性，分別定義＜P＞中“hongen”字體的大小(size)、樣式(style)和顏色(color)；
而
48、bold、red是屬性值。意思是“hongen”將以48pt、粗體、紅色的樣式顯示。由于整個段落是定義在＜DIV＞中的，所以hongen又將顯示出＜head＞中定義的濾鏡屬性來。最終的結果就如同圖2一樣。
圖1中的效果也是用很簡單的CSS語句實現的，只是運用了CSS中的濾鏡屬性而已。
通過上面的講解，我們可以看到用很簡單的CSS語句就可以實現許多需要專業軟件才可以達到的效果。利用屬性可以設置字體、顏色、背景等頁面格式；利用定位可以使頁面布局更加規范、好看；利用濾鏡可以使頁面產生多媒體效果。怎么樣，CSS的功能是不是很強大，在下面的教程中我們將對它進行詳細的講解。
從上面的例子中，我們可以看到CSS的語句是內嵌在HTML文檔內的。所以，編寫CSS的方法和編寫HTML文檔的方法是一樣的。
您可以用任何一種文本編輯工具來編寫。比如Windows下的記事本和寫字板、專門的HTML文本編輯工具（Frontpage、Ultraedit等），都可以用來編輯CSS文檔。
那么您可能會問，獨立編輯好的CSS文檔怎樣加入到HTML文檔中呢？其實在第一章中的例子里已經介紹了兩種方法。
一種是把CSS文檔放到＜head＞文檔中：
＜style type=“text/css”＞ …… ＜/style＞
其中＜style＞中的“type=?text/css?”的意思是＜style＞中的代碼是定義樣式表單的。
另一種方法是把CSS樣式表寫在HTML的行內，比如下面的代碼：
＜p style=“font-size：14pt；color：blue”＞藍色14號文字＜/p＞
這是采用＜Style=“ ”＞的格式把樣式寫在html中的任意行內，這樣比較方便靈活。
還有一種方法是：把您編輯好的CSS文檔保存成“.CSS”文件，然后在＜head＞中定義。定義的格式是這樣的：
＜head＞ ＜link rel=stylesheet href=“style.css”＞ …… ＜/head＞
我們看到這里應用了一個＜Link＞，“rel=stylesheet”指連接的元素是一個樣式表（stylesheet）文檔。一般這里是不需要您改動的。
而后面的“href=?style.css?”指的是需要連接的文件地址。您只需把編輯好的“.CSS”文件的詳細路徑名寫進去就可以了。這種方法非常適宜同時定義多個文檔。它能使多個文檔同時使用相同的樣式，從而減少了大量的冗余代碼。
本章主要介紹了編寫CSS的方法以及如何把作好的CSS文檔與HTML結合起來運用。您可以根據自己編寫的HTML代碼的結構、長度來選擇用哪一種方法將CSS與之結合。
下一章我們將進入CSS的具體知識的學習，我們將先從最基本的屬性開始講起。
第2章 CSS屬性
從CSS的基本語句就可以看出，屬性是CSS非常重要的部分。熟練掌握了CSS的各種屬性將會是您編輯頁面更加得心應手。下面我們就借助一些實例來講解。‘
1、字體屬性
這是最基本的屬性，您經常都會用到。它主要包括以下這些屬性：
光看表格是不是有些難懂，不要緊，我們來看一個用表格中的屬性定義的字體樣式（如下圖）：
第一行只是采用了“font-family”屬性，代碼是這樣的：
＜p style=“font-family：lucida console”＞hongen＜/p＞
這行代碼定義了“hongen”將以“lucida console”的字體顯示；
第二行font-family為默認值，而是定義了“font-style”屬性為“italic”斜體，代碼如下：
＜p style=“font-style：italic”＞hongen＜/p＞
第三行font-family為默認值，font-style為“oblique”，另外還定義了“font-weight”屬性為“bold”，“font-size”屬性為24pt（缺省情況下為absolute size絕對大小）代碼如下：
＜p style=“font-style：oblique；font-weight：bold；font-size：24pt”＞hongen＜/p＞
最后一行只是在第三行定義的基礎上又增添了“font-variant”屬性為“small-caps”（小體大寫），代碼如下：
＜p style=“font-style：oblique；font-weight：bold；font-size：24pt；
font-variant：small-caps”＞hongen＜/p＞
值得注意的是：“font-variant”屬性值“small-caps”在指定的小體大寫字體不存在的時候，CSS將用大寫字母代替所有的小寫字母。
可能您會問：定義一個字體怎么有那么長的代碼呢？其實字體屬性中還一個“font”屬性，可以實現簡便定義。我們來看下面這段代碼：
＜p style=“font：italic small-caps bold 36pt,GlitzyCurl”＞Leaf＜/p＞ 此代碼產生的效果是這樣的（如下圖）：
這段代碼定義了“leaf”的字體為GlitzyCurl，并且是斜體、小體大寫、粗體、36號字。這段代碼等同于：
＜p style=“font-style：italic；font-variant：small-caps；font-weight：
bold；font-size：36pt；font-family：GiltzyCurl”＞Leaf＜/p＞
怎么樣，是不是精簡了許多。
但需要注意的是：如果您用＜font＞屬性直接定義，一定要注意屬性值的排放順序。
它的排放規則是按照“font-style”、“font-variant”、“font-weight”、“font-size”、“font-family”的順序，其中沒有定義的以默認值顯示。
其實我們習慣上還是不用FONT屬性來統一定義，因為分開來定義的代碼雖然很長，但是看上去很直觀，讓人一看就知道定義的內容是什么。
說一點遺憾之處吧，就是CSS對中文字體的支持可能不是很好。
2、顏色和背景屬性
您總不希望自己的頁面處于黑白世界吧。如果給用＜font＞屬性定義的文本添上顏色是不是會更好呢？
下面我們就講一下CSS的顏色和背景屬性。先來看一下CSS下的顏色和背景都有哪些屬性吧（如下表）：
我們還是舉個例子吧。比如上一節講到的“LEAF”字體，我們在其中加入顏色屬性，在＜style＞再加入以下代碼：
color：rgb（204，82，28）；
background-img：url(ss01038.jpg)；
background-repeat：no-repeat；margin-right：15em
//*設置前景色的rgb值為(204，82，28)，您也可以用顏色的英文名稱直接定義；
設置背景圖案的地址；設置背景圖案不重復顯示；另外還設置了頁邊距margin屬性，這個我們以后再講*//
加入代碼后“Leaf”的字體顯示效果是這樣的（如下圖）：
怎么樣，是不是比光是定義＜font＞屬性顯得更加漂亮了。當然您也可以簡便的定義background屬性（象定義font屬性那樣），下面我告訴一下您background屬性的書寫格式：
屬性：background 屬性值：＜background-color＞
＜background-image＞
＜background-repeat＞
＜background-attacement＞
＜background-position＞
也就是說，使用background屬性可以一次定義前面講到的一切有關背景的屬性，包括背景色、背景圖案等等。因此，上面定義“leaf”顏色屬性中有關背景的代碼可以寫成這樣： “background：url（ss01038.jpg）no-reapeat”
好了，至于顏色和背景屬性的功能，您自己也可以去試一試。下一節我們將介紹CSS的文本屬性。
3、文本屬性
定義間距
前面說了如何用CSS定義字體、顏色和背景屬性，那么定義好的文本我們怎么對它進行排版呢？
下面我們講述一下CSS的文本屬性，還是先來看一下文本屬性的詳細列表：
我們可以從表中看到在這里可以定義文本的文字間距、字母間距、裝飾、對齊方式、縮進方式和行高等屬性。舉個例子來看看吧。比如下面這段文字（如圖）：
我們對這段文字加上文本屬性重新排版，排版后的效果如右上圖所示。
我們看到經過文本屬性處理的文本字與字之間多了間距，行與行之間多了行高，對齊方式變成了兩端對齊，并且段首又多縮進了兩格。這是怎樣實現的呢？很簡單，只是在html中加了如下的代碼：
4em；line-height：17pt”>……
//*letter-spacing設置了字間距為1em，其中1em為一個長度單位；text-align設
置了對齊方式為兩端對齊；indent設置了縮進格為4em；line-height設置了行高為
17pt*//
從上面的例子，我們可以看出利用CSS的文本屬性可以方便的對頁面中的文本進行排版。下一節我將向您介紹文本的Text-decoration屬性的一個小應用。裝飾超鏈接
網頁默認的鏈接方式是這樣的：未訪問過的鏈接是藍色文字并帶藍色的下劃線，訪問過的超級鏈接是深紫色的文字并帶深紫色的下劃線。如果您所有的網頁都是這種樣式，是不是很單調呢？
其實，利用文本屬性中的Text-decoration屬性就可以實現對超鏈接的修飾。我們先看下面的這段代碼：
＜html＞
＜title＞link css＜/title＞
＜head＞
＜style＞
＜!--
//*定義偽類元素（ａ：），大括號內定義了前景色屬性和文本裝飾屬性，hover加上?font-size?屬性目的是讓鼠標激活鏈接時改變字體*//
a：link{color：green;text-decoration：none}
//*未訪問時的狀態，顏色為綠色(green)，文本裝飾屬性(text-decoration)值為沒有(none)*//
a：visited{color：red;text-decoration：none}
//*訪問過的狀態，顏色為紅色(red)，文本裝飾屬性值為沒有*//
a：hover{color：blue;text-decoration：overline;font-size：20pt}
//*鼠標激活的狀態，顏色為藍色(blue)，文本裝飾屬性值為上劃(overline)，字體大小為20pt*//
--＞
＜/style＞
＜/head＞
＜body＞
＜p style=“font-family:行書體；font-size：18pt”＞
＜a href=“http：//＞
＜head＞
＜title＞filter blur＜/title＞
＜style＞//*CSS樣式定義開始*//
＜!--
div{width：200；filter：blur(add=true,direction=90,strength=25)；}
//*設置DIV樣式，濾鏡blur屬性*//
--＞
＜/style＞
＜/head＞
＜body＞
＜div style=“width:702； height: 288”＞
＜p style=“font-family:lucida handwirting italic；font-size:72；font-style:bold；color:rgb(55,72,145)；” ＞
LEAF＜/p＞
//*定義字體名稱、大小、樣式、前景色*//
＜/div＞
＜/body＞
＜/html＞
我們看到strength設置為25，如果把其值再改大一些，就會達到非常夸張的效果，同時把Direction參數值為180，顯示效果如下圖：
用blur屬性設置字體可以達到很多效果，把direction和strength再做修改，還能達到多種效果，您可以自己修改試一試。
這一節我們介紹了Blur屬性，下一節將向您介紹Chroma屬性。
4、Chroma屬性
Chroma屬性可以設置一個對象中指定的顏色為透明色，它的表達式如下：
Filter：Chroma（color=color）
這個屬性的表達式是不是很簡單，它只有一個參數。只需把您想要指定透明的顏色用Color參數設置出來就可以了。比如下面這幅圖：
圖中顯示兩種字體，兩種顏色，我們現在對“leaves”字體添加chroma屬性，使其透明。代碼如下：
＜html＞
＜head＞
＜title＞chroma filter＜/title＞
＜style＞
＜!--
div{position：absolute；top：70；width：200；filter：chroma(color=green)}
//*定義DIV范圍內綠色為透明色，另外設置DIV的位置*//
p{font-family：bailey；font-size：48；font-weight：bold；
color：green} //*設置P的字體名稱、大小、粗細、顏色*//
em{font-family:lucida handwriting italic；font-size:48；font-weight：bold；color：rgb(255,51,153)}
//*設置EM的字體名稱、大小、粗細、顏色*//
--＞
＜/style＞
＜/head＞
＜body＞
＜div＞
＜p＞LEAVES ＜em＞LOVE＜/em＞＜/p＞
＜/div＞
＜/body＞
＜/html＞
通過上面代碼中對chroma的屬性設置，使綠色透明。顯示效果如下圖：
我們看到綠色的leaves字體不見了，實際上它是透明了，在IE下點擊它所在的區域，它還是會顯示出來（見右圖）：
另外，需要注意的是，chroma屬性對于圖片文件不是很適合。因為很多圖片是經過了減色和壓縮處理（比如JPG、GIF等格式），所以它們很少有固定的位置可以設置為透明。
本節我們講述了chroma屬性的應用，下一節將向您介紹Dropshadow屬性。
5、DropShadow屬性
DropShadow屬性是為了添加對象的陰影效果的。它實現的效果看上去就像使原來的對象離開頁面，然后在頁面上顯示出該對象的投影。看一看它的表達式：
Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，Positive=positive）
該屬性一共有四個參數： Color代表投射陰影的顏色。Offx和offy分別X方向和Y方向陰影的偏移量。偏移量必須用整數值來設置。如果設置為正整數，代表X軸的右方向和Y軸的向下方向。設置為負整數則相反。
Positive參數有兩個值：True為任何非透明像素建立可見的投影，False為透明的像素部分建立可見的投影。
同樣，我們先來看一個例子（見下圖）：
看，圖中的文字就像是從頁面上飛出來一樣，并且留下了一層淡淡的影子。
實際上在這里應用的就是CSS的DropShadow屬性，我們來看一下它的代碼：
＜html＞
＜head＞
＜title＞dropshadow ＜/title＞
＜style＞//*定義CSS樣式*//
＜!--
div
{position:absolute；
top:20；
width:300
；filter:dropshadow(color=#FFCCFF,offx=15,offy=10,positive=1)；}
--＞
//*定義DIV范圍內的樣式，絕對定位，投影的顏色為#FFCCFF，投影坐標為向右偏移15個像素，向下偏移10個像素*//
＜/style＞
＜/head＞
＜body＞
＜div＞
＜p style=“font-family：matisse itc；font-size：64；font-weight：bold；color：#CC00CC；”＞
//*定義字體名稱、大小、粗細、顏色*//
Love Leaf ＜/p＞
＜/div＞
＜/body＞
＜/html＞
和chroma屬性一樣，Dropshadow屬性對圖象的支持不好，我指的是JPEG、GIF格式的圖象文件。
不能支持的原因與Chroma一樣，因為這種圖象的顏色很豐富，很難找到一個投射陰影的位置。
本節講述了Dropshadow屬性的應用，下一節將向您介紹FlipH、FlipV的屬性應用。
6、FlipH、FlipV屬性
Flip是CSS濾鏡的翻轉屬性，FlipH代表水平翻轉，FlipV代表垂直翻轉。它們的表達式很簡單，分別是：
Filter：FlipH
Filter：FlipV
我們先來看一幅圖：
下面我們分別對它實現水平翻轉和垂直翻轉，并且在圖片上方的一段文字，也發生翻轉。代碼如下：
＜html＞
＜head＞
＜title＞flip css＜/title＞
＜style＞//*設置CSS樣式開始*//
＜!--
div{position：absolute；top：20；width：300；filter：fliph（flipv）；}
//*定義DIV范圍內的樣式，絕對定位，翻轉為水平翻轉或垂直翻轉。
注意：在這里fliph和flipv只取其中的一個*//
img{position：absolute；top：70；left：40；filter：fliph（flipv）；}
//*定義圖片的樣式，絕對定位，翻轉屬性和DIV一樣。*//
--＞
＜/style＞
＜/head＞
＜body＞
＜div＞
＜p style=“font-family：bailey；font-size：36pt；font-weight：bold； color：rgb(10,128,156)；”＞
Leaf Village ＜/p＞
//*定義字體名稱、大小、粗細、顏色*//
＜/div＞
＜p＞＜img src=“ss05058.jpg”＞＜/p＞
//*導入一張圖片*//
＜/body＞
＜/html＞
代碼產生的兩個效果分別如下圖：
水平翻轉
垂直翻轉
翻轉的屬性應用是不是很簡單。下一節我將向您介紹Glay屬性。
7、Gray屬性
Gray屬性把一張圖片變成灰度圖。它的表達式很簡單：
Filter：Gray
其實這個屬性沒什么好講的，只需在您定義的IMG樣式中加入一句代碼：
{Filter：Gray}就一切OK了。
下面兩幅圖分別代表未加Gray屬性和添加了Gray屬性的效果：
原圖
轉成gray屬性后的效果圖
本節講述的內容比較簡單，下一節將向您介紹Glow屬性。
8、Glow屬性
當對一個對象使用“Glow”屬性后，這個對象的邊緣就會產生類似發光的效果。它的表達式如下：
Filter：Glow（Color=color，Strength=strength）
Glow屬性的參數只有兩個：Color是指定發光的顏色，Strength指定發光的強度，參數值從1到255。讓我們先來看一下加上Glow屬性的效果圖：
怎么樣，是不是有一種燃燒的火焰的感覺。實現這種效果的代碼如下：
＜html＞
＜head＞
＜title＞filter glow＜/title＞
＜style＞//*開始設置CSS樣式*//
＜!--
.leaf{position：absolute； top：20； width：400；filter：glow(color=#FF3399,strength=15)；}
//*設置類leaf，絕對定位，Glow濾鏡屬性，發光顏色值為#FF3399，強度為
15*//
.weny{position：absolute； top：70； left：50； width：300；filter：glow(color=#9966CC,strength=10)；}
//*設置類weny，絕對定位，glow濾鏡屬性，發光顏色值為#9966CC，強度為
15*//
--＞
＜/style＞
＜/head＞
＜body＞
＜div class=“leaf”＞//*leaf類樣式*//
＜p style=“font-family：lucida handwriting；font-size：54pt；font-weight：bold；color：#003366；”＞
Leaf Mylove＜/p＞//*設置字體名稱、大小、粗細、顏色*//
＜/div＞
＜div class=“weny”＞//*weny類樣式*//
＜p style=“font-family：bailey； font-size：48pt；font-weight：bold；color：#99CC66；”＞
//設置字體名稱、大小、粗細、顏色*//
Weny Good!＜/p＞
＜/div＞
＜/body＞
＜/html＞
您還可以隨意修改顏色值，看看其他的發光效果是怎樣的。
本節主要講了Glow屬性的應用，下一節將向您介紹Invert屬性。
9、Invert屬性
Invert屬性可以把對象的可視化屬性全部翻轉，包括色彩、飽和度和亮度值。
它的表達式也很簡單：
Filter：Invert
我們再來看一下加上Invert屬性前后的圖片效果變化（如下圖）：
我們看到Invert屬性實際上達到的是一種“底片”的效果。
自己拿別的圖來試試吧。本節介紹的是Invert屬性，下一節將向您介紹Mask屬性。
原圖
Invert屬性效果圖
10、Mask屬性
Mask屬性為對象建立一個覆蓋于表面的膜。它的表達式也很簡單：
Filter：Mask（Color=顏色）
只有一個Color參數，用來指定使用什么顏色作為掩膜。
同樣，我們來看一下一幅圖片在加上mask屬性前后的效果（見下圖）：
原圖
Mask屬性效果圖
加上MASK屬性的效果就好象是在用有色眼鏡看物體一樣。上面的效果的代碼如下：
＜html＞
＜head＞
＜title＞ mask filter ＜/title＞
＜style＞//*設置CSS樣式開始*//
＜!--
div{position：absolute；top：20；left：40；
filter：mask(color：#666699)；}
//*定義DIV區域的樣式，絕對定位，mask屬性的color參數值指定用什么顏色遮住對象*//
p{font-family：bailey；font-size：72pt；
font-weight：bold；color：#FF9900；}
//*定義P區域內的樣式，字體名稱、大小、粗細、前景色*//
--＞
＜/style＞
＜/head＞
＜body＞
＜div＞
＜p＞ wenyleaf ＜/p＞
＜/div＞
＜/body＞
＜/html＞
其實，您就算在代碼中去掉對字體前景色的定義，得到的效果還是一樣的。因為有了Mask屬性的定義，它遮罩下的字體顏色的設置就已經失去了意義。
還有一點需要您注意的地方，mask屬性對圖片文件的支持還是不夠，不能達到應該有的效果。
本節講解了Mask屬性的應用，下一節將向您介紹Shadow（陰影）屬性。
11、Shadow屬性
Shadow屬性可以在指定的方向建立物體的投影。它的表達式是這樣的：
Filter：Shadow（Color=color，Direction=direction）
在這里，Shadow有兩個參數值：Color參數用來指定投影的顏色；Direction參數用來指定投影的方向。
這里說的方向與我們在第二節Blur屬性中提到的“方向與角度的關系”是一樣的。
也許您會問，前面講到的Dropshadow屬性和Shadow屬性有什么不同嗎？
光說的話，您恐怕還難以理解，讓我們看一看分別利用這兩個屬性做出來的效果有什么不同（見下圖）：
：
Shadow效果
Dropshadow效果
這樣一對比，就可以很明顯的看出兩者的不同。
Shadow屬性可以在任意角度進行投射陰影，Dropshadow屬性實際上是用偏移來定義陰影的。所以，看上去左圖的文字和陰影就像是一體的，而右圖的文字就像脫離了陰影一樣。
本例的代碼如下：
＜html＞
＜head＞
＜title＞ shadow＜/title＞
＜style＞//*開始設置CSS樣式*//
＜!--
.shadow{position:absolute；top:20；width:300；filter:shadow(color=#cc66ff,direction=225)；}
//*定義Shadow類的樣式，絕對定位，Shadow屬性，陰影顏色、投影方向*//
.dropshadow{position:absolute；top:180filter:dropshadow(color=#cc66ff,offx=10,offy=10,positive=1)；}
Dropshadow屬性，設置X軸和Y軸的偏移量*//
--＞
＜/style＞
＜/head＞
＜body＞
＜div class=“shadow”＞//*區域內為Shadow類*//
＜p style=“font-family：bailey；font-size：48pt； font-weight：bold；color：#FF9900；”；
width:300；
//*設置Dropshadow類的樣式，樣式與Shadow類相似，不同的是濾鏡用了 ＞
Hongen Online＜/p＞//*定義字體名稱、大小、粗細、前景色*// ＜/div＞
＜div class=“dropshadow”＞//*區域內為Dropshadow類*//
＜p style=“font-family：bailey；font-size：48pt；font-weight：bold；color：#FF9900；”＞
Hongen Online＜/p＞//*定義字體樣式與Shadow類的一樣*//
＜/div＞
＜/body＞
＜/html＞
本節講述了Shadow屬性的應用，下一節將向您介紹Wave（波紋）屬性。
12、Wave屬性
Wave屬性用來把對象按照垂直的波紋樣式打亂。它的表達式如下：
Filter：Wave（Add=True（False），Freq=頻率，LightStrength=增強光效，Phase=偏移量，Strength=強度）
我們看到Wave屬性的表達式還是比較復雜的，它一共有五個參數。Add參數有兩個參數值：True代表把對象按照波紋樣式打亂；False代表不打亂；
Freq參數指生成波紋的頻率，也就是指定在對象上共需要產生多少個完整的波紋。
LightStrength參數是為了使生成的波紋增強光的效果。參數值可以從0到100。
Phase參數用來設置正弦波開始的偏移量。這個值的通用值為0，它的可變范圍為從0到100。這個值代表開始時的偏移量占波長的百分比。比如該值為25，代表正弦波從90度（360*25%）的方向開始。
說了一大堆，我們還是先看一個實例吧。
下面我們對上面這個頁面加上Wave效果，代碼如下：
＜html＞
＜head＞
＜title＞ wave css＜/title＞
＜style＞//*定義CSS 樣式開始*//
＜!--
.leaf{position:absolute；top:10；width:300；filter:wave(add=true,freq=3,lightstrength=100,phase=45,strength=20)；}
//*設置leaf類的樣式，絕對定位，wave屬性，產生3個波紋，光強為100，波紋
從162度（360*45%）開始，振幅為20*//
img{position:absolute;top:110;left:40;filter:wave(add=true,freq=3,lightstrength=100,phase=25,strength=5)；}
//*設置IMG的樣式，絕對定位，wave屬性，產生3個波紋，光強為100，波紋從
90度開始，振幅為5*//
--＞
＜/style＞
＜/head＞
＜body＞
＜div class=“wave”＞//*定義DIV區域內為Wave類*//
＜p style=“font-family：lucida handwriting； font-size=72pt； font-weight：bold；r：rgb(189,1,64)；”＞Leaf＜/p＞
//*設置字體名稱、大小、粗細、顏色*//
＜/div＞
＜p＞＜img src=“ss01044.jpg”＞＜/p＞ //*導入圖片*//
＜/body＞
＜/html＞
這段代碼實現的效果如下圖：
原圖
wave1
wave參數改動后 如果把Wave的參數隨便做一下改動，就會達到多種效果，請看另外一種效果：（最右圖）：
其實這種效果只是增大了freq參數的值，減小了Strength、LightStrength的值就可以了。您也可以多試試，改變其他的參數值，還可以達到許多不同的效果來。
本節主要講述了Wave屬性的應用，下一節將向您介紹Xray屬性。
13、Xray屬性
Xray就是X射線的意思。
Xray屬性，顧名思義，這種屬性產生的效果就是使對象看上去有一種X光片的感覺。它的表達式很簡單：
Filter：Xray
我們還是先來看一個頁面（如下圖）：
如果在上面的頁面中加入Xray屬性，也就是在＜head＞的＜Style＞中，增添下面這一句代碼：
Filter：Xray
您再看這個頁面就會是另一種效果了：（如右圖）
看，是不是就像給它拍了一張X光片一樣。
總結：CSS的全部屬性都在這里了，只要大家能夠活學活用里面的屬性，一定可以制作出自己滿意的效果來。附：
技術優勢：
1、方便修改網頁格式：css對網頁樣式的控制可以獨立地進行，因而修改、更新起網頁起來都顯得異常輕松容易。
2、輕松增加網頁的特殊效果：在網頁中過多的使用圖像會破壞原有文字的存儲格式，并且會加長下載時間，如果使用了css中的圖像濾鏡，就可以在不增加網頁體積的情況下實現一些特殊的視覺效果，為網頁添加生氣。
3、使用網頁元素更準確的定位：之前HTML中使用的表格用來定位表格元素，而且表格只適用于規則的網頁排版，對于復雜的不規則的網頁結構就顯得力不從心，而css能很好的解決排版問題。
4、良好的適應性：許多瀏覽器都支持css。css樣式表的功能：
1、靈活定制網頁元素風格：用css可以將元素逐個地定義其在頁面中的顯示風格。如果想讓某種元素有多種外觀，可以創建這種元素的多個類，把網頁中的該元素用不同的類定義就可以了。
2、迅速更新網站風格：使用css，可以把整個網站的風格信息集中在外部css樣式表的文件中，它的擴展名為.css，從而，HTML或XML可以通過一定的語句對這個文件樣式進行引用。
3、組合不同風格的網頁：每個人制作網頁的風格和思路是不一樣的，最后把每個人的網頁和已開發出的網頁完美組合起來是相當困難的，而css技術可以讓每 個人把自己的內容直接放到網頁中去后，然后將網頁與相應的css文件相連接，組合后的風格就較為一致，也節省了許多不必要的麻煩。
第三篇：在HTML中加入CSS教案
《在HTML中加入CSS》教學設計
文昌華僑中學 陳文芳
模 塊： 信息技術·選修《網絡技術應用》第五章第二節：在HTML中加入CSS 教材版本： 教育科學出版社 學 生： 高中二年級 課 時： 1課時
一、教材分析
《在HTML中加入CSS》屬于5.2.2 CSS樣式表這一教學內容，是高中信息技術·選修《網絡技術應用》的第五章第二節動態網頁中的內容。本節內容包括嵌入樣式表、內聯式樣式表、外聯式樣式表，教材安排的思路：由具體標簽——當前網頁——多張網頁的整體風格進行設置，重點是外聯式樣式表的使用。
二、教學對象分析
通過前階段的學習，學生已經認識了動態網頁，并對HTML的標簽及屬性、樣式表的概念及書寫格式也有了了解。由于學生的水平有限，而且《在HTML中加入CSS》對于學生來說是全新的內容，不易掌握，但學生有著非常強烈的求知欲，渴望通過css優化自己的主題網站。
三、教學目標
1、知識與技能
(1)熟練掌握CSS的基本應用：嵌式樣式表、內聯式樣式表、；(2)掌握CSS的價值體現：外聯式樣式表的應用。
2、過程與方法
(1)嘗試利用代碼選擇進行CSS的初步設計，以取感性的認識；(2)通過在網頁內加入嵌入式和內聯式的CSS樣式表來達到熟練掌握CSS基本應用的目的；
(3)通過任務的完成學會應用同一CSS樣式表來掌握外聯式CSS樣式表的。
3、情感態度與價值觀
（1）通過CSS樣式表的學習，提高學生美化網頁的技能。（2）培養學生的探索、實踐能力。
四、教學重點與難點
1、教學重點：
(1)CSS的基本應用：嵌入式樣式表、內聯式樣式表；
(2)CSS的價值體現：外聯式樣式表的應用對于網站頁面風格統一的作用。
2、教學難點：
外聯式樣式表的應用；
五、教學設計思路
首先提問學生如何在網頁中改變文字的格式，提出像新浪網這樣的網站包含很多文字，同時又要保持統一的風格格式時，這樣一一設置格式就很費時、費力，設疑，有沒有更快的方法對網頁元素的格式進行設置呢？然后在網頁中添加樣式，引出學生思考：為什么文字的格式沒有改變，添加的樣式在那里呢？目的，復習舊知識引出本節課的內容。
其次，講解本節內容，通過教師演示——學生操作、探究——學生總結的方式進行。目的，培養學生的獨立思維、操作技能、歸納能力。
最后，教師進行概括性的總結。目的，理清脈絡。
六、教學方法
講授法、任務驅動法、個別指導法、賞識教育法、問題教學法
七、教學準備
基于網絡的多媒體計算機教室、PowerPoint教學課件
八、教學過程
教師活動：在FrontPage中呈現已準備好的兩句話，提問學生如何改變文字的格式，并請一位學生操作。
教師提問：如果要完成像新浪網包含這么多文字的格式，又要保持統一風格，大家覺得我們所用的方法快捷嗎？ 學生活動：回答老師問題。
教師活動：但會費時費力。那有沒有更快的方法呢? 學生活動：思考問題。
教師活動：在網頁中可以使用CSS樣式表來規定文字的格式。
教師活動：簡單介紹css樣式，然后演示添加樣式的過程，并要求學生觀察在哪里添加了樣式。教師提問：請同學們說說在哪里添加了樣式呢？ 學生活動：思考、回答問題。
教師活動：給出答案，在HTML代碼視圖中。這就是今天我們要學習的內容——在HTML中加入CSS。簡單介紹CSS。
教師活動：請同學們把課本打開到P115頁，并請一位同學回答在HTML中加入CSS有幾種方法。
教師活動：演示在HTML中加入CSS的幾種方法
教師活動：講授嵌入式樣式表的使用方法。
1、樣式表
方法：只需在每個要用樣式的HTML的標記后寫上屬性就可以了。CSS屬性書寫格式：
Style=”color:red;font-size:24pt;”
任務1：用嵌入式樣式表對網頁gushi1的標題“靜夜思”進行設置，字體為紅色，字號為24pt。
學生活動：依據教師的方法，進行練習。
教師活動：巡回輔導，對樣式的書寫格式進行糾錯。教師活動：總結嵌入式的使用方法。
嵌入式樣式表主要用于對具體的標簽作具體的調整，其作用的范圍只限于本標簽。并不能體現出css的優越性。
教師提問：如果我想改變整張網頁的文字格式，使用嵌入式好用嗎？ 學生活動：回答老師問題。
教師活動：這時我們就可以使用內聯式樣式表。
1、內聯式樣式表：作用于當前頁
教師活動：教師講授內聯式樣式表的使用方法。
方法：把樣式表定義語句放在標簽中，并把這一部分語句放在HTML文件的
標簽之前。 任務2：使用內聯式改變gushi1中的詩句，樣式自定義。學生活動：依據教師講授的方法，進行練習。教師活動：巡回輔導，對格式進行糾錯。教師提問：如果站內有幾十張網頁都要用到此格式，該如何做呢？有沒有更簡單的方法？
學生活動：回答老師。
教師提問：我們可以用外聯式樣式表，不僅可以快速改變文字的格式，而且能夠保持網頁的整體風格。
2、外聯式樣式表
教師活動：教師講授外聯式樣式表的使用方法。
方法：（1）將樣式定義成一個”.css”的文件。
（2）在網頁中的
標簽對之間插入引用代碼： 任務3：①用外聯式改變gushi1的詩句。②使用外聯式改變gushi1、gushi2、gushi3、的詩句，使之具有統一的格式。
學生活動：完成任務3，教師活動：巡回輔導，糾錯學生的書寫格式。
教師活動：對學生完成的情況進行評價。并請一名學生演示操作過程。教師活動：我們來總結一下，CSS樣式表有什么樣的優點？ 學生活動：總結CSS樣式表的優點。
教師活動：總結CSS的優點。
1、避免在標識字符和設置段落格式等操作時重復定義需要的樣式（如字體、字號、顏色），從而使應用該樣式的網頁具有相同的風格。
2、只需要修改一個CSS代碼就可以改變頁數不定的網頁外觀和格式，提高網頁編輯效率。
3、可以“隨心所欲”地控制頁面布局和外觀。
4、在所有瀏覽器和平臺之間具有較好的兼容性。
教師活動：今天，我們一起學習了如何在HTML中加入不同類型的CSS樣式表。那請同學們回憶一下，在HTML中加入CSS樣式表有幾種方法，分別是什么？ 學生活動：回憶、總結。
教師活動：總結本節課的教學內容。
第四篇：一年級電子教案
8、月亮的心愿教學設計 白衣小學楊珂鑫 教學目標: 1.認識14個生字,會寫“女、氣、去、大、早、亮”6個生字。2.正確、流利地朗讀課文。
3.理解課文內容，懂得從小就要關心別人，為別人著想。教學準備：兩幅掛圖、小黑板 教學時間：2課時 教學過程：
第一課時
一、談話激趣，導入課題 1.師板書“心愿”，理解“心愿”，說說你有什么心愿？ 2.你知道月亮有什么心愿嗎？
出示圖一，說說圖上畫了什么？
出示圖二，這幅圖上又畫了什么？（讓學生充分地說，初步感知課文）
3.師總結：老師有一個發現，兩幅圖上，月亮的表情不一樣，看了這兩個小女孩的家，月亮會怎么想呢？今天我們就學習8.《月亮的心愿》（齊讀）
二、感知性閱讀，學習生字詞
1.自由朗讀課文，用“=”劃出本課的生字。2.用自己喜歡的方式認識生字。（讀拼音、問同桌、查字表、猜一猜等）3.檢查生字詞掌握情況
（1）小黑板出示生字詞（帶拼音），自由讀，男女生分讀。（2）擦拼音，請學生當小老師領讀。
（3）哪些字你以前就認識了？怎么認識的？哪個字你有好辦法記住它？ 4.小組合作讀課文，在讀中鞏固生字，注意多音字“得”
三、讀后悟，讀后感
1.指名讀自己喜歡的自然段。2.讀了課文，你有什么想問的？
四、再現生字，復習鞏固
第二課時
一、復習導入
請一名學生帶讀。（或指名讀）
小朋友們，月亮姐姐去了兩個小女孩的家，她們在干什么呢？（自由讀課文。）
二、再讀課文，理解內容
1.月亮姐姐來到了第一個女孩的家。齊讀第1-2自然段。（1）用“自言自語”說話。（2）這時月亮的心愿是什么？
3.月亮姐姐來到了第二個女孩的家，讀第3-8自然段。（同桌讀對話）
（1）用“悄悄地”說話。
（2）月亮看了第二個女孩的家，它的心愿又是什么？
（3）指導朗讀對話。4.那么最后到底結果怎樣呢？齊讀最后一段，理解“艷陽天” 5.說說月亮的心愿是什么？
三、再現生字，書寫指導
四、拓展練習：兩個小女孩走在郊游的路上，心里會想些什么呢？ 教學反思：
語文園地二教學設計 教學目標
1．引導學生發現漢字規律，自己小結識字的方法。2．初步了解多義字。3．積累詞語。4．熟讀背誦《鞋》。
教學重難點積累詞語提高積累語言的能力 教學方法小組合作
學生準備詞語卡片識字“蘋果樹”。教學時間
3課時 教學過程 第一課時 1．導入：
小朋友，咱們都有一個溫馨和睦的家，平時在家里，你們會和爸爸媽媽 一起干些什么呢？ 2．我會認
（1）我們和爸爸媽媽看電視的時候，電視中出現的生字，爸爸媽媽會 教給你們聽嗎？看電視你們都認識了哪些字？
（2）學生拿出自制的識字課本，分小組互相交流看電視時認識的字。（3）學生全班交流自己的識字方法，教師和同學評議。（4）小組學習“我的發現”中的漢字。讀讀這些字，你發現了什么？
（5）集體交流，小組派代表匯報，總結識字方法。（6）認讀生字卡片（學生說一說是怎么記住這個字的）。3．讀讀想想
（1）小組學習：讀一讀這些詞語，你發現了什么？
（2）你還知道哪個字，也和“張”字一樣，表示很多不同的意思？（3）小組交流，全班交流。第二課時 1．我會讀
（1）出示一棵“蘋果樹”，蘋果樹上掛滿了紅彤彤的“蘋果”（“蘋果”上寫上“我會讀”中的詞語）
（2）小組學習：四人小組輪流讀“我會讀”中的生字，互相糾正讀音。（3）各個小組采用輪讀的方式（開火車讀），看看哪一組摘的“蘋果”多。2．讀讀背背（1）小組學習。
四人小組一起讀小詩《鞋》，互相糾正讀音。說說這首詩說了什么意思。（2）指名朗讀《鞋》，同學評議。（3）自由背誦小詩《鞋》（4）全班配樂背誦。第三課時 1．激趣導入
同學們，你們在家做過家務事嗎？
你為什么沒做過？能給大家說說當時的情況嗎？（學生說一說父母不讓他們做家務事的情況）2．展示畫面，口語交際（1）創設情境一
a．（出示課件：故事）星期一，爸爸出差了，家里只剩媽媽和小明，媽媽又要上班又要照顧小明，還要做許多的家務事，小明就想幫媽媽做一些家務事，可媽媽說小明還小，不會做。小朋友 們，他該怎么辦？誰來幫他出出主意？
b.討論交流：這位小朋友非常需要大家的幫助，你們愿不愿意幫他想想辦法？ ☆四人小組討論交流：
△媽媽為什么不讓小明做家務？
△怎樣才能勸說小明的媽媽，讓他做家務呢？
△我們能做那些家務事？我們之前學過的課文中小朋友是怎么做的？ ☆小組內表演：
小組內的幾個同學分別扮演媽媽、孩子、同學等角色，表演勸說的過程。說 服“媽媽”后，請“媽媽”談談，為什么接受了“孩子”的要求。C.上臺表演：
☆小組自告奮勇上臺表演。☆評一評“最佳口才獎”。
看看哪組能在最短的時間內用最好的方法說服“媽媽”。（2）創設情境二
剛剛有幾位同學都說做過家務事，那誰來給大家說說為什么要幫爸爸媽媽做家 務？你是怎么做的？
A.說說你為什么要幫爸爸媽媽做家務？
B.個別說說做家務事的經過（要求口齒清楚，普通話標準）C.全班交流。
其他同學補充認為你說得不完整的地方，在同一件家務事上，他們的做法又是怎 樣做的？
（3）創設情境三
通過剛才的交流，教師發現同學們個個都是能干的孩子，那你們想不想把自己能 干的一面展現給大家看呢？那我們就來一個“小能手”的爭奪賽吧！
A.分成幾個小隊，如蘋果隊、桔子隊等，每隊都做不一樣的家務（如疊 衣服、抹桌子、整理書桌等），全班學生分別到各個小對去做家務（自己想去哪個隊就去哪個隊）。
每個大組挑選一名代表上臺爭奪“小能手”，看誰能在最短的時間內把 書桌上的東西整理得井井有條。
C.在隊中進行做家務比賽，做得好的評為“小能手”并將一朵小紅花。（邊 做家務邊放音樂）3.總結
通過這一節課，大家有什么想說？（學生交流）剛剛同學都說了這么多，說明大家都是孝敬長輩、愛勞動的好孩子，那我們以后天天都做爸爸媽媽的好幫 手，行嗎？ 教后記： 教學反思： 識字三教學設計 教學目標
1.認識“霧”、“霜”等13個生字，會寫“和”、“語”等6個生字。2.正確、流利地朗讀課文。
3.熱愛自然。有收集對子和對對于的興趣。教學重難點
認識13個生字，會寫6個字；正確流利地朗讀課文。“霞”的認識及“秀“的書寫。教學準備投影片圖片 教學過程 第一課時
1．激趣導入：今天，我想去美麗的大自然中走一走，小朋友想不想和我一起去 呢?那就出發吧!2．出示投影，師描述引入情景：清晨，層層薄霧。悠靜的森林中傳來清脆的鳥叫聲。太陽升起來了，朝霞滿天，大自然揭開了美麗的面紗。藍天碧野，山清水
秀，樹木成林，鳥語花香，蝶飛蜂舞??天色漸漸暗了下來，一輪夕陽掛在天邊。3．走在大自然中，你看到了什么?想說什么? 學生說，出示詞語(生字注音)：[晨霧、白霜、朝霞、夕陽、蜜蜂、蝴蝶、李樹、楊樹、藍天碧野、萬紫千紅、山清水秀、鳥語花香]。自主識字
1．過渡：同學們說得真棒!這些詞，你會讀嗎? 2．展示讀詞：讀一讀，認識哪個讀哪個，并讓學生說說自己是怎么認識這些詞的。3．認讀詞語。A．自由讀詞。B．指名讀詞。
C．正音(重點指導：朝、蜂、紫)。
D．交流讀詞：根據大家提的幾點建議，請你們再讀讀。和同桌組成學習伙伴。
你讀給我聽，我讀給你聽。如果同桌讀得好，你就表揚他；如果同桌讀時有困難，請你幫助他。
E．齊讀。
4．識記生字。
A．自主識字：這些字是我們今天要學的生字，想想你有什么好辦法 來記住它們? ‘
B．小組合作識字：小腦袋湊到一起，和小組成員討論討論。評評誰的識字方法最好。C．全班交流。
D．游戲鞏固：同學們都拿出自己的生字卡片。按照老師的要求，找到相應的生 字，然后讀出來。
師：帶有雨字頭的字。生：霧、霜、霞。師：帶有蟲字旁的字。生：蝶、蜂。
師：含有“木”的宇。生：霜、蝶、李、楊。E．檢查識字情況：出示去掉拼音的生字認讀。讀文感悟 1．過渡：有一篇課文把這些詞進行了有趣的組合，想不想讀一讀? 2．自由讀。要求：讀準字音，用彩色筆涂出生字詞，多讀幾遍。3．齊讀。
4．引導發現課文是以對對子的形式出現。A．讀了以后，你有什么發現? B．小結：小朋友觀察得真仔細!課文中這種有趣的組合，是我們中國特有的，叫做對對子。5．師生交叉讀：老師讀前半句，你對后半句，好嗎?(讀完一遍后，再交換讀。第二遍邊拍手邊讀。)6．生生交叉讀：現在可以下位找你的好朋友來玩對對子，玩的時候也可以拍拍手。： 7．擴展活動：
A．讀《同步練習》
B．學著課文中的樣子，也出對子讓小伙伴對一對
8、齊讀全文。指導寫字
1、(出示要寫的字)全班交流，找共同點：觀察要寫的字，說說有什么發現?
2、重點指導寫“和”、“秀”。A、自主觀察，注意間架結構。B、生提示重點筆畫，并范寫。C、生描紅，并練寫一個。D、展示學生寫的字，評議。E、繼續練寫。實踐活動
在文中挑選幾個你喜歡的詞，寫到大紙上，然后為它配上美麗的圖畫。第二課時
創設情境，鞏固練習1．在情境中理解詞語
A．展示掛圖，內容是美麗的大自然。
B．提出要求：大自然多美呀!你們喜歡嗎?我這兒還有一些你們喜歡的詞語(藍天 碧野、萬紫千紅、山清水秀、鳥語花香等)，你們能把這些詞貼在相應的位置中嗎? C．指名上臺貼。大家評評他貼對了沒有。D．看著圖讀一讀詞語。2．在情境中積累詞語
A．交代活動內容：上節課后，同學們都選了喜歡的詞，配上了圖畫。現在就拿 出自己的作品小組中交流交流。B．指名上臺展示。
C．把自己的作品貼在教室里，下課后和你的好朋友交流。3．在情境中運用詞語。
同學們為詞配的畫真漂亮!那能不能說一說你知道哪些風景優美的地方，可以 用這些詞語來贊美呢?帶著情感朗讀課文 練習寫字
上節課寫的字還記得嗎?再寫幾個，看看是不是有了進步? 實踐活動
1．搜集生活中的對子，和同學們交流。2．和爸爸媽媽做對對子的游戲。教后記： 教學反思： 兩只鳥蛋教學設計 教學目標：
1.認讀“蛋、取”等12個生字，會寫“聽、唱”等6個字。
2.從媽媽的語言，我的神情動作中體會人物的情感變化，練習正確流利有感情的朗讀背誦課文，激發學生喜歡朗讀詩歌的興趣。
3.懂得鳥類是人類的朋友，有愛鳥的意識和情感。
教學重難點：識記生字，有感情的朗讀課文，背誦課文。教學準備：生字卡片，鳥蛋實物。教學課時：2課時 第一課時
一、激發情感，導入新課 1．播放音樂《百鳥朝鳳》，你們聽到了什么?仿佛看到了什么? 2．在生機勃勃的大自然中，鳥類是一個繁盛的大家族。無論是陸地、海洋還是 天空，到處都有
鳥類的身影。那鳥媽媽是怎樣把它的孩子帶到這個世界上來的呢? 3.出示投影——書上的插圖(不顯示小男孩)學生回答，教師相機板書課題：兩只 鳥蛋(學生齊讀課題，認識“蛋”字。)
二、初讀課文，讀準字音
請小朋友自由讀課文，注意讀準每個字的字音，遇到自己認為比較難讀的字 或容易讀錯的字作個記號。
2.同桌互相讀一讀，互相糾正字音。
3.請小朋友選擇自己喜愛的一小節，讀一讀，其他小朋友認真聽，比一比誰的 耳朵靈，能夠發
現這個小朋友哪個字音讀得最準，你要向他學；哪個字音讀得不太好，你要提醒他。(隨著學生的發現，順勢指導學生學習生字)4.請小朋友分四人合作小組再讀課文，互相聽一聽，比一比誰讀得準。
5.出示詞語，讓學生自己讀詞語。(詞語：鳥蛋，取下，涼涼的，一定，捧著，連忙，輕輕地仿佛，抬頭，投向)
三、細讀課文，促進感悟 1.學生自由讀課文。2.全班交流：
A.第一小節：當學生說出——我知道鳥蛋小小的、涼涼的，教師順勢出示掛圖，叫學生看看這小小的鳥蛋。
◆交流感受。當你看到這小小的、涼涼的鳥蛋時，你有什么感受?把自己的感受講出來。◆指導朗讀。學生朗讀，師生共同評議，引導學生把鳥蛋“小小的”、“涼涼的”，“我” 拿著鳥蛋“真好玩”的感覺讀出來。
B、第二小節：當學生說出——我知道兩只鳥蛋就是兩只小鳥。◆根據學生已有的生活經驗組織交流：“你怎么知道兩只鳥蛋就是兩只小鳥?” ◆出示小鳥破殼而出的圖片時，引導孩子們說看了之后知道了什么。(一只 鳥蛋就是一個生命)◆此時的鳥媽媽發現鳥蛋不見了，會怎么樣?(讀詞語：焦急不安)◆啟發想像。小朋友們閉上眼睛想一想，假如你就是鳥媽媽，你會怎么做? ◆指導朗讀，讀出鳥媽媽焦急不安的語氣。
C.第三小節：學生談理解后，讓學生邊讀邊演。
D.第四小節：學生讀理解后，教師問：讀了這一段，你還有哪些不明白的地方?（理解“我把目光投向高遠的藍天”）
◆啟發想像。假如你就是課文中的我，當你的耳邊傳來鳥兒嘰嘰喳喳的叫聲，你 抬頭仰望藍天，能看見什么? ◆課文中的孩子和你們一樣，都看見了鳥兒美好的明天。那這一段該怎么讀?(自 由讀，指名讀，齊讀)
四、借助想像，升華感情
◆學生齊讀全文，一邊讀一邊想像課文所描述的情景。◆交流：你喜歡課文中的“我”嗎?為什么?
五、學寫生字“遠、連”
1．出示生字，認識，觀察，說說怎樣把字寫漂亮。2．重點指導寫好“連”、“遠”的“走之”。3．書寫練習。第二課時
一、背誦詩歌
二、學生練習背誦，指名背誦，小組背誦，全班齊背。
三、復習鞏固生字詞
1.出示不帶拼音的詞，學生認讀。
2．顯示紅色的生字，學生采用適合自己的方式記憶生字的字形。(啟發學生用熟 字加偏旁、換偏
旁等方法記憶字形。)3．做“走迷宮”的游戲，復習鞏固生字。
四、寫字練習
1．出示“我會寫”中的其它四個字，學生認識，觀察，描一個，寫一個，再評議。2．再練習寫字。
五、實踐活動
1．引導學生積累詞語。
A、出示“我會讀”中的詞語，指名讀。
B、男女同學輪讀左邊的詞組與右邊的詞組，說說發現了什么。
六、擴展練習
◆“找朋友”游戲。把寫有“花兒”、“小事”、“天空”、“紅紅的”、“綠綠的”、“藍藍的” 的卡片分發給學
生，讓擁有不同詞語的學生去找朋友，讀一讀；再讓兩個朋友交換左右順序，讀一讀。◆教師提供圖片，引導學生照樣子說幾組詞語。◆學習小組合作交流，展示平時積累的詞語。2．小調查：保護鳥類。
尋找有關益鳥的圖片、資料，想想應該怎樣保護它們，然后全班交流。板書設計：
9、兩只鳥蛋
取下——媽媽說（保護小鳥）————送還 教后記： 教學反思： 10 松鼠和松果 學習目標：
1.認識“聰、話”等11個生字。會寫“以、后”等6個字。2.正確、流利、有感情地朗讀課文，并能復述這個童話。
3.初步感受回報自然、植樹造林的重要，愿意參加植樹、認養樹木等活動。教學課時
2課時 第一課時
一、談話導入
同學們，你們喜歡小松鼠嗎?你們知道松鼠是什么樣的?誰愿意說一說?[板書 松鼠]你們對松鼠有些什么了解?[板書：松果] 齊讀課題。
小松鼠和松果之間會發生什么事呢?我們今天來讀一讀這個故事吧！
二、初讀課文
1．學生自由讀課文。
2．在讀書過程中，有什么困難?畫出生字詞，多讀幾遍。3．小組交流生字詞的情況，通讀課文。
4．說說課文講了小松鼠做了一件什么事?結果怎樣?
三、學習生字詞
1．出示以下生字詞（帶拼音）：（指名讀）[ 聰明活潑忽然眨眼睛如果總有以后主意] 3．學生認讀去掉拼音后的詞語。(個別讀，小組讀，全班讀)4．學生交流認記生字的方法。
四、學習課文第一自然段
1．(出示掛圖)說說小松鼠在森林里干什么? 2．如果你是小松鼠，在這么美麗的森林里，看著綠油油的松樹，吃著香甜的松 果，你想說些么?(指導讀句子：每個松果都那么香，那么可口)
五、指導寫字“以”、“后”、“更” 1．注意觀察“以”：哪些筆畫落在豎中線上?最后一筆是一點。2．注意觀察“后”的兩個撇：“平撇”和“豎撇”(平撇要寫平，豎撇要先豎后撇)3．注意觀察“更”的“豎撇”，要先“豎”后“撇”。4．學生描紅，教師范寫“以、更”。5．寫字練習，展示作品，評議。第二課時
一、復習引入
1．開火車讀本課生字。2．學生朗讀第一自然段。
二、學習課文第二、三自然段
1．小松鼠一邊玩一邊吃香甜的果子，忽然，小松鼠眨眨眼睛，想起來了，(出示 投影)引讀：如果光摘松果，不栽松樹，總有一天，一棵松樹也沒有了!(學習自由讀句子)討論：讀了這句話，大家知道了什么?想到了什么? 2．指導朗讀這句話，注意讀出擔心、驚訝的語氣。
大家想一想，沒有了松樹，沒有了森林，到處是(讀詞)光禿禿的，小松鼠們吃什 么呢?到哪兒去住呢? 3．自由朗讀第三自然段，指導朗讀。
三、學習第四自然段
1．小松鼠為了自己有吃的，有住的，想出好主意了。(出示投影3)你們看小松鼠在干什么? 如果你是小松鼠，你還會怎么做? 2．齊讀第四自然段。
四、學習第五、六自然段
1．到了春天，小松鼠種下的松果怎樣了?(出示投影4)小松鼠成功了嗎?我們用欣喜的語氣來讀第五自然段!將來這里會 怎樣?(齊讀最后一句)討論：小松鼠在這松樹林里生活得怎樣?
五、寫字指導“主”、“意”、“總”。1．注意“主”在田字格中筆畫的位置。、2．區別“意”與“總”心字底的不同。3．學生練寫，教師巡視。4．寫字展示，評議。
六、擴展活動
小松鼠和其他的小動物們在松樹林里生活得怎么樣?動手畫一畫未來的森林。板書設計： 松鼠和松果
松鼠————吃————松果（種）長松樹 教后記： 教學反思：
第五篇：DREAMWEAVER電子教案
第1章 初識Dreamweaver安裝、下載方法.一、教學目的：學習原DR的安裝、下載方法.二、教學重點：概述和安裝
三、教學過程
1.1 Dreamweaver MX概述
1、直觀的新工作區
2、更加強大的模板
3、廣泛的代碼庫
4、新服務器技術
5、幫助初學者起步的示例內容
6、XML和WEB標準支持
7、改進的級聯樣式表（CSS）
8、高性能的新編碼功能
9、高性能的新編碼功能
10、優化COLDFUSION MX開發環境
使用 Dreamweaver 工作區
一、教學目的：認識DR的界面，了解各面板的組成，菜單的組成。
二、教學重點：各面板的組成。
三、教學過程：
選擇工作區布局（僅適用于 Windows）在 Windows 中首次啟動 Dreamweaver 時，會出現一個對話框讓選擇一種工作區布局。如果以后改變了主意，可以使用“參數選擇”對話框切換到一種不同的工作區。
選擇工作區布局：
選擇下列布局之一： Dreamweaver MX 工作區
HomeSite/代碼編寫者樣式的 Dreamweaver MX 工作區 Dreamweaver 4 工作區
在選擇一種工作區后切換到另一種工作區：
Dreamweaver MX 工作區
浮動工作區布局（Windows 和 Macintosh）狀態欄
“文檔”窗口底部的狀態欄提供與正創建的文檔有關的其他信息。調整“文檔”窗口的大小
將“文檔”窗口的大小調整為預定義的大小：
向“窗口大小”彈出式菜單中添加新的大小：
將“文檔”窗口最大化（僅適用于 Windows 集成工作區）：
使用快速啟動條
快速啟動條顯示在狀態欄中，包含用以打開和關閉各種面板、檢查器和窗口的按鈕。
若要顯示快速啟動條，請在“面板”參數選擇中啟用“在面板和啟動器中顯示圖標”選項。可以指定在快速啟動條中顯示哪些項目。
使用文檔工具欄
? “顯示代碼視圖
?
“顯示代碼視圖和設計視圖” ?
“顯示設計視圖
? “標題”
? “文件管理”
? “在瀏覽器中預覽/調試”
?
“換行符”在插入點處插入一個換行符。還可以按下 Shift+Enter(Windows)“不換行空格”在插入點處插入一個不換行的空格()。“左引號”、“右引號”和“破折線”在插入點處插入標點符號。“英鎊符號”、“歐元符號”和“日元符號”在插入點處插入貨幣符號。“版權”、“注冊商標”和“商標”在插入點處插入相應的符號。“其它字符”
第二單元 文本的編輯與基本操作
一、教學目的：學習網頁的組成對象 設計要素 文本的字體大小顏色，段落的格式，基本的編輯命令。
二、學教重點：文本編輯的基本操作
三、教學過程：
網頁的組成比報紙和雜志復雜的多，因為它包含圖、聲、文、動畫、控件等多媒體，另一大特點有超級鏈接。
1、文字
標題：一般為圖形 尺寸 系統默認大小
樣式：一般少用下劃線
字體：一般為系統默認大小
顏色：以顏色來強調文章的重點
2、圖形
一般為GIF 和 JPG 格式
3、超級鏈接
站內鏈接 和站外鏈接 網頁的設計要素
不同瀏覽器的顯示效果 網絡的傳輸速度 屏幕的分辨率 顏色的顯示
網頁的基本操作 創建網頁
文件――新建――對話框 打開文件類型 HTML SHTM SHTML XML文件
庫文件LBI 模板文件 DWT
樣式表文件 CSS 微軟服務器端文件 ASP JAVA 服務器端文件 PHP文件 TXT文件
CFM模板文件
JSF
fireworks文件 LASSO 打開當前站點文件
從站點面板中打開 或 通過菜單－文件－打開命令 打開最近使用的文件
文件菜單下列出的文件名 從WORD中導入文件
先在WORD中將文件保存為HTML 文件 然后在DR 中 文件－導入－WORDHTML
還可打開后用命令－清除 保存網頁 另存為模板 輸入文本
直接輸入 使用剪貼板
用ENTER 相當于插入
用SHIFT＋ENTER 相當于插入
改變字體樣式 改變字號
要使字體不隨瀏覽器的字體設置而改變就要用到層疊樣式（CSS Style）文本的顏色 選擇文字
然后用下列兩種方式 ? 用文字屬性面板中調整 ? ?
單擊調色板中的右上角要將字體改為默認值點
按鈕或菜單文本――顏色
上機練習：
段 落 格 式
創新新段落：
ENTER 分段落
在段落
格式下拉菜單選擇一種格式 對齊段落：
居中對齊 左對齊 右對齊
縮進段落
取消縮進
或菜單 或選擇段落后右擊彈出菜單
項目符號： 每個段落前加一個項目符號 用
利用 插入分隔線
列表下拉選擇各種不同的情況
修改分隔線的屬性
改變長度 改變高度
改變對齊方式
插入特殊字符和符號
菜單插入｜特殊字符｜
彈出子菜單，進行所需要的項目選擇
其中包括：
換行符 SHIFT＋RETURN 不換行空格 CTREL＋SHIFT＋SPACE
用于行首 插入符號
E－mail 地址鏈接
插入｜電子郵件鏈接｜
其效果將看到“歡迎聯系”字樣并帶下劃線 可以發送郵件 插入日期時間：
插入注釋文字
基本編輯命令 撤銷和重復操作 查找和替換
移動和復制
直接用鼠標拖動
使用CUT
COPY
PASTE
靈活使用HISTORY 面板 SHIFT＋F10
表示當前剛完成的操作
重放按鈕 復制到剪帖板按鈕保存命令按鈕
彈出菜單按鈕可清除歷史記錄等操作
上機練習，重復上述操作，記錄快捷鍵
作業：做一個文字型的小網頁，將學到的知識運用在上面。
第3單元網頁中的圖像鏈接
教學目的：掌握網頁中插入圖像、修改屬性、插入交互圖像以及創建交互圖像的方法。教學重點：插入圖像、控制圖像 創建鏈接、插入交互圖像的方法。插入圖像操作：
1.在“文檔”窗口中，將插入點放置在您要顯示圖像的地方，然后執行以下操作之一： o 在“插入”欄的“常用”類別中，單擊“圖像”圖標。
在“插入”欄的“常用”類別中，將“圖像”圖標拖入“文檔”窗口中（或者，如果您正處理代碼，則拖入“代碼”視圖窗口中）。
o 選擇“插入”>“圖像”。
o 將圖像從“資源”面板（“窗口”>“資源”）拖到“文檔”窗口中的所需位置；然后跳到第 3 步。o 將圖像從“站點”面板拖到“文檔”窗口中的所需位置；然后跳到第 3 步。o 將圖像從桌面拖到“文檔”窗口中的所需位置；然后跳到第 3 步。
2.在出現的對話框中執行下列操作之一： o 選擇“文件系統”以選擇一個圖形文件。o 選擇“數據源”以選擇一個動態圖像源文件。3.瀏覽以選擇您要插入的圖像或內容源文件。o
如果您正在一個未保存的文檔中工作，則 Dreamweaver 生成一個對圖像文件的 file:// 引用。將文檔保存到站點中的任何位置后，Dreamweaver 將該引用轉換為文檔相對路徑。4.在屬性檢查器（“窗口”>“屬性”）中，設置該圖像的屬性。設置圖像屬性
1.設置以下任一選項： o 使用縮略圖下面的文本域設置名稱，以便在使用 Dreamweaver 行為（例如“交換圖像”）或腳本撰寫語言（例如 JavaScript 或 VBScript）時可以引用該圖像。o “寬”和“高”以像素為單位指定圖像的寬度和高度。o
“源文件”指定圖像的源文件。單擊文件夾圖標以瀏覽到源文件，或者鍵入路徑。
“鏈接”指定圖像的超鏈接。將“指向文件”圖標拖到“站點”面板中的某個文件，單擊文件夾圖標瀏覽到站點上的某個文檔，或手動鍵入 URL。有關創建鏈接的信息，“對齊”對齊同一行上的圖像和文本。
“替代”指定只顯示文本的瀏覽器或已設置為手動下載圖像的瀏覽器中代替圖像顯示的替代文本。對于使用語音合成器（用于只顯示文本的瀏覽器）的有視覺障礙的用戶，將大聲讀出該文本。在某些瀏覽器中，當鼠標指針滑過圖像時也會顯示該文本。“地圖名稱”和“熱點工具”允許您標注和創建客戶端圖像地圖。“垂直邊距”和“水平邊距”沿圖像的邊緣添加邊距（以像素為單位）。“垂直邊距”沿圖像的頂部和底部添加邊距。“水平邊距”沿圖像左側和右側添加邊距。“目標”指定鏈接的頁應當在其中載入的框架或窗口。_blank，將鏈接的文件載入一個未命名的新瀏覽器窗口中。
_parent，將鏈接的文件載入含有該鏈接的框架的父框架集或父窗口中。如果含有該鏈接的框架不是嵌套的，則在瀏覽器全屏窗口中載入鏈接的文件。
_self，將鏈接的文件載入該鏈接所在的同一框架或窗口中。此目標為默認值，因此通常不需要指定它。
_top，在整個瀏覽器窗口中載入所鏈接的文件，因而會刪除所有框架。“邊框”是以像素為單位的圖像邊框的寬度。默認為無邊框。
“編輯”啟動您在“外部編輯器”參數選擇中指定的圖像編輯器并打開選定的圖像。有關設置外部圖像編輯器的信息，“重設大小” Control+代字號(~)
第四單元表格設計
教學目的：學習下列方法
? 在“標準”視圖中創建和修改表格 ? 向表格添加顏色
? 在“標準”視圖中設置相對寬度的表格
教學重點：能進行表格設計 教學過程：
在“標準”視圖中創建和修改表格 1.在 Dreamweaver 中，選擇“文件”>“新建”。即出現“新建文檔”對話框。
2.在“空文檔”列表中，選擇“HTML”，然后單擊“創建”以創建一個新的 HTML 文檔。3.在“文檔”工具欄的“標題”文本域中，輸入“表格設計”為文檔添加一個標題。
4.選擇“文件”>“保存”將該文檔保存到本地站點文件夾中。將其命名為 tableModify.htm。
插入表格
現在就可以在文檔中插入表格了。
1.在“文檔”窗口，將插入點放到文檔中，然后執行下列操作之一： o 選擇“插入”>“表格”。o 在插入欄的“常用”類別中，單擊“表格”圖標。
出現“插入表格”對話框。
2.在該對話框中，設置下列選項：
o 在“行數”文本框中，鍵入 2。o 在“列數”文本框中，鍵入 2。o 在“寬度”文本框中鍵入 600，然后在“寬度”文本框右邊的彈出式菜單中選擇像素。將寬度設置為 600 像素將創建一個固定寬度的表格。稍后，我們將在本教程中更詳細地討論表格寬度。
o 在“邊框”文本框中，鍵入 1 將表格和表格單元格周圍的邊框寬度設置為 1 個像素。
3.單擊“確定”。
Dreamweaver 將該表格插入到文檔中。
4.執行下列操作之一來保存文檔： o 選擇“文件”>“保存”。o 按 Ctrl+S 組合鍵
修改表格
下一步，將修改表格的布局。將在表格中添加行和列，并且學習如何合并和拆分單元格以創建所需的頁面布局。
1.在左上方的單元格中單擊，然后向下拖動直到最下面的行以選擇左邊的一列。
2.選擇“修改”>“表格”>“插入列”。現在該表格包含三列。
3.單擊左下方的單元格，然后選擇“修改”>“表格”>“插入行或列”。
即出現“插入行或列”對話框。提示： 如果想要插入特定數目的行或列，或者要選擇在表格中插入行或列的位置，請選擇“插入行或列”選項。
4.在該對話框中，設置下列選項： 對于“插入”，選擇行。在“行數”框中，鍵入 2。對于“位置”，選擇 所選之上。5.單擊“確定”。
表格即會更新。現在的表格為四行三列。6.保存所做的更改（“文件”>“保存”）。合并和拆分單元格
通過合并和拆分單元格，可以自定義表格的設計以符合布局需要。接下來，將看到如何使用菜單選項或屬性檢查器來合并或拆分表格單元格。
1.在文檔中，將指針從左上方的單元格拖到它下面的一個單元格，以選擇表格左列的上面兩個單元格。
2.選擇“修改”>“表格”>“合并單元格”。
兩個單元格合并成一個單元格。
3.單擊第二列的第三行，然后向右向下拖動以選擇第二列和第三列中的最后兩行單元格。
4.在屬性檢查器中，單擊“合并”按鈕以合并單元格。選定的單元格合并為一個單元格。
可以拆分單個的單元格或列。
1.單擊左上方的單元格。
2.在屬性檢查器中，單擊“拆分單元格”按鈕。“拆分單元格”對話框出現。
3.在該對話框中，設置下列選項： o 對于“把單元格拆分”，選擇列。o 在“列數”框中，輸入 2。4.單擊“確定”。表格即被修改。
更改行高和列寬
現在調整該表格的尺寸。將要增加表格的行間距，并且調整表格列間距。
1.沿表格底部邊框移動指針直到指針變成一個邊框選擇器，然后向下拖動以調整表格大小。
如果愿意，還可以使用此方法調整表格中的其他行高。
2.沿一個列的邊框移動指針直到指針變成一個邊框選擇器，然后向左或向右拖動它以更改列寬。
3.調整完成后，保存文檔。向表格添加顏色
可以向表格的任何部分添加顏色。將首先向整個表格添加背景顏色，然后對表格中的單元格應用不同的背景顏色。最后，將更改邊框顏色。
1.在文檔中，單擊表格的任何一個單元格，然后在位于文檔窗口左下方的標簽選擇器中單擊