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

Resizing and Processing Images

Image files must be saved in a particular format if they are to be included in a web page. I will give a demonstration this morning using Photoshop to re-size my images and save them in the correct format. If you are creating slideshows and thumbnails of many photos you can also use Photoshop to batch process and save some time.
I will also show you a few built-in features that create web galleries or slideshows from Photoshop. There is also a module in Lightroom that allows you to do this, and I use a Flash component called SlideshowPro that builds Flash based slideshows.

Welcome Learners!

We will begin the morning session with introductions. I am interested in your backgrounds as an artist/image maker/photographer, and also what kinds of experience you have had with designing and creating web sites. What are your reasons for taking this workshop, and what do you hope to get out of it?
There are many paths that we can explore this week when we talk about what it means to create a web page or a web site, and in particular what that might look like if one approaches it from the perspective of a visual artist.
Think about your favourite sites, those you keep going back to. Why is that? Ease of use? Originality? Beauty and depth? Well designed? These are questions we will ask each other Monday morning.
See you then!