HTML第6章教案.doc

第六章层叠样式表授课教员：XXX课 时：4本章目标：1了解CSS的概念2掌握CSS的基本语法3掌握如何使用样式表4了解和标签本章重点：1CSS的语法及盒子模型2如何使用样式表本章难点：1样式表的分类2样式表的使用回顾重点：1 如何在Dreamweaver 中插入表单及表单元素？2 为什么要使用模板？ 3 为什么要使用框架？内容讲解：一 CSS的概念：1. 知识点引入（含案例）：标签能够实现的内容较为简单单一，而过于简单的网页在现在Internet上是没有任何的吸引力的，所以往往希望能够为页面内容添加一些更加绚丽的属性，同时当网站的页面和风格需要改变样式即改版时，一个个去修改标签的属性，这种重复大量的工作严重降低程序开发人员的开发效率。有没有一种好的方法，能够既提供丰富、美观的元素又可以提高网站开发效率呢？2. 概念：CSS是Cascading Style Sheet的缩写，可以翻译为“层叠样式表”或“级联样式表”，即“样式表”。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、Computer Style Sheets B、Cascading Style Sheets C、Creative Style Sheets D、Colorful Style Sheets2) 问题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=black B、body:color=black(bodyC、body color: black D、body;color:black2) 问题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) 讲解步骤5：利用外部样式表完成多个网页访问同一样式示例6) 讲解步骤6：伪类的用法7) 讲解步骤7：继承8) 讲解步骤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）样式表由样式规则组成，这些规则告诉浏览器如何显示文档。样式表是将样式（如字体、颜色、字号等）添加到网页中的简单机制。（2）根据样式代码的位置不同，可以将样式分为三类：行内样式表、内嵌样式表、外部样式表。（3）样式表包括选择器和样式规则，选择器又分为HTML选择器、CLASS类选择器和ID选择器。（4）样式文件与网页的关联方式，可分为两种：链接外部样式表和导入样式表。（5）和都是容器标签，是块级标签，可包含段落、标题等，是行级标签，一般不包含段落、标题等，只能包含部分文字。2. 综合项目应用：样式表的混合使用。扩展知识：1 扩展知识1：无课后作业：1 理论作业1： 上网查询有关CSS的资料及常用属性，记录下书上未介绍到的属性相关知识及用法。2 上机作业1：完成老师授课过程中布置的现场编程任务。3 上机作业2：上机练习1，行内样式表及类选择器的应用。4 上机作业3：上机练习2，样式的混合使用（行内样式表、内嵌样式表、外部样式表）5 上机作业4：上机练习3，利用CSS的属性实现图示的效果。6 上机作业5：完成课后作业（14），完成后将作业以文件夹形式提交到FTP服务器。测试题：1 测试题1：CSS指的是？A、Computer Style Sheets B、Cascading Style Sheets C、Creative Style Sheets D、Colorful Style Sheets2 测试题2：简述CSS样式表的功能。3 测试题3：下列哪个选项的CSS 语法是正确的？A、body:color=black B、body:color=black(bodyC、body color: black D、body;color:black4 测试题4：padding、border、margin三个属性用于表示什么？5 测试题5：简述ma