Class 13

class 13 – spry widgets, web site critiques

Spry framework for Ajax

The Spry framework is a JavaScript library that provides web designers with the ability to build web pages that offer richer experiences to their site visitors. With Spry, you can use HTML, CSS, and a minimal amount of JavaScript to incorporate XML data into your HTML documents, create widgets such as accordions and menu bars, and add different kinds of effects to various page elements. The Spry framework is designed so that markup is simple and easy to use for those who have basic knowledge of HTML, CSS, and JavaScript.

Additional Resource: Chapter 10 from our textbook “Adding Effects and Interactivity with Spry” (pages 237-248)
Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos)

Widgets and Menus

Spry widgets include menu bars, tabbed panels, accordion effects, and collapsible panels.

The Spry widgets can be edited in the Property inspector. For example, if you create a Menu Bar, you can assign text and links to menu options in the Property inspector. But, in general, you cannot do much, if any, formatting for Spry widgets in the Property inspector. Instead, you format Spry widgets by editing style sheets that get generated by Dreamweaver whenever you create a Spry widget

There are a few things to be aware of when you create Spry widgets:

• Documents must be saved before you insert Spry widgets.

• Spry widgets generate lots of CSS styles and JavaScript files, and these files are saved every time you save a page with a Spry widget.

• You control basic features of the Spry widget, like text and links, in the Property inspector. But you format Spry widgets (elements like font, text color, background color, and so on) in the CSS Styles panel by editing the CSS style for the Spry widget.

Inserting a Tabbed Panel

Select Insert > Spry > Spry Tabbed Panels.

Note: You can also insert a Tabbed Panels widget by using the Spry category in the Insert bar.

Add a panel to a Tabbed Panels widget

1. Select a Tabbed Panels widget in the Document window.
2. Click the Panels plus button in the Property inspector (Window > Properties).
3. (Optional) Change the tab name by selecting the tab’s text in Design view and altering it.

Delete a panel from a Tabbed Panels widget

1. Select a Tabbed Panels widget in the Document window.
2. In the Panels menu of the Property inspector (Window > Properties), select the name of the panel you want to delete and click the minus button

Open a panel for editing

Do one of the following:

1. Move the mouse pointer over the tab of the panel you want to open in Design view and click the eye icon that appears at the right of the tab.
2. Select a Tabbed Panels widget in the Document window and click the name of the panel you want to edit in the Panels menu of the Property inspector (Window > Properties).

Change the order of panels

1. Select a Tabbed Panels widget in the Document window.
2. In the Panels menu of the Property inspector (Window > Properties), select the name of the panel you want to move.
3. Click the up or down arrows to move the panel up or down.

Set the default open panel

You can set which panel of the Tabbed Panels widget opens by default when the page opens in a browser.

1. Select a Tabbed Panels widget in the Document window.
2. In the Property inspector (Window > Properties), select the panel you want open by default from the Default panel pop-up menu.

Customize the Tabbed Panels widget

Although the Property inspector enables you to make simple edits to a Tabbed Panels widget, it does not support customized styling tasks. You can alter the CSS rules for the Tabbed Panels widget and create a widget that is styled to your liking. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprytabbedpanels_custom.

All CSS rules in the topics below refer to the default rules located in the SpryTabbedPanels.css file. Dreamweaver saves the SpryTabbedPanels.css file in the SpryAssets folder of your site whenever you create a Spry Tabbed Panels widget. This file also contains useful commented information about various styles that apply to the widget.

Note: Although you can easily edit rules for the Tabbed Panels widget directly in the accompanying CSS file, you can also use the CSS Styles panel to edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially if you use the panel’s Current mode.

Constrain the width of tabbed panels

By default, the Tabbed Panels widget expands to fill available space. To constrain the width of a Tabbed Panels widget, set a width property for the tabbed panel container.

Locate the TabbedPanels CSS rule in the SpryTabbedPanels.css file. This rule defines properties for the main container element of the Tabbed Panels widget.

Add a width property and value to the rule, for example width: 300px;.

Use the CSS Styles Panel to Format Tabbed Panels. You can change the background color of tabbed panel elements in the CSS Styles panel:

• To change the background color for a hovered-over tab, choose the .Tabbed PanelsTabHover style in the CSS Styles panel, and choose a background color from the background-color property.

• To change the background color for a selected tab, choose the .TabbedPanels TabSelected style in the CSS Styles panel, and choose a background color from the background-color property.

• To change the background color for a tabbed content area, select that tab in the Document window, choose the .Tabbed PanelsContentGroup style in the CSS Styles panel, and choose a background color from the background-color property. Format the content of tabbed panels the same way as formatting text or images.

For more information:
http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WS33DFC4C4-FED7-4899-8034-C8F567178AC4.html

I encourage you to go through the spry tutorials on this Adobe page. The tutorials will give you a better understanding about how the various sprys work.
http://www.adobe.com/devnet/dreamweaver/articles/spry_simulations.html

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Spry Effects

Effects animate your page and make page elements react to visitor actions by changing location or size or appearance. Editing effects requires some ability to work in the Behaviors panel.

Demonstration of Spry effects
http://labs.adobe.com/technologies/spry/demos/effects/index.html

Applying a Slide Up/Slide Down effect

Note: You can only use this effect with these HTML objects: blockquote, dd, div, form, or center. The slide effect requires a single <div> tag around the content that slides.

1. (Optional) Select the content or layout object you want to apply the effect to.
2. In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Effects > Slide from the menu.
3. Select the object’s ID from the target element menu. If you have already selected an object, choose <Current Selection>.
4. In the Effect Duration field, define the time it takes for the effect to occur, in milliseconds.
5. Select the effect you want to apply: Slide Up or Slide Down.
6. In the Slide Up From/Slide Down From box, define the sliding starting point as a percentage or as a pixel number.
7. In the Slide Up To/Slide Down To box, define the sliding end point as a percentage or as a positive pixel amount.
8. Select Toggle Effect if you want the effect to be reversible, sliding up and down with successive clicks.

Additional Spry Resources:

Additional Spry Demos:
http://labs.adobe.com/technologies/spry/demos/index.html

Spry Widget videos:
Creating menus with Spry Widgets

Working with the Spry Accordian widget

Using the Spry framwork for Ajax

Adobe site: All things Spry:
http://www.adobe.com/devnet/spry/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Web Critiques

This is not a graded assignment but I would like you to evaluate the websites below using the criteria listed below. If you have already studied the sites below, pick 3-4 sites on your own and evaluate them based on the list below. One of the most important skills you can develop is your familiarity and understanding of what other web designers are doing online. Overall, I recommend you look at as many sites as you can, as often as possible!

Seven Criteria for discussion. These are the seven general criteria we will talk about in this class. It’s not enough to determine a web site “good” or “bad.” What is it about the site that makes it more effective or less effective? Below are seven different criteria to look at when you are evaluating the design of a web site.

• Look & feel / Attitude of site
  Does the design or “look and feel” of the site represent the attitude of the company/client?
• Use of color
  Does the use of color effectively communicate the attitude and “look and feel?” Using red and black for the color palette for a web site communicates something different than using a light blue and white color palette.
• Composition / layout
  Does the layout of the site effectively accommodate the content? Is there room for text and images? Is the navigation in an easily accessible location?
• Typography
  Is the type on the site readable? Is there a good mix of font size and font weight to communicate hierarchy for the content?
• Content
  Is the content well-written? Is there HTML content on the site. (You want to avoid creating web pages where text is inserted as image files.)
• User experience
  Is the site easy to navigate? Is it east to find content on the site?
• Navigation
  Is the navigation well-organized. Is the navigation consistent from page to page?

Web sites to critique:

http://www.interbrand.com/
http://www.kleinfelder.com/
http://www.o2communications.com/index.html
http://www.design-works.com/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Assignment

Spry Widget & Spry Effect: create a spry tabbed panel (or another spry widget of your choice) and and a spry effect of your choice.

This assignment won’t be graded but I would like you to upload it to the Dropbox. Complete the assignment and upload to the “Dropbox” on smconline.org site by noon on Wednesday, May 27. Again, please be sure to include your last name in the name of the file when you upload it to the Dropbox.

Advertisement