Textslices over slices

Question

Hi,
I've made a websitedesign in fireworks. Right now the design is ready, but something is messing up a part of my
design as I export it to dreamweaver.
The menubar on top is made of a rounded rectangle with shadow. I sliced this rectangle and shadow so Fireworks knows it's a image
that needs to stay in place after exporting it.
Now my problem is that on that menubar(rounded rectangle) I've placed text/ hyperlinks of course with slices. I can't seem to export it right, no matter
what I do, with the different slices. Even if I change the place or priority in layers, after exporting it it's in some cases just an image
and then I can't use the links or in other cases it are really links, but because of the slices over the text, the whole design is shifted,
ruined and not as I want to.
I tried to use roll over images, but nothing seems to do the trick. I tried making the rounded rectangle to a background image(this makes it even worse after exporting).
I'm out of options at the moment, and I do believe this is a very simple trick. Right now, I made the design with alle my pages in just 4 hours.. I'm trying to
get this thing going for over 5 days now.
Can someone please help??

Answer 1

Sure. Lots of ideas. It really comes down to what you are trying to accomplish with Fireworks.
Let's be clear here that you are not trying to build your final website from Fireworks. At this time you are only creating a prototype, yes? If that assumption is correct, I'll try to show you what I mean.
If you are planning/hoping to use Fireworks as your web page creation tool, it can be done with simple designs, using the CSS and Images export,  but I don't recommend it. I'll be happy to point you to tutorials which cover this topic in depth, but I honestly find it faster to build my production web pages in Dreamweaver, and use Fireworks for what it's great at; page design, prototyping and image optimization.
As I said, overlapping slices causes issues, further breaking up your graphics into smaller pieces. and making a very fragile, complicated table based layout when you choose to export as HTML and Images. This export workflow is really only suitable for a prototype export, because it converts your design entirely into a graphical layout, where each slice is placed in a table cell. There is no true text exported in this workflow.
If you slice "text" in Fireworks, it is automatically converted to an image. That's what slices do. For that matter, if you export as HTML and images, this export workflow will even create images of non-sliced areas, based on your choices in the Export dialog box. That's just the nature of the beast.
You either add hotspots (making sure they are above the slice web object in the Web layer) so that you can create an image map, OR if you want to show interactivity like rollover effects, delete the banner slice and add the slices to the text areas and let FW export our those text elements as sliced graphics, allowing it to cut up the rest of the design as it sees fit. FW will even generate the JavaScript to create the rollover effects in the html prototype.
Again we are just talking graphical prototype here, not finished HTML and CSS web page.
If your goal is to build out the final web page, well, that's where the duplicate page can come in handy. The first page shows your mock up design, the duplicate strips out all the elements that should not be part of the slices (like text). You can then export out the graphics cleanly and use Dreamweaver to build the final page design. Alternatively, you could just hide the text objects on the original page and export from there. It's just a matter of preference, more than anything else.
Here is a link to your page, exported as HTML and Images from Fireworks with hotspots set into the banner area for your navigation. I don't have any extra pages, so I've just set them all as null links, with the exception of the logo, which links to the PNG file. The point I'm making is that the hotspots do work on top of a slice.
You can click on your logo to view and download my first version of your testpage.
If you scroll to the bottom of the page, there is another link that will take you to another version of your PNG file, where I used a duplicate page.
As I said, if you're interested in trying to make FW export out a final web page, the export workflow to use is CSS and Images, but it will take planning on your part and solid knowledge of HTML and CSS to tweak the final layout. FW's CSS export is rarely a 1-click solution. Let me know if you want links to tutorials about this process.