widgets in web design: where spry can take you joyce porter weber state university ogden, ut
TRANSCRIPT
Widgets in Web Design: Where Spry Can Take YouJoyce PorterWeber State University Ogden, UT
Textbook Used for Web Design Course
Beyond the Book—The Challenges
Web Design doesn’t quit when the book is
closed!
SPRYOld School 2011
Spry is . . . . . .A JavaScript library combining the technologies of
JavaScript XML DHTML Allowing Web Designers to build pages offering
interesting, interactive optionsgiving page content extra emphasis through effects
What’s Are Spry Widgets???
Page elements creating a specific kind of interactive content or carrying out a defined function.
Spry Accordions Pack large amounts of information into multi-paneled display Click on Spry Accordion button In Property inspector
o Name the accordiono Name the labelso Add additional tabs and panelso Move panels up or down the list
Name the tabso Use css to change tab color or make font alterations
Add content to each panelo Use css to make alterations to content areas (div tags)
Make panels visible (eye icon) to edit information
Spry Tabbed PanelsOrganizes information into smaller tabbed panelsClick the Spry Tabbed Panels IconIn the Property inspector
o Name the panel groupo Add as many panels as needed to convey information
Name the tabso Use css to change tab color
Add content to each panelo Use css to make alterations to content areas (div tags)
Make panels visible (eye icon) to edit information
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 page’s content. Name the tooltip in the Property inspector Determine the display option
o Follow mouseo Hide on mouse outo Horizontal and Vertical Offset—position tooltip will display in
relation to object .toolTipContent css that defines the look of the tooltip
Spry Expanding, Collapsible PanelsSelf-contained widget
—additional content or tabs cannot be added.Click the Spry Collapsible buttonIn the Property inspector
o Name the panelo Choose Open or Closed Displayo Enable or Disable Animation
---allows the panel content to move into or out of viewSelect the Tab placeholder and key in name for TabSelect the Content placeholder and insert text or object