CSS层叠样式表教案

《CSS层叠样式表教案》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、css层叠样式表海南省农垦实验中学邢裕本课内容为教科版《网络技术应用》第五章动态网页制作教学目标：1.知识与技能：掌握css样式表的概念，并能够根据实际情况，选择合适的样式表对网页或网样式进行修改。2.过程与方法：运用网络版课件自主学习，更好的体验动态网页制作过程。同时让学生在操作中产生认知冲突，从而循序渐进完成教学。3•情感态度与价值观：培养学生合理选择并利用样式表美化网页的思想。教学重点：css样式表的功能和使用教学难点：外联、内联和内嵌三类样式表的选择应用教学环境：［硬件］:网络机房［软件］:CSS层

2、叠样式表网络版课件教学过程:教师活动学生活动教学意图一、【我来变魔术】师：“同学们，眼下魔术非常流行，我们中的不少同学对此也特别着迷，今天我们的课程就从魔术开始，我也给大家变一个魔术。”教师：屏幕广播，展示网站。单击浏览器中的“刷新”按钮，网站“大变身”。学生惊奇。二、【教你变魔术】师：“刚才我表演了一个'网站大变身’的魔术，同学们一定很想知道这个魔术的秘密，今天就要教大家网页制作的魔术。”我们首先进入给大家提供学习魔术的《CSS层盏样式表》网站，先请学生进入这个学习网站进行浏览，主要看“学习目标”与“思考

3、任务”版块，特别是思考任务中的问题。学生：彼此可以互相讨论如何修改网页。教师：逐一修改文字、背景，从而产生重复劳动，效率低。教师由此指出CSS层叠样式的概念，从而引入CSS内联式样式表的功能及使用方法教师：讲解操作步骤学生：通过网站学习，机上操作插入内联式样式表师：可转播某一同学的屏幕小结，且内联式样式表是针对一个网页来插入代码。师：如果一个网站有许多网页，根据刚才学的内联观看魔术变化前后网站的变化。网站1:首页超级链接文字不美观。网站2：所有网页的背景单调，文字拥挤、大小不一。学生利用已有知识对网站需要修

4、改的地方。进行修改。利用魔术展开情境教学，吸引学生兴趣,激发学习热情。为CSS样式表内容做铺垫。这是一个让学生“碰壁”的过程，从中产生需求一一寻找解决问题的新方法。使学生产生认知冲突式样式表，你打算如何操作？生：在每一个网页中插入代码。师：如果每一个网页都插入内联样式表，会造成工作繁琐，语句重复，导致运行速度减慢。这样效率高吗？怎么办？生：……师：给大家出一道数学题ab+ac+ad怎样解才方便？生：a（b+c+d）师：什么方法？生：提取公因式师：由数学屮的“提取公因式”引出外联式样式表:学生利用所体验到的样

5、式表的知识，重新对网页进行整改。找到了数学中“提取公因式”这一知识点，成为讲解外联样式表的突破口。让学生自然的接受了外联样式表。E1++E1PW师：一样的道理，此时可以编写一个单独的CSS文件，借助外部样式表來实现不同页面的风格。这样可以减少代码，提高网站运行速度，这就是外联样式表。进入外联样式表栏目。教师：讲解操作步骤学生：参照网站上操作步骤完成外联样式表的制作教师：巡视指导教师：简单介绍内嵌样式表简单讲解。三、【魔术师进阶】学生分层次学习：没有完成内、外联样式表任务的同学继续完成，完成好的同学进行进入“

6、自主探究”栏目，完成其中任务。四、【魔术课总结】教师：进入自我评一评栏目，进行自评（学生）说出三类样式表的名称、作用范围和使用方法。（教师）板书表格:一个刚页內联—个屈站•-=H网页中的写在vbody＞区域澱外联根据所学知识，灵活选择样式表，将网站成功美化。同学通过操作对样式表进行巩固。学生总结让学生不仅仅“依葫芦画瓢”,述要活学活用。通过自我考核，让学生对自己的学习效果进行检验。对样式表的概念、功能、分类等知识再梳理。注：本案例参考2010远程研修视

7、频中，南京市重点中学信息技术教师的设计思想与理念。