Dawn Pedersen Art Institute

What is Spry? Spry is Dreamweaver’s version of JavaScript libraries. Spry effects alter the look of a page element—or of the whole page itself—when a particular event occurs. Spry effects are event-driven, so you need to decide: which event to use which HTML element to trigger it which element to apply the effect to. For example, you could attach a Spry effect to the element of a page and use the onLoad JavaScript event to trigger it when the page loads.

Working with Spry All Spry effects are grouped in the Behaviors tab within the Tag Inspector panel in Dreamweaver. Rather than getting into Spry in depth, we will use the more automated Spry UI components, which be found here: 1. Open the Insert panel 2. Choose Spry from the dropdown menu 3. Select a Spry component to insert on your page

Spry UI Components There are five basic Spry user interface components (or widgets) designed to be used out-of-the-box: Menu bars Tabbed panels Accordion panels Collapsible panels Tooltips

Working with Spry Follow these guidelines whenever working with Spry components: Always create a site definition for your site and save the current page within it. After inserting a Spry component, save all the associated files within your site, including external JavaScript and CSS files. To see the component’s details in the Property Inspector, hover your mouse over the widget in design view. When the tab appears at the top-left of the component (attached to a surrounding border,) click on it.

Exercise: Spry Menu Bar 1. Create an empty folder called “Spry” on your Desktop. 2. Create a blank HTML page in Dreamweaver (File > New, Blank Page - HTML - ).

Exercise: Spry Menu Bar 3. Save the file as “menu.html” inside your Spry folder. 4. View the page in Design view. 5. Open the Insert panel, set it to Spry, and click on Spry Menu Bar. 6. Select Horizontal from the dialog box and click OK.

Exercise: Spry Menu Bar Dreamweaver inserts a horizontal Spry Menu Bar at the top of the page. Like all Spry widgets, the menu bar is surrounded in Design view by a turquoise border with a tab at the top-left corner. The tab tells you what type of widget it is, followed by the widget’s ID attribute. Dreamweaver calls the first menu bar on a page “MenuBar 1 ”. The next one is “MenuBar 2 ” and so on.

Exercise: Spry Menu Bar Notice that the Related Files toolbar lists two files: SpryMenuBar.js and SpryMenuBarHorizontal.css. Until you save the page, these are temporary files. It’s essential that you save the file before doing anything else.

Exercise: Spry Menu Bar 7. Save menu.html. You are prompted to save the dependent files (including CSS and some image files.) 8. Click OK. The dependent Spry files are saved to a new folder in your site named SpryAssets.

Exercise: Spry Menu Bar 9. Click the Live View button in the Document toolbar. 10. Hover your mouse pointer over the menu bar. The menu bar is ready to customize. 11. Turn off Live View.

Exercise: Spry Menu Bar The Spry menu bar is a series of nested unordered lists styled with CSS to look like buttons. The submenu flyouts are controlled by JavaScript. 12. Select the menu bar in Design view (click on its turquoise tab.) 13. Click on the Turn Styles Off button in the Property Inspector. 14. Review the menu structure without the CSS styles applied. 15. Click on the Turn Styles On button in the Property Inspector.

Exercise: Spry Menu Bar You can, if you wish, turn off the styles and edit the menu directly in Design view. However, it’s more convenient to do it in the Property Inspector. 16. Select the menu bar in Design view (click on its turquoise tab.) The three columns in the Property Inspector show the menu hierarchy, with the top level on the left.

Exercise: Spry Menu Bar 17. Select an item in this left column. The middle column displays the contents of the related submenu. 18. Select an item from the middle column. The right column displays the next level down from whatever is selected in the middle one.

Exercise: Spry Menu Bar To edit a menu item: Highlight it in the Property Inspector. Fill in the fields on the right edge of the Property Inspector as follows: Text: The label you want to appear on the menu button Link: The page you want to link to. Title: Improves accessibility and displays a Tooltip on hover. Target: Allows you to open in a new window or tab. This is rarely justified for a site’s navigation menu.

Exercise: Spry Menu Bar To add an item, click the plus (+) button at the top of the relevant column. To delete an item, select it and click the minus (-) button. To change the order of items, select an item and use the up or down button at the top of the relevant column. Before moving to edit another part of the page, select one of the items in the left column first.

Exercise: Spry Menu Bar 19. Edit the menu bar you created so that each button has a label, a link, and a title: Use your IA diagram as a model, or use some sort of categorizing system. You may add, delete, or reorder items as necessary, but have at least one button at the third level. For the Link field, you can simply leave the pound (#) sign as a placeholder for some future page link. 20. Save all your files (File > Save All) and test the menu in a browser (F12).

Example: Spry Menu Bar I created a hypothetical zoo site menu.

Example: Spry Menu Bar I tested my zoo menu in a browser.

Customizing the CSS In SpryMenuBarHorizontal.css, style rules are divided into the following sections: Layout Information—for the structure, such as font sizes and menu widths Design Information—for the color scheme and borders. Submenu Indication—for the display of the arrow images. Best left alone. Browser Hacks—for dealing with Internet Explorer bugs. Leave these alone. Plenty of comments in the CSS help guide you to edit the correct style rule.