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

梦幻魔术手，让网页风格轻松变——CSS样式表教学设计 信息组 高燕芬 【教材】教育科学出版社《网络技术应用》（选修） 【课题】5.2.2CSS样式表 【教材分析】样式表的学习是本章中较难的一节，三种样式表的格式不同，所使用的场合不同，而且样式所涉及的属性和属性值较多，对于以前经常用菜单命令的学生来说，样式表代码更显纷繁复杂。CSS的学习是以html为基础的，而前一章建立主题网站较少涉及html部分，如果按照教材的内容将样式表内容作为动态网页的第二节直接抛出给学生，将使学生感到生涩难懂，学习困难较大。因此在学习javascript和CSS之前我专门用了两节课的时间，对html中的常用标记和相应的属性作了介绍，弥补了教材难度的跨跃，为学生搭建了攀登CSS的阶梯，同时也为学生较好地掌握三种样式表打下坚实的基础。 【学习中可能遇到的困难及对策】 1、从原来的“菜单命令式”到现在的“输入代码”带来学习方式的转变，使一些学生感到不适应。 对策：除了前面javascript的教学中涉及到代码外，专门增加了两堂html超文本标记语言的学习，尽量作好代码的铺垫工作，让学生暂时摒弃菜单命令，树立学好CSS信心。 2、不了解CSS的属性和属性值，无法写出自己想要的CSS代码 对策：将常用CSS属性和属性值以表格的形式归类整理给学生，让学生在需要使用的时候只要像查阅工具书一样查阅表格就可以随心所欲地设置自己想要的样式。 3、不能区别嵌入、内联、外联三种样式表使用的场合 对策：讲清三者的逻辑关系和联系，设计典型的实践，让学生在体验中获得经验，并用自己的语言加以归纳。 【教学目标】 知识与技能： （1）了解嵌入、内联、外联三种样式表使用的不同场合。 （2）掌握嵌入、内联、外联样式表三种样式表的作用及格式。 （3）能根据实际需求合理应用样式表来统一页面的风格。 过程与方法 通过学生对三种样式表的实践体验归纳出三种样式表的优势和合适的使用场合。 情感态度与价值观 通过罗列更多的样式属性，展示更多的样式表的页面，让学生知道今日所学较粗浅，学无址境，学习一定要下功夫，肯钻研。 【总体设计思路】根据教学内容内在逻辑结构确定整体教学流程“从嵌入到内联再到外联”，每个环节之间的过渡力求设计自然、环环相扣，通过学生对前一知识点遗留问题的思考和解决引入下一个环节，可谓铺垫得当，水到渠成，使学生感到无论哪种样式表的出现，都不是生硬而突兀的，而是被需求的，是有理有据的。任务设计力求体现层次，并且每个任务目的明确，有的是掌握新知，有的是引入下一环节。 【教学过程】 【魔术引入】出示刘谦酷图，引入师生互动小魔术：分别请三位不同的学生打开魔盒的链接，第一位打开的是彩色页面，教师对网页第一次施加魔力，第二位打开的页面跟前一页面内容一模一样，但颜色全无，是灰色的页面，教师再次对网页施加魔力，第三位打开的是恢复的原版彩色页面。 学生一片惊叹！ [引导]魔术的秘密在哪呢？ [魔术解密] 原因：教师给学生看的页面是不同的页面，学生解密：打开jiemi文件夹中的color.htm以及gray.htm，比较body部分的不同。 在灰色页面的body标记中多了style=filter:gray 【引入设计思想】 1、用炙手可热人物刘谦及魔术的形式引入课题，氛围好，形式活泼新颖，最大限度激发学生的学习热情。 2、该引入设计并不是刻意追求魔幻效果以博人眼球，相反，它不权激趣效果好，而且非常务实，因为从魔术解密环节找到魔术的秘密——body标记的不同，就很自然地引入嵌入样式表。 【新授】一、嵌入CSS [格式] 标记名称 style=“样式属性:属性值；样式属性:属性值...” [说明]将CSS代码嵌入到标记中的形式，即为嵌入式，作用范围只限于本标签。 [任务一]打开EX1文件夹中的fyzb.htm，完成以下嵌入样式,并保存（先在学案中完成原始代码，再复制到记事本中编辑） 基础练习：使用样式表使“飞越梦想”下面单元格中的文字变为10pt 拓展练习：在标题图片中嵌入样式，使图片外观发生改变。所用样式filter:alpha (style=参数值),参数范围1~3，观察图片的变化。 CSS属性参考表 属性名称 属性 属性值 滤镜 filter Gray(变灰) Alpha(opacity=参数值，style=参数值) 字体 font-family 所有字体，如”宋体” 字号 Font-size 具体数值，如10pt 就是指10磅 颜色 color 颜色的英文名或具体数值，如red或#FF0000 [实践后的交流与评价]突出几个问题：（1）标点符号不是英文半角（2）英语单词拼错现象（3）不需要的空格 [引导]如果要把网页中所有单元格中的文字都变为10pt,你会怎么做？ [学