html与css项目,项目六HTML与CSS基础.doc

项目六HTML与CSS基础.doc

项目六： HTML与CSS基础

课题名称：6．2 CSS样式表的使用(一)

教学目标

1．知识与技能目标

熟练掌握插入Div 标签和设置样式定义的方法；理解CSS样式定义的代码格式：选择符{ 属性：属性值；属性：属性值；... }；理解4大类选择符包括：id选择符、类(class)选择符、类型选择符和特殊选择符。理解CSS 3种基本布局模型，其中浮动模型的float属性分别设置为left和right，可以使元素向左或者向右浮动。

2．操作技能目标

熟练掌握插入Div 标签和设置样式定义的方法；熟练“CSS样式”面板的右下角四个图形按钮的应用；掌握浮动模型的属性设置。

教学分析与准备

1．教学重点

熟练掌握插入Div 标签和设置样式定义的方法，掌握浮动模型的属性设置。

2．教学难点

理解CSS 3种基本布局模型，尤其是浮动模型。

3．教学策略

讲授、演示、讨论相结合

4．教学环境

多媒体网络机房

学习过程

教学组织教学内容备注课前准备

概念复习(建议教学3分钟)

布局模型的介绍

(建议教学10分钟)

操作示范与学生同步练习(建议教学30分钟)

教师应注意要点的介绍和应用示范。

学生同步练习中存在问题的评述与知识小结(建议教学2分钟)

作业布置

将本节资源“初始网页”文件夹复制到本地硬盘，在Dreamweaver中建立站点temp，将本章资源包中的“CSS样式表的使用(一)\初始” 文件夹作为站点文件夹。

1、插入Div 标签和设置样式定义的方法。“CSS样式”面板的右下角有四个图形按钮，依次为“附加样式表”、“新建CSS规则”、“编辑规则……”、“删除CSS规则”。

2、CSS样式定义的代码格式：选择符{ 属性：属性值；属性：属性值；... }，例如：

Body{ Padding:0px；color:#00FF00 }

选择符包括4大类：id选择符、类(class)选择符、类型选择符和特殊选择符。

(1)id选择符：定义方式为id = " "，id名称为网页中各元素唯一标识，在CSS规则定义中，id使用“#”作为标识。

(2)类(class)选择符：定义方式为class = " "，在网页中的多个元素都可以使用同一个class定义。在CSS规则定义中，使用点符号加上class 名称作为标识。

(3)类型选择符：定义时直接使用XHTML标签。

(4)特殊选择符：例如伪类，定义时以冒号开始，目前所有浏览器只支持a元素与超级链接操作相关的4个伪类：a:link {}、a:visited {}、a:hover {}和a:active {}。

CSS包含了3种基本的布局模型，分别为流动模型(Flow Model)、层模型(Layer Model)和浮动模型(Float Model)。流动模型也称之为文档流，是默认的显示类型，随着文档自上而下，根据元素排列的先后顺序来决定分布位置。层模型是以绝对定位和相对定位的方式，允许精确定位元素相对于该元素原来显示位置，或相对于最近的包含块元素，或相对于浏览器窗口的位置。浮动模型和流动模型相比有一定的相似之处，设计时利用float属性实现人为控制。

浮动模型的float属性分别设置为left和right，可以使元素向左或者向右浮动。如果元素设置为向左浮动后，该元素右侧将清空出一块区域让接下来的文档流出现在其右侧。关于浮动的应用，如图6-2-21所示为默认的流动模型，A、B、C三个元素以整行为单位各占一行；如图6-2-22所示为A元素设置左浮动后，B元素紧贴其右侧显示，因流动模型之故C元素显示在第二行；如图6-2-23所示为A、B元素均设置左浮动后的显示结果，当然如果A、B元素比较宽或由于网页窗口变小导致一行无法再显示C元素时，C元素则仍显示在第二行；如图6-2-24所示为A元素设置右浮动后，其左侧让B元素显示，因流动模型之故C元素显示在第二行。

图6-2-21 图6-2-22

图6-2-23 图6-2-24

欣赏范例：CSS样式表的使用(一)\完成\index.html。

完成10至15步骤。

1、在10步中重点在于定位设置溢出，并可以把溢出部分设置为可见(overflow: visible;)或滚动(overflow: scroll;)观察不同的页面效果。

2、在11至13步中重点在于流动模型(Flow Model)的分析与应用。

3、在14步中重点在于类型选择符的介绍。

说明：这里的选择符采用了类型选择符，定义时直接使用XHTML标签“a”，样式定义代码为：a {color:#D13939;font-weight:bold;}。当然可以是XHTML各类标签，例如：html{ }定义网页结构总体样式；body{ }