Lesson 14: Adding Interactivity with the Spry Framework Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

Overview © 2013 John Wiley & Sons, Inc. 2

4.9 Insert Navigation Bars Spry Widgets give you the ability to create powerful, interactive navigation and user interface elements with easy-to-use insert bar objects. Spry Widgets include drop-down and accordion menus, expanding panels, and tabbed containers Spry Widgets harness the power of CSS for easy customization and styling. They are a great way to enhance navigation, organize content, and add dynamic style to your web pages. © 2013 John Wiley & Sons, Inc. 3

4.9 Insert Navigation Bars The Spry Menu bar creates a multi-tiered horizontal or vertical menu that can be easily added as a master navigation element in your page(s). The Spry Menu bar can be added from the Insert panel and customized using the Property Inspector and CSS Styles panel. © 2013 John Wiley & Sons, Inc. 4

4.9 Insert Navigation Bars Follow these steps to add the Spry Menu bar: 1.Locate and open the index_start.html file for editing. 2.Save the page as index_work.html into your site’s root folder. 3.Locate the div with the placeholder text that reads {Menu Bar Here} and select the text (below). Delete the text but leave your cursor in its place. © 2013 John Wiley & Sons, Inc. 5

4.9 Insert Navigation Bars 4.Open the Insert panel, and select the Spry category from the drop-down menu to display the Spry data objects and widgets. 5.Click the Spry Menu bar icon. Choose Horizontal from the dialog box, and click OK to add the menu bar to your page. © 2013 John Wiley & Sons, Inc. 6

4.9 Insert Navigation Bars 6.The Property Inspector now displays all the options for the new widget. This includes three columns, each representing a new level of navigation for a drop-down menu. Locate the leftmost column, which lets you add and customize the top level links. Select the first item titled Item 1. © 2013 John Wiley & Sons, Inc. 7

4.9 Insert Navigation Bars 7.Locate the Text field on the right side of the Property Inspector. Type the name Home to rename the item (below). Press Enter (Windows) or Return (Mac OS). 8.Repeat steps 6 and 7 for Item 2, Item 3, and Item 4, renaming them Products, Services, and Contact Us. © 2013 John Wiley & Sons, Inc. 8

4.9 Insert Navigation Bars 9.Select the Products link in the leftmost column on the Property Inspector. Locate the plus sign above the second column, and click it to add a new submenu item (below). Locate the Text field on the right, and rename the new item Gourmet Foods. Press Enter/Return. © 2013 John Wiley & Sons, Inc. 9

4.9 Insert Navigation Bars 10. Click the plus sign above the second column twice more to add two new submenu items. Rename them Lifestyle and Beauty. 11. Select the Lifestyle link in the center column. Locate the plus sign above the rightmost column, and click it twice to add two new submenu items to the Lifestyle link. 12. Select each of the new items and use the Text field on the right side of the Property Inspector to rename them Furniture and Accessories, respectively. Press Enter/Return. © 2013 John Wiley & Sons, Inc. 10

4.9 Insert Navigation Bars 13. Select the top-level link named Home. Click on Item 1.1 and then press the minus icon to remove this link. Repeat this step for Item 1.2 and Item In the Property Inspector, click on the Services link and then press the up arrow. This moves the item up one level and Services is now the second category (below). © 2013 John Wiley & Sons, Inc. 11

4.9 Insert Navigation Bars 15. Choose File > Save to save your page. The Copy Dependent Files dialog box appears to let you know that files will be copied to your site directory to support the new menu. Click OK. 16.Press the Live View button on the Document toolbar to test your new menu. Mouse over each menu item to see the rollover effects and submenus. Press the Live View button again to return to your editing view. © 2013 John Wiley & Sons, Inc. 12

4.9 Insert Navigation Bars Follow these steps to customize Spry Widgets: 1.Locate and expand the CSS Styles panel. Double- click the Insert panel to collapse it. You have two groups of CSS styles in this page: styles.css is the external style sheet for most of the page, and SpryMenuBarHorizontal.css is the external style sheet for just the menu bar. © 2013 John Wiley & Sons, Inc. 13

4.9 Insert Navigation Bars Click the All tab to find the attached SpryMenuBarHorizontal.css style sheet, and expand it. Click the minus sign (Windows) or down arrow (Mac OS) to the left of styles.css to collapse this list and view only the Spry menu styles (right). © 2013 John Wiley & Sons, Inc. 14

4.9 Insert Navigation Bars 2.Select the ul.MenuBarHorizontal rule to view its properties (right). This rule controls the overall appearance and size of the menu bar. 3.Click Add Property at the bottom of property listing. An empty field appears with a menu to the right. © 2013 John Wiley & Sons, Inc. 15

4.9 Insert Navigation Bars 4.Click on the drop-menu and scroll to select the font-family property. Click on this drop-menu and choose the Verdana, Geneva, sans-serif family. 5.Locate the font-size property. Click the 100% default value and type 11, then click the rightmost drop-down menu and choose px for the value. © 2013 John Wiley & Sons, Inc. 16

4.9 Insert Navigation Bars 6.Select the ul.MenuBarHorizontal a rule. In the Properties section, click on the value for back- ground-color (#EEE) and type #88B036 (green). Press Enter (Window) or Return (Mac OS) as shown at right. This sets the background color of the menu bar. © 2013 John Wiley & Sons, Inc. 17

4.9 Insert Navigation Bars 7.Click the color swatch under the color property and change the color to #FFFFFF (white) and press Enter (Window) or Return (Mac OS). This changes the hyperlinked text color for each menu item. 8.In the list of rules, select the following to view its properties: ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible rule © 2013 John Wiley & Sons, Inc. 18

4.9 Insert Navigation Bars 9.Click the color swatch under the background-color property and type #9FCC41 as the new color. 10. Click the Live View button on the Document toolbar to see the style changes you’ve made (below). © 2013 John Wiley & Sons, Inc. 19

5.3 Modify Text and Text Properties An easy way to display data from a XML Data Set is by using a Spry Repeat List. A repeat list uses one of three HTML list styles (unordered, ordered, or definition list) to display data. As with any standard HTML structure, you can fine- tune its look with CSS. © 2013 John Wiley & Sons, Inc. 20

5.3 Modify Text and Text Properties Follow these steps to add a Spry Repeat List Widget: 1.Locate the section in the right column of your page that begins with the header events. Select the placeholder text {calendar here}. 2.Under the Spry category on the Insert panel, click the Spry Repeat List button. The Insert Spry Repeat List dialog box appears. © 2013 John Wiley & Sons, Inc. 21

5.3 Modify Text and Text Properties 3.From the Container Tag drop-down menu, you can choose one of three list types, or use a form SELECT menu. Select the DL (Definition List) as seen below. © 2013 John Wiley & Sons, Inc. 22

5.3 Modify Text and Text Properties 4.From the Spry Data Set drop-down menu, select events, which your XML data. The new list will build itself from this dataset. 5.From the DT Column drop-down menu, make sure date is selected. This corresponds to the date node in your data set, and will display the date as the header for each list item. © 2013 John Wiley & Sons, Inc. 23

5.3 Modify Text and Text Properties 6.From the DD Column drop-down menu, select title (below). This will display the event title below the date in each list item. © 2013 John Wiley & Sons, Inc. 24

5.3 Modify Text and Text Properties 7.Click OK. If a dialog box appears prompting you to Add a Spry Region, press Yes. 8.A new Spry Region and a new definition list are added. Pre- view your page in the browser or Live View. You will see placeholders for the information in your data set—these will be replaced with actual data from your data set as seen above. © 2013 John Wiley & Sons, Inc. 25

5.3 Modify Text and Text Properties Follow these steps to style a widget: 1.Locate your Spry Repeat List in the right-side column, and click to position your cursor directly after the {date} placeholder text. 2.Add a space, and type a colon (:). You’ll follow this colon with the event time from your XML data set. 3.Choose Window > Bindings to display your Bindings panel. You’ll see your events data set and data fields below it. Select the time data field in the list— this contains the time for each event. © 2013 John Wiley & Sons, Inc. 26

5.3 Modify Text and Text Properties 4.Click and drag the time data field from the Bindings panel. Release it next to the {date}: text. This adds a placeholder for the time to your repeat list. It should read {date}:{time} as seen below. © 2013 John Wiley & Sons, Inc. 27

5.3 Modify Text and Text Properties 5.Below the date and time, click to position your cursor after the {title} placeholder. Press Shift+Return/Enter to create a line break 6.On the Bindings panel, locate the caption field within the events data set. Click and drag it from the Bindings panel to place it in the new line below the {title}. This adds a new placeholder for {caption}. © 2013 John Wiley & Sons, Inc. 28

5.3 Modify Text and Text Properties 7.Select the line in your list that reads {date}:{time}. On the left side of the Property Inspector, press the HTML button to switch to HTML view. Select.eventDate from the Class dropdown menu to apply it to the selected text (below). © 2013 John Wiley & Sons, Inc. 29

5.3 Modify Text and Text Properties 8.Select the text that reads {title}. Select.eventTitle from the Class drop-down menu to apply the rule. 9.Highlight the text that reads {caption}. Select.eventCaption from the Class drop-down menu to apply the rule. © 2013 John Wiley & Sons, Inc. 30

5.3 Modify Text and Text Properties 10. Choose File > Save to save your page. Click the Live View button on the Document toolbar to preview your list with the newly added data and CSS rules (right). © 2013 John Wiley & Sons, Inc. 31

Lesson Summary © 2013 John Wiley & Sons, Inc. 32

Copyright 2013 John Wiley & Sons, Inc.. All rights reserved. Reproduction or translation of this work beyond that named in Section 117 of the 1976 United States Copyright Act without the express written consent of the copyright owner is unlawful. Requests for further information should be addressed to the Permissions Department, John Wiley & Sons, Inc.. The purchaser may make back-up copies for his/her own use only and not for distribution or resale. The Publisher assumes no responsibility for errors, omissions, or damages, caused by the use of these programs or from the use of the information contained herein.