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

1、Dreamweaver CS3 中用“ spry 菜单栏”制作纵向导航菜单摘要：网页导航菜单是指引和方便浏览者访问所需内中使用“ Spry容的快速通道。该文介绍了 Dreamweaver CS3菜单栏”控件创建纵向的导航菜单，通过“属性”面板编辑Spry 菜单栏”控件，以及通过修改对应SpryMenuBarVertical.css 文档中的 CSS 规则来更改菜单栏的 外观。关键词： Dreamweaver CS3； spry 菜单栏；网页纵向导航菜单中图分类口号：TP311 文献标识码： A 文章编号：1009-3044（2014）17-4129-031 概述 网页导航菜单是指引和方便浏览者

2、访问所需内容的快速通道。 Dreamweaver CS3 提供“ Spry 菜单栏”控件，可以 创建纵向的网页下拉或弹出菜单。网页导航菜单的样式和风 格是网站样式的一个重要的组成部分，好的网页导航菜单可 以在确定网站风格的同时，清晰网站的层次。2 创建网页纵向导航菜单栏 利用“ Spry 菜单栏”控件创建网页纵向导航菜单栏1）将光标定位到要插入网页纵向导航菜单栏的位置。2）单击“插入记录” |“Spry”|“Spry 菜单栏”。3）单击“垂直”单选按钮，再单击确定。3 编辑网页纵向导航菜单栏1）选择页面中的“ Spry 菜单栏”控件。2）展开“属性”面板，在其中对“Spry 菜单栏”控件进行编

3、辑，主要是增删菜单项目，设置菜单项目的名称和菜单项链接的网页地址等。3）在“属性”面板中完成对“Spry 菜单栏”控件的编辑后，在文档编辑区中可以观察到“Spry 菜单栏”控件的变化。但是要想预览“ Spry 菜单栏”控件的完整效果，必须先保存网页文档。选择“文件” |“保存”命令，弹出“复制相关文件”对话框，如图 1“复制相关文件”对话框所示。单击“确定”按钮， Dreamweaver 就会自动将这些文件复制到站点的 SpryAssets 文件夹中。4）按 F12 键预览网页效果。4 更改网页纵向导航菜单栏外观样式 菜单控件的 HTML 文档中包含一个外部 ul 标签，该标签中对于每个顶级菜

4、单项都包含一个 li 标签，而顶级菜单项li 标签） 又包含用来为每个菜单项定义子菜单的 ul 和 li 标 签，子菜单中同样可以包含子菜单。顶级菜单和子菜单可以 包含任意多个子菜单项。尽管可以使用“属性”面板编辑“ Spry 菜单栏”控件，但是“属性”面板并不支持自定义菜单栏外观样式的设置任 务。要想更改菜单栏外观，必须修改对应SpryMenuBarVertical.css 文档中的 CSS 规则。容有 4 个文件， 其中图 1 “复制相关文件”对话框中显示自动要求复制的内2 个文件为图片， SpryMenuBar.js 文件 是赋予文件功能的， SpryMenuBarVertical.cs

5、s 文件中包含设 置控件样式的全部信息。面从六个方面描述如何更改网页纵向导航菜单栏。图2 为用 Spry 菜单栏自动生成的网页纵向导航菜单栏。1)网页纵向导航菜单栏菜单背景修改 1) 打开 SpryMenuBarVertical.css 文件2) 找到代码段：ul.MenuBarVertical border ： 1px solid #CCC ； 修改 border 属性的值， 即可修改网页纵向导航菜单栏的最外面的菜单容器的所有边框颜色。现将border 的值改为1px solid #1B4065 。3) 找到代码段：ul.MenuBarVertical ul border ： 1px sol

6、id #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 属性的值，即可修改网页纵向导航菜单栏的菜单容器的所有背景颜色。 现将 backgrou

7、nd-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）网页纵向导航菜单栏

8、有鼠标经过或焦点的菜单项的背景修改1) 打开 SpryMenuBarVertical.css 文件2） 找到代码段：ul.MenuBarVertical a ：hover ， ul.MenuBarVertical a ：focusbackground-color ： #33C；color ： #FFF； 修改 background-color 属性的值，即可修改网页纵向导航菜单栏的菜单项的背景颜色。现将 background-color 的值 改为 #1B4065。4）网页纵向导航菜单栏有鼠标经过或焦点的菜单项的文本颜色修改1) 打开 SpryMenuBarVertical.css 文件2）

9、找到代码段：ul.MenuBarVertical a ：hover ， ul.MenuBarVertical a ：focusbackground-color ：#33C；color ： #FFF； 修改 color 属性的值，即可修改网页纵向导航菜单栏的菜单项的文本颜色。现将color 的值改为 #FFFF00。5）网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的背景颜色修改1) 打开 SpryMenuBarVertical.css 文件2) 找到代码段：ul.MenuBarVertical a.MenuBarItemHover ，ul.MenuBarVertical a.MenuBa

10、rItemSubmenuHover ，ul.MenuBarVertical a.MenuBarSubmenuVisiblebackground-color ： #33C； color ： #FFF； 修改 background-color 属性的值，即可修改网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的背景颜 色。现将 background-color 的值改为 #1B4065 。6) 网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的文本颜色修改1) 打开 SpryMenuBarVertical.css 文件2) 找到代码段：ul.MenuBarVertical a.MenuBa

11、rItemHover ，ul.MenuBarVertical a.MenuBarItemSubmenuHover ，ul.MenuBarVertical a.MenuBarSubmenuVisiblebackground-color ： #33C； color ： #FFF； 修改 color 属性的值，即可修改网页纵向导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的文本颜色。现将 color的值改为 #FFFFFF 。5 总结Dreamweaver CS3中使用“Spry 菜单栏”控件可以创建纵向的网页下拉或弹出菜单，通过Spry菜单栏”控件，以及通过修改对应SpryMenuBarVertical.css单J.中国教育技术装备，2009 (18): 71-72.文档中的 CSS 规则来更改菜单栏的外观。 该文从“网页纵向 导航菜单栏菜单背景修改” 、“网页纵向导航菜单栏菜单文本 颜色修改”、“网页纵向导航菜单栏有鼠标经过或焦点的菜单 项的背景修改” 、“网页纵向导航菜单栏有鼠标经过或焦点的 菜单项的文本颜色修改” 、“网页纵向导航菜单栏中子菜单有 鼠标经过或焦点时父菜单项的背景颜色修改”和“网页纵向 导航菜单栏中子菜单有鼠标经过或焦点时父菜单项的文本 颜色修改”等六个方面描述了如何更改网页纵向导航菜单栏 的外观。图