Styling and inserting a Spry Menu Bar 2.0 widget with the Adobe Widget Browser

If you have experimented with a Spry Menu Bar in Dreamweaver, you'll know it takes only a few seconds to insert a CSS menu with flyout submenus. The style sheet and all the JavaScript files are created automatically for you. That's the easy part. What's not so easy is taming the CSS to blend with the rest of your design. It's a challenge even for CSS gurus.

So, the Dreamweaver engineering team rethought the whole way of working with Spry Menu Bars. The result is Spry Menu Bar 2.0, which uses a newer version of Spry designed specifically for creating user interfaces, SpryUI. They also introduced the Adobe Widget Browser, which makes it much easier to style Spry Menu Bar 2.0 and other widgets. Instead of spending time trying to figure out which CSS selector you need to edit, you do all the configuration through dialog boxes that describe the part of the widget they control. What's more, you get to see how the changes will look in a browser in real time. With just a little CSS knowledge, you can style a Spry Menu Bar 2.0 widget with confidence.

The Adobe Widget Browser is a separate AIR application that's closely integrated in Dreamweaver CS5. With a little extra work, you can also use the Widget Browser with earlier versions of Dreamweaver. However, the widgets need to be rendered in Dreamweaver using Live View, so using Dreamweaver CS3 or earlier is not recommended.

This tutorial shows how to install the Adobe Widget Browserand download the Spry Menu Bar 2.0 widget from the Adobe Exchange. You'll then style a horizontal fixed-width menu and insert it in the home page of a fictional events website called Bayside Pulse.

This article is divided into the following sections:

• Reviewing the task ahead
• Installing the Adobe Widget Browser
• Choosing widgets from the Adobe Exchange
• Configuring a Spry Menu Bar 2.0 widget
• Setting the layout and width of the menu bar
• Configuring the submenu layout
• Setting the text and background colors
• Preparing to add embossed borders to the menu items
• Setting up the site in Dreamweaver
• Deploying a Spry Menu Bar 2.0 widget in Dreamweaver

Additional Requirements

In order to make the most of this article, you need the following software and files:

Adobe Widget Browser

• Download

Reviewing the task ahead

The sample files for this tutorial contain the home page of a fictional events website called Bayside Pulse (see Figure 1).

The design lacks a navigation menu to take visitors to other pages. For this project, you'll use Spry Menu Bar 2.0 and the Adobe Widget Browser, both of which you'll download and install. By default, a Spry Menu Bar 2.0 widget is in neutral shades of gray (see Figure 2), and it expands andcontracts depending on the size of the menu labels.

The colors need to be updated, and the menu bar needs to be the same width as the site's banner heading, 960 pixels. By the time you have finished, you'll have created a navigation menu that blends with the rest of the page (see Figure 3).

The finished page is in the completed folder of the sample files for this tutorial. Most of the menu items are dummy links, but the Home and Café Citrus menu items link to index.html and citrus.html, respectively.

Note: To select the colors for the menu, I visited http://kuler.adobe.com/, selected the option to create a theme from an image, and uploaded the bannerimage, bayside_pulse.jpg. Using kuler is a quick and easy way to get harmoniouscolor schemes.

Installing the Adobe Widget Browser

The Adobe Widget Browser isn't installed by default, but it's closely integrated with Dreamweaver CS5. You can also use the Widget Browser with earlier versions of Dreamweaver, but without the same level of integration. The Widget Browser lets you preview widgets on the Adobe Exchange. The widgets are free. When you find one you like, you can download and customize it, saving your changes for automatic insertion in a Dreamweaver site. All you need is an Adobe ID to log into the Adobe Exchange and download them.

Note: The Widget Browser uses a specification created bythe OpenAjax Alliance. So, in additionto Spry, many widgets available on the Adobe Exchange use jQuery and other popular JavaScript frameworks.

Although the Widget Browser is a separate application, the easiest way to access it is through Dreamweaver CS5. If you're using an earlier version of Dreamweaver, you need to download the Widget Browser from Adobe Labs, and install it separately. The following instructions apply only to Dreamweaver CS5.

1. Make sure you're connected to the Internet, click the Extend Dreamweaver icon in the Application Bar, and choose Widget Browser (see Figure 4).

On a Mac, if you can't see the Extend Dreamweaver icon, choose Window > Application Bar.

2. If the Widget Browser is already installed, it should launch. Skip ahead to Choosing widgets from the Adobe Exchange.
3. If you see an alert telling you that the Widget Browser isn't installed, click OK. This launches your default browser and takes you to the Widget Browser's page on the Adobe website.
4. Click the link to download the Widget Browser. At this stage, you might be prompted to log in with your Adobe ID. This is normally your email address. If you don't have an Adobe ID, click Create an Adobe Account. The registration process should take only a couple of minutes.
5. On the download page, click Install Now if you have Flash Player installed. Otherwise,click the download link.
6. When prompted to open or save the file, click Open.
7. When asked to confirm if you want to install the application, click Install, and type your computer's administrator password if necessary.
8. When the installation has completed, the Widget Browser should launch automatically. Click Accept to accept the license agreement.

Choosing widgets from the Adobe Exchange

The Widget Browser lets you inspect widgets before deciding whether to download them. In this section, you'll log into the Adobe Exchange, and select the Spry Menu Bar 2.0 widget.

1. You need to be signed into the Adobe Exchange to preview and download widgets. Click Sign In at the top right of the Widget Browser, and sign in with your Adobe ID and password.
2. The Widget Browser displays thumbnail images of the widgets, together with brief details, including the author's name and user ratings. Select Spry Menu Bar 2.0 (see Figure 5).

3. The Widget Browser displays details of the Spry Menu Bar 2.0 widget,including compatible browsers and compatible products.

   Note: Only Dreamweaver CS5 is listed as a compatible product, but this refers to integration with the Widget Browser. You can use Spry Menu Bar 2.0 with earlier versions of Dreamweaver by copying and pastingthe code into your web pages manually.

4. Click Preview at the top right of the Widget Browser to preview the Spry Menu Bar 2.0 widget (see Figure 6). It comes with three presets. You can see what each one looks like in Live View. You can also inspect the underlying code by clicking the Code tab.

4. Click Add To My Widgets at the bottom right of the Widget Browser. This launches the Widget License screen.
5. Click Accept to download the widget to your computer.

   Note: If you can't see the Accept button, resize the Widget Browser window to bring it into view. The license screen isn't resizable.

6. When the widget has been downloaded, click Go To My Widgets.

Configuring a Spry Menu Bar 2.0 widget

Once you have downloaded a widget from the Adobe Exchange, you can configure it inside the Widget Browser. The available options depend on how the widget was packaged by the developer. Spry Menu Bar 2.0 has a large number of options, giving you considerable control over its appearance. The options are divided into the following categories:

• Binding & Behavior: Changes the menu ID and speed of operation.
• Fonts: Offers a choice of web-safe fonts. Also changes the font size and weight.
• Menu Bar Layout: Determines the orientation (horizontal orvertical) and alignment of the menu. This is also where you set the width ofthe menu and menu items.
• Submenu Layout: Controls the width of submenus.
• Colors: Sets the colors for all parts of the menu, except borders.
• Menu Bar Borders: Offers a fine level of control over borders on the menu bar and top-level menu items.
• Submenu Borders: Sets the borders on submenus and submenu items.

Once you have configured a widget, you can save the settings for use in other pages. You can also build new presets based on an existing one.

Follow these steps to begin with the first two sets of options:

1. Select Spry Menu Bar 2.0 in the My Widgets screen of the Widget Browser. This opens a preview of the menu bar on your local computer. The screen is identical to the one you saw when you previewed the menu bar on the Adobe Exchange, but with the addition of a Configure button at the bottom left.
2. Select Fixed Width Submenus in the WIDGET PRESETS section, and click the Configure button. This opens a screen where you can change the look and behavior of the menu to suit your own needs (see Figure 7).

The panels on the left of the Widget Browser slide up and down, giving access to all the menu's settings. Any changes you make are reflected immediately in Live View on the right.

The first panel, BINDING & BEHAVIOR, lets you change the menu's ID and timing of the flyout menus. The delays are expressed in milliseconds, so the submenus appear and disappear after a delay of 0.2 seconds by default. These default values are fine as they are, so no changes arenecessary.

3. Since you're going to save the changes you make to the look of the menu, you need to give it a unique name. Type Horizontal 960 Fixed Width Submenus in the Name text box on the bottom right.
4. Click FONTS to open the next panel.
5. In the Menu Bar section use the following settings:
   • Font Family: "Lucida Sans Unicode", "LucidaGrande", sans-serif
   • Size: 18px
   • Weight: Bold
   • Style: Normal
6. Use the same settings in the Submenu section, but set Size to 16px.

The changes are reflected immediately in Live View (see Figure 8).

Note: If you want to take a break at any stage, click the Save Preset button at the bottom right of the Widget Browser. This saves your changes, and lists Horizontal 960 Fixed Width Submenus under MY PRESETS in the Preview screen of the Spry Menu Bar 2.0 widget. To resume editing, select your configuration from MY PRESETS and click Configure.

Setting the layout and width of the menu bar

The MENU BAR LAYOUT panel lets you choose whether to use a horizontal or vertical layout. If you choose a vertical menu bar, the width is automatically determined by the width of the menu items, and the menu is always aligned left. For a horizontal menu bar, you have the following options:

• Full width: The menu expands to fill the width of its containing element.
• Fixed width: The menu can be either left aligned or centered.
• Shrinkwrapped: The width is determined by the total width of the menu items, and the menu bar can be aligned either left or right.

This panel represents probably the most difficult part of configuring a Spry Menu Bar 2.0 widget, because it requires not only an understanding of how widths are calculated in CSS, but also of how the menu items are styled. The menu bar and submenus follow the widespread convention of styling nested unordered lists. So, the HTML markup for each menu item is simply a link inside an <li> element like this:

However, in the MENU BAR LAYOUT panel, as well as setting the width for each menu item, you need to set the padding for both the item and the item label. This is because the Spry Menu Bar 2.0 widget uses JavaScript to manipulate the HTML markup, adding not only classes, but also wrapping the textof the menu item in a <span> tag like this:

You can see the effect this has on the structure of the menu items by giving each part a distinctive background color to make it easy to identify (see Figure 9). The item label is the green section immediately surrounding the text. The yellow area represents the menu item, and the narrow blue stripes represent the left and right borders of the menu items.

The addition of the <span> tag gives you the flexibility to style the center section of each menu item independently, but it also complicates the calculations you need to make when determining the values to enter in the MENU BAR LAYOUT panel. According to the CSS Box Model, the width of an element applies only to its content. Padding and borders are added outside the content, so you need to subtract these values from the width of the menu items.

The complete menu bar in the Bayside Pulse website has five top-level items. The overall width needs to be the same as the banner image, in other words 960 pixels. Divided by 5, that gives an overall width of 192 pixels for each menu item. I'm going to add a 2px border all round each item, so that reduces the width of the content to 188 pixels. Calculating the appropriate amount of padding is more a question of trial and error, but 25 pixels on either side of the text looks about right. That reduces the width of the menu item to 138 pixels.

Performing this calculation is absolutely vital to the success of customizing a Spry Menu Bar 2.0 widget. Remember that padding and borders are added outside the width of the menu item.

With that calculation out of the way, you can now adjust the settings in the MENU BAR LAYOUT panel.

1. Click MENU BAR LAYOUT in the Widget Browser to reveal the options.
2. In the top section, use the following settings:
   • Menu Bar Orientation: Horizontal
   • Horizontal Menu Bar Positioning: Left Aligned Fixed Width
   • Menu Bar Width: 960px

   Note: If you hover your mouse pointer over any of the options, the Widget Browser displays a tooltip explaining what the option is for.

3. In the Item Width section, use the following settings:
   • Item Label Width Type: Fixed Width
   • Item Label Width: 138px
   • Text Alignment: Center
4. The next two sections set the padding for the menu item and item label. By default, each menu item has 39 pixels of horizontal padding on either side. The left padding is assigned to the item label. However, the right padding is split between the item label and the item. This is to leave sufficient room on either side of the submenu arrows.

   Since the design for the Bayside Pulse menu calls for 25 pixels of padding on the left and right, you need to split this value between the item and item label on the right.

5. In the Item Padding section, change the value in the Right text box from 24 to 10. Combined with the 15px default value for the item label, this adds up to 25px .
6. Leave the other settings in the Item Padding section at their default value of 0 .
7. In the Item Label Padding section, change the value in the Left text box from 39 to 25. Leave the other settings in the Item Label Padding section at their default values.

In the Widget Browser Live View, the menu is now beginning to take shape (see Figure 10). You might need to resize the Widget Browser to view the full width of the menu.

Configuring the submenu layout

The submenus are styled in the same way as the top-level menu items. In other words, a <span> tag is added programmatically around the text, creating an item label within each submenu item. As with the top-level items, the padding on the right is split between the submenu item and the item label to leave space on either side of the submenu arrows. Although the SUBMENU LAYOUT panel has many options, it's relatively easy to configure once you understand the difference between item and item label.

1. Click SUBMENU LAYOUT to reveal the next set of options.
2. The first section allows you to offset the first level of submenus from the top-level items. Leave First Level Submenu Indent at its default value of 0px .
3. The First Level Min-Width option controls the minimum width of submenu items. Its value depends on the first item in the Item Width section. If you choose Auto – Fit To Text, you should set First Level Min-Width to 100% . If you choose Fixed Width, it should be set to 0% .

   The Bayside Pulse design uses fixed-width submenus, so leave First Level Min-Width at the default value of 0% .

4. In the Item Width section, set Item Label Width Type to Fixed Width.

   Setting the value for Item Label Width involves a calculation similar to the one you made for the top-level items. The Bayside Pulse design calls for the submenu items to be the same width as the top-level items— 192px . You need to deduct the amount of padding and borders from this figure. The default padding and borders are fine, so it's just a question of adding them up.

   • In the Item Padding section, Right is 2px and Left is 0px .
   • In the Item Label Padding section, Right is 12px and Left is 5px .
   • The borders are set in the SUBMENU BORDERS panel, and are just 1px on each side, making a total width of 2px .

   Adding these values together comes to 21 pixels. Deduct that value from the overall width of the submenu items (192-21=171) to get the value for Item Label Width.

5. Change Item Label Width from the default 7em to 171px.
6. Leave all other settings at their default values.
7. Test your settings by moving your mouse pointer over one of the top-level items with a submenu. The flyout submenus should be the same width as the top-level menu items (see Figure 11). Don't worry about a minor difference in the border alignment with the top level. That will be fixed when the top-level borders have been set.

Setting the text and background colors

The COLORS panel controls the text and background colors of the top-level menu items and the submenus. Because the Spry Menu Bar 2.0 widget adds a <span> around the text in both the top-level items and the submenu items, you have the option to apply a different background color to the item labels. For the Bayside Pulse menu, the background color of the labels will be inherited from the menu bar.

1. Click COLORS to reveal the options for setting the background and text colors.

   The first option in the Menu Bar Text and Background section sets the background color for the whole menu bar. As long as you set the background colors of the items and labels to transparent, the top level items will inherit this color.

2. Click the color box alongside Menu Bar Background, and type B0C9D9 in the text box at the top of the color swatch panel (see Figure 12).

Note: The color picker in the Widget Browser automatically adds the hash symbol (#) to the code it generates. Do not add it here. Hexadecimal values consist of the numbers 0–9 and the letters A–F (case-insensitive) only. So, the second character in B0C9D9 is a zero, not the letter O.

3. Click the color box alongside Item Background, and select the white color swatch with a red diagonal stripe at the top left of the color picker to set the value to transparent (see Figure 13).

4. Also set Label Background to transparent. Live View now displays the top-level menu items with a pale blue background (see Figure 14).

5. Leave Text at the default, black.
6. Set Item Background Hover to 677E8C.
7. Set Label Background Hover to transparent.
8. Set Text Hover to white (FFFFFF).
9. In the Submenu Text and Background section, use the following settings:
   • Submenu Background: transparent
   • Item Background: 677E8C
   • Label Background: transparent
   • Text: FFFFFF (white)
   • Item Background Hover: B0C9D9
   • Label Background Hover: transparent
   • Text Hover: 000000 (black)
10. Test the submenus in the Widget Browser's Live View (see Figure 15).

Preparing to add embossed borders to the menu items

The MENU BAR BORDERS panel has options to add a border to the whole menu bar and to the individual top-level menu items. The border widths must be the same on all sides, but you can control the color and style of each side separately. The options for the menu items give you considerable control. You can use a different color when the mouse pointer is hovering over an item, and you can apply different border styles to the first and last items.

For the Bayside Pulse site, the menu item borders will create the illusion of embossed buttons by using a lighter color for the top and left, and a darker color for the right and bottom. The light and dark colors will be reversed when the mouse pointer is hovering over a menu item, giving the impression of an inverse emboss.

Selecting the border colors

Unless you have a keen sense of color, getting the light and dark shades right for the borders is difficult without a little help from a graphics program, such as Fireworks CS5. If you don't have a suitable graphics program handy, you can just read these instructions and use the colors in the next section. But a program such as Fireworks CS5 is indispensible for creating graphics for your websites, so I encourage you to download the trial version and follow along.

1. Launch Fireworks CS5, and create a new Fireworks Document by choosing File > New or by clicking Fireworks Document (PNG) in the Create New section of the welcome screen. The canvas size needs to be big enough to draw a rectangle similar in size to one of the menu items in your Spry Menu Bar 2.0 widget.
2. In the Colors section of the Tools panel, set the Fill Color to #B0C9D9, the same color as used for the main menu items in the Spry Menu Bar. Set the Stroke Color to transparent (select the white box with a diagonal red stripe).
3. Select the Rectangle tool in the Vector section of the Tools panel, and draw a rectangle on the canvas. It should be filled with the same color as the top-level items in the Spry Menu Bar.
4. With the rectangle still selected, click the plus (+) button next to Filters in the Properties panel, and select Bevel and Emboss > Inner Bevel (see Figure 16).

5. In the panel that opens, set the options in the pop-up menus to Flat and Raised, leave the other options at their default values, and click away from the panel. The rectangle has a bevel that makes it look like a raised button.
6. Open the Info panel (Window > Info), and select the Pointer tool.
7. Move the Pointer tool over the top edge of the bevel, and read the color from the RGB labels in the Info panel (see Figure 17). Write down the value as a hexadecimal color value: CDDCE7.

8. Repeat the previous step with the bottom edge of the bevel. Note down the value: 5C6A72.
9. Select the rectangle, and change the Fill Color to #677E8C.
10. In the Properties panel, click the Inner Bevel filter to edit its settings. Change the value of the pop-up menu at the bottom from Raised to Inset, and click away from the panel. The rectangle now looks as though it's sunken into the canvas.
11. Repeat steps 7 and 8, making note of the new colors: 697278 and B8C4CA.
12. Close Fireworks without saving the file.

Note: You might get slightly different color values when using this technique. The exact values are unimportant, as long as they harmonize with the main color.

Applying the borders to the menu bar items

After selecting the border colors, all that remains is to apply them to the Spry Menu Bar 2.0 widget.

1. In the Widget Browser, click MENU BAR BORDERS to reveal the options.
2. By default, the menu bar has no border. The Width text box is set to 0px and the Style for each side is set to None. These settings are fine.
3. At the top of the Items section, change the value in the Width text box to 2px. This sets the border width for each side.

   There are separate sections for the top, right, bottom, and left borders. Each section has five options:

   • Color: Sets the normal border color for the selected side
   • Hover Color: Sets the side's border color when the mouse pointer is hovering over the menu item.
   • Style: Sets the side's border style on all items.
   • First Item Style: Overrides the border style on the first menu item.
   • Last Item Style: Overrides the border style on the last menu item.

   As you can see, you have precise control over each border. If you want only a thin vertical line between menu items, you can set the border style on all sides except the left to None, and suppress the left border on the first item.

   For this design, you want the same style on all borders, but the colors need to be different to produce the embossed effect.

4. In the Top and Left sections, use the following settings:
   • Color: CDDCE7
   • Hover Color: 697278
   • Style, First Item Style, Last Item Style: Solid

   In the Right and Bottom sections, use the following settings:

   • Color: 5C6A72
   • Hover Color: B8C4CA
   • Style, First Item Style, Last Item Style: Solid
5. Test the menu bar in the Widget Browser's Live View (see Figure 18). Don't worry about the section on the right not looking like the other menu items. As soon as you create a new menu item in Dreamweaver, it will be styled like the others.

Note: The final configuration panel (SUBMENU BORDERS) for the Spry Menu Bar 2.0 widget styles the submenu borders. By default, the submenu items have a one-pixel light gray border. The border happens to fit quite well with this color scheme, so there's no need to change the settings. However, if you need to change them for a different menu, the principles are exactly the same as for the main menu item borders.

6. Click Save Preset at the bottom right of the Widget Browser to save the newly configured menu bar, which is now listed in MY PRESETS in the Spry Menu Bar 2.0 widget's Preview screen.

Setting up the site in Dreamweaver

Because the Widget Browser is directly integrated in Dreamweaver CS5, you can insert a Spry Menu Bar 2.0 widget (or any other widget) with just a few clicks. If you're using Dreamweaver CS4, you need to copy and paste the code manually.

Whichever version you're using, you first need to set up the Bayside Pulse site for this tutorial.

All the necessary files are in the sample file, spry_bayside.zip.

1. Extract the files in spry_bayside.zip to a convenient location on your computer. When extracted, you should have a folder named spry_bayside that contains two web pages, index.html and citrus.html, plus three other folders named completed, images, and styles.
2. Define a Dreamweaver site named Spry Bayside, setting the spry_bayside folder as the site root (see Figure 19).

3. Open index.html in the completed folder. In Design view, the menu bar is displayed as a series of nested unordered lists. Activate Live View or preview the page in a browser to see the menu bar rendered correctly. Most menu items are dummy links, but Café Citrus in the Eating Out > Quick Bites submenu links to citrus.html, and the Home menu item links back to index.html. To follow a link in Live View, you'll need to hold down the Ctrl key (Windows) or Cmd key (Mac OS X) while clicking it.
4. Close index.html after you have tested the menu.
5. Open the version of index.html in the Spry Bayside site root. It's the same page without the Spry Menu Bar 2.0 widget.

   The menu items in the horizontal version of a Spry Menu Bar 2.0 widget are floated, so you need to insert the menu bar in a <div> that has a specified height. This preserves the vertical alignment of elements below the menu bar.

6. Click the Insert Div Tag button in the Common category of the Insert panel/bar. Alternatively, choose Insert >Layout Objects > Div Tag. This opens the Insert Div Tag dialog box.
7. The <div> needs to be inserted after the banner image, which is in a <div> named header . In the Insert Div Tag dialog box, select After Tag from the Insert pop-up menu, and then select <div id="header"> from the pop-up menu on the right.
8. Type nav in the ID text box (see Figure 20).

9. Click New CSS Rule. In the New CSS Rule dialog box that opens, Dreamweaver automatically selects the correct values for Selector Type and Selector Name.

   In the rule definition section make sure that bayside.css is selected. This is the file where the rule will be defined.

10. Click OK to open the CSS Rule Definition dialog box.
11. Select Box from the Category list on the left, and type 34 in the Height text box. Select px as the unit of measurement. This value has been calculated by adding the size of the text in the menu items ( 18px ), the top and bottom padding on the item labels ( 6px each), and the top and bottom borders on the menu items ( 2px each).
12. Click OK to close the CSS Rule Definition dialog box, and click OK again to close the New CSS Rule dialog box. You should now have a new <div> with placeholder text between the banner image and the rest of the page content (see Figure 21).

13. Choose File > Save All Related Files (CS5 only) or File > Save All to save the changes to both index.html and bayside.css.

The page is now ready for the Spry Menu Bar 2.0 widget to be inserted. If you're using Dreamweaver CS5, follow the instructions in the next section. Otherwise, skip ahead to Using Earlier Versions Of Dreamweaver to insert the Spry Menu Bar 2.0 widget.

Using Dreamweaver CS5 to insert the Spry Menu Bar 2.0 widget

These instructions assume you have configured a Spry Menu Bar 2.0 widget as described in the preceding pages of this tutorial.

1. Delete the placeholder text in the nav <div> , and leave your insertion point inside the <div> .
2. Click the Widget button in the Common category of the Insert panel/bar. Alternatively, select Insert > Widget.
3. In the Widget dialog box, select Spry Menu Bar 2.0 (1.0) as the Widget and Horizontal 960 Fixed Width Submenus as the Preset (see Figure 22).

4. Click OK. Dreamweaver inserts the menu and all associated files. Unlike the original Spry Menu Bar, it's displayed in Design view as a series of unordered lists. This is normal.
5. Save index.html. Dreamweaver presents you with the Copy Dependent Files alert (see Figure 23) informing you that the related files will be copied to a folder called Spry-UI-1.7. Click OK to save the files to the Spry Bayside site.

You'll put the finishing touches to the Spry Menu Bar 2.0 widget in the final section of this tutorial. The next section describes how to transfer the menu bar from the Widget Browser to earlier versions of Dreamweaver. The instructions in the next section also apply if you want to move a Spry Menu Bar 2.0 widget manually to another page.

Using earlier versions of Dreamweaver to insert the Spry Menu Bar 2.0 widget

The Widget Browser is not integrated in earlier versions of Dreamweaver, so you need to export the files from the Widget Browser and transfer the code manually to index.html.

1. Select Spry Menu Bar 2.0 in the Widget Browser, and select Horizontal 960 Fixed Width Submenus from the MY PRESETS section of the Preview screen.
2. Click the Save Widget Files button at the bottom right of the Widget Browser. When prompted to choose a folder, navigate to the spry_bayside folder, which is the Spry Bayside site root. Click OK to save the files.
3. When the Widget Browser has finished copying the files, it offers you the option to preview the menu bar. If you click Preview, it launches your default browser to display a page that contains only the menu bar. If you don't want to preview the menu bar, just click Close.
4. Refresh the Files panel in Dreamweaver. You'll see a file named Spry Menu Bar 2.0_Horizontal 960 Fixed Width Submenus.html in the site root. There's also a new folder called Spry-UI-1.7, which contains all the necessary support files for the menu bar.
5. Open the Spry Menu Bar 2.0_Horizontal 960 Fixed Width Submenus.html file in Code view. Inside the <head> of the page is a <link> tag, followed by six <script> tags, and a <style> block that's approximately 230 lines long. Copy all the code from the <link> tag to the closing </style> tag to your clipboard (around lines 6–246).
6. Switch to index.html, also in Code view, and insert a blank line immediately before the closing </head> tag (around line 7).
7. Paste the code from your clipboard into the space you have just created.
8. Return to Spry Menu Bar 2.0_Horizontal 960 Fixed Width Submenus.html. Copy all the code between (but not including) the opening and closing <body> tags (around lines 250–304). This is the HTML for the menu bar (a series of unordered lists) plus a <script> block that initializes the menu bar.
9. Switch to index.html and locate the nav <div> . It should be around line 253, and it looks like this:

10. Delete the placeholder text between the <div> tags, and paste the code for the menu bar in its place.
11. Save index.html.

Deploying a Spry Menu Bar 2.0 widget in Dreamweaver

After inserting a Spry Menu Bar 2.0 widget into your first web page, you need to add the fifth top-level menu item, and edit the menu bar to link to different parts of the site. It's also a good idea to move the large <style> block out of the <head> of the page and merge the menu styles with your main style sheet—you'll do that in the next section.

In this tutorial, you'll simply add the fifth top-level menu item to the menu bar. You can follow a similar procedure to edit the other menu items and submenus.

1. With index.html the active document in the Dreamweaver workspace, switch to Design view, and position the insertion point at the end of the final nested list item (Stock Car) in the menu bar.
2. Press Enter/Return to add a new item to the list, and type Café Citrus.
3. Select the text you have just typed, and create a link to citrus.html by typing the filename in the Link text box of the Property inspector in HTML mode.
4. The new link is still part of the same second-level submenu as Stock Car. With the insertion point still in the Café Citrus text, click the Outdent button in the Property inspector twice (see Figure 24). This moves the new link to the top level of the series of nested lists that make up the menu bar.

5. Select the text "Home" in the first menu item, and create a link to index.html.
6. Save index.html and activate Live View. The new menu item has been added to the menu bar (see Figure 25).

7. In Dreamweaver CS5, hold down the Ctrl key (Windows) or the Cmd key (Mac OS X) and click the Café Citrus menu item. You should be taken to citrus.html. (In older versions of Dreamweaver, you need to test this in a browser).

   You'll notice that citrus.html does not have the Spry Menu Bar 2.0 widget. You'll fix this in Adding the Spry Menu Bar 2.0 widget to other pages.

8. Click the Live View button to return to Design view.

For the purposes of this tutorial, you can leave the other menu items unchanged; but in a site of your own, you'd edit the series of nested unordered lists to reflect the site's structure. Use the Indent button in the Property inspector to create submenus by nesting a list. Use the Outdent button to promote an item or list to a higher level.

Note: In a fixed-width design, the last menu item should not have a submenu more than one level deep. If you add a second-level submenu, it will be truncated by the page's container <div> .

Moving the embedded styles

With most widgets, including Spry Menu Bar 2.0, the Widget Browser attaches an external style sheet containing basic styles. It also embeds a <style> block in the <head> of the page containing rules that override the basic style sheet and style the widget according to the changes you made in the Widget Browser. It's a good practice to export these styles from the <head> of the page to an external style sheet.

1. Open the CSS Styles panel by clicking its tab, or by selecting Window > CSS Styles. On Windows, you can also use the keyboard shortcut, Shift+F11 (there is no Mac equivalent because of a conflict with Exposé).
2. Click the All button at the top of the CSS Styles panel, and collapse the styles listed for bayside.css and SpryMenuBasic.css by clicking the tiny minus icon (triangle on a Mac) alongside the filenames. Expand the panel so you can see the remaining embedded styles (see Figure 26).

9. Select the first style ( #MenuBar ) and Shift-click the final one ( .SpryIsIE6 #MenuBar .SubMenu .SubMenu ) to select all the embedded style rules.
10. Right-click, and select Move CSS Rules.
11. In the Move to External Style Sheet dialog box, select the option to move the rules to bayside.css, and click OK.
12. Choose File > Save All Related Files (CS5) or File > Save All.

The styles created by the Widget Browser for Spry Menu Bar 2.0 are designed to override the basic styles in SpryMenuBasic.css regardless of which order you link the style sheets.

Adding the Spry Menu Bar 2.0 widget to other pages

To add the menu bar to citrus.html, you need to copy and paste the link to SpryMenuBasic.css and the six <script> tags from the <head> of index.html into the <head> of citrus.html. You also need to copy and paste the whole nav <div> .

Note: If you have any difficulty doing this, you can open the version of citrus.html in the completed folder of the sample files to see an example.

Performing these steps for every page in a site is obviously a tedious chore, so you should use a Dreamweaver template, library item, or server-side include to automate the process. When you use one of these options, any changes to the master file are automatically reflected in every page that uses the menu bar.

Where to go from here

You can use the Adobe Widget Browser to quickly style a Spry Menu Bar 2.0 widget through a series of configuration panels without delving into the complexities of the CSS style rules, many of which are applied programmatically. The large number of options gives you precise control over the look and behavior of the menu bar. With so many options, it can feel overwhelming to start with, but Live View in the Widget Browser lets you experiment with them in a nondestructive way.

To learn more about the UI widgets that are used in Spry Menu Bar 2.0, see Spry UI on Adobe Labs.

Here are some other resources that you may find helpful as you work with the Spry Menu Bar 2.0 widget:

• Adobe Widget Browser Help
• Creating and Managing Templates
• Working with Server-Side Includes