Tuesday, March 24, 2009

Creating Anchor Tags (or linking to different points on a page)

Within the last couple of weeks we've received questions about how to create links that link from one part of a page to another. I think part of the issue is that the icon in the text editing window for creating these links (also called anchor tags or bookmarks) is different since last year's upgrade.

One quick note before we get started - I was recently working on a site in CommonSpot that had a lot of anchor tags and found that whenever I would attempt to edit the pages using Internet Explorer 7, the anchor tags would break due to extraneous code that Internet Explorer was adding. Basically, as soon as I opened a page with anchor tags while logged into CommonSpot using Internet Explorer 7, it broke them. I'm not sure if this issue is still occurring, but just in case, you may want to use Firefox instead (or at least test it out first).

So, here's a brief tutorial that I made for one of our Cspot content editors:

In the example below we will create a link on the bulleted item Item 1 so that when the user clicks on it, it will take them to the heading Item 1:

  1. Once you have your content in place, in the text editing window, begin by placing your cursor next to the item or area of the page that you want to link to:




  2. Next, select the Anchor Tag icon/button (if it's not visible in your text editing window you can either make the window larger or select the drop down arrow to see all the icons/buttons):



  3. A dialog box will pop open. Now enter a name for your anchor tag:


  4. Here are some naming conventions that you should use when creating anchor tags:
    • Do not include any spaces in the name - this will cause your link to not work; instead, use an underscore ( _ ) if necessary.
    • Anchor tag names are case sensitive
    • Try to keep your anchor tag names short
    • Name them something that makes sense or is related to that area or section of the page

    Once you've entered a name, Click OK - you've just successfully completed the first part of creating an anchor tag. Now you just need to create a link to it:

  5. Select/highlight the text that you want to create the link on (i.e when the user clicks on this text it will take them to section of the page that you designated when you created your anchor tag):




  6. With the text still highlighted, select the link/icon button:


  7. From here you'll follow the standard steps for creating links until you get close to the end:
    • The dialog box comes up for setting links
    • Select Link to Existing Page, Uploaded Document or URL
    • Click Next


  8. When the Insert Link dialog box comes up, select External URL or Relative Internal URL and enter the name of the anchor tag you created, preceded by the pound sign ( # ). Remember, it has to be exactly as you named it (uppercase, lowercase, underscores if you used them):


  9. Click Finish
  10. Save your changes and test out your linked anchor tags.