adobe dreamweaver cs5 on demand part 61 ppt

ptg 16 16 375 Using Spry Widgets and Effects Introduction The Spry framework is a JavaScript library that allows you to use built-in HTML, CSS, and JavaScript code to create widg- ets, add special effects, and integrate HTML or XML data in your Web pages. A spry widget is a page element, such as a menu bar, tabbed or collapsible panels, or form validation, that provides added functionality without all the scripting. A widget con- sists of three different parts: structure, behavior, and styling. A widget structure is HTML code that defines the structure of the widget. A widget behavior is JavaScript that specifies what happens to a widget when an event occurs. Widget styling is CSS code that determines the look of the widget. You can insert a built-in spry widget, Dreamweaver tak es care of all three aspects of the widget. It provides the HTML, CSS, and JavaScript as well as the style of the widget, which you can modify to suit your own needs. For example, you can edit menu items, modify panels, and change the appear- ance of the page. The CSS and JavaScript files related to the widget are named with the same name as the spry widget, and stored in a SpryAssets folder in your site. Dreamweaver also includes built-in spry effects that allow you to apply visual effects, such as highlighting information or creating transitions, to elements on a page. You can apply one or more effects, such as a fade, highlight, blind up and down, slide up and down, grow and shrink, shake, and squish, to create a dynamic user experience. In this chapter you'll learn how to insert and work with spry widgets, and add spry effects to elements on your Web pages with minimal or no knowledge of JavaScript. If you have a strong knowledge of JavaScript you can create your own spry widgets or effects. What You’ll Do Insert Spry Widgets Select and Edit Spry Widgets Work with Spry Panel Widgets Work with Spry Validation Widgets Work with Spry Menu Bar Widgets Create a Spry Tooltip Display Spry Data Sets Create a Spry Region Create a Spry Repeat List Customize a Spry Widget Add and Remove Spry Effects Check Out Spry Samples From the Library of Wow! eBook ptg 376 Chapter 16 Inserting Spry Widgets Insert a Spry Widget Open the Web page you want to insert a spry widget. Click to place the insertion point where you want to insert the spry widget. Click the Spry tab on the Insert panel, or click the Insert menu, and then point to Spry. Click the spry widget you want to insert: ◆ Spry Data Set. Access HTML or XML data for regions, tables, or lists. ◆ Spry Region. Creates an area to wrap around objects, such as tables and repeat lists. ◆ Spry Repeat. Creates a duplicate region. ◆ Spry Repeat List. Creates an ordered, unordered, definition list, or drop-down list. ◆ Spry Validation. Create form validation for a text field or area, check box, password, confirm, or radio group. ◆ Spry Menu Bar. Creates a set of navigational menu buttons. 4 3 2 1 Dreamweaver provides a wide variety of spry widgets you can insert in your Web pages. Some of the widgets include page region definition, tables, menu bars, form validation, and panels to store data in a com- pact space. When you insert a spry widget, Dreamweaver creates a SpryAssets folder (on first use) in your local root site to store the widget, data, and any spry effects. The CSS and JavaScript files related with the widget are named with the same name as the spry widget and also stored in a SpryAssets folder. If you want (which is not recom- mended), you can change the default folder location where Dreamweaver saves and stores your spry assets. 3 2 4 1 Downloading Spry Files Before You Begin Before you add Spry widgets, you need to download and link the lat- est required Spry Framework files from the Adobe Labs Web site (http://labs.adobe.com/technologies/spry/). Unzip the Spry Framework files into the SpryAssets folder on your local root site. You can put all the files (includes great samples) to the SpryAssets to make sure you have everything. If space is tight, make sure you copy the includes and widgets folders, and the SpryData.js, SpryEffect.js, and xpath.js files. When you transfer files to your Web server for delivery on the Web, you need to transfer the files in the SpryAssets folder too. For Your Information From the Library of Wow! eBook ptg Chapter 16 Using Spry Widgets and Effects 377 ◆ Spry Tabbed Panels. Creates a set of panels to store data in a compact space. ◆ Spry Accordion. Creates a set of collapsible panels to store large amounts of data in a compact space. ◆ Spry Collapsible Panel. Creates a set of collapsible panels to store data in a compact space. ◆ Spry Tooltip. Creates a tooltip for page elements. If prompted, specify widget or input tag accessibility attribute options; the widget options vary depending on the widget. Click OK. If prompted, click Yes or No to add a form tag. Change the Default Spry Assets Folder Click the Sites menu, and then click Manage Sites. Select the site you want to change, and then click Edit. Click the Advanced Settings category. Click the Spry category. Enter a path and folder name to the location where you want to store spry assets, or click the Browse For Folder icon to select a folder location. Click Save, and then click OK to cache files, if necessary. Click Done to close the Manage Sites dialog box. 7 6 5 4 3 2 1 6 5 5 6 3 5 4 6 From the Library of Wow! eBook ptg After you insert a spry widget, you can select and edit the widget to customize it for your specific needs. You can edit the parameters and options for a spry widget or modify the style, or appearance, of a spry widget using CSS. Before you can edit a spry widget, you need to select it first by pointing to the widget until you see the widget’s blue tabbed outline and then clicking the widget’s tab in the upper left corner. 378 Chapter 16 Selecting and Editing Spry Widgets Select and Edit a Spry Widget Open the Web page with the spry widget you want to edit. Point to the widget until you see the blue tabbed outline, and then click the widget tab to select it. Click the Window menu, and then click Properties to display the Properties panel. Specify the options you want in the Properties panel for the selected widget; the options vary depending on the widget you select. Make changes to the content of the widget in the Design window. 5 4 3 2 1 1 4 2 3 5 Did You Know? You can edit the style of a spry widget in the related CSS file. You can open the CSS file located in the SpryAssets folder, make the changes you want, and then save it, or open the CSS panel and change the CSS styles for the spry widget. From the Library of Wow! eBook ptg Chapter 16 Using Spry Widgets and Effects 379 Change the Appearance of a Spry Widget Open the Web page with the spry widget you want to edit. Click in the part of the spry widget you want to change. Click the Window menu, and then click Properties to display the Properties panel. Specify the options you want in the Properties panel for the selected widget. ◆ Widget. Specify the settings you want for the selected widget. For example, for a selected text field, you can specify name, character width, maximum characters, type, class, or initial value. ◆ CSS. Click CSS to change cascading style sheet options in the CSS Styles panel. Click the Target Rule list arrow to change the current style. ◆ HTML. Click HTML and then use the normal formatting options, such as: Format, Font, Size, Bold, Italic, and alignment and spacing buttons. 4 3 2 1 3 2 1 4 CSS HTML Widget: TextField From the Library of Wow! eBook ptg 380 Chapter 16 Working with Spry Panel Widgets Insert and Work with Spry Panel Widgets Open the Web page you want to insert a spry widget, and then click to place the insertion point where you want it. Click the Spry tab on the Insert panel, or click the Insert menu, point to Spry, and then select the spry panel element you want: ◆ Spry Tabbed Panels. Creates a set of panels to store data in a compact space. ◆ Spry Accordion. Creates a set of collapsible panels to store large amounts of data in a compact space. ◆ Spry Collapsible Panel. Creates a set of collapsible panels to store data in a compact space. Select the panel widget. Point to a tab, click the eye icon (if available) to edit the panel contents, or select the panel contents and edit it. Click the Window menu, and then click Properties to display the Properties panel. 5 4 3 2 1 A spry panel widget allows you to store content in a compact space using tabs. Dreamweaver provides three different types of spry panels: accordion, collapsible, and tabbed. Each spry panel type provides a tab-like interface that displays content when a visitor clicks a tab. The differences between the spry panel types lies in the display and style of the tabs. If you have a large amount of content, the accordion panel is your best bet. Try each one to see which one works best with the con- tent you want to display. 2 1 3 From the Library of Wow! eBook . site. Dreamweaver also includes built-in spry effects that allow you to apply visual effects, such as highlighting information or creating transitions, to elements on a page. You can apply one. definition list, or drop-down list. ◆ Spry Validation. Create form validation for a text field or area, check box, password, confirm, or radio group. ◆ Spry Menu Bar. Creates a set of navigational. buttons. 4 3 2 1 Dreamweaver provides a wide variety of spry widgets you can insert in your Web pages. Some of the widgets include page region definition, tables, menu bars, form validation,