6 Replies Latest reply on Mar 22, 2011 4:41 PM by Jim_Babbage

    Textslices over slices

    OontjeFW

      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??

        • 1. Re: Textslices over slices
          Jim_Babbage Level 4

          Please post a link to the original Fireworks document. It will be much better for us and you if we can see what you have done.

          • 2. Re: Textslices over slices
            OontjeFW Level 1

            https://sites.google.com/a/ffector.nl/test/website

             

            you can then download the .PNG file and open it in Fireworks and see the slices.

            • 3. Re: Textslices over slices
              OontjeFW Level 1

              https://sites.google.com/a/ffector.nl/test/website

               

              you can then download the .PNG file and open it in Fireworks and see the slices.

              • 4. Re: Textslices over slices
                Jim_Babbage Level 4

                OK I'm looking at the file now. At first glance I can pick up on 1 issue; you have overlapping slices. This is a big no-no in Fireworks. Overlapping slices causes issues with how graphics are sliced up and at the very least, make for an incredibly complicated layout. If you have elements where slices overlap, create a duplicate page and arrange the slices so that there are no overlaps. Then at least, you will have whole images you can use for building the site in Dreamweaver or your preferred web page editing software.

                 

                If you prefer not to have a duplicate page, then use hotspots rather than slices for the navigation links.

                 

                Try these suggestions and let me know if it resolves your issue.

                • 5. Re: Textslices over slices
                  OontjeFW Level 1

                  Hi Jim,

                   

                  thanks for your help. but,It didn't help.

                  I've already tried to use hotspots over slices or the slice over the hotspot, either way. After exporting it to dreamweaver it only recognize the menubar as a JPG file. the links(or text) do not work as it has been exported as a part of the JPG file.

                   

                  I don't understand what you mean with duplicate page. What is the use of it? Then I have 2 of the same pages.

                   

                  I can't imagine that it isn't possible to use the text as links.

                  I've even tried to export the text/links as seperate slices and add swap image rollover posibility. Then it gets exported completly

                  to dreamweaver and stays intact, but ofcourse the links still won't work.

                   

                  Any ideas left??

                  • 6. Re: Textslices over slices
                    Jim_Babbage Level 4

                    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.

                    1 person found this helpful