Creating drop-down menus
Creating collapsible and tabbed panels
Working with Spry validation widgets
If you still think AJAX (Asynchronous JavaScript and XML) is just something you can use to clean the house, you're missing out on one of the greatest innovations in Web design. On the Internet, AJAX combines JavaScript and XML to create highly interactive features, such as drop-down menus and panels that can be opened and closed without reloading a Web page.
To make it easier to create these advanced features, Dreamweaver CS4 includes a collection of widgets known as the Spry Framework. Even if you don't know how to write JavaScript, XML, or CSS, you can use to Spry add AJAX features to your Web pages, such as drop-down menus (like the one shown in Figure 13-1), collapsible and tabbed panels, and form validation features, which I cover in this chapter.
Web designers are all a buzz about AJAX because it makes it possible to create pages that are more interactive and faster to load than was possible with previous Web technologies. One of the biggest changes is the ability to add features that a Web page visitor can change without having to reload the entire page.
For example, at the highly popular iGoogle page of the Google search engine (available at www.igoogle.com), AJAX makes it possible to open and close it and to add and remove content boxes. Thanks to AJAX, Google users can
Create highly customized pages that feature things like weather from their local area.
Do things like delete the box that features CNN news headlines and replace it with headlines from another news source.
Click and drag content boxes to change their location on the page.
Although iGoogle is a very advanced example of AJAX, it's a great example of what's possible.
Dreamweaver's Spry features are designed to make it easy to create some of these basic features, such as panels that open and close the way the weather content box on iGoogle opens or closes.
To save you from having to write the code for these kinds of features yourself, Dreamweaver includes a collection of widgets that instantly adds things like collapsible panels to your pages and combines them with editing tools that make it easy to customize them. To view the list of AJAX widgets available in Dreamweaver, open the Spry Insert panel by choosing Spry from the Insert panel drop-down menu shown in Figure 13-2.
An increasingly popular option for navigation bars, drop-down menus make it possible to provide a menu (or list) of links to the main sections of a Web site, with a secondary menu of links to the sub-categories within those sections. You can even create a third layer with the Spry Menu Bar widget.
Tip
With the Dreamweaver Spry Menu Bar, you can create menus that span horizontally or vertically. The process works the same for both. As you see in the following steps, you simply choose which way you want the menu to span when you insert it from the Spry menu.
To create a drop-down menu with the Spry Menu Bar widget, follow these steps:
Place your cursor on a page where you want the menu to appear.
If you haven't already saved your page, make sure you save it before adding Spry features because Dreamweaver will prompt you with a warning message that you need to do so.
Choose Insert
Spry
Spry Menu Bar.Alternatively, you can click the Spry Menu Bar icon in the Spry Insert panel, (visible in Figure 13-3).
The Spry Menu Bar dialog box appears, as shown in Figure 13-3.
In the Spry Menu Bar dialog box, choose Horizontal or Vertical.
Horizontal creates a menu that drops down into a page; Vertical creates a menu that opens out to the right.
Click OK.
A menu with four items and several sub-items is created and inserted into the page.
Enter your own text for the menu items.
You can edit the text for the top-level items in the main workspace by simply clicking and dragging to select the generic text, such as Item1, and then typing to replace it.
Warning
In general, it's best to make changes to menu bar items in the Property inspector, as described in the remaining steps of this exercise. To change formatting options, such as color, font face, and size, make changes to the style sheet rules, described in Step 14.
Click the blue Menu Bar tab at the top left of the menu bar to display the settings in the Property inspector, as shown in Figure 13-3.
You find settings to add, remove, edit, and change the order of items and sub-items in the Property inspector.
To change the name of an item or subitem, click to select the item in the Property inspector and then type a new name in the Text field on the far-right side of the Property inspector, as shown in Figures 13-3 and 13-4.
To link a menu item, select the item name and enter a URL in the Link field or click the Browse button (which looks like a file folder), and select the page you want to link to (see Figure 13-4).
To remove an item, select it and then click the minus (–) sign at the top of the field in the Property inspector.
A deleted item is removed from the menu in the Property inspector as well as the main work area.
To add an item, select the plus (+) sign at the top of the item field in the Property inspector.
When you add an item, it appears in the Property inspector menu as well as in the menu bar in the main work area. (See Step 11 for how to change an item name.)
To add a sub-item, select the item you want the sub-item to appear under and then click the plus (+) sign in the item box to the right of the selected item (refer to Figure 13-3).
To change the order of items, click to select an item name and then use the arrows at the top of each item box.
Items move up and down the menu when you click the up or down arrows. Items appear in the Web page in the order they appear in the Property inspector.
Choose File
Save to save the page, and when the Copy Dependent Files dialog box appears, click OK to automatically generate all the related files.Note
You must upload these files to your Web server when you upload the Web page for the Spry features to work.
To change the appearance of a drop-down menu, edit the corresponding CSS style rules.
CSS (Cascading Style Sheets) style rules determine the text size, font, background color, and other formatting features. When you create a menu bar, a collection of CSS styles are generated automatically and saved in an external CSS file dubbed
SpryMenuBarHorizontal.CSS(for horizontal menus) orSpryMenuBarVertical.CSS(for vertical menus). You can access these styles through the CSS Styles panel, shown in Figure 13-5.Here are a few examples of how Spry menu bar styles can be edited:
To change the font size or face, double-click the style name
ul.MenuBarHorizontaland alter the corresponding Type category settings. In the example, shown here, I've changed the font size to 80 percent, which will make the text in the menu display at 80 percent of the size of the default text setting for the page.You can remove or edit the border of a menu bar by editing the border settings in the style
ul.MenuBarHorizontal ul. (In the example shown here, I removed the border by simply deleting all of the settings for the border.)You can change the text and background colors for the active links (effectively changing the colors of the menu bar when the page first loads) by changing the colors for the rule
ul.MenuBarHorizontal a.
Tip
To find other settings you may want to change, click to select each of the style names in the Spry Menu Bar style sheet and use the CSS Properties pane, in the lower half of the CSS Styles panel, to view the rules that have been defined for each style. By simply clicking through the collection of styles, you can identify each of the settings in a drop-down menu (or any other spry feature) and determine where you'll need to edit them to change the appearance of each element. You find more detailed instructions for creating and editing style rules in Chapters 5 and 6.
Here you can see how the styles appear in the menu and test the drop-down effects and links.
The example in Figure 13-6 is in the Firefox browser.
The Spry Collapsible Panel option makes it easy to add panels that can be opened or closed on a Web page. This AJAX feature enables you to make better use of the space on a page by making it easy to display more information in less space within a browser window.
In Figures 13-6, you can see how I used collapsible panels to contain the biography of each partner and consultant in a consulting firm. The result is that you can easily see the names of all the consultants on one page. To view a consultant's bio, a user need only click the tab at the top of the panel (where the consultant's name appears) and the panel opens instantly. In Figure 13-6 you can see that the bio for Designer Davi Cheng is open while the others on the page are all closed. The beauty of AJAX is that the page doesn't have to be reloaded for the panels to open or close. Click once on a tab and a panel opens instantly. If a user clicks the tab again, the panel closes. Collapsible panels can be used to display text and images. You can also include multimedia files in panels, such as audio, video, and Flash files.
Note
When you create collapsible panels with the Spry menu in Dreamweaver, you can set the panels so that they're closed or opened when a page is first loaded. Because each panel is created separately, you can create a page that displays all panels open, all panels closed, or a mix of the two options.
Follow these steps to create a collapsible panel:
Place your cursor on a page where you want the collapsible panel to appear.
Choose Insert
SprySpry Collapsible Panel.Alternatively, you can click the Spry Collapsible Panel icon in the Spry Insert panel, as shown in Figure 13-7.
A Spry collapsible panel appears in the page, as shown in Figure 13-7.
Click and drag to select the word Tab and replace it with the text you want to appear in the panel's Tab area.
By default, the text in the Tab area is bold, but you can change that by altering the corresponding CSS rule.
Click to select the word Content in the main area of the panel and enter any text or images you want to display.
You can copy text into a panel by pasting it just as you'd paste text anywhere else on the page. Similarly, you insert images into panels just as you would anywhere else on a page by choosing Insert
Figure 13-7. The Spry Collapsible Panel option adds one panel to a Web page, but you can use it multiple times to create a series of panels.
Tip
When you paste text into a panel, choose Edit
Click the blue Spry Collapsible Panel tab at the top of the panel to display panel settings in the Property inspector, as shown in Figure 13-7.
When you correctly click the blue tab, the settings immediately appear in the Property inspector, as shown in Figure 13-7. Click anywhere else on the page, and the inspector returns to its default settings.
From the Display drop-down menu in the Property inspector, choose Closed.
The Closed option immediately closes the panel in the main workspace in Dreamweaver. This setting only affects the way the panel displays in the Dreamweaver workspace.
From the Default State drop-down menu in the Property inspector, choose Closed.
This setting controls how the panel displays in a Web browser. Choosing Closed means the panel is closed when the page loads. If you choose Open, the panel appears open when the page is loaded.
Make sure the Enable Animation check box is selected if you want the panel to open and close when a user clicks the tab.
To change the appearance of the panel, such as the font face or color, edit the corresponding CSS rule.
For example, to edit the background color of the tab, or the font face, style, or color, select the
.CollapsiblePanelTabstyle and alter the settings in the Properties panel in the lower half of the CSS Styles panel, as shown in Figure 13-8. Alternatively, you can double-click any style name to launch the CSS Rule Definition dialog box to make your changes there. You find more detailed instructions for creating and editing styles in Chapters 5 and 6.Choose File
Save to save the page, and when the Copy Dependent Files dialog box appears, click OK to automatically generate all the related files.Note
You must upload these files to your Web server when you upload the Web page for the Spry features to work.
The Spry Tabbed Panel option makes it easy to add a series of panels that display or hide content corresponding to a series of tabs, as shown in Figure 13-9. Similar to the collapsible panels, this AJAX feature lets you display more information in less space within a browser window.
Similar to the collapsible panels, tabbed panels can be used to display text, images, and multimedia.
Note
When you create tabbed panels with the Spry menu in Dreamweaver, you can control the order of the tabs, effectively controlling what content appears when the page is first loaded.
Follow these steps to create a tabbed panel:
Place your cursor on a page where you want the tabbed panel to appear.
Choose Insert
SprySpry Tabbed Panels.Alternatively, you can click the Spry Tabbed Panels icon in the Spry Insert panel, as shown in Figure 13-10.
A Spry tabbed panel appears on the page, as shown in Figure 13-10.
Click and drag to select the word Tab in the main workspace and replace it with the text you want to appear in the panel's Tab area.
You can edit the contents of the tabs only in the workspace, not in the Property inspector.
By default, the text in the Tab area is bold and black, but you can change that by altering the corresponding CSS rule.
Click the blue Spry Tabbed Panels tab at the top of the panel set to display the settings in the Property inspector, as shown in Figure 13-10.
When you correctly click the blue tab, the settings immediately appear in the Property inspector, as shown in Figure 13-9. Click anywhere else on the page, and the Property inspector returns to its default settings.
To add tabs, click the plus (+) icon in the Property inspector, as shown in Figure 13-10.
New tabs appear in the workspace.
To change the order of tabs, click to select the tab name in the Property inspector and then use the arrows in the Panels field to move the panel.
Panel names move up and down the menu as the order is changed. Panels and their corresponding tabs appear in the Web page in the order they appear in the Property inspector.
Use the Default Panel drop-down menu to choose the panel you want to display when the page is first loaded into a Web browser.
The drop-down menu corresponds to the names you give each tab in the workspace.
To add content, select the word Content in the main area of any selected tab panel and enter text, images, or multimedia.
You can copy text into a panel by pasting it just as you'd paste text anywhere else on the page. Similarly, insert images into panels just as you would anywhere else on a page by choosing Insert
To change the appearance of a tab or a panel, such as the font face or color, edit the corresponding CSS rule, shown in Figure 13-11.
For example, to edit the background color of the tabs, click to select the
.TabbedPanelsTabstyle and alter the settings in the Properties panel in the lower half of the CSS Styles panel. Alternatively, you can double-click any style name to launch the CSS Rule Definition dialog box to make your changes there. You find more detailed instructions for creating and editing styles in Chapters 5 and 6.Note
In tabbed panels styles, the tab background colors are controlled by two different styles — the
.TabbedPanelsTaband the.TabbedPanelsTabSelectedstyles. As a result, you can specify a different background color and other formatting settings to distinguish the tab that's selected from the tabs that aren't selected.Choose File
Save to save the page, and when the Copy Dependent Files dialog box appears, click OK to automatically generate all the related files.Note
You must upload these files to your Web server when you upload the Web page for the Spry features to work.
The Spry menu also includes a collection of validation widgets for validating data that visitors enter into forms on your site. For example, you can use the Text Field Validation widget to verify whether a visitor has filled in a specified minimum number of characters — a handy way to ensure that someone has filled in all the digits in a phone number or social security number. You can also add hints to a text field to provide additional instructions.
Similarly, you can use the Validation Checkbox widget to verify that a check box has been selected. This is common, for example, when you have a legal disclaimer or contract and want to ensure that a visitor selects the Accept box before progressing into another area of your site.
To use these widgets, first create an HTML form (find instructions for creating form elements in Chapter 12). Then you can add Spry validation, such as the Validation Checkbox, which I cover in this exercise.
To use the Spry Validation Checkbox Wizard to require that users select one or more check boxes on a Web page, follow these steps:
Select the check box where you want to add Spry validation.
Choose Insert
SprySpry Validation Checkbox.Alternatively, you can click the Spry Validation Checkbox icon in the Spry Insert panel.
Specify validation requirements in the Property inspector.
When you add a validation widget to a form element, such as the check box shown in this example, the Property inspector automatically displays the properties for that validation option. If those properties aren't visible, click the blue Spry tab just above the form element to display them.
To require that users select a check box, choose Required from the Preview States drop-down menu in the Property inspector, as shown in Figure 13-12.
Dreamweaver automatically adds Please Make a Selection, just to the right of the check box in the workspace. You can edit this text by selecting it in the workspace and typing any message you want, such as, You must accept our policy to continue.
The validation message displays only if a visitor fails to select the check box before clicking the Submit button (which is labeled Send in Figure 13-12).
Choose File
Save to save the page, and when the Copy Dependent Files dialog box appears, click OK to automatically generate all the related files.Note
For the Spry features work, you must upload these files to your Web server when you upload the Web page.
