《在HTML中加入CSS》教学设计
文昌华侨中学陈文芳
模块：信息技术·选修《网络技术应用》第五章第二节：在HTML中加入CSS 教材版本：教育科学出版社
学生：高中二年级
课时：1课时
一、教材分析
《在HTML中加入CSS》属于5.2.2 CSS样式表这一教学内容，是高中信息技术·选修《网络技术应用》的第五章第二节动态网页中的内容。
本节内容包括嵌入样式表、内联式样式表、外联式样式表，教材安排的思路：由具体标签——当前网页——多张网页的整体风格进行设置，重点是外联式样式表的使用。
二、教学对象分析
通过前阶段的学习，学生已经认识了动态网页，并对HTML的标签及属性、样式表的概念及书写格式也有了了解。
由于学生的水平有限，而且《在HTML 中加入CSS》对于学生来说是全新的内容，不易掌握，但学生有着非常强烈的求知欲，渴望通过css优化自己的主题网站。
三、教学目标
1、知识与技能
(1)熟练掌握CSS的基本应用：嵌式样式表、内联式样式表、；
(2)掌握CSS的价值体现：外联式样式表的应用。
2、过程与方法
(1)尝试利用代码选择进行CSS的初步设计，以取感性的认识；
(2)通过在网页内加入嵌入式和内联式的CSS样式表来达到熟练掌握
CSS基本应用的目的；
(3)通过任务的完成学会应用同一CSS样式表来掌握外联式CSS样式表
的。
3、情感态度与价值观
（1）通过CSS样式表的学习，提高学生美化网页的技能。
（2）培养学生的探索、实践能力。
四、教学重点与难点
1、教学重点：
(1)CSS的基本应用：嵌入式样式表、内联式样式表；
(2)CSS的价值体现：外联式样式表的应用对于网站页面风格统一的作
用。
2、教学难点：
外联式样式表的应用；
五、教学设计思路
首先提问学生如何在网页中改变文字的格式，提出像新浪网这样的网站包含很多文字，同时又要保持统一的风格格式时，这样一一设置格式就很费时、费力，设疑，有没有更快的方法对网页元素的格式进行设置呢？然后在网页中添加样式，引出学生思考：为什么文字的格式没有改变，添加的样式在那里呢？目的，复习旧知识引出本节课的内容。
其次，讲解本节内容，通过教师演示——学生操作、探究——学生总结的方式进行。
目的，培养学生的独立思维、操作技能、归纳能力。
最后，教师进行概括性的总结。
目的，理清脉络。
六、教学方法
讲授法、任务驱动法、个别指导法、赏识教育法、问题教学法
七、教学准备
基于网络的多媒体计算机教室、PowerPoint教学课件
八、教学过程
教师活动：在FrontPage中呈现已准备好的两句话，提问学生如何改变文字的格式，并请一位学生操作。
教师提问：如果要完成像新浪网包含这么多文字的格式，又要保持统一风格，大家觉得我们所用的方法快捷吗？
学生活动：回答老师问题。
教师活动：但会费时费力。
那有没有更快的方法呢?
学生活动：思考问题。
教师活动：在网页中可以使用CSS样式表来规定文字的格式。
教师活动：简单介绍css样式，然后演示添加样式的过程，并要求学生观察在哪里添加了样式。
教师提问：请同学们说说在哪里添加了样式呢？
学生活动：思考、回答问题。
教师活动：给出答案，在HTML代码视图中。
这就是今天我们要学习的内容——在HTML中加入CSS。
简单介绍CSS。
<PowerPoint课件呈现>
教师活动：请同学们把课本打开到P115页，并请一位同学回答在HTML中加入CSS有几种方法。
教师活动：演示在HTML中加入CSS的几种方法<PowerPoint课件呈现>
教师活动：讲授嵌入式样式表的使用方法。
1、样式表<PowerPoint课件呈现>
方法：只需在每个要用样式的HTML的标记后写上属性就可以了。
CSS属性书写格式：
Style=”color:red; font-size:24pt;”
任务1：用嵌入式样式表对网页gushi1的标题“静夜思”进行设置，字体为红色，字号为24pt。
学生活动：依据教师的方法，进行练习。
教师活动：巡回辅导，对样式的书写格式进行纠错。
教师活动：总结嵌入式的使用方法。
嵌入式样式表主要用于对具体的标签作具体的调整，其作用的范围只限于本标签。
并不能体现出css的优越性。
<PowerPoint课件呈现>
教师提问：如果我想改变整张网页的文字格式，使用嵌入式好用吗？
学生活动：回答老师问题。
教师活动：这时我们就可以使用内联式样式表。
1、内联式样式表：作用于当前页
教师活动：教师讲授内联式样式表的使用方法。
<PowerPoint课件呈现>
方法：把样式表定义语句放在标签<style type=”text/css”></style>中，并把这一部分语句放在HTML文件的<body>标签之前。
<style type=”test/css”>
样式表css内容
</style>
任务2：使用内联式改变gushi1中的诗句，样式自定义。
学生活动：依据教师讲授的方法，进行练习。
教师活动：巡回辅导，对格式进行纠错。
教师提问：如果站内有几十张网页都要用到此格式，该如何做呢？有没有更简单的方法？
学生活动：回答老师。
教师提问：我们可以用外联式样式表，不仅可以快速改变文字的格式，而且能够保持网页的整体风格。
2、外联式样式表
教师活动：教师讲授外联式样式表的使用方法。
<PowerPoint课件呈现>
方法：（1）将样式定义成一个”.css”的文件。
（2）在网页中的<head></head>标签对之间插入引用代码：
<link rel=”tylesheet” href=”文件路径”>
任务3：①用外联式改变gushi1的诗句。
②使用外联式改变gushi1、gushi2、gushi3、的诗句，使之具有统一的格式。
学生活动：完成任务3，
教师活动：巡回辅导，纠错学生的书写格式。
教师活动：对学生完成的情况进行评价。
并请一名学生演示操作过程。
教师活动：我们来总结一下，CSS样式表有什么样的优点？
学生活动：总结CSS样式表的优点。
教师活动：总结CSS的优点。
<PowerPoint课件呈现>
1、避免在标识字符和设置段落格式等操作时重复定义需要的样式（如字体、字号、颜色），从而使应用该样式的网页具有相同的风格。
2、只需要修改一个CSS代码就可以改变页数不定的网页外观和格式，提高网页编辑效率。
3、可以“随心所欲”地控制页面布局和外观。
4、在所有浏览器和平台之间具有较好的兼容性。
教师活动：今天，我们一起学习了如何在HTML中加入不同类型的CSS样式表。
那请同学们回忆一下，在HTML中加入CSS样式表有几种方法，分别是什么？学生活动：回忆、总结。
教师活动：总结本节课的教学内容。
