Home | CSS | Tables | Images | Typography | Layout | Designing for Devices | Color Theory | Forms | Dreamweaver Features | Resources | Accessibility
Applying Behaviors | Templates | Library Items | Repetitive Tasks | Spry Tools
What is a behavior? A behavior is a function you can add to a picture or a link to make something else happen when a specific action is taken. The actual link or image does not change, and unless the specific actions are performed, nothing happens to the site visitor. Behaviors, when used properly, can enhance the look and function of your website. But used improperly, they can make your site a total disaster.
In Dreamweaver CS3, you can use behaviors to do a number of different things. You can set it up to open a popup window when a picture or link is clicked on, for the purpose of showing a larger version of an image. You can set it to display a message when a link is clicked on, as seen in the picture below, or even hovered over. How cool is that?
But, you want to be careful with your behaviors. Imagine that you've just created a site and you want your visitors to frequent it. But every time they visit it, they find a bunch of popups from hovering over a link, or click an image hoping to see a larger version of it only to have something unexpected happen. Will these people want to return to your site? Will they refer others to it, even if they found it remotely useful? I doubt it highly.
Templates are an amazing thing. Most often, when you have little-to-no HTML coding experience, you are tempted and/or prompted to use a template to assist in designing your site. This is a handy feature, but one easily misused. If you simply force-feed content into a template, the end result may not look like what you expect it to. But if you proceed carefully, they can be a new designer's best friend.
Adobe Dreamweaver CS3 comes packed with some templates to help a new designer get started with their sites. It is possible to create your own templates by saving a coded page as a template. This includes hand-designing a page or editing a previously created one.
Below is a Print Screen showing how a template can be modified:
Library items allow you to make minor changes to a group of pages with ease. In a way, it's similar to a one-time-change notepad of sorts. You can store something in the library, and then inset it on various places on your pages. Almost like a post-it note!
Library items are very similar to templates, but with a couple of major differences. A template affects the entire look of a page - a library item can affect only a single item. This includes items not just inside of a template, but outside of it as well.
Here is a screenshot on how to modify a Library Item:
And here is one showing how the About Tea page looks in a cell phone:
Repetitive tasks - we've all done them. Things you do over and over and over. Now imagine that you've been working away at a website for quite some time, and you've mis-typed the name of a company countless times.
What do you do? Freak out? Scrap it all and start fresh? Well, no. None of those. Adobe Dreamweaver CS3 contains a feature that'll help you out. And boy, don't we love those!
What you do is this. Go to Edit and select Find and Replace. If the text is in the body of your site, make sure Text is displayed in the Search in: box. Type the mis-typed name in the Find (if you highlighted it first, it'll already be in there) and then in the Replace box type the corrected name. Repeat the process replacing Text in the box with Source Code to check outside the <body> tag. Whew, what a relief!
Isn't that handy? I'd say it is! Imagine making a site for some big-name company like Wal-Mart then discovering you left out the hyphen on 1,000 or so individual pages. That'd take forever! This feature in Dreamweaver fixes all that for you in considerably less time.
Spry is an open source Ajax (Asynchronous JAvascript and XML) framework that can be used in multiple ways. It can be used to validate forms on a website when a user chooses to submit them. It can be used to insert complex layouts that might otherwise be impossible. Or it can help incorporate XML data into a web page.
In terms of validation, suppose you put a form on your site, and you want your visitors to leave their name and e-mail, at the very least. Using Spry tools with Dreamweaver CS3, you can have the form prompt their entry if they are left out or are in an invalid format. This is useful to help prevent multiple submissions that you would then have to wade through.
The XML and Layout options for Spry Tools are very similar. These two functions allow the site to interact with the user in different ways. The Layout option allows you to lay out more complex arrangements, such as using an "accordion" where the "paper" turns as the user clicks on specific links (i.e. changes the look of the site). These interactions allow for multiple pieces of content in a given area. As for XML, suppose you click on a link for an item and a different portion of the same page (as opposed to a popup!) changes to reflect what you just clicked on (i.e. the info itself changes).
Ajax - a form of interactivity on a site between its visitors and the site based on which aspects of the page they interact with.
Spry - The framework Dreamweaver CS3 uses to allow us to integrate complex Ajax implementations into our web pages and a much richer Web experience for visitors.
XML - eXtensible Markup Language
Spry Widgets - Used to incorproate XML data into a web page, insert complex layouts, or to perform JavaScript validation functions on a web page.
Here is an example of a Spry Widget:
Here is an example of Spry Form Fields:
