- Dreamweaver CC中文版网页设计与制作从新手到高手
- 吴东伟
- 1071字
- 2021-03-19 19:00:35
5.2 设置文档列表
列表是网页中常见的一种文本排列方式,包括项目列表和项目编号两种样式。通过设置文档列表,不仅可以美化页面,而且还可以凸显出文本的层次性。
5.2.1 项目列表与编号
在Dreamweaver中,除了可以通过HTML语言来创建项目列表与编号之外,还可以使用【设计】视图,以直观表达的方法来创建项目列表和编号。
1. 通过【插入】面板创建
在网页中,选择所需创建项目列表与编号的文本。然后,在【插入】面板中,选择【结构】类别,在其列表中单击【项目列表】按钮,即可为所选文本添加项目列表。

另外,在网页中选择所需创建项目列表与编号的文本。然后,在【插入】面板中,选择【结构】类别,在其列表中单击【编号列表】按钮,即可为所选文本添加编号。

提示
用户也可以直接单击【项目列表】或【编号列表】按钮,输入完一个列表项之后,按下回车键,系统会自动显示下一个列表项。完成输入之后,连续按两次回车键,结束列表的输入。
2. 通过【属性】面板创建
在网页中,选择所需创建项目列表与编号的文本。然后,在【属性】面板中的HTML选项卡中,单击【项目列表】或【编号列表】按钮,即可为所选文本添加项目列表或编号列表。

注意
Dreamweaver只能以段落文本转换列表。一个段落中的多行内容在转换列表时只会转换到同一个列表项目中。
5.2.2 嵌套项目列表
嵌套项目列表是在一个项目列表中嵌入一个或多个项目列表,以形成上下级关系。一般情况下,用户可通过下列两种方法,来创建嵌套项目列表。
1. 列表项法
首先,为所选文本添加项目列表。然后,将视图切换到【拆分】视图中。在左侧的【代码】视图中,将光标定位在<ul></ul>标签内所需显示或插入嵌套列表的位置,并在【插入】面板中单击【编号列表】按钮。

最后,在【插入】面板中,单击【列表项】按钮,添加文本内容后即可实现嵌套列表。

2. 缩进法
首先,为所选文本添加项目列表。然后,选择需要嵌套列表的文本,在【属性】面板中单击【缩进】按钮即可。

提示
创建嵌套列表之后,选择嵌套列表文本,单击【属性】面板中的【编号列表】按钮,即可更改列表样式。
5.2.3 设置列表属性
创建列表后,用户还可以根据设计需求设置列表的一些常规属性。
选择包含列表的文本,在【属性】面板中单击【列表项目】按钮,即可在弹出的【列表属性】对话框中,设置列表的基本属性。

在【列表属性】对话框中,主要包括下列五种选项:
□列表类型 用于指定列表的类型,包括【项目列表】、【编号列表】、【目录列表】和【菜单列表】四种类型。
□样式 用于指定编号列表或项目列表的编号或项目符号的样式。
□开始计数 用于设置编号列表中第一个项目的值。
□新建样式 为所选列表项目指定样式。
□重设计数 设置用来从其开始为列表项目编号的特定数字。