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 ptg Chapter 16 Using Spry Widgets and Effects 381 Specify the options you want in the Properties panel for the selected widget; the options vary depending on the widget. Some of the options include: ◆ Panel Order. Click the Up or Down Arrow buttons. ◆ Default Panel. Click the Default Panel list arrow, and then select the panel you want. ◆ Delete Panel. Select the panel, and then click the Minus button. ◆ Animate Panel. Select the panel, and then select or clear the Enable Animation check box. 6 5 4 6 From the Library of Wow! eBook ptg 382 Chapter 16 Working with Spry Validation Widgets Insert and Work with Spry Validation 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 validation element you want: ◆ Spry Validation Text Field. Creates a text box that displays valid or invalid states when a visitor enters text or doesn’t enter text as a required field. ◆ Spry Validation Textarea. Creates a text area that displays valid or invalid states when a visitor enters text or doesn’t enter text as a required field. ◆ Spry Validation Checkbox. Creates a check box that displays valid or invalid states when a visitor selects or doesn’t select a check box. ◆ Spry Validation Select. Creates a drop-down menu with a list of options divided into sections that displays valid or invalid states when a visitor selects an element in the list. ◆ Spry Validation Password. Creates a password text field that enforces password rules. 2 1 A spry validation widget allows you to determine whether information or data in a form is valid or invalid. Dreamweaver provides several types of spry validation elements: text field, text area, select (from a drop-down menu), and check box. When you insert a spry validation element, the Input Tag Accessibility Attributes dialog box opens, requesting information and options to make the form object accessible to the visually impaired. After you insert a spry validation element, you can use the Properties panel to specify the validation options you want; each element provides different validation options. 1 2 From the Library of Wow! eBook ptg Chapter 16 Using Spry Widgets and Effects 383 ◆ Spry Validation Confirm. Creates a text or password field that displays valid or invalid states. ◆ Spry Validation Radio Group. Creates a group of radio buttons with validation support. Specify the Input Tag Accessibility Attributes dialog box options you want. Click OK. Select the panel widget. 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. Some of the general options include: ◆ Initial State. Indicates the state when the page loads in the browser or when the form is reset. ◆ Focus State. Indicates the state with the insertion point. ◆ Valid State. Indicates the state when the visitor entered information correctly. ◆ Required State. Indicates the state when the visitor fails to enter information. ◆ Minimum or Maximum Number of Characters State. Indicates the state when the visitor has not entered enough characters or entered too many characters. ◆ Minimum or Maximum Value State. Indicates the state when the visitor has entered a value that is less or greater than the allowed value. 7 6 5 4 3 4 3 6 5 7 From the Library of Wow! eBook ptg 384 Chapter 16 Working with Spry Menu Bar Widgets Insert and Work with Spry Menu Bar 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 click Spry Menu Bar. IMPORTANT If your page contains Flash content, the DHTML layers used to create the menu bar may cause problems. Click the Horizontal or Vertical option. Click OK. Select the panel widget. 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: ◆ Add Main Menu. Click the Plus (+) button above the first column, and then rename the menu in the Text box. ◆ Add Submenu. Select a main menu item, click the Plus (+) button above the second column, and then rename the menu in the Text box. 7 6 5 4 3 2 1 A spry menu bar widget allows you to create a set of navigational menus that come with submenus. A menu bar makes it easy for visitors to navigate to different parts of your site in the same way they choose commands in a program, such as Dreamweaver. You can insert two types of menu bars: horizontal or vertical. You can link a menu item to a specific place or execute a script. In addition, you can add tool tips to provide a short description of menu items for visitors. 1 2 4 3 From the Library of Wow! eBook ptg Chapter 16 Using Spry Widgets and Effects 385 ◆ Delete Menu. Select the main menu or submenu item you want to delete, and then click the Minus (-) button. ◆ Change Menu Order. Select the menu item you want to reorder, and then click the Up or Down buttons. ◆ Link Menu. Select the menu item you want to apply a link, and then type the link in the Link box or click the Browse button to select a file. ◆ Add Tool Tip. Select the menu item you want to create a tool tip, and then type the text for the tool tip in the Title text box. ◆ Target. Enter one of the following options: ◆ _blank. Opens the linked page in a new window. ◆ _parent. Loads the linked document in the immediate frameset of the active document. ◆ _self. Loads the linked document in the same browser window (default). ◆ _top. Loads the linked document in the topmost window of a frameset. ◆ Styles. Click the Turn Styles Off button to disable the styling of a menu bar, which is helpful to see the HTML structure of the widget. Click the Turn Styles On button to enable it again. 6 5 7 From the Library of Wow! eBook . you insert a spry validation element, you can use the Properties panel to specify the validation options you want; each element provides different validation options. 1 2 From the Library. Spry Validation Confirm. Creates a text or password field that displays valid or invalid states. ◆ Spry Validation Radio Group. Creates a group of radio buttons with validation support. Specify. Validation Select. Creates a drop-down menu with a list of options divided into sections that displays valid or invalid states when a visitor selects an element in the list. ◆ Spry Validation