1 / 10

Widgets in Web Design: Where Spry Can Take You

Widgets in Web Design: Where Spry Can Take You. Joyce Porter Weber State University Ogden, UT. Textbook Used for Web Design Course. Web Design doesn’t quit when the book is closed!. Beyond the Book—The Challenges. SPRY . Old School. 2011. Spry is . . . . . .

Patman
Download Presentation

Widgets in Web Design: Where Spry Can Take You

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 doesn’t quit when the book is closed! Beyond the Book—The 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. What’s 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 page’s content. • Name the tooltip in the Property inspector • Determine the display option • Follow mouse • Hide on mouse out • Horizontal and Vertical Offset—position 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

More Related