• 茅海莉 网页神奇魔术师——CSS层叠样式表
  •           2011-7-7     浏览()     【
  • 射阳县陈洋中学 茅海莉

      设计思想
      本设计遵循新课程标准的指导思想,以建构主义理论为理论依据,以学生为主体、教师为主导,借助于多媒体网络教室,充分利用网络资源,关注学生的学习兴趣和经验,不是仅仅将目标锁定于CSS相关知识学习,而是通过更多、更深地体验,建立了知识与技能、过程与方法、情感态度与价值观的三维教学目标。表面上是要使学生掌握网页制作中CSS相关知识,实际上是要使信息文化内化为学生的自然意识和自然需求。整个教学过程为学生创造了在获取知识的过程中亲历、体验、感悟、提升的条件,使学生在学习理解基本的CSS技术的同时,体验CSS样式表的优势和神奇,激发学生对CSS层叠样式表学习的兴趣,真正做到了使学生在感受信息文化的同时,提升了审美意识和体验、享受成功的乐趣,真正达到在感受中发现,在领悟中升华的美好境界。
      教材分析
      《CSS样式表》是高中信息技术教育科学出版社选修《网络技术应用》第五章的内容。根据多年教学经验,学生如果没能很好地掌握这部分内容,就容易形成畏惧心理,影响后面的学习。为了让学生学得既轻松又扎实,切实地体验样式表的超凡“魔力”就显得尤为重要。
      学生分析
      高一年级的学生在必修课本中已经掌握了网站制作的基本要领。但对于动态网页这部分内容比较生疏。CSS样式表对于学生来说枯燥、无趣,学生仅有一点html知识,因此要在html的基础上,让学生理解和掌握几类样式表的功能、特点,需要有针对性地授课设计。
      教学目标
      知识与技能
      (1) 了解什么是CSS及CSS的功能。
      (2) 了解CSS样式表的样式规则。
      (3) 理解将CSS加入网页的主要方式,能读懂简单的CSS样式表代码,并能根据需要选择适当的方式(内联样式表,外部样式表)和适当的层叠样式表,插入到当前网页的HTML代码中。
      过程与方法
      (1) 通过学习理解将CSS加入网页的主要方式,能根据需要,选择适当的方式(内联样式表,外部样式表)和适当的层叠样式表,插入到当前网页的HTML代码中。
      (2) 通过“魔术表演”,体验CSS样式表的优势和神奇,并通过实例学习理解基本的CSS技术(如:改变文字样式、改变链接样式等)。
      情感态度与价值观
      (1) 用切合实际的展示、亲历等方式,激发学生对CSS层叠样式表学习的兴趣,为新的学习打下基础。
      (2) 通过CSS层叠样式表学习与简单使用操作,提高学生的信息技术能力和信息素养,提升学生审美意识和体验、享受成功的乐趣。
      教学重点、难点
      (1) 理解将CSS加入网页的主要方式。
      (2) 根据需要,选择适当的方式(内联样式表,外部样式表)和适当的层叠样式表,插入到当前网页的HTML代码中。
      教学方法
      作品展示法、演示法、分层教学法、自主学习探究法等多种教学法。
      教学环境、教学手段
      多媒体网络教学、导学课件、极域广播系统。
      教学过程设计
      设计思路:创设情景,导入新课、尝试学习,实践与探究、学习过程评价(作品展示),教学拓展,合作交流(协作学习),总结性评价(巩固练习),总结反思。
      教学过程

    教师活动

    学生活动

    教学意图

     、【魔术表演
     师:“同学们,春晚中刘谦的魔术给大家带来了一丝震撼,眼下魔术非常流行,我们中的不少同学对此也特别着迷,今天我们的课程就从魔术开始,我也给大家变一个魔术,露一手”。
     教师屏幕广播,展示网站——加工前主页.htm。
     教师关闭屏幕广播,快速css文件链接语句插入。
     请一个学生上讲台,单击浏览器中的“刷新”按钮。
     网站“大变身”,学生惊呼。
     魔术结束,学生小声讨论。

     

     

    魔术前页面效果

    魔术后页面效果

     请同学比较讨论。

    观看魔术变化前后网站的变化

    利用魔术展开情境教学,吸引学生兴趣,激发学习热情

     、【揭示魔术真相
     师:“刚才我们表演了一个‘网站大变身’的魔术,同学们一定很想知道这个魔术的秘密,今天就要教会大家这个魔术。魔术之前,我们先来热身”。
     魔术前热身:给学生提供变魔术的两个“道具”,两个网页,先请学生对这两个网页进行简单评价,找出需要修改的地方。

     

     

    网页1:加工前主页.htm

    网页2:加工前烟雨红尘心情日记1.htm

     让学生利用已有的网站制作的知识,分别对这两个网站进行加工修改。(修改所有的文字格式)
     分两组分别对两个网页进行修改。
     (教师巡视指导)
     屏幕转播某学生操作过程:逐一修改文字,从而产生重复劳动,效率低。有没有简单的方法呢?教师由此引入CSS内联样式表的功能及使用方法。
     (教师演示,插入内联样式表)
     <head>
     <style
     type=”text/css”>
     ……
     </style>
     </head>
     师:比较一下刚才两个网页?
     生:样式基本上差不多,在每一个网页中插入代码。
     (学生插入内联样式表)
     师:这样效率高吗?
     生:……
     师:每一个网页都插入内联样式表,会造成工作繁琐,语句重复,导致运行速度减慢。怎么办?
     举例:给大家出一道数学题。
     师:ab+ac+ad=?
     生:a(b+c+d)。
     师:什么方法?
     生:提取公因式。
     (板书)由数学中的“提取公因式”引出:
     一样的道理,此时可以编写一个CSS文件,借助外部样式表来实现不同页面的风格。这样可以减少代码,提高网站运行速度,这就是外联样式表。
     操作方法:
     教师演示,插入外联式。
     大家想一下:如果只有在一个地方使用这种样式,还需要我们刚才讲的两种方法吗?
     学生思考
     得出结论:不需要,直接写代码就行了,这就是第3种方法嵌入式。
     举例:教师演示。

     

    学生找出网站中需要修改的地方

     

     

     

     

     

     

    学生利用已有知识对网站进行修改

     

     

    观看教师的操作过程

     

     

     

     

     

     

     

     

     

     

     

     

     

    学生利用所体验到的样式表的知识,重新对两个网站进行整改

     

    引出第三种方式嵌入式

     

    为CSS样式表内容做铺垫

     

     

     

     

     

     

     

    这是一个让学生

    “碰壁”的过程,从中产生需求——寻找解决问题的新方法

     

     

    学生此时仅是“依葫芦画瓢”的学习过程,是一种对样式表的体验过程

     

     

     

     

    使学生产生认知冲突

     

     

     

     

     

     

     

    找到了数学中“提取公因式”这一知识点,成为讲解外联样式表的突破口。让学生自然的接受了外联样式表

     

     、【你来试试
     教师发送网站实例“mysite”。
     学生自我操作,实现刚才所讲的内容。(style.css是改变文字样式)
     如果想修改网页背景,将如何操作?(随便使用今天讲的哪种方式,背景.css是改变网页背景代码)

    根据所学知识,灵活选择样式表,将网站成功美化

    学生演示

    让学生不仅仅“依葫芦画瓢”,还要活学活用通过学生的讲解带领全班同学对样式表进行巩固

     、【魔术课总结
     (板书总结)
     (板书讨论)CSS定义
     (学生)说出三类样式表的名称、作用范围和使用方法。
     (教师)加上线条,顺利完成板书表格。

    学生总结

    对样式表的概念、功能、分类等知识再梳理

     、【魔术师考级
     分层次:没有完成网站美化任务的同学继续完成,完成好的同学进行魔术师考核,检验自己的学习效果。
     填写表格

     

    嵌入式

    内联式

    外联式

    什么时候用比较好

     

     

     

    如何操作

     

     

     


    分层次

    完成任务

    通过自我考核,让学生对自己的学习效果进行检验

      教学反思
      CSS层叠样式表这部分内容本来比较枯燥乏味,教师讲解起来有一定的难度,如何把这三种样式表的概念、特点和功能说清楚是至关重要的。因此需要创设一定的情境教学,让学生更容易接受。全文共分五个部分:【魔术表演】【揭示魔术真相】【你来试试】【魔术课总结】【魔术师考级】。
      课堂导入利用时下比较流行的刘谦魔术作为开场,激发学生兴趣,这样能很好地把学生吸引过来。让学生利用已有知识修改网页,让学生在这样的“重复劳动”中产生认知冲突,这样的做法对不对?适不适合?从而产生需求——寻找找到解决问题的新方法。这样引人方法让学生更能接受。
      本节课,整体效果不错,学生们基本上都能够顺利完成教学目标。课堂气氛也比较活跃。
      参考文献
      教育科学出版社《网络技术应用》
      网络资源
      附件
      魔术表演.ppt
      网站实例.rar  

  • 返回顶部】 【关闭】 【打印
  相关文章
  • 暂无相关文章
  • 网友评论
  • 登录 现在有条评论 查看全部评论
  • 标题:
  • 内容:
  • 验证码: