《中文版Dreamweaver网页制作案例教程[2021版]》教案 项目四 网页中的列表与超链接.docx

PAGE2

PAGE2

PAGE7

PAGE7

课题

项目四网页中的列表与超链接

课时

12课时（540min）

教学目标

知识技能目标：

（1）掌握在网页中添加列表与超链接的方法

（2）掌握用于标记列表与超链接的标签

（3）掌握列表样式与超链接样式的设置方法

（4）掌握制作常见导航栏的方法

（5）能够使用Dreamweaver2021在网页中添加列表，并设置列表样式

（6）能够使用Dreamweaver2021在网页中添加超链接，并设置超链接样式

（7）能够使用Dreamweaver2021制作常见的导航栏

素质目标：

（1）保持积极主动的学习态度，增强自身工作能力

（2）培养规划事务的意识，增强处理生活和学习中各类信息的能力

教学重难点

教学重点：在网页中添加列表与超链接的方法，用于标记列表与超链接的标签，列表样式与超链接样式的设置方法，制作常见导航栏的方法

教学难点：在网页中添加列表，并设置列表样式；在网页中添加超链接，并设置超链接样式；制作常见的导航栏

教学方法

案例分析法、问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务

请大家预习本节课内容，了解在网页中添加列表、超链接及导航栏的方法。

【学生】完成课前任务

考勤

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

互动导入

【教师】组织学生扫码观看“网页中的列表”视频，并讨论以下问题：

（1）网页中的列表有哪些应用？

（2）任选一种类型的网站，简述如何设计网页中的列表。

【学生】观看、思考、讨论、举手回答

【教师】总结学生的回答

传授新知

【教师】通过学生的回答，引入新知，讲解添加和设置列表样式的相关知识

一、添加列表

【教师】利用多媒体展示“‘插入’面板中的列表按钮”图片（详见教材），并进行讲解

使用Dreamweaver2021在网页中添加列表的具体操作方法是，首先确定添加列表的位置；然后在“插入”面板中单击“无序列表”按钮（或单击“有序列表”按钮）；接着将鼠标指针置于添加的列表标签中，在“插入”面板中单击“列表项”按钮；最后在列表项标签中输入内容。“插入”面板中的列表按钮。

在HTML5中，常见的列表有无序列表与有序列表。默认情况下，这两种列表中列表项的内容会由上至下依次排列显示在网页中，且每个列表项左侧都有一个项目标记。

【教师】利用多媒体展示“无序列表的代码及页面效果”图片（详见教材），并进行讲解

（1） 无序列表。单击“无序列表”按钮再单击“列表项”按钮添加的是无序列表，代码及页面效果详见教材。

……（详见教材）

无序列表中的列表项没有先后之分，项目标记默认为实心圆。

【教师】利用多媒体展示“有序列表的代码及页面效果”图片（详见教材），并进行讲解

其中，ol标签用于标记有序列表。一个ol标签同样可以包含一个或多个li标签。

有序列表中的列表项有先后之分，项目标记默认为阿拉伯数字。对于强调排列顺序的内容可以使用有序列表来制作，如排行榜等。

【小贴士】

自定义列表是HTML5中的一种特殊的列表结构，它包含列表标题与列表内容两部分，列表内容是对列表标题的解释说明。用于标记自定义列表的标签是dl，它包含dt与dd两个子标签。dt标签用于标记列表标题，dd标签用于标记列表内容。在使用Dreamweaver2021添加自定义列表时，需要手动输入代码。

【素养之窗】

在设计与制作网页时，适当添加列表能够更加高效地组织和安排信息，使信息更加清晰和易于理解。人们在生活中也可以使用列表来安排、记录或规划日常事务，帮助自己有条理地、高效地完成各项事情。例如，我们可以制作列表安排每天的待办事项、列出日常的购物清单、制订实现目标或梦想的计划等，避免自己遗漏重要的信息或事情，同时也激励自己不断前进。

二、设置列表样式

【教师】利用多媒体展示“用于设置列表样式的属性”图片（详见教材），并进行讲解

在Dreamweaver2021中，通常使用“CSS设计器”面板设置列表的样式，在“属性”窗格中，用于设置列表样式的属性有多个。

（1） list-style-position属性用于设置列表项目标记位置。……（详见教材）

（2） list-style-image属性用于设置列表样式图像。……（详见教材）

【教师】利用多媒体展示“list-style-type属性常用的属性值及说明”表格（详见教材），并进行讲解

（3） list-style-type属性用于设置列表项目标记类型，其常用的属性值及说明详见教材。……（详见教材）

?【教师】提出问题：

如何利用Dream