HTML第6章教案_html教案第一章
HTML第6章教案由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“html教案第一章”。
第六章《层叠样式表》
授课教员：XXX 课
时：4
本章目标：
1．了解CSS的概念 2．掌握CSS的基本语法 3．掌握如何使用样式表 4．了解和标签
本章重点：
1．CSS的语法及盒子模型 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 Sheets 2)问题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(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.c D、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：完成课后作业（1~4），完成后将作业以文件夹形式提交到FTP服务器。
测试题：
1． 测试题1：CSS指的是？
A、Computer Style Sheets B、Cascading Style Sheets
C、Creative Style Sheets
D、Colorful Style Sheets 2． 测试题2：简述CSS样式表的功能。
3． 测试题3：下列哪个选项的CSS 语法是正确的？
A、body:color=black
B、{body:color=black(body} C、body {color: black} D、{body;color:black} 4． 测试题4：padding、border、margin三个属性用于表示什么？ 5． 测试题5：简述margin和padding属性缩写的原则及格式
6． 测试题6：样式代码的位置不同，样式分为哪几类，其代码位置有何不同? 7． 测试题7：简述HTML选择器、CLASS选择器和ID选择器的区别？ 8． 测试题8：在以下的 HTML 中，哪个是正确引用外部样式表的方法？
A、B、C、mystyle.c D、
第6章 商务人员交谈礼仪 【授课学时】2学时 【教学目的与要求】根据不同的社交目的、对象、特定的语言环境，恰到好处地运用语言，传情达意，取得令人满意的社交效果。【重点难点......
歌曲写作教案第六章主题发展的基本手法音乐是时间艺术，通过旋律让别人记住，不至于流失，要运用统一的原则表现音乐特征；运用对比表现音乐的新鲜感． 教学目的和要求：通过本章的学习，......
xxxx省xxxxxxxx有限公司规章制度汇编人事管理第六章人事管理第一节总则第1条为进一步完善人事管理制度，根据国家有关劳动人事法规、政策及公司章程之规定，制定本制度。第2条公......
第六讲习题一、名词解释1.通货膨胀，通货紧缩2.消费价格指数3.生产者价格指数4.菲利普斯曲线5.预期性通货膨胀，非预期性通货膨胀6.结构型通货膨胀7.货币幻觉8.结构性失业9.摩擦......
名词解释-第6章 运输保险 运输保险：以处于流动中的财产为保险标的的保险特点：保险标的有流动性保险风险巨大且复杂保险事故发生有异地性第三者责任具有广泛性 海上保险：承保各......
