Fireworks images by page

1. Overview
2. Planning the design and Sketching a blueprint
3. Creating The Fireworks Images
4. Slices and Frames
5. Assembling the Dreamweaver Tables
6. The Navbar Scripts

Additional User Guide Section: Fast Track Guide and Customization Tips

In the Fast Track guide, we discussed the basics of working with the Fireworks images included with your Design Pack™. Now we will get under the hood and look lots closer!

Planning the web images

Before you begin, you must have a plan. Here's how the DP8 navbar evolved in my mind:I wanted a vertically oriented series of buttons positioned on the left of the page. I got out my trusty pencil and paper and sketched something that resembled this...

The following two Fireworks images, which are in the Local_Files\Fireworks folder of your new Design Pack™, are the mother images for the DP8 navigation bar and the neat header that sits atop the pages.

These are the images I refer to:

1. dp8iface.png (shown at right)
2. thumbsa.png (shown below)

Want to see how they were made? First, let's take a look at dp8iface.png in contact sheet format showing the six separate frames that comprise the complete Fireworks image file. It's over there... on the right!

Buttons, Messages, and and Frames

The first 3 frames represent the three button states on the navbar. Frame 1 contains all the button images as they will appear in the up state (when the page first loads) and also shows the descriptive message that corresponds to the first button. Frame 2 shows all the button images in the over state (when a user mouses over a button) and also shows the message that corresponds to the second button. Frame 3 shows all button images in the down state (when a user clicks a button) and also shows the descriptive message that corresponds to the third button.

Frame 4 shows shows only the message that corresponds to the fourth button. It does not show a changed state for the button images, because we are only using 3 states in our scripts: Up, Over, and Down. Frame 5 shows only the descriptive message that corresponds to the fifth button. And Frame 6 shows only the message that corresponds to the last button.

Tip:
Start by designing frame1. Get it perfect, then open the frames palette, click the little arrow at the top right of the palette, and select Duplicate Frame. Enter the number of duplicate frames you need (in this case, it would be 5) and choose to insert it after the current frame.

thumbsa.png

The header images contain no scripting (rollovers), and so comprise but a single frame. The illustration does show how the main image was sliced into 5 distinct images. Note that the first slice is made to be precisely the same width as the slices in dp8iface.png so that they line up perfectly when "tabled" in Dreamweaver.

Slicing this image is straightforward. Each slice is the same height. Widths are determined by the widths of the underlying imagry... except, of course, for the first slice... which is identical to the button image slices from dp8iface. Here is an example using the actual slices:

Note the technique of using the dark line on the left of each image to tie them together visually. The idea is to make it look like a single cohesive image.

Tip: Making and Editing Slices
Slices are objects in Fireworks. We like to draw slices manually using the slice tool so we can precisely control size and shape. Slices can be moved or resized manually or via the info palette. They can also be selected and nudged via the arrow keys on your keyboard. Slices snap to canvas borders and to the borders of adjoining slices. Slices can and should be named via the objects palette. Fireworks names exported slices according to the name of the slice. For a good export, make sure your slices do not overlap and that they cover the entire canvas. You can press F12 in Fireworks to preview in your default browser. Fireworks will prompt you if you have any overlapping slices.

The Slice Tool. Use this tool to manually draw slices.

Manually Resize a Slice by grabbing one of its Blue Handles and pulling left, right, or down. It will snap to its nearest adjoining slice, or to the canvas border.

Dp8iface is sliced irregularly to make it look the way we want. The buttons were easy! But the bottom 3 slices took some planning. Those 3 slices could have been done a few different ways. We chose the pattern at right.

How to add Height and more buttons

To add a button, you measure the height of an existing button and increase the height of the canvas by that amount. When changing the canvas size, be sure to click either the top or bottom middle anchors (in the Modify Canvas Size dialog) so your image remains properly positioned with new space created at either the top or bottom of the canvas.

Once you've increased the height, you need to create the proper space. If you've created the space at te bottom of the canvas in an image similar to dp8iface, and you want to place a new button underneath "questions", shift-select all 3 of the bottom slices and nudge them down the exact number of pixels that you increased the canvas height by. That will place those slices at the very bottom of the canvas and open up a slot for the new button. Create the button, then draw a slice around it, making sure the slice butts up perfectly and aligns horizontally with slices above and below it... and is the exact same width as the canvas. And don't forget to name your slice (preferably a name similar to the button label).

Adjust your Dreamweaver Table to Accept a New Button

If you add a button, you must also add a row to the Dreamweaver table. Select the cell above or below where you wish to place the new button and select Modify > Table > Insert Row or Column. Create a new row in the proper location. Insert the new button into the new row, name the image in the object name field (top left corner of Property Inspector), and apply the Navbar Behavior (described below).

The slice arrangement of dp8iface.png

Once your design is done, it's time to fire up Dreamweaver and create the table that will house your images. Use your Final Sketch as a blueprint and you'll be on your way! We used 2 tables atop one another to prevent problems with collapsing.

There are a lot of neat new features in Dreamweaver 3 and one of our favorites is the Navbar behavior. Each of the six buttons on our Navbar contains the Navbar behavior. Select a button, open the behavior palette, and you'll see several Set Navbar Image behaviors listed. The first one listed (onclick) is the most important one and all you really need be concerned with. The settings you make there will automatically set up the others. Double-clicking the top behavior opens a window that looks like the images below. The window contains two tabs: Basic and Advanced... represented by our two screen captures.

The Basic Tab

There are 4 button states we use:

1. Up is how the button appears when the page first loads.
2. Over is how it looks when you pass your mouse over it.
3. Down is how it looks when you've clicked it.
4. Over While Down is how it looks when you pass your mouse over a button that is in the Down State.

You'll notice the file structure of the images listed above. frame1/home.gif is the first button on our navbar. It's stored in a folder within this site called navimages/frame1. Each possible state of our navbar has its images stored in a special folder so you'll know where to find them!

Remember...

The images entered into the Up, Over, Down, and Over While Down fields are always going to have the identical file name (that's legal because they're in different folders!)... But the Frame number will always run from Frame1 in the Up state... to Frame3 in the Over While Down state. If you don't use an Over While Down State, it's recommended that you fill in the field and just repeat the Down Image (usually from frame 3).

This window also allows us to enter the page we want to open when the button is clicked (Go to URL) and also allows us to specify a frame or window target. Further options include preloading images and Show Down Image initially.

This behavior is very powerful. When we set up these pages, we created one Navbar and filled in the fields in both tabs of the window. That is 99% of the work... because all that remains to be done on a specific page is to simply check the Show Down Image Initially box and all the rollovers, disjoint swaps... the whole tamale is automatically scripted for us by Dreamweaver! Show Down Initially sets a button (and its related rollover effects) to appear static when that page is loaded.

The Advanced Tab

The Advanced tab allows us to make the disjoint rollovers that cause the descriptive messages to change as we mouse over the buttons.

Here's where it all comes together! The advanced tab is where you set up disjoint rollovers that swap additional images on your page. Here we are showing the advanced tab for our Design Pack™ and have set up 2 swaps that occur when the navigational buttons are interacted with. In the above animated screen shot, we see there are 2 conditions available for setting up the disjoint swaps. These conditions describe the state of the trigger image, in this case, the navigation buttons:

1. (When the button is showing its) Over Image or Over While Down

2. (When the button is showing its) Down Image

The next field says Also Set Image. That means we select an image somewhere else on the page that changes when the criteria in the first field is met. As you see in the screen shot, we've selected image "navdesc" to change To Image File frame2/description.gif. You can also see that image "navtag" has an asterisk next to it, which means that's also been set. Although our screen shot does not show this, we've also selected image "navtag" to change to frame3/navtag.gif.

The image swaps triggered while our button is showing its Over Image, its Down Image, and its Over While Down Image are all the same. This means that you set this up once for all pages... and the only thing you need to do on a particular page is to select the navigation button that corresponds to the page you're on and than check the Show Down Image Initially box on the first tab. Dreamweaver takes care of the rest!