项目六HTML与CSS基础.docVIP

项目六： 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{ }定义网页