The workflow you described is what I use for creating interactive prototypes. Basically the entire page gets sliced up into graphics, so you can demonstrate rollovers and page design to the client. I generally don't worry too much about detailed optimization at this point. In most cases I'll just make sure each slice is a suitable image format and not get too picky about compression.
When it comes to actual production, the only slices I use are for the parts needed for my CSS layout: background images, inline images, etc. So my final export for the actual page will include far fewer slices. This is when I DO get picky about optimization, making sure my files are the smallest they can be while still maintaining acceptable image quality.
Then - generally - I build my final web pages in Dreamweaver.
The Export area tool is great, but you have to export your graphics one at a time. Slicing means I can set optimization and then export all the slices at once.
Export area doesn't take into account other states in the design, either.
Thanks, that makes good sense to me.
It sure will save me a lot of time as I usually waited until the end to put together the graphics (so I wouldn't have to keep resizing everything). I didn't even consider the fact that you can show the rollover effects in the mockup -- that's awesome! I think my class lecture confused me since it talked about dividing up the entire page into slices, but I don't think that would actually be useful for what I'm doing. Probably they're just going over all the possibilities though.
Okay, I just reread your post. I think I get it a little better. Slice the entire page for a prototype, then just the necessary images when ready to build the final? And I guess if there was nothing interactive I wouldn't need to slice anything at all (just make one big image) for the prototype. (I'm using "prototype" to mean "mockup" -- do I have my vocabulary correct here?)
I notice that if I slice a section and indicate that it's HTML, it empties out the text. So I'm guessing that for a prototype I'd just leave everything (including the text) sliced as an image? And not bother with an HTML slice at all (unless for some reason I decided an ultra-fast tabled Web page was necessary)? And for that matter, does it really matter (for a prototype) whether it's listed as a foreground or background image?
Thanks for all the information!
Well if you're building a web site prototype, chances are there will be interactive elements, be they rollovers or links to other pages in the mockup.
The HTML slice is a special slice that allows you to actually write HTML code for the contents of that area of the exported mockup.
David Hogue and Mariano Ferrario have an excellent article on how and why to use this slice, available in the Fireworks Dev Center, but you may want to wait a bit before digging into it. Get comfy with the basics first.
Thanks! :-) I'll stick with images for now, check out the HTML bit later. :-)
Another reason for slicing is that you can set the parameters for each slice independently. Then, if you change the content (color or whatnot) you can just export a slice without optimizing again. I'll often have a mix of PNG24, PNG8 (for transparency), and JPG slices. I will select a slice and go to File > Image Preview to get each one just right to export (and export). When I save my working FW document, all these careful settings are saved, too.