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

《网页设计与制作》教学设计课程名称：网页设计与制作授课年级：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短语的缩写，翻译为中文是定义列表。定义列表与有序列表、无序列表不同，它包含了三个标签，即<dl><dt><dd>。知识点讲解讲解定义列表（1）教师展示PPT，对定义列表进行具体讲解。dl是英文definitionlist短语的缩写，翻译为中文是定义列表。定义列表与有序列表、无序列表不同，它包含了三个标签，即<dl><dt><dd>。定义列表的基本语法格式如下：<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>标签用于指定定义列表，<dt>标签和<dd>标签并列嵌套于<dl>标签中。其中，<dt>标签用于指定术语名词，<dd>标签用于对名词进行解释和描述。一对<dt>标签可以对应多对<dd>标签，即可以对一个名词进行多项解释。实例3使用定义列表第8~14行代码定义了一个定义列表，其中<dt>标签中为名词“红色”，其后紧跟着四对<dd>标签，用于对<dt>标签中的名词进行解释和描述。相对于<dt>标签中的术语或名词，<dd>标签中解释和描述性的内容会产生一定的缩进效果。相对于<dt>标签中的术语或名词，<dd>标签中解释和描述性的内容会产生一定的缩进效果。（2）学生自主提问，教师对疑难问题进行解答。5.1.4列表的嵌套应用内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：如何进行列表嵌套？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：列表嵌套只需将子列表嵌套在上一级列表的列表项中。知识点讲解讲解列表的嵌套应用（1）教师展示PPT，对列表的嵌套应用进行具体讲解。在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干子类。同样，在使用列表时，列表项中也有可能包含若干子列表项，要想在列表项中定义子列表项就需要将列表进行嵌套。列表嵌套只需将子列表嵌套在上一级列表的列表项中。实例4饮品页面列表嵌套饮品页面中首先定义了一个包含两个列表项的无序列表，然后在第1个列表项中嵌套一个有序列表，在第2个列表项中嵌套一个无序列表。咖啡和茶进行了第2次分类，咖啡分类为拿铁和摩卡，茶分类为龙井和碧螺春。（2）学生自主提问，教师对疑难问题进行解答。任务5.2CSS控制列表样式5.2.1list-style-type属性内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：list-style-type属性的作用是什么？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：在CSS中，list-style-type属性用于控制列表项显示符号的类型，其取值有多种，它们的显示效果各不相同。知识点讲解讲解list-style-type属性（1）教师展示PPT，对list-style-type属性进行具体讲解。list-style-type属性值及含义实例5设置列表样式第13~17行代码定义了一个无序列表，第19~23行代码定义了一个有序列表。对无序列表应用“list-style-type：square；”将其列表项显示符号设置为实心方块；同时，对有序列表应用“list-style-type：decimal；”将其列表项显示符号设置为阿拉伯数字。（2）学生自主提问，教师对疑难问题进行解答。5.2.2list-style-image属性内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：list-style-image属性的作用是什么？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：CSS提供了list-style-image属性，其取值为图像的url。使用list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。知识点讲解讲解list-style-image属性（1）教师展示PPT，对list-style-image属性进行具体讲解。一些常规的列表项显示符号并不能满足网页制作的需求，为此CSS提供了list-style-image属性，其取值为图像的url。使用list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。实例6使用list-style-image属性第7行代码通过list-style-image属性为列表项添加了图像列表项目图像和列表项没有对齐，这是因为list-style-image属性对列表项目图像的控制能力不强。因此，一般不使用list-style-image属性，常通过为<li>标签设置背景图像的方式实现列表项目图像。（2）学生自主提问，教师对疑难问题进行解答。5.2.3list-style-position属性内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：list-style-position属性的作用是什么？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：在CSS中，list-style-position属性用于控制列表项目符号的位置，其取值有inside和outside。inside指列表项目符号位于列表文本以内，outside指列表项目符号位于列表文本以外。知识点讲解讲解动态网页（1）教师展示PPT，对list-style-position属性进行具体讲解。设置列表项目符号时，有时需要控制列表项目符号的位置，即列表项目符号相对于列表项内容的位置。在CSS中，list-style-position属性用于控制列表项目符号的位置，其取值有inside和outside。inside指列表项目符号位于列表文本以内，outside指列表项目符号位于列表文本以外。实例7使用list-style-position属性控制列表项显示符号的位置第7行代码对第1个无序列表应用“list-style-position：inside；”，使其列表项目符号位于列表文本以内，而第8行代码对第2个无序列表应用“list-style-position：outside；”，使其列表项显示符号位于列表文本以外。为使显示效果更加明显，在第9行代码中对<li>设置了边框样式。（2）学生自主提问，教师对疑难问题进行解答。5.2.4list-style属性内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：list-style属性有什么作用？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：在CSS中，列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。知识点讲解讲解list-style属性（1）教师展示PPT，对list-style属性进行具体讲解。在CSS中，列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。使用list-style属性综合设置列表样式的语法格式如下：list-style：列表项显示符号列表项显示符号的位置列表项目图像；使用复合属性list-style时，通常按上面语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。实例8使用list-style属性定义一个无序列表，第7~8行代码通过复合属性list-style分别控制<ul>标签和第一个<li>标签的样式（2）学生自主提问，教师对疑难问题进行解答。讲解使用背景属性定义列表项显示符号（1）教师展示PPT，对使用背景属性定义列表项显示符号进行具体讲解。实例9使用背景属性定义列表项显示符号添加一个定义列表，其中第8行代码通过“list-style：none；”清除列表的默认显示样式；第11行代码通过为<dd>设置背景图像的方式来定义列表项显示符号；第19行代码在<dt>内部增加了一张熊猫的图片。（2）学生自主提问，教师对疑难问题进行解答。任务5.3超链接5.3.1创建超链接内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：如何创建超链接？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：<a>标签环绕需要被链接的对象。知识点讲解讲解创建超链接（1）教师展示PPT，对创建超链接进行具体讲解。超链接在网页中占有不可替代的地位，在HTML5中创建超链接非常简单，只需用<a>标签环绕需要被链接的对象即可，其基本语法格式如下：<ahref="跳转目标"target="目标窗口的弹出方式">文本或图像</a>在上面的语法格式中，<a>标签是一个行内标签，用于定义超链接，href和target为其常用属性，具体介绍如下。href：用于指定链接目标的url地址，当为<a>标签设置href属性时，它就具有了超链接的功能。target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。实例10创建超链接创建两个超链接，通过href属性将它们的链接目标分别指定为“知网”和“百度”，同时通过target属性定义第1个链接页面在原窗口打开，第2个链接页面在新窗口打开（2）学生自主提问，教师对疑难问题进行解答。5.3.2锚点链接内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：锚点链接有什么作用？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：通过创建锚点链接，能够直接跳转到指定位置的内容。知识点讲解讲解创建锚点链接（1）教师展示PPT，对创建锚点链接进行具体讲解。实例11创建锚点链接单击前单击后使用<a>标签应用href属性，其中href属性=“#id”，如第10~14行代码所示，只要单击创建了超链接的对象就会跳到指定位置的内容。（2）学生自主提问，教师对疑难问题进行解答。任务5.4链接伪类控制超链接内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：链接伪类有什么用处？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：CSS通过链接伪类可以实现不同的链接状态。知识点讲解讲解动态网页（1）教师展示PPT，对链接伪类进行具体讲解。定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使得超链接在单击前、单击后和指针悬停时的样式不同。CSS通过链接伪类可以实现不同的链接状态。与超链接相关的四个伪类应用比较广泛，它们定义了超链接的四种不同状态，<a>的伪类及描述如表所示。实例12使用超链接伪类选择器（2）学生自主提问，教师对疑难问题进行解答。任务5.5综合案例——制作新闻列表内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：如何制作新闻列表？请小组代表对以上问题发表见解。教师对上述问题进行解释：实例13制作新闻列表实训12实训名称制作新闻列表实训目标使用CSS样式设置页面中的列表实训实施本实训分为两部分第一部分使用HTML5标签搭建页面结构，页面设置要求如下。1.使用<h