HOME | CSS | TABLES| IMAGES | TYPOGRAPHY| LAYOUT| DEVICES|
FORMS| COLOR THEORY | DREAMWEAVER FEATURES | RESOURCES| ACCESSIBILITY
| Behaviors | Templates | Library Items | Repetitive Tasks | Spry Tools |
Apply Behaviors
Behaviors allow the user to interact with your web page. For example, when someone viewing your page moves his or her mouse over the navigation buttons, you might like to have have a bit of descriptive text appear explaining what interesting information can be accessed by clicking each navigation button. This would be considered a "behavior" because it is something that your web page does in response to an action by the viewer.
According to the Hands on Training textbook by www.lynda.com, behaviors can be divided into two components, events and actions. "Actions" are "blocks of prewritten JavaScript that are executed when the Event occurs. In the context of a rollover, when the Event is completed (the user's mouse moves over the graphic), the Action takes place (one image is swapped with another).
A variety of behaviors are available in CS3, including going to a different URL, opening a browser window, special effects, like shrinking, shaking and fading; and much more. They can be inserted by going to the Behaviors Panel which is just above the Files Panel on the right side of the work screen. Below is an example of a pop up message behavior.
Templates allow designers to save time and protect the visual consistency of their design. A designer may create a template from scratch, or save an existing page as a template, then use that template as the basis for new pages. Templates can "lock in colors, fonts, style sheets, tables, images, and even behaviors, while leaving other parts of the document editable," according to CS3 Hands On Training by Gerrick Chow.
Editable regions and repeating regions are parts of a template that allow the designer, or an inhouse employee responsible for updating the website, to adjust content and exchange images on pages without changing the layout.
Dreamweaver comes with a library of templates to choose from, if it is not convenient or necessary to build your own.
Example of Modifying a Template
Library items are like pieces of boilerplate or stock images that need to be repeated throughout a website, the navigation bar or copyright information, for example. They are a time-saving feature that protect the consistency and uniformity of the website, and allow designers to apply changes to many pages at once. Instead of cutting and pasting on every page, designers creates library items from frequently used images or bits of text. The library items can then be placed on templates or on ordinary pages.
Like templates, library items are stored in the Assets Panel.
Example of Modifying a Library Item
Example of page previewed on a cell phone
Repetitive tasks abound in web design. Whether it's inserting a series of images or copying navigation bars from one page to the next, repeating steps is inevitable in designing a large site. The "Replay" feature of the History panel gives designers a convenient way to repeat steps without all of the key strokes. Simply place your cursor in the cell that you wish to apply the same formating too, be sure the steps that you intend to apply are highlighted in the history panel, and click on the replay button. The replay feature allows designers to complete sites more quickly and avoid the tedium of performing the same steps over and over.
Another convenient feature in Dreamweaver is the Find and Replace tool. Instead of manually changing a word that appears throughout the site, simply ask the program to find it and replace it with the preferred replacement. Below is a print screen from this step.
Example of find and replace function
Sub-Navigation
Sub-Navigation is used to facilitate the viewer's movement through a site. For example, sub-navigation buttons with the names of headings, or "Top of Page" or "Return to Home Page" would allow the viewer to quickly go back to the section he wants to see, or return to the beginning of the site or the top of the page without having to scroll back up to the main navigation. This page includes a sub-navigation panel at the bottom of the page.
Spry Tools allow users to interact with websites. The ability to use spry tools is a key step in advancing in web site design. Spry tools such as widgets, forms, repeating regions, etc., add depth and functionality to any page by allowing the viewer to make selections and drill down for more specific information without having to search through the site navigation.
Designers may find the spry features challenging because they are detail-oriented and draw on organizational and data entry skills rather than artisitc sensibility, but without them a website lacks editability and interactivity.
Definitions:
AJAX - stands for Asynchronous Java Script + XML. This language usually requires coding in Java script to produce interactive, dynamic pages. Spry tools in Dreamweaver enable designers who don't know Java Script to include interactivity on our web pages.
Spry - the Spry tools described in our textbook include spry data, spry forms and spry layout. Spry layout involves tabbed accordeon panels. Spry tools enable pages to be data-driven, so that people can search for information and land on the appropriate web page. Spry also enables information to automatically update areas of the page.
XML - XML is the extensible mark-up language that is used to code data to appear on web pages. Some web pages link to an XML file, called a "data source," which is easier to update than a whole website, and can be used by multiple sites. According to our textbook, "XML is simply a way of marking up a text document so you can call up certain parts of the data later."
Spry Widgets - Spry widgets allow you to insert complex and sophisticated layout controls such as tabbed and accordion panels.
