在HTML中加入CSS教案（共五篇）.docx

在HTML中加入CSS教案（共五篇）

第一篇：在HTML中加入CSS教案《在HTML中加入CSS》教学设计文昌华侨中学陈文芳模块：信息技术·选修《网络技术应用》第五章第二节：在HTML中加入CSS教材版本：教育科学出版社学生：高中二年级课时：1课时一、教材分析《在HTML中加入CSS》属于5.2.2CSS样式表这一教学内容，是高中信息技术·选修《网络技术应用》的第五章第二节动态网页中的内容。本节内容包括嵌入样式表、内联式样式表、外联式样式表，教材安排的思路：由具体标签——当前网页——多张网页的整体风格进行设置，重点是外联式样式表的使用。二、教学对象分析通过前阶段的学习，学生已经认识了动态网页，并对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。教师活动：请同学们把课本打开到P115页，并请一位同学回答在HTML中加入CSS有几种方法。教师活动：演示在HTML中加入CSS的几种方法教师活动：讲授嵌入式样式表的使用方法。1、样式表方法：只需在每个要用样式的HTML的标记后写上属性就可以了。CSS属性书写格式：Style=”color:red;font-size:24pt;”任务1：用嵌入式样式表对网页gushi1的标题“静夜思”进行设置，字体为红色，字号为24pt。学生活动：依据教师的方法，进行练习。教师活动：巡回辅导，对样式的书写格式进行纠错。教师活动：总结嵌入式的使用方法。嵌入式样式表主要用于对具体的标签作具体的调整，其作用的范围只限于本标签。并不能体现出css的优越性。教师提问：如果我想改变整张网页的文字格式，使用嵌入式好用吗？学生活动：回答老师问题。教师活动：这时我们就可以使用内联式样式表。1、内联式样式表：作用于当前页教师活动：教师讲授内联式样式表的使用方法。方法：把样式表定义语句放在标签中，并把这一部分语句放在HTML文件的标签之前。样式表css内容任务2：使用内联式改变gushi1中的诗句，样式自定义。学生活动：依据教师讲授的方法，进行练习。教师活动：巡回辅导，对格式进行纠错。教师提问：如果站内有几十张网页都要用到此格式，该如何做呢？有没有更简单的方法？学生活动：回答老师。教师提问：我们可以用外联式样式表，不仅可以快速改变文字的格式，而且能够保持网页的整体风格。2、外联式样式表教师活动：教师讲授外联