Dreamweaver CS3中用“spry菜单栏”制作纵向导航菜单

刘靖屏

摘要：网页导航菜单是指引和方便浏览者访问所需内容的快速通道。该文介绍了Dreamweaver CS3中使用“Spry菜单栏”控件创建纵向的导航菜单，通过“属性”面板编辑“Spry菜单栏”控件，以及通过修改对应SpryMenuBarVertical.css文档中的CSS规则来更改菜单栏的外观。

关键词：Dreamweaver CS3；spry菜单栏；网页纵向导航菜单

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2014）17-4129-03

1 概述

网页导航菜单是指引和方便浏览者访问所需内容的快速通道。Dreamweaver CS3提供“Spry菜单栏”控件，可以创建纵向的网页下拉或弹出菜单。网页导航菜单的样式和风格是网站样式的一个重要的组成部分，好的网页导航菜单可以在确定网站风格的同时，清晰网站的层次。

2 创建网页纵向导航菜单栏

利用“Spry菜单栏”控件创建网页纵向导航菜单栏

1）将光标定位到要插入网页纵向导航菜单栏的位置。

2）单击“插入记录”|“Spry”|“Spry菜单栏”。

3）单击“垂直”单选按钮，再单击确定。

3 编辑网页纵向导航菜单栏

1）选择页面中的“Spry菜单栏”控件。

2）展开“属性”面板，在其中对“Spry菜单栏”控件进行编辑，主要是增删菜单项目，设置菜单项目的名称和菜单项链接的网页地址等。

3）在“属性”面板中完成对“Spry菜单栏”控件的编辑后，在文档编辑区中可以观察到“Spry菜单栏”控件的变化。但是要想预览“Spry菜单栏”控件的完整效果，必须先保存网页文档。选择“文件”|“保存”命令，弹出“复制相关文件”对话框，如图1“复制相关文件”对话框所示。

单击“确定”按钮，Dreamweaver就会自动将这些文件复制到站点的SpryAssets文件夹中。

4）按F12键预览网页效果。

4 更改网页纵向导航菜单栏外观样式

菜单控件的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

{display： block；

cursor： pointer；

background-color： #EEE；

padding： 0.5em 0.75em；

color： #333；

text-decoration： none；}

修改color属性的值，即可修改网页纵向导航菜单栏的文本颜色。现将color的值改为1px solid #FFFFFF。

3）网页纵向导航菜单栏有鼠标经过或焦点的菜单项的背景修改

1） 打开SpryMenuBarVertical.css文件

2） 找到代码段：

ul.MenuBarVertical a：hover， ul.MenuBarVertical a：focusendprint

{background-color： #33C；

color： #FFF；}

修改background-color属性的值，即可修改网页纵向导航菜单栏的菜单项的背景颜色。现将background-color的值改为#1B4065。

4）网页纵向导航菜单栏有鼠标经过或焦点的菜单项的文本颜色修改

1） 打开SpryMenuBarVertical.css文件

2） 找到代码段：

ul.MenuBarVertical a：hover， ul.MenuBarVertical a：focus

{background-color： #33C；

color： #FFF；}

修改color属性的值，即可修改网页纵向导航菜单栏的菜单项的文本颜色。现将color的值改为#FFFF00。

5）网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的背景颜色修改

1） 打开SpryMenuBarVertical.css文件

2） 找到代码段：

ul.MenuBarVertical a.MenuBarItemHover， ul.MenuBarVertical a.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible

{background-color： #33C；

color： #FFF；}

修改background-color属性的值，即可修改网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的背景颜色。现将background-color的值改为#1B4065。

6）网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的文本颜色修改

1） 打开SpryMenuBarVertical.css文件

2） 找到代码段：

ul.MenuBarVertical a.MenuBarItemHover， ul.MenuBarVertical a.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible

{background-color： #33C；

color： #FFF；}

修改color属性的值，即可修改网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的文本颜色。现将color的值改为#FFFFFF。

5 总结

Dreamweaver CS3中使用“Spry菜单栏”控件可以创建纵向的网页下拉或弹出菜单，通过“属性”面板编辑“Spry菜单栏”控件，以及通过修改对应SpryMenuBarVertical.css文档中的CSS规则来更改菜单栏的外观。该文从“网页纵向导航菜单栏菜单背景修改”、“网页纵向导航菜单栏菜单文本颜色修改”、“网页纵向导航菜单栏有鼠标经过或焦点的菜单项的背景修改”、“网页纵向导航菜单栏有鼠标经过或焦点的菜单项的文本颜色修改”、“网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的背景颜色修改”和“网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的文本颜色修改”等六个方面描述了如何更改网页纵向导航菜单栏的外观。图3显示了用Spry菜单栏自动生成的网页纵向导航菜单栏经更改后的效果。

参考文献：

[1] 张新成，缪亮.Dreamweaver网页制作实用教程[M]. 2版.北京： 清华大学出版，2012.

[2] 马恒.Dreamweaver中多种菜单样式的实现方法[J].电子世界，2013（2）： 148-149.

[3] 曲燕萍.使用Dreamweaver和Flash制作网页下拉菜单[J].中国教育技术装备，2009（18）：71-72.endprint

{background-color： #33C；

color： #FFF；}

修改background-color属性的值，即可修改网页纵向导航菜单栏的菜单项的背景颜色。现将background-color的值改为#1B4065。

4）网页纵向导航菜单栏有鼠标经过或焦点的菜单项的文本颜色修改

1） 打开SpryMenuBarVertical.css文件

2） 找到代码段：

ul.MenuBarVertical a：hover， ul.MenuBarVertical a：focus

{background-color： #33C；

color： #FFF；}

修改color属性的值，即可修改网页纵向导航菜单栏的菜单项的文本颜色。现将color的值改为#FFFF00。

5）网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的背景颜色修改

1） 打开SpryMenuBarVertical.css文件

2） 找到代码段：

ul.MenuBarVertical a.MenuBarItemHover， ul.MenuBarVertical a.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible

{background-color： #33C；

color： #FFF；}

修改background-color属性的值，即可修改网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的背景颜色。现将background-color的值改为#1B4065。

6）网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的文本颜色修改

1） 打开SpryMenuBarVertical.css文件

2） 找到代码段：

ul.MenuBarVertical a.MenuBarItemHover， ul.MenuBarVertical a.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible

{background-color： #33C；

color： #FFF；}

修改color属性的值，即可修改网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的文本颜色。现将color的值改为#FFFFFF。

5 总结

Dreamweaver CS3中使用“Spry菜单栏”控件可以创建纵向的网页下拉或弹出菜单，通过“属性”面板编辑“Spry菜单栏”控件，以及通过修改对应SpryMenuBarVertical.css文档中的CSS规则来更改菜单栏的外观。该文从“网页纵向导航菜单栏菜单背景修改”、“网页纵向导航菜单栏菜单文本颜色修改”、“网页纵向导航菜单栏有鼠标经过或焦点的菜单项的背景修改”、“网页纵向导航菜单栏有鼠标经过或焦点的菜单项的文本颜色修改”、“网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的背景颜色修改”和“网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的文本颜色修改”等六个方面描述了如何更改网页纵向导航菜单栏的外观。图3显示了用Spry菜单栏自动生成的网页纵向导航菜单栏经更改后的效果。

参考文献：

[1] 张新成，缪亮.Dreamweaver网页制作实用教程[M]. 2版.北京： 清华大学出版，2012.

[2] 马恒.Dreamweaver中多种菜单样式的实现方法[J].电子世界，2013（2）： 148-149.

[3] 曲燕萍.使用Dreamweaver和Flash制作网页下拉菜单[J].中国教育技术装备，2009（18）：71-72.endprint

{background-color： #33C；

color： #FFF；}

修改background-color属性的值，即可修改网页纵向导航菜单栏的菜单项的背景颜色。现将background-color的值改为#1B4065。

4）网页纵向导航菜单栏有鼠标经过或焦点的菜单项的文本颜色修改

1） 打开SpryMenuBarVertical.css文件

2） 找到代码段：

ul.MenuBarVertical a：hover， ul.MenuBarVertical a：focus

{background-color： #33C；

color： #FFF；}

修改color属性的值，即可修改网页纵向导航菜单栏的菜单项的文本颜色。现将color的值改为#FFFF00。

5）网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的背景颜色修改

1） 打开SpryMenuBarVertical.css文件

2） 找到代码段：

ul.MenuBarVertical a.MenuBarItemHover， ul.MenuBarVertical a.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible

{background-color： #33C；

color： #FFF；}

修改background-color属性的值，即可修改网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的背景颜色。现将background-color的值改为#1B4065。

6）网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的文本颜色修改

1） 打开SpryMenuBarVertical.css文件

2） 找到代码段：

ul.MenuBarVertical a.MenuBarItemHover， ul.MenuBarVertical a.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible

{background-color： #33C；

color： #FFF；}

修改color属性的值，即可修改网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的文本颜色。现将color的值改为#FFFFFF。

5 总结

Dreamweaver CS3中使用“Spry菜单栏”控件可以创建纵向的网页下拉或弹出菜单，通过“属性”面板编辑“Spry菜单栏”控件，以及通过修改对应SpryMenuBarVertical.css文档中的CSS规则来更改菜单栏的外观。该文从“网页纵向导航菜单栏菜单背景修改”、“网页纵向导航菜单栏菜单文本颜色修改”、“网页纵向导航菜单栏有鼠标经过或焦点的菜单项的背景修改”、“网页纵向导航菜单栏有鼠标经过或焦点的菜单项的文本颜色修改”、“网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的背景颜色修改”和“网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的文本颜色修改”等六个方面描述了如何更改网页纵向导航菜单栏的外观。图3显示了用Spry菜单栏自动生成的网页纵向导航菜单栏经更改后的效果。

参考文献：

[1] 张新成，缪亮.Dreamweaver网页制作实用教程[M]. 2版.北京： 清华大学出版，2012.

[2] 马恒.Dreamweaver中多种菜单样式的实现方法[J].电子世界，2013（2）： 148-149.

[3] 曲燕萍.使用Dreamweaver和Flash制作网页下拉菜单[J].中国教育技术装备，2009（18）：71-72.endprint