Hands On: Dreamweaver CS3 NEW SPRY Widgets

Transcription

1 What is a Spry Widget? Spry widgets provide access to dynamic and interactive elements you might like to have on your Web page. These Spry elements include: Menu Bars Tabbed Panels Accordion Effects Collapsible Panels One of the nice features of these interactive elements is its ability to be edited directly from the Property Inspector. Now, Spry Widgets are just that, elements created through JavaScript and Dynamic HTML, but they are totally editable through CSS Styles, which of course, are already created for you in Dreamweaver. You can accept the defaults or edit to your heart s content. For example, a Spry Menu Bar can have text and links assigned by you in the Property Inspector, but you ll have to resort to the CSS Style sheets to edit the background and text colors. A Few Items that You Need to Know All documents to receive any kind of Spry Widget must be already saved first. Spry Widgets generate lots of CSS and JavaScript files, and these particular files are saved each and every time you save a page containing a Spry Widget. All the Fonts, Colors, Background Colors, etc. are controlled by the CSS Style Sheets generated with the Spry Widget. You might be expected to use the Behaviors Panel from time to time to create additional behaviors associated with the Spry Widget in use. Most CSS Styles that are generated to format a Menu Bar widget defines the positioning and size of the menus and submenus, however, the default positioning is usually OK and will not need to be adjusted. But on the other hand, you can create a very unique Menu Bar by editing the CSS Styles that were generated for you. Collapsible Panels are a handy way of supplying information on demand without cluttering up a Web page. FYI, it has been recommended by the texts that I have consulted that you download and link the latest required Spry Framework files from the Adobe Labs Web site. (I have tried several times to do this without success, good luck!). The URL for the Zip file to download: it is supposed to contain additional samples as well. Don t forget these files too: SpryData.js, SpryEffect.js, and xpath.js. All Spry Widget files need to be uploaded to your server for the effects to work. That s a no brainer, right? Deleting Widgets can be done in two ways. Select in the Design View and then delete it (click on the border of the widget), or a more reliable method, click inside of the widget and then the widget DIV tag displays in the Tag area of the Status Bar. Click this Status Bar tag and then choose delete, works every time! Professor Al Fichera Page 1 of 5

2 Exercise 1: Spry Widget Menu Bar Menu Bars can be either in a Horizontal or Vertical mode, it really depends upon how you wish to use it on your Web page. Menu Bars can be inserted into a Frame of a Frameset, a Table, and an AP DIV or CSS DIV. Menu Bars can have Sub Menus when a mouse hovers over them, and you can have two levels too! These are very similar to the Menu Bars that can be created in Fireworks. Don t forget, before you add a Spry Widget Menu Bar, the page must be already saved. To add this widget, choose either the Insert Bar > Spry or go to Insert > Spry > Spry Menu Bar > Horizontal or Vertical. Some of the basic properties of this widget can be found right inside of the Property Inspector, such as the Menu and Sub Menus, Textbox entry areas and the Link box entry areas. You might also need to choose the Target Link box if your hyperlink needs to open in another Window A Turn Styles Off button is also in the Property Inspector, it turns off how the styles are affecting the look of the menu bar in the Dreamweaver Design View document window only, (see image to the right, it is not the actual Web page that turns off). You can always style the Menu Bar with the CSS Styles sheet. And, let it be known, a Menu Bar generates at least a dozen CSS Styles! Note the most likely Style Rules that you might consider editing below. Visit Web Page Version For changing the Background colors of the Tabbed Panels: Background Color or Text Color: ul.menubarhorizontal a (or Vertical) For the Background Color or Text Color in a Hover state: ul.menubarhorizontal a.menubaritemhover (or Vertical) ul.menubarhorizontal a.menubaritemsubmenuhover (or Vertical) ul.menubarhorizontal a.menubarsubmenuvisible (or Vertical) Professor Al Fichera Page 2 of 5

3 Exercise 2: Spry Widget Tabbed Panels A single Web page that has Tabbed Panels installed can take on the look of a series of different pages, yet it is only one page, another great way to offer navigation for a small site. To enter content in a tabbed panel, click on a tab, it will be displayed with a blue outline. Click in the content area below the tab, and then enter your content. This content can be anything that is allowed on a Web page. You can add or delete Tabs for a selected Tabbed Panel right inside of the Property Inspector. To select an entire tabbed Panel as opposed to a single tab, click the border of the entire Tabbed Panel. If you select it in this way the Property Inspector allows you to add panels by clicking on the + icon in the Panels section of the inspector. The Panel names such as Tab1, Tab2, etc, can be changed into whatever you want them to say, such as Home Contact Info etc. To change the name of a Tab, double click the current label and then type a new label. Tabbed Panels in Dreamweaver Design View have an eye icon that make them visible or hidden, great for displaying information when needed and ten hiding until the next time it is needed. Visit a Web Page Version For changing the Background colors of the Tabbed Panels: Background Color for the Hovered Over Tab state choose:.tabbedpanelstabhover For the Background Color of a Selected Tab choose:.tabbedpanelstabselected For the Background Color of a Tab Content Area choose:.tabbedpanelscontentgroup Professor Al Fichera Page 3 of 5

4 Exercise 3: Spry Widget Accordion This Spry Widget creates Horizontal regions on a Web page that can be expanded or collapsed on call. However, only one can be expanded at a time. Another fine way to reduce Web page clutter I think. Don t forget, before you add a Spry Widget Accordion, the page must be already saved. To add this widget, choose either the Insert Bar > Spry or go to Insert > Spry > Accordion. Some of the basic properties of this widget can be found right inside of the Property Inspector, such as the Label and Content areas of the Accordion. By default a two part accordion is created with Label1 and Content1 on top, and Label2 and Content2 on the bottom. To edit these areas in the document window, drag over the default text and enter a new label and content. The content area can have anything that would be placed on a regular Web page. You can add or delete and of the accordion parts from inside of the Property Inspector. Just use the Add panel or Remove panel icon, you may also move items up or down the accordion. Note the most likely Style Rules that you might consider editing below. Visit a Web Page Version. For changing the Background colors of the Accordion: Background Color for the Tab:.accordionPanelTab For the selected Tab:.AccordionPanelOpen.AccordionPanelTab For text color on the Hover state:.accordionpanel TabHover For an Open Panel:.AccordionPanelOpen.AccordionPanel TabHover Professor Al Fichera Page 4 of 5

5 Exercise 4: Spry Widget Collapsible Panel This Spry Widget Collapsible Panel is handy for presenting optimal information when needed by the user. These panels have a clickable tab and a content area that displays or hides upon a click of the user s mouse button. Don t forget, before you add a Spry Widget Collapsible Panel, the page must be already saved. To add this widget, choose either the Insert Bar > Spry or go to Insert > Spry > Collapsible Panel. Some of the basic properties of this widget can be found right inside of the Property Inspector, such as the Label and Content areas of the Collapsible Panel. To change the default text of these panels, just drag over the unwanted text and insert your own. When a user clicks on the label for the panel a content area will appear, so in effect this is a toggle switch that alternately either hides or displays the content. This content area can hold anything that you can put on a Web page. The Property Inspect has two menus to choose from with this widget, Display and Default states. If you choose Open from the Display menu then the Collapsible Panel is always open, choose Closed from the Default state to let the user open the panel on command, (which makes the most sense to me.) Note the most likely Style Rules that you might consider editing below. Visit a Web Page Version For changing the CSS edit the SpryCollapsiblePanel.css file. Background Color for the Tab:.CollapsiblePanelTab { font: bold 0.7em sans serif; background color: #DDD; border bottom: solid 1px #CCC; margin: 0px; padding: 2px; cursor: pointer; moz user select: none; khtml user select: none; } Professor Al Fichera Page 5 of 5