Expanding Banner

Before you delve into the mysteries of expandable webpage banners, you need to decide exactly what your end result will look like!

Take this image, for example:

It's a 250x60 gif. It is, however, possible to make it stretch across the full width of ANY browser window using variations of the same html trickery.
The "key" to the trick is the appropriate use of "html tables" in your Dreamweaver etc. packages. And it goes like this:

Option 1: Suitable for SOLID TONE backgrounds (i.e. NO TEXTURES/GRADIENTS/STROKES) and/or TILEABLE textured backgrounds.
"I would like the "Banner" title to stay at the left, but the "Logo" to stay at the right of my expanding banner!"

Easy... or at least, not TOO difficult! If your background is textured, or has a gradient fill applied, you DO need to be a bit careful where you place your slice! Practice makes perfect...

Create your banner gif (or jpg) in Fireworks (banners generally come in at about 60-70pix deep, but it's up to you!). Select the "Slice" tool and draw a slice like so:

Open the "Object" panel as below:

While the slice is still selected, click to de-select the "auto-name slices" option and type a suitable name for your slice ("expander" seems good to me!). Once you have done this, export your Fireworks html and slices to the destination folder in your Dreamweaver site.

Open/create the required html page and set your required page properties (margins etc.). Click the "Insert FW Html" icon in the "Common" toolbar and navigate to the FW html file you exported. Select the file and click O.K. to place it on your page.

Now click on the newly inserted image at the point where the FW slice is placed, as below:

And delete the slice to leave an empty table cell just like this:

In the Properties Inspector, set the cell width to 100%,

and, for solid toned backgrounds, set the background (Bg) colour to match your banner colour, as below:

If, however, your background is textured, rather than a solid tone colour, remember that image slice we created? The one named "Expander"? You need to insert this image into the cell (INSERT>IMAGE), then set the image as the "background image" for this expanding cell. Click the "Bg image" link (it's the yellow folder at the far right of the Properties Inspector) and navigate to and select the expander gif/jpg.

Now, select the entire table by clicking the "table" tag at the bottom-left of the screen (or click the edge of the graphic!) and, in the "Properties Inspector", set the table width to 100%, as here:

Shazzam!

And there you have it! One expanding banner!

Option 2: Suitable for SOLID TONE backgrounds only! (i.e. NO STROKES, TEXTURES OR GRADIENTS).
"I want it all to stay at the left!"

Even easier. This one doesn't even need any images - all the clues are up above!

Create your FW banner image, as before. Forget about inserting a slice - you don't need it for this option! Export your gif to it's folder. Open your Dreamweaver page and click the "Insert Table" icon in the "Common" toolbar. Create a 1-Row, 2-Column table. The default setting should show 100%Width, which is fine! Click in the first cell and click INSERT>IMAGE. Navigate to and select the banner gif. Click in the second cell and set the cell to 100% Width and the background colour to match your banner as explained before. That's all there is to it!

Easy as pie!