6 Replies Latest reply: Feb 1, 2015 5:38 AM by Linus Lim RSS

    Creating internal links in Fireworks

    Kguy2

      It's totally easy to create a link to an external page in fireworks but i can't work out how to link to somewhere within the page itself.  I've got quite a long page and want to create links at the top that jump down to the relevant area within the page..  please if someone could help i'd really appreciate it!

        • 1. Re: Creating internal links in Fireworks
          Linda Nicholls Community Member

          Fireworks is image creation and editing software. Although it is tempting to try to use it as a WYSIWYG editor, it usn't meant to be used it that way, so functions like the one you are looking for are not available. The best way to do what you want is in Dreamweaver.

          • 2. Re: Creating internal links in Fireworks
            Dave Hogue ACP

            Yes, editing the exported HTML is the best way to accomplish this. There is no way to embed anchor tags within a page in Fireworks - you can add a link that includes an anchor tag, but you'll have to add that anchor manually after the page is exported.

             

            And remember - the HTML and CSS that Fireworks exports is a starting point, not final production ready code. It's fine to use as demonstration, but there are always things than can be optimized, added, and improved.

             

            Dave

            • 3. Re: Creating internal links in Fireworks
              johnvsc! Community Member

              If you are using FW to create wireframes -> you can create internal document links to other pages like this:

               

              (I am assuming that you have a master page and multiple document pages)

               

              1. navigate to the object that you want to make into a link
              2. click the web layer
              3. select the Rectangle Hot Spot tool
              4. Draw a hotspot over your link
              5. from the dropdown in the properties panel - choose the internal FW page that you want that link to go to!

               

              btw -> it is 1,000 % ok to use FW to create wireframes and use internal link

              • 4. Re: Creating internal links in Fireworks
                chan-ingenuitycc

                This is actually not entirely that difficult.

                 

                1. Navigate to the area where you want the anchor to reside.  The point at which the scroll will jump to. 
                2. Add an HTML Slice at that point and Click the Edit button in the Properties panel to add the html "<a name="#name"></a>" to the slice.
                3. Also in the properties panel, set the width and height of that slice to 1x1 so it only takes up a pixel.  When rendered the slice will appear as a white pixel.
                4. Now create another slice over where you want the link to that spot as an image or whatever.
                5. In the properties panel, change the "Link" option to #name and the target option as "_self."
                6. Go to File >> Preview in Browser >> Preview All Pages in [Browser Name] and watch your anchor links in action!

                 

                Let me know if this is helpful or not.

                • 5. Re: Creating internal links in Fireworks
                  thewindytree

                  Thanks chan-ingenuitycc - this worked for me.  Here are a few more tips to folks who are trying this out:

                  - I didn't bother with Step 3 to set the slice dimensions to 1x1 because I simply put my slice on an area with a white background. 

                  - Step 4 is actually placing a hot spot, not another html slice.  (These two tools are located side-by-side on the "Tools" palette, under the section labeled "Web")

                  - In my project, I was linking to a specific area on different page (rather than within the same page like Kguy2's original question above).  You can do that by changing the link destination to pagename.htm#name in the Properties panel.  No need to change the target to self if you're going to a new page.

                  - I exported to HTML afterwards to create a clickable prototype.  Be sure to included HTML slices in the export settings or else it won't work.

                  • 6. Re: Creating internal links in Fireworks
                    Linus Lim Community Member

                    Thanks for the tips!

                     

                     

                    Linus

                    Fireworks Project Phoenix Product Manager

                    www.projectphoenix.io

                    https://www.facebook.com/groups/fwsingapore/

                    www.twitter.com/chunwui