July 17, 2004

Posted July 17, 2004

Getting away from bloated code and Fireworks drop in HTML

Until three months ago, I thought that Fireworks was a wonder. You could assemble a complex navigation element, slice it up and create rollovers with the links right in the Fireworks file and drop it right into an .html file in Dreamweaver.

But as I worked more and more with that, the biggest problem was that you could not adjust any of those images. Either the table would be based around numerous spacers and other finger crossing, or you could select an advanced option to have the layout created with nested tables instead of spacers, and have a nested table nightmare.

Well, to cut your code in a third, you loading time in half, and save precious bandwidth, in most cases for many horizontal bar navigation’s, the images can be laid out in one table cell.

All you have to do is draw one layout cell and put the images side by side. Once they reach the end, if you have them stacked, they will automatically return without a <br> tag and will stay positioned perfectly.

I have found this to be invaluable when you have two colored navigation elements that but up to one another where any space showing through would look bad and be a mistake.

Then, choose the Dreamweaver Behaviors Palette (Shift+F4) and add a swap image to create the rollover. It writes the exact same javascript function as it would exporting it out of Fireworks.

The last note I have, is if you exported your images our of Fireworks, they most likely will have strange file names that donâ€™t mean anything. Do name the images so you donâ€™t have any rollovers that donâ€™t work, rollover the wrong image because of conflicting image names, and to make your life easier in finding the exact image in the Image Swap dialog box from the Behaviors palette.