网页设计与制作教程教学设计 项目五（任务2 设置段落2）.docVIP

课程单元教学设计

任课教师：科目：

授课班级：

单元

标题

项目五使用CSS美化网页段落

任务2设置段落2

授课

时间

2021年月日

（第周，周，第节）

授课地点

教学学时

2课时

教学

目标

能力目标：

能使用行间距、字间距和词间距属性设置段落的样式效果；

知识目标：

掌握行间距、字间距和词间距属性的使用；

教学

资源

黑板板书、多媒体课件、电脑

教学进程

步骤

教学内容

教师、学生

活动

教学方法

与手段

时间

分配

一、复习提问

1.如何美化网页中的段落？

2.设置段落的对齐方式有哪些？

教师活动：教师提问

学生活动：回答问题

提问法

5分钟

二、任务发布

课堂案例——如何在网页中美化段落

教师活动：1.发布任务并引导学生思考实习效果需要用到的工具、方法。

学生活动：

1.通过教师讲解，学生积极完成任务。

讲授法、演示法、

练习法

15分钟

三、讲授新课

1、设置行间距。

行高也称为行距，是段落文本行与文本行之间的距离。CSS使用line-height属性定义行高，该属性的用法如下：

line-height:属性值;行高的取值单位一般使用em或百分比，很少使用像素，也不建议使用。当line-height属性取值小于一个字大小时，就会发生上下行文本重叠现象。

2、设置字间距和词间距。CSS使用letter-spacing属性定义字距，使用word-spacing属性定义词距。这两个属性取值都是长度值，由浮点数字和单位标识符组成，默认值为normal，它表示默认间隔。定义词距时，以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。

letter-spacing:属性值;

word-spacing:属性值;

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

metaname=viewportcontent=width=device-width,initial-scale=1.0

title定义字距和词距/title

style

.ls{letter-spacing:1em;}/*设置字间距1个字符*/

.ws{word-spacing:2em;}/*设置词距2个字符*/

/style

/head

body

pclass=lsletterspacingwordspacing/p

pclass=wsletterspacingwordspacing/p

/body

/html

教师活动：

1.讲解知识要点；

2.演示具体方法；

3.巡堂指导学生操作

学生活动：

1.认真听课做好笔记。

2.完成练习任务

讲授法、演示法、练习法

15分钟

四、任务实施

课堂案例——完成练习

教师活动：

1.演示重点难点；

2.巡堂指导学生操作；

3.发现共性问题并统一指导；

1.独立完成练习任务；

2.遇到自己解决不了的问题向老师、同学提问，解决遇到的问题。

讲授法、演示法、练习法

30分钟

五、评价反馈

1.各小组组长检查本组成员作业完成情况，并给出成绩。

2.教师检查学生作业并展示优秀作品，总结共性问题。

教师活动：

1.展示优秀作品

2.点评学生作业，总结共性问题。

学生活动：

1.学习其他同学的优秀作品；

2.总结自己完成的情况，

讲授法、小组讨论法

10分钟

总结与作业

掌握行间距、字间距、词间距属性的使用；

课后作业：完成课后练习

教师活动：1.教师带领学生复习重点及难点

2.布置课后作业

讲授法

5分钟

课后体会