 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:
- Click on the slice for the first button
 Then
go to Insert> Behavior. 
- Next click on the '+' button and click on Simple Rollover
(Image 2(a))
- 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
- Click on the slice for the first button Then go to Insert> Behavior.
- Next click on the '+' button and click on Swap Image (Image
2(b))
- 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)
- 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:
- Simple Rollover
- 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
- Under slicing you need to choose 'Use slice objects'
- 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! |
