如何从Dreamweaver中的无序链接列表创建导航栏

这是一个很棒的CSS技巧，可以将带有项目符号的列表转换为Dreamweaver中的导航栏，并带有简单的滚动效果。对导航栏使用项目符号列表是一个公认的符合当前可访问性标准的网站惯例。

信用：由istockphoto拍摄的照片。 com

相同的链接仍然包含在无序列表中，但样式的应用程序会显着改变其外观。

<！ - 1 - >

信用：istockphoto的照片。 com

要使用CSS创建导航栏来重新定义无序列表和链接标记，请按照以下步骤操作：

单击以将光标置于要在页面中创建导航栏的位置。
输入要作为链接的文本，按Return或Enter键分隔每个文本以创建段落返回。
<！ - 2 - >
要将链接格式化为无序列表，请将要链接的每一行文本与
标签分开。
依次选择每一段文字，在“通用插入”面板中单击“超链接”图标，然后选择要链接到的页面或输入URL来创建链接。拖动以选择整个链接集，然后单击“属性”检查器中的“无序列表”图标。
项目符号出现在每个链接的开头。如果任何链接没有用单独的项目符号设置，请单击以删除它与之前的链接之间的空格，然后按回车键或回车键以分隔带有段落返回的链接。
要在链接列表（或页面上已有的任何其他内容）周围添加标签，请选择内容，然后单击“通用插入”面板中的“分隔”图标。
插入对话框打开。如果您想要添加格式，

围绕无序的链接列表添加标签会很有帮助。

从“插入”下拉列表中选择“环绕选择”。
要更精确地控制添加新标签的位置，可以从“插入对话框”对话框顶部的“插入”下拉列表中选择选项。

在类字段或ID字段中输入名称。
您输入的类别或ID名称的标签会自动添加到链接列表周围的页面。

在“插入对话框”对话框的底部，单击“新建CSS规则”按钮。
新的CSS规则名称被添加到CSS设计器选择器面板中的样式名称列表中。

在“属性”面板中，为颜色，背景，大小，边距和填充指定所需的设置。
样式格式会自动应用到标签的内容，因为您在步骤5-7中创建了样式。

要创建一个只在导航栏中使用无序列表才能格式化的复合样式，请创建一个包含类名称的复合样式。 navbar：
将光标放在项目符号列表中的任何位置。
1. 单击“选择器”面板顶部的加号（+）。
2. 在“选择器名称”字段中，确保自动输入Dreamweaver。 navbar ul作为“选择器”面板中新样式的名称。
3. 在“属性”面板中，将边距和填充设置为0.
4. 创建复合样式以重新定义列表项标签：
将光标放置在项目符号列表中的任意位置。
1. 点击“选择器”面板顶部的加号。
2. 在“选择器名称”字段中，确保自动输入Dreamweaver。 navbar ul li作为“选择器”面板中新样式的名称。
3. 在“属性”面板中，将“显示”设置为“内嵌”。
4. 将列表样式类型更改为无以删除项目符号。
5. 将左右边距设置为20像素。
6. 该步骤将水平列表中的列表项彼此分开。您可以更改设置以创建最适合您设计的链接之间的空间量。
  
  创建一个样式来重新定义链接标签：
单击将光标放置在导航栏的链接中。
1. 点击“选择器”面板顶部的加号。
2. 如果要更改样式名称，请双击“选择器”面板中的名称，然后输入要使用的名称。
3. 在“属性”面板的“文本”部分中，将“文本修饰”设置为“无”。
4. 仍然在“文本”部分中，从颜色中选择颜色以指定加载到页面上的链接的颜色。
5. 创建一个新样式来重新定义悬停链接标记，以便用户在链接上滚动光标时链接颜色将发生变化：
单击“选择器”面板顶部的加号。
1. 在选择器名称字段中，输入。 navbar a：悬停。
2. 在“属性”面板的“文本”部分中，将“文本修饰”设置为“无”。
3. 仍然在“文本”部分中，从颜色中选择一种颜色，以便在用户将光标在链接上滚动时指定链接的颜色。
4. 创建新样式重新定义访问的链接标签，以便在用户单击链接后链接颜色发生变化：
单击“选择器”面板顶部的加号。
1. 在选择器名称字段中，输入。 navbar a：visited。
2. 在“属性”面板的“文本”部分中，将“文本修饰”设置为“无”。
3. 仍然在文本部分，从颜色中选择一种颜色以指定访问后的链接颜色。
4. 单击工作区顶部的“实时”按钮，或单击“预览”按钮在浏览器中查看页面，以查看链接样式的效果。