层叠样式表设计教学教案.docVIP

层叠样式表的应用设计教学教案 模 块： 网页制作:HTML和JavaScript第七章 学 生： 高中二年级 课 时： 1课时 教材分析 CSS层叠样式表这一教学内容是网页制作:HTML和JavaScript第七章中的内容。样式表在学生学习DW软件时就是一个重点、难点。在前一课时教学过程中已经介绍了样式表的基本概念、功能与优点，讨论了样式表的规则及不同类型的选择器。在这一课时中主要介绍如何在网页中使用嵌入样式表和使用外部样式表。 教学对象分析 通过之前的学习和实践活动，学生已经掌握了利用DW设计网页的基本方法和操作，并且对网页设计中的HTML的基本代码也已经较为熟悉。但正因为对DW的熟悉，学生更习惯用DW中的设计窗口来制作网页，而不愿用代码窗口，所以要求学生在记事本中完成代码的编写任务。 教学目标 熟练掌握CSS的基本应用：内联式样式表、行内样式表； 掌握CSS的价值体现：外联式样式表应用 教学重点与难点 教学重点： 内联式样式表、行内样式表； CSS的价值体现：外联式样式表的应用对于网站页面风格统一的作用。 CSS产生的特殊效果CSS产生的特殊效果制作出如下式样的文字效果 制作要点： 1、定义标题一H1样式效果为：字体 Arial；字号 45PX； 颜色 红色； 用CLASS选择器定义P 以两种不同的颜色效果显示。 活动描述:学生在记事本中完成三个样式规则的书写后，举手示意。 学生活动： 上机完成后，电子教室举手示意。 教师活动： 电子教室屏幕监控，在大部分学生完成后，切出个别学生代码进行分析。 小结: CSS的基本概念、书写格式、应用方法； CSS与文字格式的区别；CSS的基本应用： 新课内容 总任务：应用样式表完成一个歌词页面的制作。 任务一：制作出如下.boy{color: red;font-family: Arial;} . girl{color: green;font-family: Arial;} 学生活动：编写代码完成一组男女对唱歌词。（举手）继续完成页面的下面部分——歌词中的男女声合唱部分用另一种样式（不同的大小与颜色）显示。 任务二：行内样式的应用 教师活动：先向同学们提问：我如果想对这一网页中的一段文字（演唱者）应用一个样式。只应用一次，这样的方法有没有更加方便？（应该是没有的）——可以应用的是行内样式。 p style = text-align:center;font-style:italic;font-family:华文彩云演唱者:群星/p 学生活动：在原有网页中用行内样式的方法填加上“演唱者：群星” 任务三：外联样式表的应用 教师活动：提问学生如果在你的站点中多次应用用这一种样式，需要不需要在每个页面的头部文件中写出样式规则呢？（如果一定要写的话，就体现不出样式表的优越性）——外联样式表的调用： 第一种方法 链接： 〈HEAD〉 　　〈LINK REL=stylesheet HREF=my.css TYPE=text/css〉　　〈/HEAD〉rel=stylesheet rel是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始化时将被使用。一般这里是不需要改动的。　〈style type=text/css〉　　@import url(my.css); 〈/style〉 　　/head〉 在歌词页面中调用样式表： 任务四：CSS产生的特殊效果a:link { text-decoration: none;color: red;} 　　a:active { text-decoration: underline; color: yellow;} 　　a:visited { text-decoration: overline;} a:hover{text-decoration: line-through;font-size:110%;} 　a:link 指正常的未被访问过的链接a:active 指正在点击的链接 a:visited 指已经访问过的链接a:hover指的链接在页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。