《5.2.2 CSS 样式表1.docx》由会员分享，可在线阅读，更多相关《5.2.2 CSS 样式表1.docx（8页珍藏版）》请在金锄头文库上搜索。
1、理解CSS样式表一、 教材分析：css样式表是教科版高中信息技术选修网络技术应用第五章的内容，是继前一章建立主题网站之后网页制作的高级技巧。二、 学情分析：本节课的教学对象是高二学生，通过前阶段的学习和实践活动，学生已经掌握了利用frontpage设计网页的基本方法和操作，并且对网页设计中的html的基本代码及 JavaScript 客户脚本语言也已经较为熟悉。css 对学生来说是一项全新内容，理解和应用上有一定难度，需要通过大量实例帮助学生理解和掌握css，进而能够灵活运用css。三、 教学目标：1、通过两种不同方式对字幕字体属性设置的对比，学生能说出样式表（css）的概念及作用；2、通过连
2、连看小游戏，学生能识记一些简单常见的属性代码，掌握运用css进行样式设置的方法和格式；3、通过不同的任务环节，学生能在网页html代码中插入样式表（内联、外联、嵌入），并总结归纳各自的特征； 4、通过试验，明确样式表的优先级。 四、 重点与难点：重点：css嵌入式样式表、内联式样式表、外联式样式表的基本应用。难点：三种css样式设置的不同方法和格式。五、 教法分析：以任务驱动为主，通过模考软件设置环环递进任务，采用演示、启发、实践探究、模拟实战等形式展开教学。六、 课前准备： 1、学业水平测试模拟题库frontpage专题。2、本课的教学课件制作利用了希沃互动课堂中的希沃白板5，它能方便快捷地
3、制作思维导图，随心所欲地按照课堂节奏展示各个环节知识点。还有丰富的教学资源，譬如本课采用的连连看互动游戏，让学生在欢乐的闯关下潜移默化掌握了知识。它快捷的云端在线同步、分享与存储，给课堂带来无限便利。七、 教学过程设计教学环节一：创设情景，引入新知教师活动：以学生在上节课学习过程中遇到的问题为引：在网页中插入滚动字幕“乡愁”作为标题，文字设置为隶书、36磅；（必须先插入字幕，再设置文字格式）（学生已练习过，会利用【字幕属性】【样式】【格式】设置来修改）提问：1.有没有其他的操作能实现此效果？2.这两种操作有何不同？引导学生从代码区观察比对。学生活动：答1：先利用【字幕属性】【样式】【格式】设置
4、来修改；再利用【格式】工具栏对字幕字体属性进行设置，两者能达到同样的显示效果。答2：“代码区”观察比对发现：以下代码是通过【格式】工具栏对字体属性设置，其实是对字体标签设置相关属性face、size的值。乡愁以下代码是对【字幕属性】【样式】设置，直接对添加属性style。乡愁教师活动：展示课件（图1），引导学生总结什么是css样式表以及html、JavaScript在现在互联网前端各自承担的角色和功能。图1学生活动：组织语言、准确表达。设计意图:通过两种不同的方法对字幕字体设置能达到同样的效果，学生加深对样式表概念的理解：样式表主要用于处理网页内容的显示排版（布局）。同时引发思考：样式表的优势
5、在哪里？教学环节二：师生互动，建构新知教师活动：课件展示通过样式表设置的字幕属性代码（图2），归纳总结css样式表（该处为嵌入式）的基本格式和书写方法。图2 学生活动:梳理得出嵌入式样式表的描述语法：。教师活动：在代码中，有关属性代码与html中代码一致。准确地理解代码的含义对把握样式表的显示效果有很大的帮助。展示课件中有关属性的“连连看”页面（图3）。（操作说明：拖动左侧属性木条与右侧含义木条匹配，即时反馈结果）图3学生活动：一名学生板演，将样式表中常见的属性代码与含义一一对应。设计意图：在后续的实践应用中需要学生能认识常见的属性代码，并根据实际情况修改，鉴于学生有很好的英文基础，所以请一个
6、同学板演，其他学生自测，为后面的实践操作打下基础。教学环节三：任务闯关，探究新知教师活动：借助模拟题库网站，展示任务1：模拟题库frontpage5【第4题】任务1：打开“z:278”文件夹下的文件：“wy10.htm” 进行以下操作后并保存！(1) 在网页区插入如下样式代码(CSS代码存放在“z:278CSS代码.txt”)： (2) 设置网页中的文字“欢迎来到动物星球”字体大小为14磅；学生活动：认真分析任务，积极思考解决问题的方法，回顾嵌入式样式表的格式和书写方式，完成任务。教师活动：巡视学生操练过程，及时发现问题，集中反馈。第（2）题相关代码如下所示：区：欢迎来到动物星球解读代码，会发
7、现“欢迎来到动物星球”是由名为“style2”的样式表来限定，而该样式表的具体代码在html的区。这是第二种样式表，叫“内联式样式表”，它能将相同的代码抽出，在区集中说明，本网页中任何对象需要使用该样式时，只需class属性直接指明样式表名称即可。学生活动：认真听取老师的分析，分辨内联式样式表与嵌入样式表在书写上的不同，完成第2题。设计意图:在解题的过程中，学生能自主发现问题，探究解决问题的方法，建构新知。教师活动：任务升级，任务2：模拟题库frontpage5【第1题】任务2：下列样式表可以完成设置文字为红色，字体为9pt，并有下划线，要求修改z:14ex3.htm，将下列样式表插入该文件的
8、适当位置，使得窗口的主体部分显示的“欢迎进入机器人网站”变为12pt，绿色，加下划线。学生活动：巩固内联式样式的格式及书写方法，并能利用frontpage【格式】-【样式】菜单生成样式表代码。设计意图:有别于上题中修改已有的样式表，该题需要学生新建样式表。根据教师的引导，体验菜单式的样式建立过程，并明确自定义样式表的应用规则：先选择要应用样式的内容，然后在工具栏的样式列表框中选择要应用的样式名称即可。教师活动：内联式样式表只对当前页面应用样式，如果想网站下的子页面也应用主页统一的样式，即 css能否方便批量修改网页，回答是肯定的，这也就是接下来我们任务3中要使用的外联式样式表：模拟题库fron
9、tpage5【第5题】任务3：(4)在HEAD区插入以下一段代码（）；学生活动：认真听取任务，自主分析探究，完成任务。设计意图:由“嵌入式样式表”、“内联式样式表”作用范围的限制，学生能认识“外联式样式表”的特征，并利用它对整个网站中的多张网页进行样式设置。教学环节四：拓展延伸，首尾呼应教师活动：提问引发思考：当样式设置重复而产生冲突的情况下，谁的优先级最高？（提示学生：任务3样例网站中综合使用了3种样式表，学生可以通过修改代码比对显示效果，验证样式表优先级。）学生活动：学生设计实验，验证猜想：嵌入内联外联。教师活动:回应课堂导入时的问题：样式表的优势在哪里？学生活动：回顾梳理，建构知识图。优
10、势：1.减少代码量；2.网站视觉效果统一；3.数据和显示分开，开发效率提高。设计意图:总结归纳，首尾呼应。教学环节五：总结教师活动：通过seewo课件展示常用的css样式表有三种；嵌入式样式表作用范围只限于本标签；内联式样式表作用范围为当前页面；外联式样式表作用范围为本网站中的多个页面，引导学生了解技术服务于内容的原则。八、 设计说明本节课教学以学生在高二学业水平测试复习过程中遇到的问题为背景进行教学设计，引导学生通过自主探索来实现教学目标。以任务引领为动力，通过3个任务环环相扣将三种样式表自然串联，让学生在实践中理解概念，在操作中掌握技能。采用演示、启发、实践探究、模拟实战相结合的形式开展，学生在教师启发下，带着任务探究实践，逐步深入解决问题。
