HTML中spry菜单栏,DreamweaverCS3中用“spry菜单栏”制作纵向导航菜单.docx
Dreamweaver CS3 中用“ spry 菜单栏”制作纵向导航菜单
摘要：网页导航菜单是指引和方便浏览者访问所需内
容的快速通道。该文介绍了Dreamweaver CS3 中使用“ Spry
菜单栏”控件创建纵向的导航菜单，通过“属性”面板编辑
“Spry 菜单栏”控件，以及通过修改对应
SpryMenuBarVertical.css 文档中的CSS 规则来更改菜单栏的
外观。
关键词： Dreamweaver CS3； spry 菜单栏；网页纵向导航菜单
中图分类号： TP311 文献标识码： A 文章编号：
1009-3044( 2014) 17-4129-03
概述
网页导航菜单是指引和方便浏览者访问所需内容的快
速通道。 Dreamweaver CS3 提供“ Spry 菜单栏”控件，可以
创建纵向的网页下拉或弹出菜单。网页导航菜单的样式和风
格是网站样式的一个重要的组成部分，好的网页导航菜单可
以在确定网站风格的同时，清晰网站的层次。
创建网页纵向导航菜单栏
利用“ Spry 菜单栏”控件创建网页纵向导航菜单栏
1)将光标定位到要插入网页纵向导航菜单栏的位置。
2)单击“插入记录”|“Spry ” |“ Spry 菜单栏”。
3)单击“垂直”单选按钮，再单击确定。
编辑网页纵向导航菜单栏
1)选择页面中的“Spry 菜单栏”控件。
2)展开“属性”面板，在其中对“Spry 菜单栏”控件
进行编辑，主要是增删菜单项目，设置菜单项目的名称和菜
单项链接的网页地址等。
3)在“属性”面板中完成对“Spry 菜单栏”控件的编
辑后，在文档编辑区中可以观察到“Spry 菜单栏”控件的变
化。但是要想预览“Spry 菜单栏”控件的完整效果，必须先
保存网页文档。选择“文件”|“保存”命令，弹出“复制相
关文件”对话框，如图1“复制相关文件”对话框所示。
单击“确定”按钮，Dreamweaver 就会自动将这些文件
复制到站点的SpryAssets 文件夹中。
4)按 F12 键预览网页效果。
更改网页纵向导航菜单栏外观样式
菜单控件的HTML 文档中包含一个外部ul 标签，该标
签中对于每个顶级菜单项都包含一个
li
标签，而顶级菜单项
(li
标签)又包含用来为每个菜单项定义子菜单的
ul
和
li
标
签，子菜单中同样可以包含子菜单。顶级菜单和子菜单可以
包含任意多个子菜单项。
尽管可以使用“属性”面板编辑“Spry 菜单栏”控件，
但是“属性”面板并不支持自定义菜单栏外观样式的设置任
务。要想更改菜单栏外观，必须修改对应
SpryMenuBarVertical.css 文档中的CSS 规则。
图 1“复制相关文件”对话框中显示自动要求复制的内
容有 4 个文件， 其中 2 个文件为图片， SpryMenuBar.js 文件是赋予文件功能的， SpryMenuBarVertical.css 文件中包含设置控件样式的全部信息。
下面从六个方面描述如何更改网页纵向导航菜单栏。图
2 为用 Spry 菜单栏自动生成的网页纵向导航菜单栏。
1)网页纵向导航菜单栏菜单背景修改
1) 打开 SpryMenuBarVertical.css 文件
2) 找到代码段：
ul.MenuBarVertical
{border ： 1px solid #CCC ； }
修改 border 属性的值， 即可修改网页纵向导航菜单栏的
最外面的菜单容器的所有边框颜色。现将border 的值改为
1px solid #1B4065 。
3) 找到代码段：
ul.MenuBarVertical ul
{border ： 1px solid #CCC ； }
修改 border 属性的值， 即可修改网页纵向导航菜单栏的
子菜单的菜单容器的所有边框颜色。现将border 的值改为
1px solid #1B4065 。
4) 找到代码段：
ul.MenuBarVertical a
{display ： block ；
cursor： pointer ；
background-color ： #EEE；
padding： 0.5em 0.75em；
color ： #333；
text-decoration ： none；}
修改 background-color 属性的值，即可修改网页纵向导
航菜单栏的菜单容器的所有背景颜色。现将 background-color
的值改为 #1B4065 。
2)网页纵向导航菜单栏菜单文本颜色修改
1) 打开 SpryMenuBarVertical.css 文件
2) 找到代码段：
ul.MenuBarVertical a
{d