Widgets in Web Design: Where Spry Can Take You

1
Widgets in Web Design Where Spry Can Take You

• Joyce PorterWeber State University Ogden, UT

2
Textbook Used for Web Design Course
Web Design doesnt quit when the book is closed!
Beyond the BookThe Challenges
3
SPRY

• Old School

• 2011

4
Spry is . . . . . .

• A JavaScript library combining the technologies
  of
• ? JavaScript ? XML ? DHTML
• Allowing Web Designers to build pages offering
  interesting, interactive options
• giving page content extra emphasis through effects

5
Whats Are Spry Widgets???

• drop-down menus
• accordion menus
• expanding, collapsible panels
• tooltips
• tabbed panels
• enhance navigation
• organize content
• add dynamic style

Page elements creating a specific kind of
interactive content or carrying out a defined
function.
6
Spry Accordions

• Pack large amounts of information into
  multi-paneled display
• Click on Spry Accordion button
• In Property inspector
• Name the accordion
• Name the labels
• Add additional tabs and panels
• Move panels up or down the list
• Name the tabs
• Use css to change tab color or make font
  alterations
• Add content to each panel
• Use css to make alterations to content areas (div
  tags)
• Make panels visible (eye icon) to edit
  information

7
Spry Tabbed Panels

• Organizes information into smaller tabbed panels
• Click the Spry Tabbed Panels Icon
• In the Property inspector
• Name the panel group
• Add as many panels as needed to convey
  information
• Name the tabs
• Use css to change tab color
• Add content to each panel
• Use css to make alterations to content areas (div
  tags)
• Make panels visible (eye icon) to edit
  information

8
Spry Tooltips

• Select a trigger (word/words or image that
  prompts the display of information)
• Click the Spry tooltip icon
• Dreamweaver add tooltips after the pages
  content.
• Name the tooltip in the Property inspector
• Determine the display option
• Follow mouse
• Hide on mouse out
• Horizontal and Vertical Offsetposition tooltip
  will display in relation to object
• .toolTipContent css that defines the look of
  the tooltip

9
Spry Expanding, Collapsible Panels

• Self-contained widget additional content or
  tabs cannot be added.
• Click the Spry Collapsible button
• In the Property inspector
• Name the panel
• Choose Open or Closed Display
• Enable or Disable Animation ---allows the panel
  content to move into or out of view
• Select the Tab placeholder and key in name for
  Tab
• Select the Content placeholder and insert text or
  object

10
Spryinter-activeelements forweb design