HTML第6章教案（大全五篇）.docx

HTML第6章教案（大全五篇）

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