Adobe Dreamweaver Spry Elements

Size: px

Start display at page:

Download "Adobe Dreamweaver Spry Elements"

Eleanor Cross
6 years ago
Views:

1 Adobe Dreamweaver Spry Elements

2 Spry Elements Contents Spry... 2 What is Spry?... 3 Facts You Need to Know Before Adding Spry... 3 Spry Menu Bar... 4 Repeating Regions... 5 Spry Effects... 7 Changing the Look of Spry Elements... 8 Diane Millican Training Specialist HSC Information Technology Center Health Science Center PO Box Gainesville, FL dmillic@ufl.edu training@ufl.edu

3 What is Spry? Spry is Adobe Dreamweaver s AJAX framework for dynamic elements on web pages. AJAX stands for Asynchronous JavaScript and XML. Dreamweaver now ships with an assortment of Spry widgets which make it fairly easy to add dynamic elements to your web pages. Some of the widgets available are: Menu Bars Collapsible Panels Tabbed Panels Accordions Tooltips Repeating regions o pulling information from XML or HTML datasets or RSS feeds Spry widgets can be found in the Layout or Spry Insert Panel Facts You Need to Know Before Adding Spry Always save your page before adding any Spry Spry elements generate multiple additional files o JavaScript files -.js o Cascading Style files -.css All files must be uploaded to remote for Spry elements to function Editing of Spry elements will be done in: o the element itself o the property inspector o the CSS files If you have multiple items (for example tabbed panels) on the web page you only see one at a time. To move from one to the next, hover over the next tab. When you see an eye icon, click on it and the next tabbed area will display. Then you can alter or add text to that area.

Once you see the CSS rules you can see the properties and make changes as necessary.

4 To alter CSS rules, open the CSS panel in Dreamweaver. Each Spry element will have one to a series of CSS rules defined. If you want to change a style element, make sure you can see All the CSS rules and the properties of each in the bottom section. Once you see the CSS rules you can see the properties and make changes as necessary. Once you have a rule selected in the All Rules area you can go through the list of rules by using your down arrow key on your keyboard. So for example if you are looking to change a background color, start at the top of the list in All Rules and arrow down until you see a rule that has a background-color property. You can then change the property in the CSS panel or open the CSS dialog box with the edit tool (the pencil icon at the bottom of the panel). Spry Menu Bar Save your page. Place your cursor where you want the menu to go. Click on the Spry button for Menu Bar and this box appears Determine if you want a horizontal or vertical menu.

To edit the appearance go to the CSS panels and look at the Spry Menu Bar CSS files Repeating Regions To add dynamic repeating regions

5 Your property inspector will change to show the following Name the Menu Bar in the text box labeled Menu Bar Name the menu items in the Text field box Add more menu items by clicking on the plus sign and delete unneeded ones by clicking the minus. To edit the appearance go to the CSS panels and look at the Spry Menu Bar CSS files Repeating Regions To add dynamic repeating regions that will populate with information from a database (XML or HTML) choose the Spry DataSet icon in the Spry Insert Panel. Choose the file that holds your data.

If you don t have column headers uncheck the box for use first row

6 Select Data Type from the pull down menu. If you have chosen HTML you will have to identify the row elements. If you don t have column headers uncheck the box for use first row as headers and then select a column and name the column. Choose layout options and click done.

7 Spry Effects Spry effects such as fade or shake can be found in the Behaviors panel.

Changing the Look of Spry Elements Spry Elements are styled by CSS. Each Spry element has a lot of styles to make up its look. To change the look of the elements, change the CSS.

8 Changing the Look of Spry Elements Spry Elements are styled by CSS. Each Spry element has a lot of styles to make up its look. To change the look of the elements, change the CSS. Many Spry elements have several states so you may need to change several styles to get the look you want. For example, an accordion panel has an open state, a closed state and a hover state. Due to that, you need to make changes to all of the styles for all the different states. One way to find out what styles you want to change is to look at the Styles Panel. Selecting each style you can see all the style settings and determine which ones need to be changed to make the elements look the way you want.

Overview of the Adobe Dreamweaver CS5 workspace

Adobe Dreamweaver CS5 Activity 2.1 guide Overview of the Adobe Dreamweaver CS5 workspace You can access Adobe Dreamweaver CS5 tools, commands, and features by using menus or by selecting options from one