项目5 列表和超链接（教案）《网页设计》（劳动保障出版社）

《网页设计与制作》 教学设计 课程名称： 网页设计与制作 授课年级： 20 年级 授课学期： 20 学年第一学期 教师姓名： 老师 20 年 月 日 课题名称 项目五 列表和超链接 计划课时 课时 内容分析 一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序、条理清晰，并且网页与网页之间有一定的关联，就需要使用列表和超链接。本项目将对列表标签、CSS列表样式、超链接和链接伪类进行具体讲解。 教学目标 · 掌握无序、有序及定义列表的使用。 · 掌握超链接标签的使用。 · 掌握CSS伪类。 重点及措施 教学重点：利用无序、有序及定义列表制作常见的网页模块；使用超链接定义网页元素；使用CSS伪类实现超链接特效 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：使用CSS伪类实现超链接特效 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学PPT讲解。 教 学 过 程 任务5.1列表标签 5.1.1无序列表 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 网页中如何实现无序列表？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 无序列表使用<ul>标签定义，内部可以嵌套多个<li>标签，<li>是列表项。 · 知识点讲解 · 讲解无序列表 （1）教师展示PPT，对无序列表进行具体讲解。 ul是英文unordered list的缩写，翻译为中文是无序列表。无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分。无序列表使用<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是英文ordered list的缩写，翻译为中文是有序列表。有序列表是一种强调排列顺序的列表，使用<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是英文definition list短语的缩写，翻译为中文是定义列表。定义列表与有序列表、无序列表不同，它包含了三个标签，即<dl><dt><dd>。 · 知识点讲解 · 讲解定义列表 （1）教师展示PPT，对定义列表进行具体讲解。 dl是英文definition list短语的缩写，翻译为中文是定义列表。定义列表与有序列表、无序列表不同，它包含了三个标签，即<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.2 CSS控制列表样式 5.2.1 list-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.2 list-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.3 list-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.4 list-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>标签环绕需要被链接的对象即可，其基本语法格式如下： <a href="跳转目标" 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. 使用<h2>标签定义新闻标题的大小。 2. 使用<a>标签和<li>标签为新闻内容创建带有超链接的无序列表。 第二部分 定义列表的CSS样式，要求如下。 1. 定义页面的统一样式，字体大小为12 px，宋体，颜色为#222。 2. 对列表进行整体控制，宽度为300 px，高度为200 px，元素外边距20 px，页面在浏览器中居中显示。 3. 标题设置，字体大小12 px，颜色为#fff，高度30 px，行高30 px，下边框为5 px，颜色为#cc5200，元素左内边距为34 px。 4. 整体控制列表内容，元素各内边距分别设为25 px 0 0 15 px，背景颜色为#fff5ee。 5. 设置列表项的高度、内边距。高度为26 px，元素左内边距为22 px。 6. 使用CSS伪类控制超链接。指针点击后的颜色效果设置为红色，文字修饰方式为下画线。指针悬停时的颜色效果设置为蓝色。 （作品点评） 教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。 · 布置作业 · 完成教师布置的作业。 · 预习下章内容。 项目测评 1.无序，有序和定义列表能够使用<ul><ol><dl>标签 2.列表嵌套能够在无序列表中嵌套有序列表 3.list-style-type属性能够正确使用不同属性值的功能 4.list-style-image属性能够设置项目图像 5.list-style-position属性能够控制列表项显示符号的位置 6.创建超链接能够使用<a>标签 7.锚点链接能够使用href属性 8.定义新闻列表CSS样式能够制作新闻列表页面结构 9.课后习题能够完成课后习题 10.课堂表现能够遵守纪律，完成学习任务 教 学 后 记 学科网（北京）股份有限公司 $$