I'm new to cs4 but fireworks up to this level has always created "automatic" slices. I'm pretty sure it still does. If you create a small slice in the middle of a large area, it should slice up to and beyond your small slice in the middle. I don't know much about inDesign but in Fireworks you can paste in vector drawings from illustrator. I thought inDesign was a page layout program? You should use an illustration program for illustrations in my opinion.
Personally, I've always found Fireworks very simple and easy to work into Dreamweaver. I've never used Photoshop for web usage so I can't speak about that...
Sorry I can't be of more help.
FIreworks generates auto slices. Turn on Slice Guides (View > Slice Guides) and you will see this. However, if you choose not to export areas without slices (an option in the Export dialog), FW won't generate the images.
Under the category of at least Im not totally crazy, I checked and you are correct the option to export all areas including ones without slices is in fact there, IF you dont select CSS plus Slices.
If you do choose CSS option, there is no option to have non sliced areas saved out as images.
Why is this?
As I continue to forage ahead (in the darkness) with understanding Fireworks, Im wondering, does anyone actually use the structure that Fireworks seems to be able to generate for you? (In years past it would have been the table Fireworks can generate. Now it is the CSS formatting it can generate to position your slices where you had them in your layout.)
Or does everyone simply not bother with this and just piece together their own structures in CSS within Dreamweaver?
Seems like double effort if Fireworks can do it for you automatically.
Fireworks seems to be the only app in CS4 that gives you the option to generate CSS on export of slices. (Illus doesnt. Photoshop doesnt)
Once again, am I missing some great big part of this puzzle here?
And Jim, what was that box shape thing technique you used in one of your Fireworks Adobe TV videos to create proper CSS slicing structure?
Can you explain it briefly?
Also, now when I go to export CCS plus slices, the resultant html layout only shows one of the slices, floating on a blank page even though the other slices are generated like they are supposed to be. (I found the box to check on the CSS export method that allows unsliced areas to be saved out as images. It was buried in the "Document Specific" section.)
WHAT am I doing wrong here.
Let's have a look at t he file, Thomas.
It looks like you created something that FW just couldn't reproduce in CSS.
I removed the slices on the three colored rectangles (not needed as they are rectangles with solid color fills) and then set the width of the top blue rectangle to fall inline with the right edge of the middle "column" of your design.
Exported as expected in CSS and images. Give it a try.
While Fireworks can create CSS and Images, keep in mind you're asking a program to do the thinking for you. FW works best if you plan your design in a grid type format, that way it can easily detect and create divs for the layout. If there is no natural grid, you can sometimes use a set of rectangles to force a div layout (this did not work when I tried it with your sample.
If you're planning a more complicated layout, you indeed might be better off exporting the graphics and creating the div layout in DW.
David Hogue has created several excellent video and written tutorials on creating CSS-based layouts. He uses the Fireworks CSS export far more often than I do, so he's really put it through its paces. You'll find them in the Fireworks Developer Center and Adobe TV.
Community MX Partner -
Adobe Community Expert
Author - Lynda.com
Author: Peachpit Press
Yes I just rearranged the slices and FW did a perfect job of constructing the CSS structure to recreate my layout.
So that's step one.
Now I just have to figure out how to take that resultant structure and put it inside a overall container so I can float it in the center of my final page.
Then add type where I want it within some of the boxes and format it using CSS.
That all Im after for the time being...
Jim, you will be happy to know I have gotten to the point where Im liking Fireworks for it's graphic capabilities.
(It's about time right?) : )
Well if you are strictly using FW to generate your HTML . . . When you choose File > Export, click the Options button and change the page alignment. This only works for CSS and Images export. I'm very glad to hear that you're getting the hang of FW. :-)
Well maybe Ive spoken too soon.
When I export a VERY simple slice structure, the CSS fails to assemble the slices correctly in Safari.
They do display correctly in Firefox.
Does not instill confidence in me about CSS layouts.
Is this an Emperors New Clothes here?
If CSS cant do this construction which is very basic, how will it build something complex?
Fireworks can reliably produce only basic CSS layouts. Perhaps the bug is in Safari and you need to re-code to word around it. It happens.
People, on the other hand, can produce incredibly complex CSS layouts. But you have to know what you're doing and you have to understand the differences and limitations of the various browsers. They're all a bit different.
Here, for example:
All kinds of things you can do with CSS that Fireworks can't do for you.
Well I suppose thats marginally comforting.
So if I as a person become a CSS wizard I will then be able to do what used to be a no-brainer using table creation in Photoshop/Image Ready.
I have witnessed Adobe Lightroom create rock solid, complex web galleries automatically in seconds.
Seems like it shouldnt be that hard for Fireworks to knock out a measly little structure from a simple layout.
How does one make a CSS layout behave correctly in more than one browser?
Yeah...tables always worked, didn't they!
What looks simple to you may or may not conform to what is simple for CSS. To that, add that the coding for Fireworks has to be very basic. The possible variations on what someone might want are just too great!
All right, I just checked your file. In fact, your layout is not simple for CSS. CSS starts off with the idea that you'll have a series of rectangles stacked one on top of the other. Even though you only have five boxes, your layout is complex, not simple, because of the placement of the boxes. I don't know if that makes you feel any better.
I keep recommending this tutorial to people:
Scroll down to Step 18, and check out the graphic the author has, marking out the divs she will use for the layout. As you can see, some are nested and some are stacked. But none are displaced the way yours are. You're going to need absolute (or maybe relative) positioning on yours and if any of the content ends up overflowing out of one of your boxes (because a user resized the font, say), your layout will likely break. This is just not a CSS-friendly layout you have.
A bit more info on absolute positioning:
and, in general