《网页设计与制作（活页式）》 教案 项目5 列表和超链接.docx

《网页设计与制作》

教学设计

课程名称：网页设计与制作

授课年级：20年级

授课学期：20学年第一学期

教师姓名：老师

20年月日

课题名称

项目五列表和超链接

计划课时

课时

内容分析

一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序、条理清晰，并且网页与网页之间有一定的关联，就需要使用列表和超链接。本项目将对列表标签、CSS列表样式、超链接和链接伪类进行具体讲解。

教学目标

掌握无序、有序及定义列表的使用。

掌握超链接标签的使用。

掌握CSS伪类。

重点及措施

教学重点：利用无序、有序及定义列表制作常见的网页模块；使用超链接定义网页元素；使用CSS伪类实现超链接特效

措施：通过上机操作加强学习和补充案例进行巩固。

难点及措施

教学难点：使用CSS伪类实现超链接特效

措施：通过上机操作加强学习和补充案例进行巩固。

教学方式

教学采用教师课堂讲授为主，使用教学PPT讲解。

教

学

过

程

任务5.1列表标签

5.1.1无序列表

内容学习

分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

网页中如何实现无序列表？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

答案：

无序列表使用ul标签定义，内部可以嵌套多个li标签，li是列表项。

知识点讲解

讲解无序列表

（1）教师展示PPT，对无序列表进行具体讲解。

ul是英文unorderedlist的缩写，翻译为中文是无序列表。无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分。无序列表使用ul标签定义，内部可以嵌套多个li标签，li是列表项。定义无序列表的基本语法格式如下：

ul

li列表项1/li

li列表项2/li

li列表项3/li

...

/ul

li标签嵌套在ul标签中，用于描述具体的列表项，ul标签中至少应包含一个li标签。ul和li标签都拥有type属性，用于指定列表项目符号，不同type属性值可以呈现不同的项目符号，无序列表常用的type属性值及显示效果如表所示。

实例1使用无序列表

若不设置type属性时，列表项目符号显示为默认的“●”，设置type属性后，列表项目符号会按相应的样式显示。

（2）学生自主提问，教师对疑难问题进行解答。

5.1.2有序列表

内容学习

分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

网页中如何实现有序列表？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

答案：

有序列表是一种强调排列顺序的列表，使用ol标签定义，内部可以嵌套多个li标签。

知识点讲解

讲解有序列表

（1）教师展示PPT，对有序列表进行具体讲解。

ol是英文orderedlist的缩写，翻译为中文是有序列表。有序列表是一种强调排列顺序的列表，使用ol标签定义，内部可以嵌套多个li标签。例如，网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下：

ol

li列表项1/li

li列表项2/li

li列表项3/li

...

/ol

在上面的语法中，ol/ol标签用于定义有序列表，li/li标签为具体的列表项，和无序列表类似，每对ol/ol标签中也至少应包含一对li/li标签。

在有序列表中，除type属性之外，还可以为ol标签定义start属性，为li标签定义value属性，它们决定有序列表的项目符号，有序列表相关的属性和描述如表所示。

有序列表相关的属性和描述

实例2使用有序列表

本例定义了两个有序列表。其中，第8~12行代码中的有序列表没有任何属性，第13~17行代码中的有序列表的列表项应用了type和value属性，用于设置特定的列表项目符号。

（2）学生自主提问，教师对疑难问题进行解答。

5.1.3定义列表

内容学习

分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

网页中如何实现定义列表？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

答案：

dl是英文definitionlist短语的缩写，翻译为中文是定义列表。定义列表与有序列表、无序列表不同，它包含了三个标签，即dldtdd。

知识点讲解

讲解定义列表

（1）教师展示PPT，对定义列表进行具体讲解。

dl是英文definitionlist短语的缩写，翻译为中文是定义列表。定义列表与有序列表、无序列表不同，它包含了三个标签，即dldtdd。定义列表的基本语法格式如下：

dl

dt名词1/dt

dd是名词1的描述信息1/dd

dd是名词1的描述信息2/dd

...

dt名词2/dt

dd是名词2的描述信息1/dd

dd是名词2描述信息2/dd

...

/dl

在上面的语法中，dl标签