Fireworks makes it very easy to design web sites using swap images. Learn and follow these steps how easily you can do all this!

Step 1: Design all swaps and rollover buttons. Then put all the separate swap images in different layers. But you can put the common elements in the first layer, and the rollover images in the second layer and the swap images in separate layers. As we will be using frames, this is an important thing.

These are the layers we have used:
Structure - The common elements of the swaps are put in this layer.
Rollovers - The down state of the rollovers
Swap 1 - Swap Image 1
Swap 2 - Swap Image 2
Swap 3 - Swap Image 3

Step 2: Once you put all the swaps in separate layers then you have to put them into frames. Each of the swaps should be in a different frame. Create the same number of frames as swap images. So, now there will be 3 frames and 3 swaps. In frame 1 you have to make sure only the layers 'structure and swap1' are open. Same way in Frame 2 you have to open only layers 'structure and swap2'. Each Frame will have a unique swap image and all the common elements. If you also need simple rollovers, then you have to make sure that layer is open in Frame 2. Fireworks take the images in Frame 2 for a simple rollover.

Below the screen shots will tell what your frames should look like. In the second screen shot notice that the layer 'rollovers' is also open. This must be placed in Frame 2.

 
Image 1(a)                                             Image 1(b)

Step 3: Then slice the images. And name it. Make sure the swap has only one slice.

Step 4: Create swap images or rollovers by the 'Behaviors' feature in Fireworks.

Here are the steps:

1. Click on the slice for the first button Then go to Insert> Behavior.
   
2. Next click on the '+' button and click on Simple Rollover (Image 2(a))
3. Click on OK (Note: make sure the rollover buttons are in Frame 2)
   Repeat the process for all the buttons
   

Now for the swap images

1. Click on the slice for the first button Then go to Insert> Behavior.
2. Next click on the '+' button and click on Swap Image (Image 2(b))
   

 

 

3. You can see a window like the one below (Image 2(c)). You have to select the swap image and the frame number.
   




Image 3(c)

 

4. Repeat the process for all the buttons
   

After all that your behavior palette for each of the buttons will look like this:

Each sliced button should have 2 behaviors:

1. Simple Rollover


2. Swap Image



Make sure your behavior palette has both the behaviors

Image 4(a)

Step 5: Then at last export the entire file. Fireworks automatically converts the swaps to javascript and html. No worry about any programming, But remember there are two things to do

1. Under slicing you need to choose 'Use slice objects'
2. Under HTML style choose Dreamweaver 2.0 (or 3.0)
   

Have a l ook at the screen shot below.

Fireworks will export a .htm file to the specified directory (including the images). Browse the .htm file in IE then you cna see how it works!