有序列表
实例展示
教学目标 1、掌握有序列表的制作方法 2、通过type属性修改序号 3、调整有序列表的层次
教学重点与难点 教学重点： 1.有序列表的制作 2.有序列表序号的更改 3.有序列表的层次设置 教学难点： 在代码视图用HTML标签制作有序列表
有序列表 在有序列表中，各个列表项之间有顺序级别之分，它通常用数字1、2、3……作为每个列表项的前缀。
大显身手 任务1：制作如下列表内容
制作有序列表 一、利用“属性”面板制作有序列表 制作单个列表项 （1）将光标定位在文字段 （2）单击“属性”面板上的“编号列表”按钮，则当前段落文字前添加有数字“1.”。 编号列表
制作有序列表 制作多个列表项 （1）选中多个文字段 （2）单击“属性”面板上的“编号列表”按钮，则所选段落文字前均添加数字，形成有序列表。
制作有序列表 二、利用“插入”工具栏制作有序列表 （1）选中文字段 （2）单击“插入”面板上的“文本”选项卡 （3）在文本工具行上单击“ol”按钮，文字段便成为有序列表。 编号列表
制作有序列表 三、利用“插入”菜单制作有序列表 （1）选中文字段 （2）单击“插入→HTML→文本对象→编号列表” 菜单命令，所选文字段便成为有序列表。
制作有序列表 四、利用“HTML”代码制作有序列表 <ol> <li>列表内容</li> ……
内容小结 一、利用“属性”面板制作有序列表 二、利用“插入”工具栏 三、“插入”菜单 四、HTML代码 制 作 列 表 方 法
任务2：利用四种不同的方法制作如下列表内容 大显身手 任务2：利用四种不同的方法制作如下列表内容
有序列表的type属性 Type的属性值 序号 type=“1” 1. 2. 3. …… type=“a” a. b. c. …… 1. 2. 3. …… type=“a” a. b. c. …… type=“A” A. B. C. …… type=“i” i. ii. iii. …… type=“I” Ⅰ. Ⅱ. Ⅲ. ……
大显身手 任务3：修改有序列表的序号
调整层次 调整层次 通过属性面板上的“凸出”和“缩进”按钮调整有序列表的层次。 凸出 缩进
大显身手 任务4：在线考试试题制作
作品评价 展示作品 作品评价 1. 学生自评 2. 小组评价 3. 教师评价
课堂总结 知识点总结： 1. 有序列表的制作方法 2. 通过“缩进”与“凸出”按钮调整列表的层次
再 见