有序列表.

Presentation on theme: "有序列表."— Presentation transcript:

1 有序列表

2 实例展示

3 教学目标 1、掌握有序列表的制作方法 2、通过type属性修改序号 3、调整有序列表的层次

4 教学重点与难点 教学重点： 1.有序列表的制作 2.有序列表序号的更改 3.有序列表的层次设置 教学难点：
在代码视图用HTML标签制作有序列表

5 有序列表 在有序列表中，各个列表项之间有顺序级别之分，它通常用数字1、2、3……作为每个列表项的前缀。

6 大显身手 任务1：制作如下列表内容

7 制作有序列表 一、利用“属性”面板制作有序列表 制作单个列表项 （1）将光标定位在文字段
（2）单击“属性”面板上的“编号列表”按钮，则当前段落文字前添加有数字“1.”。 编号列表

8 制作有序列表 制作多个列表项 （1）选中多个文字段 （2）单击“属性”面板上的“编号列表”按钮，则所选段落文字前均添加数字，形成有序列表。

9 制作有序列表 二、利用“插入”工具栏制作有序列表 （1）选中文字段 （2）单击“插入”面板上的“文本”选项卡
（3）在文本工具行上单击“ol”按钮，文字段便成为有序列表。 编号列表

10 制作有序列表 三、利用“插入”菜单制作有序列表 （1）选中文字段 （2）单击“插入→HTML→文本对象→编号列表”
菜单命令，所选文字段便成为有序列表。

11 制作有序列表 四、利用“HTML”代码制作有序列表 <ol> <li>列表内容</li> ……

12 内容小结 一、利用“属性”面板制作有序列表 二、利用“插入”工具栏 三、“插入”菜单 四、HTML代码 制 作 列 表 方 法

13 任务2：利用四种不同的方法制作如下列表内容
大显身手 任务2：利用四种不同的方法制作如下列表内容

14 有序列表的type属性 Type的属性值 序号 type=“1” 1. 2. 3. …… type=“a” a. b. c. ……
…… type=“a” a. b. c. …… type=“A” A. B. C. …… type=“i” i. ii. iii. …… type=“I” Ⅰ. Ⅱ. Ⅲ. ……

15 大显身手 任务3：修改有序列表的序号

16 调整层次 调整层次 通过属性面板上的“凸出”和“缩进”按钮调整有序列表的层次。 凸出 缩进

17 大显身手 任务4：在线考试试题制作

18 作品评价 展示作品 作品评价 1. 学生自评 2. 小组评价 3. 教师评价

19 课堂总结 知识点总结： 1. 有序列表的制作方法 2. 通过“缩进”与“凸出”按钮调整列表的层次

20 再 见