I love creating layouts with Fireworks, but it always bothered me that it didn't recreate any rounded corners.
When CS6 came out with the CSS Properties window, I was happy to see that the CSS in the Properties window faithfully created my objects with rounded corners, so I had high hopes that the regular export would include this markup... but it didn't.
My current work-around seems very frustrating. I export my file as HTML with CSS images... I get a perfectly rendered page with one exception... the corners are still square. Then, I go back to Fireworks, open the CSS Properties window, then cut and paste the tags for the corners one by one into the CSS file.
It seems to me with such heavy emphasis on CSS integration, that the export function should include the this code too.
Am I doing something wrong? Or is this still an unsupported feature?
Use the CSS Properties panel to extract and copy CSS for the selected object on the canvas. It has no integration with the CSS and Images export workflow OR the HTML and Images export workflow (the latter of which produces a rigid, image-based, html table layout). HTML and Images export is really only suitable for clickable prototypes. CSS and Images export is really only suitable if you like re-writing all the CSS to match your normal workflow.
1) Add effects to vector shape (corners, drop shadow, glow, gradient fill, border, opacity, etc..)
2) Open CSS Properties panel. CSS properties for selected object are displayed.
3) Click the Copy All button in the panel.
4) Switch to Dreamweaver or your preferred web editor.
5) Paste the CSS into the desired class, id or element rule.
6) View in Live View or Preview in Browser to see results.
That's my workflow right now. It just seems strange that the export with Images and CSS option builds a nearly pixel perfect version of my layout... Yet it leaves out attributes like rounded corners.
For a simple layout, it's not too bad cutting and pasting from the CSS properties window, but it's a bit odd that it leaves out formatting in the first place. The bigger problem is if I change my layout, I just swap out my CSS and I have to re-edit the CSS to put back the rounded corners.
I'm hoping there will be an update to enable this. Since i like rounded corners, it will save lots of time editing code.
No one can say for sure what changes/improvements will occur, but considering little has been done with the CSS and image export in two releases, I wouldn't hold my breath. The panel is far easier for Adobe to update quickly as specs change. The export workflow though, is baked right into FW.
Cast your vote, though by requesting this feature be added, by using the Adobe wish form. Without feedback to the wish form, the engineering team isn't aware or what users want changed.
Good idea. As a developer I frequently have clients ask me why I don't have a specific feature and more often than not, my answer is "I didn't know you wanted it".
That said, where can I find the Wish Form?
I took Jim's advice and posted it in the Adobe Wish Form. Since Adobe hasn't updated the CSS Export since CS4, I think it would be great if as many people as possible let them know this is something useful by posting this in the Wish Form too.
Here's the URL for the Wish Forum:
Perhaps if enough people asked, they will consider it in a future upgrade. Since the CSS Properties includes most of the formatting for any given object, it shouldn't be a big deal for them to export those properties in the CSS Export. It may be possible the only reason it doesn't is that nobody asked.
Europe, Middle East and Africa