1 person found this helpful
Yup, this is how FW handles the three slice export, which admittedly kinda sucks if your rounded corners are transparent. If the outside of your rounded corners is a solid color, it's not an issue. You'll have to go into the html code after export and alter the mark up to get this to work the way you want. Yo will not be able to do it via Fireworks.
Hi, thanks - unfortunately I definitely need the corners to be transparent as the rectangles are to sit on a fairly complex page background image. Pity, maybe they'll add the funtionality in CS5! In the meantime, I haven't the first idea how to alter the mark-up in DW - can you be a bit more specific? If I can get the effect by doing part of the work in FW and the rest in DW that will have to do....
Here's link to the .png file, if that helps: http://www.empathydesign.co.uk/Test/round_rect.html user name = mike, password = stereo
Are your comfortable with CSS and HTML? Can you build your own pages from scratch using Dreamweaver?
Reasonably confident - I've built quite a lot of pages from scratch on Dreamweaver but want to learn Fireworks because it seems that it will speed the process up. I've tried altering the exported divs in DW - eg putting the repeating middle div in between the top and bottom ones (rather than leaving it wrapped around the the outside) but can't get it to work. I end up with the divs not joining up properly and am not sure how to fix it.
1 person found this helpful
I don't tend to use FW for this, but I've got an example kicking around somewhere I use in my web classes. I will see if I can find it.
Well my sample was easier to find then I thought. I've attached a zip file with the PNG layout, the (almost) original CSS export and the tweaked version. I've not done anything with this design other than use it the three-slice example, so there is probably some other CSS/HTML I would probably fix up, if I were to take this further. Hope this helps.
near_north.zip 2.2 MB
Thats fantastic, many thanks. I'll get onto it right away and let you know...
Finally...I think I understand how to create the effect. I've run a DW export from one of your pages and compared it with your finished code (source code and css). I've found this a bit fiddly so it would be helpful if I could run my process past you to see if I've missed anything. I've kept the amendments as simple as I can.
1. Export to DW with the 3 box images set as backgrounds (repeating for the middle one) and transparency turned on for the box top and bottom images (pngs).
2. Create a new div around the entire middle content section (ie between the box top and bottom divs).
3. Remove the middle repeating bg image from the assigned div, and put it in the new div.
4. Set the top margin for the new div as the depth of the box top image.
Everything else can be left exactly as Fireworks exported it. It preserves the transparency of the corners and therefore works with a background page image.
I've tried this with 2 rounded rects and it seems to work but I'm not completely convinced and would welcome your input.
Sounds right, but I'd like to see your end result. And ideally, you should try this with your won work to make sure you have a solid workflow created.
OK - here's the link to the page:
mike, password: stereo)
It's not quite sorted out: I can't for some reason get the page background
image to centre, and the middle sections of the rectangles have lost their
transparency. However the point is that the rounded rectangle method does
seem to have worked. I am quite new to website design, and can see that
you've made various changes to the exported file, not all of which I
understand so please let me know if I've got something wrong.
Its been extremely useful having a correct version to compare with my
attempt so many thanks.