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

中文版Dreamweaver网页制作案例教程

目录contents项目一网页设计与制作基础知识项目二网站规划与站点创建项目三网页中的文本、图像与音视频项目四网页中的列表与超链接项目五网页中的表格与表单项目六网页布局项目七行为、模板与库项目八实战案例——制作爱学精品课网站

项目四网页中的列表与超链接在网页中添加列表在网页中添加超链接任务一任务二制作常见导航栏任务三

列表是网页中常用的元素，使用它能够以整齐的方式排列显示网页的内容，使网页更加清晰、整洁。超链接是构建网页导航和实现交互的重要元素，能够使用户在网页之间、网页内部及不同资源之间进行跳转与交互。此外，组合使用列表与超链接还能制作出网页中非常重要的模块，如导航栏。本项目将介绍网页中列表、超链接与常见导航栏的相关知识，以及使用Dreamweaver2021在网页中添加列表与超链接并设置样式的方法和制作导航栏的方法。项目导读

知识目标技能目标思政目标掌握在网页中添加列表与超链接的方法。掌握用于标记列表与超链接的标签。掌握列表样式与超链接样式的设置方法。掌握制作常见导航栏的方法。能够使用Dreamweaver2021在网页中添加列表，并设置列表样式。能够使用Dreamweaver2021在网页中添加超链接，并设置超链接样式。能够使用Dreamweaver2021制作常见的导航栏。保持积极主动的学习态度，增强自身工作能力。培养规划事务的意识，增强处理生活和学习中各类信息的能力。学习目标

在网页中添加列表1PART01任务描述任务准备任务实施——在“科技学院”主页中添加列表一、添加列表二、设置列表样式

列表在网页中应用广泛，不仅可以整齐呈现文本、图像等网页内容，还可以用于制作导航栏、菜单栏等网页模块。本任务首先介绍在网页中添加列表的方法，然后介绍设置列表样式的方法，最后在“科技学院”主页中添加列表，使学生练习使用Dreamweaver2021在网页中添加列表并设置列表样式的操作。任务描述

任务准备一、添加列表二、设置列表样式

全班学生以3～5人为一组，各组选出小组长，小组长组织组内成员扫码观看视频“网页中的列表”，讨论并回答以下问题。任务准备问题1：网页中的列表有哪些应用？问题2：任选一种类型的网站，简述如何设计网页中的列表。网页中的列表

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

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

（1）无序列表。单击“无序列表”按钮再单击“列表项”按钮添加的是无序列表，代码及页面效果如图所示。一、添加列表

其中，ol标签用于标记有序列表。一个ol标签同样可以包含一个或多个li标签。有序列表中的列表项有先后之分，项目标记默认为阿拉伯数字。对于强调排列顺序的内容可以使用有序列表来制作，如排行榜等。一、添加列表

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

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

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

（1）list-style-position属性用于设置列表项目标记位置。属性值inside（）表示项目标记在列表项之内；默认属性值outside（）表示项目标记在列表项左侧。二、设置列表样式（2）list-style-image属性用于设置列表样式图像。默认属性值none表示无列表样式图像；属性值url(src)表示设置列表样式图像，src为列表样式图像的引用地址