4 October 2009
Familiarity with HTML, CSS, and either Adobe Photoshop or Adobe Fireworks.
We at Codify Design Studio have put together some themes—based entirely on the Spry markup and CSS rules—that you can use as is, or modify in your web projects. We also provide the sliced Adobe Photoshop files, so you can update the designs in a snap.
Adding to the ease of use of Spry is the visual authoring option for Spry widgets (introduced in Dreamweaver CS3) which includes adding, modifying, and integrating the visual CSS panel to help you customize the visual appeal and behaviors of your widgets.
The Dreamweaver Insert panel features five widgets grouped together in the layout section of the Spry panel (from left to right): Menu Bar, Tabbed Panels, Accordion, Collapsible Panel, Spry Tooltip (see Figure 1).
As I mentioned earlier, the Dreamweaver user interface supports the five widgets on the Layout tab of the Insert panel, and seven more widgets and advanced examples are included in the Spry download assets located in the samples directory of the Spry framework download. Figure 3 provides an at-a-glance view of the five widgets on the Layout tab.
The Accordion widget (see Figure 4) contains an outermost container with a default ID name
Accordion1. Inside the main container is a series of DIVs classed with
AccordionPanel. Inside each panel DIV are two additional DIV classes,
AccordionPanelContent. The content inside the
AccordionPanelTab is the clickable item, and the content inside the
AccordionPanelContent is opened when you click its corresponding tab. Click the buttons at the bottom of Figure 3 to isolate the various relationships between the HTML markup and the fully enabled widget.
The Collapsible Panels widget (see Figure 5) contains an outermost container with a default ID named
CollapsiblePanel1. Inside the main container are two DIVs: one classed with
CollapsiblePanelTab and the other with
CollapsiblePanelTab is the clickable item, and the content of the
CollapsiblePanelContent is opened when you click the tab. Click the buttons at the bottom of Figure 5 to isolate the various relationships between the HTML markup and the fully enabled widget.
The Menu Bar widget (see Figure 6) is based entirely on unordered lists. The outermost list has a default ID named
MenuBar1. Each list item (
li) has an anchor (
a) element classed with
MenuBarSubMenu. The first series of list items under the main unordered list (
The Tabbed Panels widget (see Figure 7) contains an outermost container with a default ID named
TabbelPanels1. Inside the main container is an unordered list classed with
TabbedPanelsTabGroup and a DIV classed with
TabbedPanelsContentGroup. Each list item (
li) inside the tab group is classed with
TabbedPanelsTab. Each content DIV in the content group is classed with
TabbedPanelsTab in the tab group is a clickable item that displays its corresponding
TabbedPanelsContent DIV in the
TabbedPanelsContentGroup DIV. Click the buttons at the bottom of Figure 7 to isolate the various relationships between the HTML markup and the fully enabled widget.
The Tool Tip widget (see Figure 8) contains text, or an image, wrapped in a container with an ID named
sprytrigger1. Also on the page is a content DIV with an ID of
sprytooltip1. By default, the tool tip trigger is contained within a
span tag and the content of the tip is contained with a DIV. In actuality, the trigger and content can be in any kind of HTML tag. Click the buttons at the bottom of Figure 8 to isolate the various relationships between the HTML markup and the fully enabled widget.
The Codify Design Studio team has created a series of widget designs that you can download and customize for your own web projects. The assets include modified HTML and CSS files that are specifically developed to work with the presliced Photoshop files.
For quick and easy customization, simply update the PSD files in either Photoshop or Fireworks, and export the slices to the CodifyAssets folder. If you're a more advanced user, feel free to modify the slice structure, HTML, and CSS files to achieve any design configuration your project requires.
Although it is fast and easy to add widgets in Dreamweaver using the Insert panel, some design techniques require some customization of the HTML and CSS files. In the following video, I walk you through the assets provided at the MAX 2009 conference session, as well as a brief description of the specific HTML and CSS elements that were modified in each Spry widget of the MAX theme:
See how you can customize the HTML and CSS files in these provided themes based entirely on the Spry markup and CSS rules. (Running time: 17:05)
Refer to the following figures for a summary of the key features of each template and to preview and download the templates.
Tutorials and samples