《网站前端技术》教案第12课CSS与CSS3（三）.docx

《《网站前端技术》教案第12课CSS与CSS3（三）.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第12课CSS与CSS3（三）.docx（17页珍藏版）》请在三一办公上搜索。

1、.f.1.3出嗤三一；户课题第12课CSS与CSS3(三)课时2课时(90min)教学目标知识技能目标：(1)熟悉CSS的特性(2)熟悉CSS样式中的尺寸和颜色表达方式(3)熟悉CSS样式中的文本控制素质目标：掌握CSS的相关知识，加深学生对网页制作的进一步了解，提升学生的知识储备教学重难点教学重点：CSS的继承性、层叠性与优先级教学难点：CSS的尺寸与颜色、CSS字体样式和文本样式教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤(2min)一问题导入(5min)一传授新知(25min)一头脑风暴(13min)第2节课：

2、问题导入(3min)一传授新知(37min)一课堂小结(3min)一作业布置(2min)教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解CSS的相关特性。【学生】完成课前任务通过课前任务，使学生了解本次课的相关内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老帅要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入(5min)【教师】提出以下问题CSS三个非常重要的特性分别是什么？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，

3、引导学生主动思考，激发学生的学习兴趣传授新知(25min)3.5CSS的继承性、层叠性与优先级【教师】讲解CSS的继承性、层叠性与优先级等相关内容3.5.1 继承性【课堂互动】*【教师】提问通过教师讲解、课堂互动、演示操作等方式，使学生了解CSS的继承性、层叠性与优先级，以及CSS样式中的尺寸和颜色表什么是CSS的继承性？【学生】聆听、思考、回答CSS的继承性是指书写CSS样式时，子元素会自动继承为父元素设置的某些属性。【示例3-5-1】编辑HTML文档body标签的内容，代码如下：divp这是一个段落pvp这是一个段落pdivp这是一个p在HTML文档style标签内写入CSS选择器：div

4、coloured;效果：div标签的红色属性继承给子标签p,div标签之外的p标签文本为默认的黑色，没有变化。【示例3-5-2在【示例3-5-1的div选择器中追加边框相关声明，代码如下：border:2pxredsolid;效果：为div加了一个2px的红色实线边框，但没有继承给子元素p。【提示】(1)关于文字样式的属性都具有继承性，包括CoIor和以text-、Iine-、font-开头的属性。(2)所有关于盒子的、定位的、布局的属性都不能继承，但一般可以将子元素的相关属性的值设为inherit,来继承父元素的相关属性。3.5.2 层叠性使用相同的选择器为同一个元素设置相同的声明时,一个声

5、明会薄盖另一个有冲突的声明。层叠性主要解决声明冲突的问题，其原则是哪个声明书写在最后就执行哪个声明。【示例3-5-3编辑HTML文档body标签的内容，代码如下：Vdiv长江后浪推前浪，前浪推在沙滩上div在HTML文档style标签内写入CSS选择器：divcolorred;font-weight:700;divcolonblue:【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“层叠性效果”图片(详见教材)，并讲解效果：di标签的文本颜色属性设置层叠，第二次设置的蓝色覆盖第一次设置的红色；加粗样式只

6、设置了一次，不层叠。3.5.3 优先级在CSS样式中，当为同一元素设置多个声明时，会涉及声明的优先级问题，即优先执行哪些CSS声明。这主要通过各声明在CSS样式中的权重来实现.【课堂互动】+【教师】提问41 .选择器的优先级CSS为每种基础选择器都分配了一个权重，权重大小如下：内联样式id选择器类选择器（伪类选择器、属性选择器）标签选择器（伪元素选择器）通酉询选择器。【示例3-5-4编辑HTML文档标签的内容，代码如下：猜猜我什么颜色，红色？黄色？绿色？VPClaS3=conieni-class猜猜我什么颜色，红色？黄色？绿色？猜猜我什么颜色，红色？黄色？绿色？猜猜我什么颜色,红色?黄色？绿色

7、？在HTML文档标签内写入CSS选择器：#content-idcolored;.content-classcolor:yellow;pcolor:green;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“选择器的优先级”图片（详见教材），并讲解效果：内联样式的优先级最高，所以第四行为紫色；id选择器的优先级高于类选择器，所以第三行为红色；类选择器的优先级高于标签选择器，所以第二行为黄色；标签选择器P控制第一行，颜色为绿色。2 .!important权重最大【教师】讲解!important权重最大CS

8、S样式属性中有!impOrtant”标识的优先级最高。【示例3S5】编辑HTML文档标签的内容，代码如下：猜猜我什么颜色，红色？黄色？绿色？在HTML文档VSIyIe标签内写入CSS选择器：#content-idcolor:red;.content-classcolor:yellow;divColorrgreen!important;【教师】PPt展示!important的优先级”图片（详见教材），并讲解效果：虽然标签选择器的优先级低于类选择器和id选择器，但因为在标签选择器div中有!imponanl标识代码，所以最终执行该选择器中的属性设置，文本颜色为绿色。3 .复合选择器的权重叠加对于由

9、多个基础选择器构成的复合选择器（并集选择器除外），其权重值可表示为，力，c.其中，,。，C分别为复合选择器中id选择器、类选择器（或同级选择器）和标签选择器（或同级选择器）出现的次数。无论b有多大，只要大于0的权重都小于a；以此类推。例如，有两个选择器，一个选择器的权重为O=I,=0fC=O,另夕1个选择器的权重为eO=15,C=U,则前者的权重更大。【示例3-5-6编辑HTML文档标签的内容，代码如下：试问这行字体是什么颜色的?在HTML文档标签内写入CSS选择器：#father#sonCok)r:blue;#fatherp.c2(color:black;div.clp.c2color:re

10、d;#fathercolor:green!important;效果：最终文字为蓝色。其中，第I个蟒器的权重为2,0,0,第2个蝌器的权重为1,1,1,第3个选择器的权重为0,2,2,第4个选择器的权重为1,0,0,因此最终应用了第1个选择器设置的颜色。要注意的是，第4个选择器虽然应用了!important标识，但由于第1个僻器已为son子元素设置了属性，因此其并没有继承father父元素的属性【提示】开发者通常用自己惯用的方式控制样式，并不会过多进行权重计算。【学生】聆听、记录、理解3.6CSS的尺寸与颜色【教师】讲解CSS样式中尺寸和颜色表达方式3.6.1 CSS尺寸1 .绝对尺寸CSS样式

11、中的绝对尺寸主要有以下几种单位：(1)cm：厘米。(2)mm：毫米。(3)in：英寸,1in=96px=2.54cm=72pt(4)px：像素。(5)pl：点。(6)pc：派卡，1pc=12pt2 .相对尺寸CSS样式中的相对尺寸主要有以下几种表示方式：(1)em：相对于当前容器内的字体尺寸，可用nem表示(n表示倍数，如】，2,3.下同)。(2)ex：相对于当前字体的高度，可用nex表示。(3)Ch：相对于数字0的宽度，可用nch表示。(4)rem：相对于根元素的字体尺寸，可用nrem表示。(详见教材)【课堂互动】+【教师】提问CSS绝对尺寸和相对尺寸有什么异同点？【学生】聆听、思考、回答颜

12、色关键字即颜色英文名称，共有140种，如红色的颜色关键字为red.2.使用十六进制颜色十六进制颜色是以#开头的6位十六进制数。从开始到结尾，每两位十六进制依次代表红色、绿色、蓝色，最终显示的颜色是这3种颜色的混合色。在CSS样式中使用十六进制表达颜色时，通常其中的A-F写成大写。此外，当六位十六进制数全部相同时，可以简写为三位十六进制数，如/FFFFFF可简写为#FFF。3 .使用RGB颜色RGB颜色是用红、绿、蓝三色混合而成的颜色。其在CSS样式中的表达格式为：rgb(red,green,blue)其中的red、green、blue的值均可以是整数0255,分别表示红色、绿色、蓝色的强度。例

13、如,rgb(255,0,0)表示红色；rgb(238,130,238)表示紫色，rgb(0,0,255)表示蓝色。4,使用RGBA颜色RGBA颜色是CSS3新增的颜色表示方法。其在CSS样式中的表达格式为：rgba(red,green,bue,alpha)其中前三个参数同RGBealpha是介于完全透明0。和完全不透明1.0之间的数字。【示例3-6-1编辑HTML文档标签的内容，代码如下：在HTML文档VSIyle标签内写入CSS选择器：#boxwidth:300px;height:3(X)px;background-color:rgba(20,200,200);将CSS代码中的backgro

14、und-color属性改写为以下代码。background-color:rgba(20,200,200.0.3);【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“rgba属性设置透明度效果的前后对比”图片(详见教材)，并讲解效果：图片不透明，#box盒子为半透明。【学生】聆听、记录、理解5 .使用HSL颜色HSL颜色是用色相、饱和度和明度表示的颜色。其在CSS样式中的表达格式为：hsl(hue,saturation,lightness)(1)色相(hue)是I旨颜色的相貌(就是我们通常说的各种颜色),

15、用色轮上从0到360的度数表示。(2)饱和度(saturation)是指颜色的纯度,用百分比值表示,如100%表示颜色最纯。(3)亮度(IightneSS)是指颜色的明暗度，也用百分比值表示。6 .使用HSLA颜色HSLA颜色是CSS3新增的颜色表示方法。与HSL颜色相比，HSLA颜色增加了一个透明度参数。其在CSS样式中的表达的为：hsla(hue,saturation,lightness,alpha)其中前三个参数同HSL表达方式，alpha参数取值同RGBAe7.使用opacity属性Opacity也是CSS3新增的属性,用来定义颜色的透明度。其取值在0到1之间，0表示完全透明，1表示完

16、全不透明。【示例3-6-2修改【示例3-6-1CSS样式中的颜色属性,具体代码如下：#boxwidth:300px;height:3OOpx;background-color:rgb(20,200,200);opacity:0.3;)【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师迸行点评【学生】聆听、上机操作、演示【教师】PPt展示“opacity属性设置效果”图片(详见教材)，并讲解效果：图片和#boX盒子均为半透明。【提示】rgba()、hsla()和OPaCily都能实现透明效果。它们最大的不同是opacity除作用于元素外，还同时作用于元素内的所

17、有内容；而rgba()和hsla()只作用于元素本身，即背景色或文本颜色的透明度。【学生】聆听、记录、理解头脑风暴(13min)【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何将文本颜色属性设置层叠、第二次设置的蓝色覆盖第一次设置的红色？【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入(3min)【教师】提出以下问题CSS是通过哪些样式来设置文本外观的?【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知(37min)3.7CSS文本控制文本是网页的主要元素，CSS通过字体样式和文本样式等来设置文

18、本的外观.3.7.1 字体样式【教师】讲解字体样式的内容与示例【课堂互动】十【教师】提问CSS中的字体样式主要包括哪些内容？通过教师讲解、课堂互动、演示操作等方式，让学生了解CSS的字体样式和文本样式的具体设置方法CSS中的字体样式主要包括文字的字体、大小、粗细、样式和行高.1 .字体font-family属性名称：font-family.属性的值：字体1名称，字体2名称属性作用：为元素指定字体属性，按照优先级顺序，当字体1存在时，优先使用字体1；如果字体1不存在，则优先使用字体2；以此类推。字体之间用英文逗号分隔。【示例3-7-编辑HTML文档body标签的内容，代码如下：pclass=pl

19、从本质上讲，“工匠精神”是一种职业精神，它是职业道德、职业能力、职业品质的体现，是从业者的一种职业价值取向和行为表现。在新的时代弘扬和践行“工匠精神，须深入把握其基本内涵与当代价值。p(详见教材)在HTML文档slyle标签内写入CSS选择器：*box-sizing:border-box;fbnt-size:14px;margin:。;.plwidth:500px;(详见教材)效果：类名为p”的段落使用字体楷体，如浏览器不支持体，则应用字体微软雅黑。【提示】(1)中文字体名称或英文字体名称中包含空格、机$等符号时，需要添加英文标点引号。(2)引用多种字体时，英文字体位于中文字体之前。2 .字体

20、大小font-size【课堂互动】中【教师】提问字体大小font-size在CSS文本控制中有什么作用？十【学生】聆听、思考、回答属性名称：font-size.属性的值：字体大小。可以是绝对单位，最常用的是PX；也可以是相对单位。属性作用：为元素指定字体大小。【示例3-7-2】为【示例3-7-1】中的选择器.pl添加声明：font-size:20px;效果：与【示例3-7-1相比，字体变大。3.字体粗细font-weight【课堂互动】【教师】提问字体粗细font-weight的属性值有哪些？其具有什么作用？+【学生】聆听、思考、回答属性名称：font-weight。属性的值：normal（字

21、体为正常的字体，相当于参数为400）；bold（字体为粗体，相当于参数为700）；bolder（字体为特粗体）；lighter（字体为细体）；inherit（字体粗细为继承上级元素的font-weight属性设置）；100-900（设置不同的字体粗细）属性作用：为元素指定字体的粗细。【示例3-7-3】为【示例37-2中的选择器m.p1h添加声明：font-weighcbold;效果：与【示例3-7-2相比，字体变粗。4 .字体样式font-style属性名称font-stlye属性的值：normal（字体为标准字体样式）；italic（字体为斜体）；oblique（字体为倾斜）。属性作用：为元

22、素指定字体的样式，包括标准、斜体和倾斜。【示例374】为【示例372】中的CSS选择器.pl添加声明：Font-SiyleJialic;效果：与【示例3-7-3相比，字体变为斜体。5 .行高line-height属性名称：line-height属性的值：行间距（常用单位为px）属性作用：为元素指定行间距.【示例375】为【示例3-7-4】中的CSS选择器.pl添加声明：line-height:40px:效果：与【示例3-7-4相比，行高变为40px。6 .font综合设置字体样式font国寸字体样式进行综合设置，格式如下：选择器fontfonl-stylefont-weightfont-siz

23、e/line-heightfont-family;使用font综合设置字体样式时，需要按照以上顺序书写，各个属性以空格分隔。其中不需要设置的值可以省略，但是必须保留font-size和fonl-family属性。【示例3-7-6编辑HTML文档标签的内容，代码如下：美文欣赏美文欣赏在HTML文档标签内写入CSS选择器：.plline-heighc60px;font-family:楷体;font-size:40px;fbnt-weight:bold;（详见教材）【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进行演示，演示完成后教帅进行点评效果：使用pl和甲2选择器设置的文字样式完

24、全相同。7.定义服务器字体font-face在网页设计中，可以使用船6/86定义fl艮务器字体,以显示客户端未安装的字体。其语法格式如下：fOnt-facefont-family:字体名称:src:url(字体路径):)【示例3-7-7编辑HTML文档body标签的内容，代码如下：p热烈庆祝中国共产党成立一百周年vp在HTML文档slyle标签内写入CSS选择器：font-face(font-familyInewfbntface;src:UH(ZZgf.olf);pfbnt-family:newfbntface;fbnt-size:25px;coloured;【教师】PPt展示“font-fa

25、ce定义服务器字体效果”图片(详见教材)，并讲解效果：为文字设置了新的服务器字体样式。【提示】上述示例中，字体文件ZZgfOf需与HTML文档在同一目录.【学生】聆听、记录、理解3.7.2文本样式【教师】讲解文本样式的内容与示例【课堂互动】十【教师】提问CSS的文本样式主要包括哪些内容?十【学生】聆听、思考、回答CSS的文本样式主要包括文本的颜色、对齐方式、修饰、缩进和间距等。1 .文本颜色color属性名称：color.属性的值：颜色。属性作用：为元素指定文本颜色。【示例378】为【示例371】中的选择器.pl添加声明：Coloriblue;效果：与【示例3-7-1】相比，字体颜色变为蓝色。

26、2 .文本水平对齐方式text-align【教师】文本水平对齐方式text-align的示例属性名称：text-align属性的值:left（向左对齐）；right（向右对齐）；center（水平居中对齐）；justify（水平两端对齐）.属性作用：指定文本段落的水平对齐方式。【示例3-7-9编辑HTML文档body标签的内容，代码如下：pclass=pl”美文欣赏p在HTML文档siyle标签内写入CSS选择器：.plwidth:200px;heighc30px;border:Ipxsolid#B91720;fbnt-size20px;line-height:30px;lext-alignx

27、cnter;【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“文本对齐属性应用效果”图片（详见教材），并讲解效果：段落中的文字水平居中在盒子中。3 .文本修饰text-decoration【教师】文本修饰text-decoration的示例属性名称：iext-decoration.属性的值：none（无修饰）；underline（为文本添加下划线效果）；overline（为文本添加顶划线效果）；line-through（为文本添加删除线效果）属性作用：为文本指定修饰效果。【示例3-7-10编辑HTML文

28、档body标签的内容，代码如下：ahref=http:WWW百度ap百度一下你就知道p在HTML文档style标签内写入CSS选择器：atext-decoration:none;）pIexbdecoration:UnderIine;效果：a标签无文本修饰；p标签的文本修饰为下划线。4 .文本首行缩进text-indent属性名称：texl-indent。属性的值：缩进距离。属性值可以使用不同单位的数值、em字符宽度的倍数或者相对于浏览器窗口设百分比，可以使用负值，建议使用em做单位。属性作用：为文本段落指定首行缩进。【示例3-7-11】为【示例3-7-1】中的选择器.pl添加声明：text-i

29、ndent:2em;效果：与【示例3-7-1相比,段落首行缩进两个字符宽度。5 .英文字体大小写text-transform【教师】英文字体大小写text-transform的示例属性名称：lexl-lransform。属性的值：capitalize（首字母大写）；uppercase（所有字母全部大写）；lowercase（所有字蜂的写）属性作用：为文本指定英文字母大与规则。Let s look back all these years you ve gone through, what have you done for yourlife7p在HTML文档slyle标签内写入CSS选择器：.

30、pItext-transform:capitalize;效果：每个单词的首字母均为大写。6 .字间距letter-spacing属性名称：letter-spaing.属性的值：字间距（常用单位为px）。属性作用：为文本指定字间距。【示例3713】为【示例3-7-12】中的选择器.pl添加声明：letter-spacing:7px;【教师】PPt展示图片”字符间距设置效果”（详见教材），辅助并讲解字符间距设置效果效果：每个字符之间的间距变为7px7 .空白符处理white-space【课堂互动】十【教师】提问空白符处理应该有哪些属性值？十【学生】聆听、思考、回答属性名称：white-space.

31、属性的值：normal（忽略空白符，且保留换行符，即文本碰到容器边界时自动换行）；nowrap（空白符无效，且文本不会换行，直到遇到br标签）；Pre-Wi叩（保留空白符，且保留换行符，即文本碰到容器边界时自动换行）；pre-line（将多个连续的空白符合并成一个空格，且保留换行符）；pre（保留空白符，且文本不会换行，直到遇到br标签）；inherit（从父元素继承该属性的值）o属性作用：设置空白符（如空格、回车）和换行的处理方式。【示例3714】编辑HTML文档body标签的内容,代码如下：pclass=pl从本质上讲，工匠精神”是一种职业精神，它是职业道德、职业能力、职业品质的体现，是从

32、业者的一种价值取向和行为表现。br在新的时代弘扬和践行“工匠精神”，须深入把握其基本内涵与当代价值。brp在HTML文档style标签内写入css选择器：.plwidthr5（X）px;Padding:5px;font-family:“楷体”.“微软雅黑”：fbnt-size:20px;white-space:pre-wrap; J效果：段落中的文字保留空格且正常换行。background:pink;【示例3-7-15】将【示例3-7-14中white-space属性修改为以下值：white-space:nowrap;【教师】PPt展示“空白符处理效果（nowrap）”图片（详见教材），并讲解

33、效果：段落中的文字不换行，直到遇到换行符,且不保留多余空格。8 .文本溢出处理text-overflow属性名称：IeXl-OverflOWe属性的值：clip（不显示省略标记只简单地裁切）；ellipsis（文本溢出时显示省略标记.属性作用：指定元素中文本溢出的处理方式。【示例3716】为【示例3715】中的选择器.pl”添加声明：.plwidth:500px;padding:5px;fonl-family:楷体：fbnt-size:20px;（详见教材）效果：对文本中的溢出部分进行简单裁切。【示例3-7-17】将【示例3-7-16中的IeXt-OVerfIOW属性值修改如下：text-ov

34、erflow:ellipsis;【教师】PPt展示图片“文本溢出处理（ellipsis）”（详见教材），辅助并讲解文本溢出处理（ellipsis）效果：对于文本中溢出的部分显示省略标记，如图3712所示。9 .文字阴影text-shadow【教师】文字阴影text-shadow的示例【课堂互动】十【教师】提问文字阴影text-shadow应该有哪些属性值?【学生】聆听、思考、回答属性名称：IeXt-Shadow。属性的值：阴影水平延伸值阴影垂直延伸值阴影模糊作用距离阴影颜色属性作用：设置文本阴影样式。【示例3-7-18编辑HTML文档bo标签的内容，代码如下：美文欣赏在HTML文档标签内写入C

35、SS选择器：.plline-heighc60px;font-family:；fbnt-size:40px;fbnt-weight:bold;text-alignxenter;texi-shadow:2px3px5px#CCC;完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“文本阴影效果”图片（详见教材），并讲解效果：文本的阴影水平延伸2PX,垂直延伸3PX,模糊效果的作用距离为5PX,阴影颜色为浅灰色（#CCC）10.文字换行word-wrap属性名称：Word-Wrap。属性的值：nonal（正常）break-warp（换行）。属性作用：设置长单词或URL地址换行到下一行。

36、【示例3-7-19】替换【示例3.7/8】中的文本内容“美文欣赏为以下内容：Thisparagraphcontainsaverylongword:thisisaveryveryveryveryveryverylongword.Thelongwordwillbreakandwraptothenextline.在HTML文档slyle标签内写入CSS选择器：PHwidlh:300px;padding:5px;font-size:20px;background:pink;WOrd-Wrapzbreak-Word;效果：长单词thisisaverjfveryVeryveryveryverylongwo

37、rdn换行到下一行。【提示】如果将示例中的word-wrap属性值修改为word-wrap:normal;。【学生】聆听、记录、理解课堂小结（3min）【教师】简要总结本节课的要点本节课主要学习了CSS的特性，CSS样式中的尺寸和颜色表达方式、文本控制等内容，希望通过本节课的讲解，大家可以掌握在CSS中设置尺寸、颜色、字体样式和文体样式的具体方法，提升操作技能。【学生】总结回顾知识点总结知识点，巩固学生对CSS的特性、尺寸与颜色表达方式、文本控制等相关知识的印象作业布置（2min）【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：围绕第一节课制定的主题项目，使用本节课所学的尺寸、演示、字体、文本等设置进行设计，并形成文档上传至APP【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课在教学中遇到一些意想不到的问题，导致学生不能按计划时间回答问题。在我们设计教学方案时，应该多想想：学生已有哪些识储备怎样依据有关理论和学生实际设计易于为学生理解的教学方案学生在接受新知识时会出现哪些情况”等。此外，要在备课时，还应预备好各种不同的教学方案。【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示