Expandable GUI

O.K. - This is a simple example of an "Expandable" interface. The section between the nav buttons and the "Copyright Notice" (Heh!) has been set up to expand seamlessly downwards, according to the amount of content placed therein. Oh, you wanna see it expanded? Click HERE.

So, I won't bore you with too much detail in the graphic design area for this one - I'm sure you have your own ideas for appearance - but, if you're interested, the main body of the interface has an "Aluminium" fill applied (I show you how to create this in my "Custom Fills" tutorial), and a touch of "Waffle" texture added to it. The grey rectangle has had an "Inset Emboss" effect applied. The final (blue) rectangle has been treated to a dose of "Inner Shadow" for good measure. As for the Navbar, it's a simple series of duplicated buttons with "Up" and "Over" states. Oh and one final thing - the "Top" button has a simple "Named Anchor" link attached to it, to return you to the top of your scrolled page. More on that later!

Let's get to it, then!

Open a new canvas in FW, wide enough to contain your interface (let's say 550Wx150H). Select the "Rounded Rectangle" tool from the toolbar and draw a 500x140 rectangle on the canvas. Apply whatever fills etc. you desire. Draw a second rectangle inside the first, around 470x100 should be enough. Give this rectangle a contrasting (darker) fill. Then draw your final rectangle inside this one (let's say 450x80). You should have something like this:

HINT: Take note of the EXACT hex colour code for the centre rectangle at this point - you'll need it later! (You can find this by clicking the "Fill" icon in the toolbar and hover the eyedropper over the rectangle for a second).

Now, select the "Rectangle" tool and draw your first button image. While it is selected, click INSERT>CONVERT TO SYMBOL>BUTTON. Double-click the new button to open the Button Editor and create the necessary "Up" and "Over" states, adding text/effects as appropriate. When done, close the Button Editor and the "Symbol" is in place, as here:

When you have closed the Button Editor, duplicate the button by press/holding the ALT key, then click/drag the button. A duplicate will be created. Repeat this step until you have the necessary number of buttons, like so:

Using the "Object" panel, amend the button text on all of the duplicates as required (answering "Current" to the pop-up question asked), as shown here:

You may also wish to set the button "links" at this point, using the "Link Wizard" in the Object panel.

O.K., we're nearly done! Next stage is to do some creative "slicing". Fireworks will do a nice job of slicing up your graphic for you, during the "Export" process, if left to it's own devices! In this case, however, we need to take a customised "hands on" approach.

So, select the "Slice" tool from the toolbar. Draw a slice over the left-hand edge of your interface as shown below:

Now (to make life a little bit easier for ourselves later), in the "Object" panel, uncheck the "Auto-Name Slices" option and name this slice "Left".

Repeat this step at the right-hand side of your interface (and name this slice... "Right", I guess!), then draw a wide slice to fill the gap between them, naming this slice "Centre". The end result should look something like this:

The two small "outside" slices will generate the source images for the repeating tileable "background images" (called "left.gif" and "right.gif") when we expand the interface on adding content. The centre slice will form the main content area of our interface. It's worth noting here, that if you intend to create an inner grid to contain your content (as in my example at the top of the page), your small slices MUST extend over the outer edge of the grid too, to contain it in your repeating background! The same rule applies for any "Effects", such as "inner Shadow" and stuff.

Anyway, back to business! Trim away any excess canvas by clicking MODIFY>TRIM CANVAS and we're now ready to export the html and images to the destination folder in our Dreamweaver site.

Go on, then! Do it!!!

What are you waiting for?

Oh, I get it! PART 2! The Dreamweaver stuff! DOH!!!