第一篇：在HTML中加入CSS教案
《在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。
教师活动：请同学们把课本打开到P115页，并请一位同学回答在HTML中加入CSS有几种方法。
教师活动：演示在HTML中加入CSS的几种方法
教师活动：讲授嵌入式样式表的使用方法。
1、样式表
方法：只需在每个要用样式的HTML的标记后写上属性就可以了。CSS属性书写格式：
Style=”color:red;font-size:24pt;”
任务1：用嵌入式样式表对网页gushi1的标题“静夜思”进行设置，字体为红色，字号为24pt。
学生活动：依据教师的方法，进行练习。
教师活动：巡回辅导，对样式的书写格式进行纠错。教师活动：总结嵌入式的使用方法。
嵌入式样式表主要用于对具体的标签作具体的调整，其作用的范围只限于本标签。并不能体现出css的优越性。
教师提问：如果我想改变整张网页的文字格式，使用嵌入式好用吗？ 学生活动：回答老师问题。
教师活动：这时我们就可以使用内联式样式表。
1、内联式样式表：作用于当前页
教师活动：教师讲授内联式样式表的使用方法。
方法：把样式表定义语句放在标签中，并把这一部分语句放在HTML文件的
标签之前。 任务2：使用内联式改变gushi1中的诗句，样式自定义。学生活动：依据教师讲授的方法，进行练习。教师活动：巡回辅导，对格式进行纠错。教师提问：如果站内有几十张网页都要用到此格式，该如何做呢？有没有更简单的方法？
学生活动：回答老师。
教师提问：我们可以用外联式样式表，不仅可以快速改变文字的格式，而且能够保持网页的整体风格。
2、外联式样式表
教师活动：教师讲授外联式样式表的使用方法。
方法：（1）将样式定义成一个”.css”的文件。
（2）在网页中的
标签对之间插入引用代码： 任务3：①用外联式改变gushi1的诗句。②使用外联式改变gushi1、gushi2、gushi3、的诗句，使之具有统一的格式。
学生活动：完成任务3，教师活动：巡回辅导，纠错学生的书写格式。
教师活动：对学生完成的情况进行评价。并请一名学生演示操作过程。教师活动：我们来总结一下，CSS样式表有什么样的优点？ 学生活动：总结CSS样式表的优点。
教师活动：总结CSS的优点。
1、避免在标识字符和设置段落格式等操作时重复定义需要的样式（如字体、字号、颜色），从而使应用该样式的网页具有相同的风格。
2、只需要修改一个CSS代码就可以改变页数不定的网页外观和格式，提高网页编辑效率。
3、可以“随心所欲”地控制页面布局和外观。
4、在所有浏览器和平台之间具有较好的兼容性。
教师活动：今天，我们一起学习了如何在HTML中加入不同类型的CSS样式表。那请同学们回忆一下，在HTML中加入CSS样式表有几种方法，分别是什么？ 学生活动：回忆、总结。
教师活动：总结本节课的教学内容。
第二篇：html和css总结
Html 超文本标签语言，用<>表示一个一个标签，必须有头有尾，
….
网页内容写在里面 分为两大类：行级标签和块级标签 行级标签以行为单位，不会自动换行 块级标签以块为单位，新建是自动换行 块级标签分为基本块级标签 标题标签到 段落标签
分割线标签
布局块级标签 有序列表标签
无序列表标签
- 标题
- …
图像标签 src 导入图片的地址，alt是当图片打不开时显示的文字，title表示鼠标悬停时提示的文字 链接标签
… Href 要打开链接的路径，target表示链接打开的位置，…表示点击那里触动链接 常用的超链接 页面间 锚链接 创建跳转标记
乙位置 创建跳转链接
甲位置 表示在页面上从甲位置通过name=“marker”跳转到乙位置。功能性链接
行级标签： 范围标签 用style设置属性 换行标签
表单元素： 单行文本框：text 密码框：password 单选按钮：radio 提交按钮：submit 重置按钮：reset 普通按钮：button 图片按钮：image 复选框：checkbox 下拉列表：select 文本域：textarea 文件域：file 下拉列表 文本域 其他都是 几个表单元素的属性需要特殊记忆 readonly 表示只读 disable表示禁用
selected表示下拉列表默认选中项
checked表示设置单选或者复选的默认选中项
name表示在服务器端可以通过该属性来获得表单元素的值
框架