Although it's most common to see text fields be a part of a repeat region, you can, of course, include images. Many result pages from a catalog search include both a text and visual description of the items sought after. Now, let's say you want to get really fancy and add rollover effects to those images. Sounds simple enough, right? You just assign a Swap Image behavior and specify a data field from your recordset as the src attribute for the second image. Unfortunately, the Swap Image behavior won't work without tweaking the image name (not the src) to make it unique for every item. Here's what the original rollover code looks like:

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage
.('Image1','','<%=(rsCat.Fields.Item("imageover").Value)%',0)">
<img name="Image1" border="0" src="<%=(rsCat.Fields.Item
.("image").Value)%>">

To get a rollover to work, you'll need to append an incrementing variable to the name attributes so that each image in the repeat region is unique, like this ASP code (the added code is in bold):

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage
.('Image<%=Repeat1__numRows%>','','<%=(rsCat.Fields.Item
.("imageover").Value)%',0)">
<img name="Image<%=Repeat1__numRows%>" border="0"
src="<%=(rsCat.Fields.Item("image").Value)%>">

ColdFusion users can use the #CurrentRow# attribute to get the same effect.

A results page for the standard search application is generally set up to handle any number of items-some even use recordset navigation so that users can page through the results. However, what if there are no matches to the search criteria? Do you really want a "Now showing 0 of 0 records" message on the screen? Of course not; a message like "No matches. Please try again." With the use of two standard server behaviors, you can hide unnecessary elements and simultaneously show your message. To hide your recordset navigation (and anything else unwanted), select the undesired elements and apply the Show If Recordset Not Empty server behavior. This shows the region only if some results are found and otherwise it's hidden. Next, add your "No Records Found" message, select it, and then apply Show If Recordset Is Empty. Now you have two completely different looks to handle any search outcome.

Looking for a way to trigger a custom JavaScript or server function? The Behaviors panel is open for business! Not only does it enable you to choose any of the Dreamweaver built-in JavaScript behaviors, you can also enter your own function for any recognized event. Here's how it works: Select the tag you want to trigger the behavior and switch to the Behaviors panel by choosing Window > Behaviors (or that ever-popular Shift+F3 keyboard shortcut). The Behaviors panel lets you see either just the events and behaviors already applied or all the possible events for the selected tag-choose the View option from the two buttons on the left of the panel. Either way, choose your event from the column on the left and enter the JavaScript or dynamic code in the column on the right. Dreamweaver writes both event and behavior directly into the tag. If your code requires quotes, use single quotes rather than double quotes - Dreamweaver converts double quotes to the character entity (&quot;) - a no-no in those browser social circles.

A data-driven page really starts with the proper formulation of the data itself. Let's look at three areas often misunderstood by web application newbies who are dealing with text, links, and images. First, text is far more flexible in databases than is commonly assumed. For example, a memo field in Access (used when the data runs longer than 255 characters) also can hold HTML tags; so you could store and retrieve multiple paragraphs with full formatting. When working with data that will be included as links, you might be tempted to set the data field to a hyperlink type. Hyperlink-styled data looks real pretty in Access but is completely useless in Dreamweaver; store your linking data as straight text instead. With images, it's best just to save just the filename and not the path to the image. If you want to include dynamic images located in a separate folder, choose Insert > Image, and then choose the Select File Name from Data Source option. Select the proper field and, in the URL field, prepend the desired path (in other words, add the path before the code). For example, an ASP final URL might resemble this code:

images/thumbs/<%=(employees.Fields.Item("images").Value)%>

In PHP it would be:

images/thumbs/<?php echo $row_employees['images']; ?>

The ColdFusion code is different, even though the concept remains the same:

images/thumbs/<cfoutput>#employees.images#</cfoutput>

Unlike the search function, most Web sites do not provide text input fields on every page for the log in function. Instead, they provide a single "Login" text link somewhere at the top (usually top right) of the page that also doubles as the registration link (even though there's nothing that says "registration" on the link, although often I see sites that show a combined Login / Register link). The link takes people to a log in page where they can either log in with their user name and password or sign up to be a new user (with that function falling below the log in area). On this log in page are often other features like "remember me" and a "forgot password" link people like me who continually forget our passwords.

The relative location of interactive components is as strong a clue as any other visual treatment. For example, just grouping a series of similar-looking interface elements together in one graphical unit can give them a clickable appearance even if the individual graphics themselves don't look clickable. For example, if you string together a row of plain text labels with the same font treatment, you create a stronger graphical element that stands out from the other things on the page.

If someone is working through a multi-step task, it's a good idea to show a progress meter letting them know where they are and how much more they need to endure.

Do not rely too much on color coding. Color coding works well only when you have a very few number of sections and you want to brand each one (like a conference with three different tracks). With so few sections, users can better associate the color with the respective sections, and the color becomes meaningful. Conversely, if there are a lot of sections, color coding falls flat and people ignore it. People are more concentrated on the content than what color the section is. Case in point: Do you remember the color of Amazon.com's DVD section when they used color coding? Excluded in this debate are sites that use color simply to theme sections for brand purposes and are not expecting to get a usability boost out of it.