3.4 Spry布局元素

• Dreamweaver中预置了以JavaScript脚本语言开发的Spry布局元素，可以帮助用户以可视化的方式实现简单的用户交互。在Dreamweaver CS5中，主要提供了5种基本的Spry布局元素，包括Spry菜单栏、Spry选项卡式面板、Spry折叠式、Spry可折叠面板以及Spry工具提示等。

3.4.1 Spry菜单栏

• Spry菜单栏是一组可导航的菜单按钮，当访问者将鼠标移动到菜单中的某个按钮上时，将会显示相应的子菜单。使用Spry菜单栏可以在紧凑的空间中显示大量可导航信息，并使访问者无需深入浏览就可以了解网站中提供的内容。

  1、建立Spry菜单栏，包含一级、二级导航的菜单。

    插入 – Spry --Spry菜单栏。

    选中Spry菜单栏 menubar1 加减和设置一、二级菜单。

    选择二级菜单，设置链接和目标窗口。

  2、当访问者将鼠标移动到一级菜单中能正常显示二级子菜单。

  3、使用Spry菜单栏在紧凑的空间中显示大量可导航信息。

  4、使访问者无需深入浏览就可以了解网站中提供的内容。

3.4.2 Spry选项卡式面板

• Spry选项卡式面板是一组用来将内容存储到紧凑空间中的面板。访问者可以通过单击要访问的面板上的选项卡，来隐藏或者显示在选项卡式面板中的内容。当访问者单击不同的选项卡时，会打开相应的构件的面板。

3.4.3 Spry折叠面板

• Spry折叠面板是一种可折叠的面板，它用于将大量数据存储在一个紧凑的空间中。网站访问者可以通过单击面板上相应的选项卡来隐藏或者显示在折叠构件中的内容。

• 在Dreamweaver中，Spry折叠面板分为两种：一种是多个面板的折叠式面板，一种是只有一个面板的可折叠面板。这两种折叠面板与选项卡式面板更改内容的方式基本相同，只要重新设置选项卡名称以及面板中的内容即可。

3.4.4 Spry工具提示

• Spry工具提示是Dreamweaver中Spry布局元素中的一种。使用该元素，用户可以选择网页中的任意一个网页元素，并为其添加工具提示信息，当鼠标滑过该元素时即可显示。

3.5 课堂练习：制作企业简介网页