Bloated Fireworks code? Build HTML by hand!
Posted by jerothe in 
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.
Switch between Design and Code view
The more shortcuts you can learn as a designer and implement them into your work flow the more productive you can be.A shortcut I recently learned and use all the time is the ~ will switch between design and code views in Dreamweaver when editing code vs. the graphical look of a web page.
.htm is the default extension for .html files in Dreamweaver, and I want to change it
.htm is an outdated extension, from back in the days of Windows 3.1 when extensions could not be longer than three characters. To make your pages appear more professional, use a .html extension. But when you to File > New > General Basic HTML Page in Dreamweaver, and then go to save your file, you always have to manually add an “l†at the end of .htm. Want to get around that and learn how to edit your first XML file?
In order to do so, go into the folder where you installed Dreamweaver and look for this folder and file
e.g
C:/Program Files/Macromedia/Dreamweaver MX/Configuration/Document Types/MMDocumentTypes.xml
Make sure to not open this file in dreamweaver, instead, use notepad or another rich text format program.
In the first line you should see something like this
“<documenttype id=”HTML” internaltype=”HTML” winfileextension=”htm,html,shtml,shtm,stm,lasso,xhtml” macfileextension=”html,htm,shtml,shtm,lasso,xhtml” file=”Default.html” writebyteordermark=”false”>
All you have to do, is take the htm and put in behind the html file extension. Now you may say, oh, well I’ll never use the .htm extension. But don’t delete it out of the list, Dreamweaver will not start correctly and will crash, spoken from true experience.