28强大的层叠样式表.docVIP

章 第2章 节 2. 教学目标 教学重点、难点 技能培训?reamweaver的CSS面板创建自定义样式 3、掌握使用自建的CSS层叠样式的方法 教法 学法 教具使用 教学内容与过程 教学内容 教师活动 学生活动 备注 复习提问 1、给美乐电器首页插入一个背景透明的FLASH动画2、给美乐电器的“企业简介”页面加背景音乐 思考上台操作 导入新课 1．2．、 看看这些网站的文字会不会随着浏览器选项“文字大小”的变化而产生变化。 最后，引入本节的教学内容。 观察、思考 将使用HTML样式定义的文字和用CSS定义的文字进行比较，引发学习兴趣 讲授新课 1． 2．层叠样式表的格式 3．层叠样式表的组织形式 4．层叠样式表的建立与使用 5．学生上机操作，复习刚才所学的操作，同时复习和思考老师的问题。 给出本节课题 2.1．功能：（2） 2．层叠样式表的格式 （1）格式：名称 属性1：属性值；属性2：属性值 名称：可以是用户自己定义的，也可以是HTML的源代码标记。 如：P9是自己定义的名称，H1则是HTML语言中1号标题标记 属性：指要修改的属性，如color 颜色 属性值：给属性设定的值，不同的属性有不同的值，如color的值可以设定为red（红色）或#FF0000。 3．层叠样式表的组织形式 （1）把所有的规则全包括在STYLE（样式）元素里面并放在HEAD元素内，然后在BODY中调用这些规则，这种方法适用于某个CSS规则在特定页面中多次使用的情况。 具体源代码如： STYLE TYPE text/css !-- H1 color: red; font-size: 20pt; font-family: 隶书 //把H1定义成红色，字号为20像素，字体为隶书 .p9 font-size: 12px; background-color: #FFFF00; //把p9定义成字号为12点，背景色为黄色 -- （2）把所有的CSS规则都编写到一个CSS文档中，要使用这些规则的网页，只要在HEAD元素中加入链接信息就可以使用CSS文档中的CSS规则。这种方法在多个页面要使用同一种CSS样式规则时非常便利，并在以后修改时也非常方便，只要直接修改CSS文档中相应的CSS规则就可以达到修改所有页面的效果。 具体源代码如： link rel stylesheet href 3a.css //“rel stylesheet”指连接的元素是一个样式表文档 理解记忆 观察，思考，记忆 观察，学习具体操作过程 上机操作 操作，并记录下来 思考 教师讲解时，加深学生 与实例结合，与网页结合，边讲解边演示。 与“跟我学”实例结合进行讲解 教师下台指导学生 也可以采用小组教学的方式，先小组内互帮互学，小组内不能解决的请教老师 小结 1． 2． 作业 1．2．