Creating Image Rollovers in Dreamweaver

Rollovers (often used for navigation)
Rollovers are when you mouseover an image and it changes to another image. They are often used in navigation, and are easy to put together in Dreamweaver. Before you begin, you need to create 2 states of your image, the OFF state (before the user mouses over it) and the ON state, when the user mouses over the image (before clicking the link).
If you create your rollovers in Photoshop using 2 layers you can easily line up the images to be certain they will not shift when the user moves from one state to the next.

This morning's demonstration will show you how you can use Dreamweaver to create image rollover effects for your navigation, or use the Swap Image behaviour to create interesting ways to swap out images on your web pages when you mouse over a specific image.

Examples:
Swapping Images

Slideshow Example Using Javascript

Example 1
Example 2 (with fade transition)

Tab Design

Examples and Ideas

• 30 Tab Based Designs
• Design A Tab With Photoshop
• Tabbed Navigation Using CSS
• Navigation Design - Examples
• Javascript Tabifier
• Example of CSS Tabs
• Pink Tabs on Background

Background Images

Example of using background images and CSS styles

Review of Anchor / Link Tags

A hyperlink or a link is a pointer from one page (or file) to another.
link text
The A stands for anchor, the HREF means HyperText Reference

Link colors are part of the page properties. If you change them using the page properties dialog box (in Dreamweaver), you will be setting the color values for the ALL the links on that page.

Another approach (and what we looked at in yesterday's class), is to use CSS or style sheets to define your anchor or link tags.
A:link
A:visited
A:active
A:hover
To read more take a look at some of these pages:
CSS Anchor/Link States

CSS - Style Sheets

Using CSS for formatting your web page gives you greater control over your layout and styles then using the basic HTML tags. For this reason I suggest that you all dive right in and apply styles to the tags. A warning, understanding style sheets and their usage can be mystifying, be prepared for some confusion. Today I will give you a demonstration in Dreamweaver of how to set up and apply styles to a web page.

Some useful links in getting started:

• CSS 101
• CSS Introduction
• CSS Basics

HTML Tags - Explained

Here is a list of web sites that have further and more detailed information about HTML (HyperText Markup Language). These can be helpful when attempting to understand what all those tags mean and do.

• What Is HTML?
• HTML Quick Reference
• HTML Tag Reference

Here are some sample pages I created that allow you to visual sizes and measurements on the page. (font sizes, table sizes etc.)

• Font faces and sizes
• Table sizes and widths