HTML第6章教案.docVIP

第六章《层叠样式表》 授课教员：XXX 课 时：4 本章目标： 1．了解CSS的概念 2．掌握CSS的基本语法 3．掌握如何使用样式表 4．了解DIV和SPAN标签 本章重点： 1．CSS的语法及盒子模型 2．如何使用样式表 本章难点： 1．样式表的分类 2．样式表的使用 回顾重点： 如何在Dreamweaver 中插入表单及表单元素？ 为什么要使用模板？ 为什么要使用框架？ 内容讲解： CSS的概念： 知识点引入（含案例）： 标签能够实现的内容较为简单单一，而过于简单的网页在现在Internet上是没有任何的吸引力的，所以往往希望能够为页面内容添加一些更加绚丽的属性，同时当网站的页面和风格需要改变样式即改版时，一个个去修改标签的属性，这种重复大量的工作严重降低程序开发人员的开发效率。有没有一种好的方法，能够既提供丰富、美观的元素又可以提高网站开发效率呢？ 概念： CSS是Cascading Style Sheet的缩写，可以翻译为“层叠样式表”或“级联样式表”，即“样式表”。 示例： 示例1：P153页，示例6-1 通过一个简单的CSS效果的实现，让学生了解用样式和用标记实现网页效果的不同。 讲解思路 讲解步骤1：先回顾前期HTML中采用标记设置网页效果的不足之处 讲解步骤2：然后引导学生思考有没有更好的办法来设置漂亮的网页效果？通过启发引导引出CSS的概念 讲解步骤3：介绍CSS的优势和功能 讲解步骤4：演示示例6-1，让学生进一步了解CSS。 提问： 问题1：CSS指的是？Computer Style Sheets B、Cascading Style Sheets C、Creative Style Sheets D、Colorful Style Sheets 问题2：简述CSS样式表的功能。 小结： 要点1：CSS的概念 要点2：CSS的优势及功能 CSS的基本语法： 知识点引入（含案例）： 了解了CSS的基础知识后，如何在网页中定义样式呢？ 概念： 示例： 示例1： CSS的基本语法 示例2： CSS盒子模型示例，重点讲解边框属性的用法及格式 讲解思路 讲解步骤1：CSS基本语法讲解， 讲解步骤2：样式表的常用属性 讲解步骤3：盒子模型 提问： 问题1：下列哪个选项的CSS 语法是正确的？body:color=black B、{body:color=black(body} C、body {color: black} D、{body;color:black} 问题2：padding、border、margin三个属性用于表示什么？ 问题3：简述margin和padding属性缩写的原则及格式？ 小结： 要点1：CSS的基本语法 要点2：CSS的常用属性 要点3：CSS的盒子模型 如何使用样式表 知识点引入（含案例）： 若想对同一类的标签采用不同的样式，或对不同类别的标签采用同一种样式，应如何解决？引出样式分类知识点的讲解。 概念：样式分为：行内样式、内嵌样式、外部样式 示例： 示例1：利用行内样式修饰某个标签示例 示例2：利用HTML选择器修饰同类标签示例 示例3：利用CLASS选择器实现不同类别标签共享同一样式、同一类标签采用不同样式示例 示例4：利用ID选择器完成CLSS选择器功能示例 示例5：利用外部样式表完成多个网页访问同一样式示例 示例6：伪类示例 讲解思路 讲解步骤1：利用行内样式修饰某个标签 讲解步骤2：利用HTML选择器修饰同类标签 讲解步骤3：利用CLASS选择器实现不同类别标签共享同一样式、同一类标签采用不同样式 讲解步骤4：利用ID选择器完成CLSS选择器功能 讲解步骤5：利用外部样式表完成多个网页访问同一样式示例 讲解步骤6：伪类的用法 讲解步骤7：继承 讲解步骤8：样式的混合使用 提问： 问题1：根据样式代码的位置不同，样式分为哪几类，其代码位置有何不同? 问题2：简述HTML选择器、CLASS选择器和ID选择器的区别？ 问题3：在以下的 HTML 中，哪个是正确引用外部样式表的方法？style src=mystyle.css B、link rel=stylesheet type=text/css href=mystyle.css C、stylesheetmystyle.css/stylesheet D、link href=stylesheet type=text/css rel=mystyle.css 小结： 要点1：样式的三种分类：行内样式表、内联样式表、外部样式表 要点2：各种样式表的用法及功能 要点3：伪类的用法 要点4：样式的继承 要点5：样式的混合使用 DIV和SPAN标签 知识点引入（含案例）： 如何将多个