第一篇：电子教案-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.在文档中，单击表格的任何一个单元格，然后在位于文档窗口左下方的标签选择器中单击