实验九利用spry导航栏制作导航菜单.ppt

《实验九利用spry导航栏制作导航菜单.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、实验九：利用spry导航栏制作导航菜单实验目的能理清网站站点的层次结构掌握插入spry菜单栏的方法，包括弹出式和折叠式两类学会编辑各个菜单项标题及内容，以及用CSS样式编辑样式实验步骤及内容1、Spry菜单栏Spry菜单栏是dreamweaverCS3版本之后新增的功能，与以往手工设置弹出菜单不同，spry菜单栏的插入不涉及任何添加行为的操作，插入过程与其他网页元素没有什么区别。2、弹出菜单插入方法在文档窗口的目标位置定位插入点，将插入栏切换到“spry”分类，单击“spry菜单栏”按钮。选择水平放置还是垂直

2、放置。水平放置的spry菜单栏其弹出菜单的方向是由上至下，而垂直放置的菜单栏其弹出菜单的方向是由左至右。注意：在插入spry菜单栏时dreamweaver会自动插入相关的支持文件以及JS代码，最好不要轻易修改这些代码。由于水平菜单栏与垂直菜单栏的代码有所不同，在插入时最好先确定好选择那一种，因为插入后便不能再修改其方向设置了。3、菜单文字的编辑和格式化4、理清站点的层次结构制作spry菜单栏之前有一项非常重要的工作要做，这就是理清站点的层次结构，然后根据清晰的站点导航地图来制作和调整spry菜单栏，设置各项目

3、名称和相关链接地址。5、实例：制作网站首页的弹出式菜单Step1：新建页面，初步实现页面布局Step2：插入网页元素（图片文字）Step3：在目标位置，单击“spry”插入栏中的“spry菜单栏”按钮，在打开的对话框中选择“水平”单选项，确定。step4：对菜单项进行适当的删减，并修改菜单显示文字，并添加预设的链接URL地址。Step5：在spry菜单栏后的单元格内定为插入点，单击“单元格”属性栏中的“背景颜色”选择器按钮，用拾色器拾取spry菜单栏背景颜色，并将其作为单元格背景颜色。思考：如果想要修改spr

4、y弹出式菜单栏的背景颜色以及其他格式，如何操作？6、实例：制作滑动折叠导航菜单现在很多网站中出现了类似QQ软件的滑动式可折叠导航栏，这种功能在spry对象中也能实现。Spry折叠式（滑动式导航）没有spry菜单栏那样项目繁多的属性检查器，它的属性属性检查器中只有两项设置功能，一项是该对象的名称，另一项是“面板”列表。Step1：新建页面，初步实现页面布局Step2：插入网页元素（图片、文字）Step3：在目标位置，单击“spry”插入栏中的“spry折叠式”按钮。step4：在属性栏中单击“+”号或“-”号对

5、菜单项进行适当的删减。Step5：在设计窗口中将标题栏文本将“标签1”和“内容1”文本修改为自己设计的导航名称，也可插入图片。按同样方法，修改其他文字。还可对文字添加链接。Step6：修改CSS样式。在标题栏中定位插入点，单击属性面板中的“类”下拉列表框，查看该部分对应的CSS样式规则名称，然后在CSS样式面板中修改其样式，可以修改字体，颜色，以及背景图片。注意：最后制作完要“保存全部”。因为修改的CSS规则位于一个单独的CSS样式文件中，如果不保存该文件，则所作的所有CSS规则修改都无法生效。