Dreamweaver3完全教程（29）
全套教程打包下载

设置项目列表
前面大致介绍了如何在Dreamweaver中设置段落格式和字符格式，实际上，我们还遗漏了一个很重要的格式设置方法，就使设置段落的项目列表。

列表在很多文档中都可以看到，例如，需要列举一些具有相同属性的事物，或是像本书一样，需要介绍某个操作的步骤，都会用到项目列表。

在HTML中，有两种类型的项目列表，一种是无序项目列表，一种是有序项目列表，前者用于用项目符号来标记项目无序的项目，而后者则使用编号来记录项目的顺序。

在Dreamweaver中，允许您设置多种项目列表格式。

理解项目列表的类型
　

在HTML中，可以创建如下的几种列表：

无序列表
有序列表
定义列表
目录列表
菜单列表
下面分别对这几种列表进行解释。

无序列表
在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每条列表项的前缀。在HTML中，有三种类型的项目符号：球形、环形和矩形。图 5-25显示了这几种不同的项目符号。

图 5-25 几种不同的项目符号

HTML中采用如下的语法结构来描述无序列表：

<ul>

<li>第一列表项</li>

<li>第二列表项</li>

...

</ul>

通过设置<ul>标记的type属性，可以决定无序项目列表的项目符号类型，下面是三种属性值的含义：

type = "disc" 使用球形的项目符号

type = "circle" 使用环形项目符号

type = "square" 使用矩形项目符号

如果我们希望编写图 5-25中采用球形项目符号的项目列表，可以使用如下代码：

<li>吸烟导致死亡</li>

<li>酗酒导致死亡</li>

<li>焦虑导致死亡</li>

<li>逸乐导致死亡</li>

</ul>

<li>标记同样带有type属性，如果为列表中的某个<li>标记设置type属性，将会从该<li>标记所在行起使用新的项目符号。

有序列表
有序列表同无序列表的区别在于，它使用编号，而不是项目符号来编排项目。它的HTML语法结构如下所示：

<ol>

<li>第一列表项</li>

<li>第二列表项</li>

...

</ol>

对于有序编号，可以指定其编号类型和起始编号，图 5-26显示了采用数字和大写字母作为项目编号的情形。

图 5-26 采用不同的项目编号

<ol>标记带有type、start等属性，用于设置编号类型和起始编号。

通过设置type属性，可以指定数字编号类型，下面是每个属性值的含义：

type = "1" 以阿拉伯数字作编号

type = "a" 以小写字母作为编号

type = "A" 以大写字母作为编号

type = "i" 以小写罗马数字作为编号

type = "I" 以大写罗马数字作为编号

通过设置<ol>标记的start属性，可以决定编号的起始值。对于不同类型的编号，浏览器会自行计算相应的起始值。例如，start = "3"，表明对于阿拉伯编号，从3开始；对于小写字母编号，从c开始；对于大写字母编号，从C开始，依此类推。

对于图 5-26左边所示的例子，可以使用如下的代码：

<li>将锅中的油加热</li>

<li>放入打散的鸡蛋，进行翻炒。</li>

<li>炒至将熟时，放入适当的味精和盐。</li>

<li>继续翻炒，至熟时出锅。</li>

</ol>

其中，因为默认时使用数字编号，且起始值为1，因此可以省略其中对type和start属性的设置。

<li>标记同样带有type和start属性，如果为列表中的某个<li>标记设置type属性，将会从该<li>标记所在行起使用新的编号类型；如果为列表中的某个<li>标记设置start属性，将会从该<li>标记所在行起使用新的起始编号。

定义列表
定义列表也称作字典列表，因为它同字典具有相同的格式。在定义列表中，每个列表项带有一个缩进的定义字段，就好像字典对文字进行解释一样。

图 5-27显示了一个定义列表的例子。

图 5-27 定义列表

在HTML中，定义列表采用如下的语法结构：

<dl>

<dt>第一标题项</dt>

...

<dt>第二标题项</dt>

...

</dl>

对于图 5-27所示的定义列表，对应是如下代码：

<dl>

<dd>World Wide Wait，世界范围的等待。</dd>

<dd>Plug and Pray，插入然后祈祷。</dd>

</dl>

目录列表和菜单列表
　

目录列表通常用于设计一个压缩窄列的列表，用于显示一系列的列表内容，例如字典中的索引或单词表中的单词等。列表中每项至多只能有20个字符。

目录列表的HTML语法结构如下所示：

<dir>

<li>第一列表项</li>

<li>第二列表项</li>

...

</dir>

菜单列表通常用于设计单列的菜单列表。其语法结构如下所示：

<menu>

<li>第一列表项</li>

<li>第二列表项</li>

...

</menu>

一般来说，不建议使用目录列表和菜单列表的形式，而应该用标准的无序列表替换它们。

创建项目列表
在Dreamweaver中，您可以在输入文字时创建项目列表，也可以将现有段落转换为项目列表。

创建新项目列表
　

要在Dreamweaver中创建新项目列表，您可以按照如下方法进行操作：

首先输入项目列表的第一行，将插入点放置到该行中。
打开“Text”（文本）菜单，选择“List”（列表），打开如图 5-28所示的菜单。

图 5-28 文本的列表菜单

要创建无序的项目列表，可以选择“Unordered List”（无序列表）命令；要创建有序的项目列表，可以选择“Ordered List”（有序列表）命令；要创建定义列表，可以选择“Definition List”（定义列表）命令。
在第一行后面回车，继续输入项目中的其他内容，这时您会看到，项目前会出现相应的项目符号或编号。
如果希望结束项目列表，可以在最后一行后连续按下两次回车。
图 5-29显示了无序项目列表和有序项目列表的外观。

图 5-29 无序项目列表和有序项目列表

使用属性面板上的项目列表按钮，如图 5-30所示，也可以很容易地创建新项目列表，单击相应的按钮，即可从插入点所在位置开始，创建项目列表。

图 5-30 属性面板上的项目列表按钮

将现有段落转换为项目列表
　

如果希望将现有的段落文字转换为项目列表，您可以按照如下方法进行操作：

选中要转换为项目列表的所有段落。
打开“Text”（文本）菜单，选择“List”（列表），再选择相应的“Unordered List”（无序列表）、“Ordered List”（有序列表）菜单项或“Definition List”（定义列表）菜单项。
这时选中的段落文字就被转换为项目列表的形式。如果打开源代码检视器，您就会看到，相应的项目标记替换了段落标记<p>和</p>。
使用属性面板上的项目列表按钮，如图 5-30所示，也可以很容易地将当前已有的段落文字转换为项目列表，单击相应的按钮，即可将选中的段落文字设置为项目列表的形式。

嵌套项目列表
　

项目列表可以进行嵌套，以实现多级项目列表的形式。要创建项目列表嵌套，您可以按照如下方法进行操作：

将插入点放置到项目列表希望嵌套入更深级别的行中，如果有多行希望嵌套，可以选中这些行。
打开“Text”（文本）菜单，选择“Indent”（缩进），或是单击属性面板上的“缩进”按钮，即可看到，项目被嵌套了。
如果希望将更深级别的项目列表提高级别，可以选中这些行，然后打开“Text”（文本）菜单，选择“Outdent”（反缩进），或是单击属性面板上的“反缩进”按钮。

图 5-31显示了项目列表的嵌套情形。

图 5-31 项目列表的嵌套

设置项目列表属性
　

通过设置项目列表的属性，可以决定项目列表的类型，无序项目列表中项目符号的类型，或有序项目列表中项目编号的类型等设置。

您可以按照如下步骤进行操作：

将插入点设置到要设置属性的项目列表中任意位置。
打开“Text”（文本）菜单，选择“List”（列表），再选择“Properties”（属性）命令，这时会打开如图 5-32所示的对话框。
图 5-32 列表属性对话框

在“List Type”（列表类型）下拉列表框中，可以选择列表类型。该选择将影响插入点所在位置的整个项目列表的类型。通常有如下四种选择：
Bulleted List（符号列表）生成的是带有项目符号式样的无序列表。实际上就是使用<ul>和</ul>标记来定义列表。
Numbered List（编号列表）生成的是有序列表。实际上就是使用<ol>和</ol>标记来定义列表。
Directory List（目录列表）生成目录列表，用于编排目录。实际上就是使用<dir>和</dir>标记来定义列表。
Menu List（菜单列表）生成菜单列表，用于编排菜单。实际上就是使用<menu>和</menu>标记来定义列表。
在“Style”（样式）下拉列表中，可以选择相应的项目列表样式。该选择将影响插入点所在位置的整个项目列表的样式。
如果前面选中的是“Bulleted List”（符号列表），则这里可以选择项目列表的符号类型。
如果选择“Bulleted”（球型），将以球形作为无序列表的项目符号，该操作实际上是将<ul>标记的type属性值设置为disc。
如果选择“Circle”（环形），将以一个空心圆作为无序列表的符号，该操作实际上是将<ul>标记的type属性值设置为circle。
如果选择“Square”（矩形），将以一个实心矩形作为无序列表的符号，该操作实际上是将<ul>标记的type属性值设置为square。
如果前面选中的是“Numbered List”（编号列表），则这里可以选择编号的数字格式。
如果选择“Number”（数字），则以阿拉伯数字作为有序列表的编号字符。该操作实际上是将<ol>标记的type属性值设置为1。
如果选择“Roman Small”（小写罗马数字），则以小写罗马数字作为有序列表的编号字符。该操作实际上是将<ol>标记的type属性值设置为i。
如果选择“Roman Large”（大写罗马数字），则以大写罗马数字作为有序列表的编号字符。该操作实际上是将<ol>标记的type属性值设置为I。
如果选择“Alphabet Small”（小写字母），则以小写英文字母作为有序列表的编号字符。该操作实际上是将<ol>标记的type属性值设置为a。
如果选择“Alphabet Large”（大写字母），则以大写英文字母作为有序列表的编号字符。该操作实际上是将<ol>标记的type属性值设置为A。
如果前面选中的是“Directory List”（目录列表）或“Menu List”（菜单列表），则这里无需输入。
如果前面选择的是“Numbered List”（编号列表），则在“Start Count”（开始编号）文本框中，可以选择有序编号的起始数字。该选择将使插入点所在位置的整个项目列表的第一行开始重新编号。该操作实际上是设置<ol>标记的start属性值。
在“New Style”（新样式）下拉列表中，允许您在项目列表中的列表项指定新的样式，这时从插入点所在行及其以后行开始都会使用新的项目列表样式。该操作实际上是设置相应<li>标记的type属性。
如果前面选择的是“Numbered List”（编号列表），在“Reset Count”文本框中，可以输入新的编号起始数字。这时从插入点所在行开始的以后各行，会从新数字开始编号。该操作实际上是设置相应<li>标记的start属性。
设置完毕，按下“OK”按钮，确定操作。　

注意：也可以通过单击属性面板上的“List Item”（列表项）按钮来打开该列表属性对话框，要注意的是，必须展开属性面板，才可以看到该按钮。