梦幻魔术手,让网页风格轻松变CSS样式表教学设计10.doc

梦幻魔术手，让网页风格轻松变CSS样式表教学设计信息组 高燕芬【教材】教育科学出版社网络技术应用（选修） 【课题】5.2.2CSS样式表【教材分析】样式表的学习是本章中较难的一节，三种样式表的格式不同，所使用的场合不同，而且样式所涉及的属性和属性值较多，对于以前经常用菜单命令的学生来说，样式表代码更显纷繁复杂。CSS的学习是以html为基础的，而前一章建立主题网站较少涉及html部分，如果按照教材的内容将样式表内容作为动态网页的第二节直接抛出给学生，将使学生感到生涩难懂，学习困难较大。因此在学习javascript和CSS之前我专门用了两节课的时间，对html中的常用标记和相应的属性作了介绍，弥补了教材难度的跨跃，为学生搭建了攀登CSS的阶梯，同时也为学生较好地掌握三种样式表打下坚实的基础。【学习中可能遇到的困难及对策】1、从原来的“菜单命令式”到现在的“输入代码”带来学习方式的转变，使一些学生感到不适应。对策：除了前面javascript的教学中涉及到代码外，专门增加了两堂html超文本标记语言的学习，尽量作好代码的铺垫工作，让学生暂时摒弃菜单命令，树立学好CSS信心。2、不了解CSS的属性和属性值，无法写出自己想要的CSS代码对策：将常用CSS属性和属性值以表格的形式归类整理给学生，让学生在需要使用的时候只要像查阅工具书一样查阅表格就可以随心所欲地设置自己想要的样式。3、不能区别嵌入、内联、外联三种样式表使用的场合对策：讲清三者的逻辑关系和联系，设计典型的实践，让学生在体验中获得经验，并用自己的语言加以归纳。【教学目标】1、 知识与技能：（1）了解嵌入、内联、外联三种样式表使用的不同场合。（2）掌握嵌入、内联、外联样式表三种样式表的作用及格式。（3）能根据实际需求合理应用样式表来统一页面的风格。2、 过程与方法通过学生对三种样式表的实践体验归纳出三种样式表的优势和合适的使用场合。3、 情感态度与价值观通过罗列更多的样式属性，展示更多的样式表的页面，让学生知道今日所学较粗浅，学无址境，学习一定要下功夫，肯钻研。【总体设计思路】根据教学内容内在逻辑结构确定整体教学流程“从嵌入到内联再到外联”，每个环节之间的过渡力求设计自然、环环相扣，通过学生对前一知识点遗留问题的思考和解决引入下一个环节，可谓铺垫得当，水到渠成，使学生感到无论哪种样式表的出现，都不是生硬而突兀的，而是被需求的，是有理有据的。任务设计力求体现层次，并且每个任务目的明确，有的是掌握新知，有的是引入下一环节。【教学过程】【魔术引入】出示刘谦酷图，引入师生互动小魔术：分别请三位不同的学生打开魔盒的链接，第一位打开的是彩色页面，教师对网页第一次施加魔力，第二位打开的页面跟前一页面内容一模一样，但颜色全无，是灰色的页面，教师再次对网页施加魔力，第三位打开的是恢复的原版彩色页面。学生一片惊叹！引导魔术的秘密在哪呢？魔术解密 原因：教师给学生看的页面是不同的页面，学生解密：打开jiemi文件夹中的color.htm以及gray.htm，比较body部分的不同。在灰色页面的body标记中多了style=filter:gray【引入设计思想】1、用炙手可热人物刘谦及魔术的形式引入课题，氛围好，形式活泼新颖，最大限度激发学生的学习热情。2、该引入设计并不是刻意追求魔幻效果以博人眼球，相反，它不权激趣效果好，而且非常务实，因为从魔术解密环节找到魔术的秘密body标记的不同，就很自然地引入嵌入样式表。【新授】一、嵌入CSS格式 说明将CSS代码嵌入到标记中的形式，即为嵌入式，作用范围只限于本标签。任务一打开EX1文件夹中的fyzb.htm，完成以下嵌入样式,并保存（先在学案中完成原始代码，再复制到记事本中编辑）基础练习：使用样式表使“飞越梦想”下面单元格中的文字变为10pt拓展练习：在标题图片中嵌入样式，使图片外观发生改变。所用样式filter:alpha (style=参数值),参数范围13，观察图片的变化。CSS属性参考表属性名称属性属性值滤镜filterGray(变灰)Alpha(opacity=参数值，style=参数值)字体font-family 所有字体，如”宋体”字号Font-size具体数值，如10pt 就是指10磅颜色color颜色的英文名或具体数值，如red或#FF0000实践后的交流与评价突出几个问题：（1）标点符号不是英文半角（2）英语单词拼错现象（3）不需要的空格引导如果要把网页中所有单元格中的文字都变为10pt,你会怎么做？学生在每个标记中逐一嵌入。教师这样将产生大量的冗余代码，将这些代码提取出来，在头部定义。【任务一设计思想】1、任务设计体现层次性，通过基础练习完全能体会到嵌入样式表的基本格式和使用方法以及出现的效果；对领悟能力高，完成任务速度快的同学，可以从拓展练习中开阔自己的视野，看到神奇的嵌入滤镜的效果。2、设计中的留白效果：“字号10磅”，该属性与属性值需要学生通过自己学习CSS属性参考表来决定样式表中代码如何表达；拓展练习中滤镜不同参数的设置也是一个学生学习和观察的留白点。3、任务一结束后的引导也是经过精心设计的，在“每个标记中嵌入同样的代码”引导学生想到“把相同的代码先定义”，很自然地引入了“内联样式表”，这个过渡衔接非常自然。二、内联CSS格式在头部定义样式内容 Tdfont-size:10pt 任务二打开EX1中的fyzb.htm基础练习：使用内联样式，使所有单元格字号为10pt,字体为隶书。进阶练习：使用内联样式表使超链接外观发生变化，样式代码已保存在c1.txt文件中。学习前指导 教师带领学生解读超链接的三种状态：a:link 常态a:hover 鼠标经过a:visited 访问后实践后评价与讨论主要问题（1）没有样式表的结束标记（2）拼写与标点错误引导和讨论1、基础练习和进阶练习都必须使用内联样式表完成吗？（基础练习可以在菜单中完成）2、怎样使网站中所有页面都拥有相同整齐划一的外观？（隶书，10磅，C1超链接样式），是否在每个网页中都复制内联样式？【任务二设计思想】1、任务二的主要目的使学生了解内联样式表的格式，理解并会使用内联样式表。2、“基础练习”和“进阶练习”首先在难度上是有梯度的，第二在“引导和讨论”区的第一个问题，能引导学生体会像超链接的三种状态这种样式是不能简单地利用菜单来完成的，必须要用样式表，体现样式表的优势。3、“引导和讨论”的第二个问题也是一个抛砖引玉的问题，怎样使所有页面拥有相同整齐划一的外观？这样也会带来一个重复代码的问题，这样，非常自然地引出了外联样式表，而且也预示了外联样式表的优点。三、外联样式表格式把样式定义成一个*.CSS文件，在头部用以下代码 使样式生效。 注意：*.css必须与网页文字存放在同一个目录内。任务三打开EX1文件夹,基础练习：利用外联样式表使其他五个页面与主页面拥有相同的外观（单元格文字10pt,隶书，超链接样式c1）进阶练习：怎样使每个页面超链接外观改为“鼠标指向链接文字时背景为黄色”. （修改C1.css）实践后讨论与评价主要出现问题（1）保存的CSS文件与网页文件不在同一目录内（2）引用文件名写错（3）拼写与标点的问题【任务三设计思想】1、 “基础练习”让学生熟悉外联样式表的引用格式，并能正确使用外联样式表。2、“进阶练习”让学生充分体会到用外联样式表的优势：能方便地控制、更改网页的外观。【生总结】1、样式表有哪几种形式？各自的作用范围如何?2、利用CSS样式表可以对网页设置哪些样式?3、使用CSS样式表对制作网站方面体现哪些优势?【总结部分设计思想】1、通过讨论三种样式表的作用范围使学生了解三种样式表使用的不同场合及各自的作用。2、学生根据自己的“实践和拓展练习”回顾总结所涉及到的网页样式，教师进一步开阔了学生的视野，补充了更多的样式，如滤镜特效、网页背景、边距等，鼓励学生进一步探究。3、使再次强化认识了样式表对设置页面统一风格的强大功能。现将本课较明显的特色总结如下：1、 学生亲自参与的魔术“引入”新颖有趣，带有悬念，激发学生的探索求知欲望。2、 从嵌入到内联，再从内联到外联，都精心设计了过渡，使各环节衔接自然，同时使学生感到使用这些不同样式表的必要性，逻辑结构强。3、 任务设计分层明显，每个任务都设有基础练习和进阶练习或拓展练习，而且在任务中有适当的留白，留给学生更多的思考空间。4、5、6、7、8、9、10、11、12、13、14、15、16、17、18、19、20、21、22、23、 gPdLaI6F3C0y)v&s#pXlUiRfNcK9H5E2A+x(u$rZoWkThPeMbJ7G4D1z-w&t!qYmVjSgOdL9I6F3B0y)v%s#oXlUiQfNcK8H5E2A+x*u$rZnWkThPeMaJ7G4C1z-w&t!pYmVjRgOdL9I6E3B0y(v%s#oXlTiQfNbK8H5D2A-x*u$qZnWkShPdMaJ7F4C1z)w&t!pYmUjRgOcL9I6E3B+y(v%r#oXlTiQeNbK8G5D2A-x*t$qZnVkShPdMaI7F4C0z)w&s!pXmUjRfOcL9H6E2B+y(u%r#oWlTiQeNbJ8G5D1A-x*t$qYnVkSgPdMaI7F3C0z)v&s!pXmUiRfOcK9H6E2B+x(u%rZoWlThQeMbJ8G4D1A-w*t!qYnVjSgPdLaI6F3C0y)v&s#pXmUiRfNcK9H5E2B+x(u$rZoWkThQeMbJ7G4D1z-w*t!qYmVjSgOdLaI6F3B0y)v%s#pXlUiQfNcK8H5E2A+x*u$rZnWkThPeMbJ7G4C1z-w&t!qYmVjRgOdL9I6F3B0y(v%s#oXlUiQfNbK8H5D2A+x*u$qZnWkShPeMaJ7F4C1z)w&t!pYmUjRgOcL9I6E3B+y(v%r#oXlTiQfNbK8G5D2A-x*u$qZnVkShPdMaJ7F4C0z)w&s!pYmUjRfOcL9H6E3B+y(u%r#oWlTiQeNbJ8G5D1A-x*t$qYnVkSgPdMaI7F4C0z)v&s!pXmUjRfOcK9H6E2B+y(u%rZoWlThQeNbJ8G4D1A-w*t$qYnVjSgPdLaI7F3C0y)v&s#pXmUiRfNcK9H5E2B+x(u%rZoWkThQeMbJ8G4D1z-w*t!qYnVjSgOdLaI6F3C0y)v%s#pXlUiRfNcK8H5E2A+x(u$rZnWkThPeMbJ7G4C1z-w&t!qYmVjRgOdL9I6F3B0y)v%s#oXlUiQfNcK8H5D2A+x*u$rZnWkShPeMaJ7G4C1z)w&t!pYmVjRgOcL9I6E3B0y(v%r#oXlTiQfNbK8G5D2A-x*u$qZnWkShPdMaJ7F4C1z)w&s!pYmUjRgOcL9H6E3B+y(v%r#oWlTiQeNbK8G5D1A-x*t$qZnVkSgPdMaI7F4C0z)v&s!pXmUjRfOcL9H6E2B+y(u%r#oWlThQeNbJ8G5D1A-w*t$qYnVkSgPdLaI7F3C0z)v&s#pXmUiRfOcK9H5E2B+x(u%rZoWkThQeMbJ8G4D1z-w*t!qYnVjSgPdLaI6F3C0y)v&s#pXlUiRfNcK9H5E2A+x(u$rZoWkThPeMbJ7G4D1z-w&t!qYmVjSgOdL9I6F3B0y)v%s#oXlUiQfNcK8H5E2A+x*u$rZnWkThPeMaJ7G4C1z-w&t!pYmVjRgOdL9I6E3B0y(v%s#oXlTiQfNbK8D1z-w&t!qYmVjSgOdL9I6F3B0y)v%s#pXlUiQfNcK8H5E2A+x*u$rZnWkThPeMaJ7G4C1z-w&t!pYmVjRgOdL9I6E3B0y(v%s#oXlTiQfNbK8H5D2A-x*u$qZnWkShPeMaJ7F4C1z)w&t!pYmUjRgOcL9I6E3B+y(v%r#oXlTiQeNbK8G5D2A-x*t$qZnVkShPdMaI7F4C0z)w&s!pXmUjRfOcL9H6E3B+y(u%r#oWlTiQeNbJ8G5D1A-x*t$qYnVkSgPdMaI7F3C0z)v&s!pXmUiRfOcK9H6E2B+x(u%rZoWlThQeMbJ8G4D1A-w*t!qYnVjSgPdLaI7F3C0y)v&s#pXmUiRfNcK9H5E2B+x(u$rZoWkThQeMbJ7G4D1z-w*t!qYmVjSgOdLaI6F3B0y)v%s#pXlUiQfNcK8H5E2A+x(u$rZnWkThPeMbJ7G4C1z-w&t!qYmVjRgOdL9I6F3B0y(v%s#oXlUiQfNbK8H5D2A+x*u$qZnWkShPeMaJ7F4C1z)w&t!pYmUjRgOcL9I6E3B0y(v%r#oXlTiQfNbK8G5D2A-x*u$qZnVkShPdMaJ7F4C0z)w&s!pYmUjRfOcL9H6E3B+y(u%r#oWlTiQeNbJ8G5D1A-x*t$qZnVkSgPdMaI7F4C0z)v&s!pXmUjRfOcK9H6E2B+y(u%rZoWlThQeNbJ8G4D1A-w*t$qYnVjSgPdLaI7F3C0y)v&s#pXmUiRfOcK9H5E2B+x(u%rZoWkThQeMbJ8G4D1z-w*t!qYnVjSgOdLaI6F3C0y)v%s#pXlUiRfNcK8H5E2A+x(u$rZnWkThPeMbJ7G4C1z-w&t!qYmVjSgOdL9I6F3B0y)v%s#oXlUiQfNcK8H5D2A+x*u$rZnWkShPeMaJ7G4C1z)w&t!pYmVjRgOcL9I6E3B0y(v%r#oXlTiQfNbK8H5D2A-x*u$qZnWkShPdMaJ7F4C1z)w&s!pYmUjRgOcL9H6E3B+y(v%r#oWlTiQeNbK8G5D1A-x*t$qZnVkSgPdMaI7F4C0z)v&s!pXmUjRfOcL9H6E2B+y(u%r#oWlThQeNbJ8G5D1A-w*t$qYnVkSgPdLaI7F3C0z)v&s#pXmUiRfOcKD1A-x*t$qZnVkShPdMaI7F4C0z)w&s!pXmUjRfOcL9H6E2B+y(u%r#oWlThQeNbJ8G5D1A-w*t$qYnVkSgPdLaI7F3C0z)v&s#pXmUiRfOcK9H6E2B+x(u%rZoWlThQeMbJ8G4D1A-w*t!qYnVjSgPdLaI6F3C0y)v&s#pXlUiRfNcK9H5E2A+x(u$rZoWkThPeMbJ7G4D1z-w&t!qYmVjSgOdLaI6F3B0y)v%s#pXlUiQfNcK8H5E2A+x*u$rZnWkThPeMaJ7G4C1z-w&t!pYmVjRgOdL9I6E3B0y(v%s#oXlTiQfNbK8H5D2A+x*u$qZnWkShPeMaJ7F4C1z)w&t!pYmUjRgOcL9I6E3B+y(v%r#oXlTiQeNbK8G5D2A-x*t$qZnVkShPdMaI7F4C0z)w&s!pXmUjRfOcL9H6E3B+y(u%r#oWlTiQeNbJ8G5D1A-x*t$qYnVkSgPdMaI7F3C0z)v&s!pXmUiRfOcK9H6E2B+x(u%rZoWlThQeMbJ8G4D1A-w*t$qYnVjSgPdLaI7F3C0y)v&s#pXmUiRfNcK9H5E2B+x(u$rZoWkThQeMbJ7G4D1z-w*t!qYmVjSgOdLaI6F3B0y)v%s#pXlUiRfNcK8H5E2A+x(u$rZnWkThPeMbJ7G4C1z-w&t!qYmVjRgOdL9I6F3B0y(v%s#oXlUiQfNbK8H5D2A+x*u$qZnWkShPeMaJ7F4C1z)w&t!pYmVjRgOcL9I6E3B0y(v%r#oXlTiQfNbK8G5D2A-x*u$qZnVkShPdMaJ7F4C0z)w&s!pYmUjRfOcL9H6E3B+y(u%r#oWlTiQeNbK8G5D1A-x*t$qZnVkSgPdMaI7F4C0z)v&s!pXmUjRfOcK9H6E2B+y(u%rZoWlThQeNbJ8G4D1A-w*t$qYnVjSgPdLaE3B+y(v%r#oWlTiQeNbK8G5D1A-x*t$qZnVkSgPdMaI7F4C0z)v&s!pXmUjRfOcK9H6E2B+y(u%rZoWlThQeNbJ8G4D1A-w*t$qYnVkSgPdLaI7F3C0z)v&s#pXmUiRfOcK9H5E2B+x(u%rZoWkThQeMbJ8G4D1z-w*t!qYnVjSgOdLaI6F3C0y)v%s#pXlUiRfNcK9H5E2A+x(u$rZoWkThPeMbJ7G4D1z-w&t!qYmVjSgOdL9I6F3B0y)v%s#oXlUiQfNcK8H5D2A+x*u$rZnWkShPeMaJ7G4C1z)w&t!pYmVjRgOdL9I6E3B0y(v%s#oXlTiQfNbK8H5D2A-x*u$qZnWkShPdMaJ7F4C1z)w&s!pYmUjRgOcL9H6E3B+y(v%r#oWlTiQeNbK8G5D2A-x*t$qZnVkShPdMaI7F4C0z)w&s!pXmUjRfOcL9H6E2B+y(u%r#oWlThQeNbJ8G5D1A-w*t$qYnVkSgPdLaI7F3C0z)v&s#pXmUiRfOcK9H6E2B+x(u%rZoWlThQeMbJ8G4D1A-w*t!qYnVjSgPdLaI6F3C0y)v&s#pXlUiRfNcK9H5E2A+x(u$rZoWkThPeMbJ7G4D1z-w*t!qYmVjSgOdLaI6F3B0y)v%s#pXlUiQfNcK8H5E2A+x*u$rZnWkThPeMaJ7G4C1z-w&t!pYmVjRgOdL9I6E3B0y(v%s#oXlUiQfNbK8H5D2A+x*u$qZnWkShPeMaJ7F4C1z)w&t!pYmUjRgOcL9I6E