HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第8章 设置文字和文本样式.doc

PAGE9

电子商务网页设计与制作

授课教案

学年第学期

学院（部）专业（学部）

课程名称

电子商务网页设计与制作

任课教师

课内形式

理论教学□课内实践□理实一体?习题复习□考核评价□其他活动□

学习量

安排

课内：

课外形式

调查分析?小组研讨□实践任务?理论探究□考核评价□汇报展示□其他活动?

课外：

序号

8

授课日期

月日

月日

月日

月日

授课班级

课内教学内容：

第8章设置文字和文本样式

课外学习任务：

（1）课前：

以小组为单位，讨论使用CSS设置文字和文本样式的相关知识并以PPT的形式记录下来。

（2）课后：

=1\*GB3①使用font属性的多个属性值设置网页中指定文字的样式。

=2\*GB3②使用文本样式设置中的各个属性来设置网页中文本的样式。

=3\*GB3③使用CSS中的line-height属性和letter-spacing属性来设置网页中文本的间距。

教学目标：

知识目标

掌握设置文字样式。

掌握设置文本样式。

掌握空格与换行。

掌握设置间距。

能力目标

能够实现为文字添加样式；

能够灵活使用文本样式。

素质目标

较强的专业知识和自学能力；

丰富知识结构，提升专业知识；

掌握jQuery动画效果的使用，理解并应用专业知识。

重点难点及解决方法：

（1）重点：使用CSS为文字添加样式

解决方法：通过知识点讲解+课堂示例相结合的方法，教师讲解使用CSS为文字添加样式，引导学生积极思考，掌握相应知识；同时通过课堂示例展示，使学生可以掌握使用CSS为文字添加样式的能力；培养学生的思维能力和分析问题解决问题的能力。

（2）难点：使用CSS添加文本样式

解决方法：通过案例解析+启发式教学讲解的方式，细致讲解使用CSS添加为网页中的文本添加样式。从实用的角度帮助学生提高专业知识。

课内教学授课地点：

教学媒体：微课、PPT课件、网页图片、相关教学视频等。

设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。

其它资源：与本次课相关的专业技术论文电子版。

学习效果评价方式：

对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；

对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；

对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。

课后小结：

填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。

课内教学内容及过程

时间分配

方法

及手段

1.设置文字样式

【设置文字字体】

在HTML中可以使用fontface=字体名来设置文字字体。在CSS中设置文字字体的属性是font-family，其语法格式如下。

font-family:字体1,字体2,字体3,…

可以为文字设置多个字体，当在运行页面的浏览器中找不到第一种字体时，就会以第二种字体显示；如果也找不到第二种字体，则会以第三种字体显示，以此类推。如果设置的几种字体在浏览器中都无法找到，就自动以浏览器设置的默认字体显示。

【设置文字大小】

设置文字大小是指为页面中的文字设置绝对大小或相对大小。设置相对大小是指文字为相对父对象文字尺寸来设置的，包括larger和smaller，它使用成比例的em单位计算。设置绝对大小是指设置固定的文字大小，包括xx-small、x-small、larger等。

说明：虽然这里可以用英文单词设置绝对大小，但是这些文字在浏览器中的显示效果与浏览器的设置有关，而不是真正绝对不变的。这些表示绝对大小的词就是针对浏览器设置的字体而定的。

除了使用英文单词表示文字大小之外，还有一种设置文字大小的方式是使用具体的长度值或百分比。CSS样式表中可设置的文字大小如表8.1所示。

表8.1CSS样式表中可设置的文字大小

类型

font-size取值或单位

含义

用英文单词表示绝对大小

xx-small

极小

x-small

很小

small

小

medium

中

large

大

x-large

很大

xx-large

极大

用英文单词表示相对大小

larger

较大，一般比父对象中的字体大一些

smaller

较小，一般比父对象中的字体小一些

采用具体的长度值

（浮点数+单位）

pt

点，1pt=1/72in

px

像素

in

英寸

采用百分比

%

相对父对象中字体尺寸的比例

使用CSS样式设置文字大小的语法格式如下。

font-size:文字的大小

这里的文字大小取值就是表8.1中的几种，不同取值的运行效果也不相同。

【设置粗体】

在页面中经常会使用加粗的字体表示强调，在HT