Anchors

 

Overview

Sometimes, complex pages with large amounts of content may require the use of anchors to allow visitors to better traverse the page. Anchors can be placed directly on a page and can be used as "bookmarks". Hyperlinks can be made that can point to a page, but also that can point to one of these "bookmarks", so when the page is loaded, it "jumps" to the given section.

As stated, anchors are utilized by hyperlinks. If you have ever visited a page and noticed the URL looking like the following, then you have accessed a page using anchors:

http://www.campusuite.com/somepage.cfm#SectionTitle

The # sign at the end of the link tells the browser that it should search for an anchor on the specified page, and the SectionTitle is the unique name of the anchor.

As previously mentioned, anchors can be made and placed anywhere on a page, so links like the one above can be used to take your users to more specific information on a page. Also, any elements on a page (such as an image) that have been given an ID attribute can be treated as anchors as well. So, if on the somepage.cfm there was an image with the ID of SomeImage, it can be pointed to directly by:

http://www.campusuite.com/somepage.cfm#SomeImage

So, for such elements that you have given explicit, unique IDs to, you do not need to create an additional anchor for that item; in essence it is already an anchor.

For the Hyperlink tool in Campusuite's editor, you can insert links on a page that use the anchors you place on that page to direct users to specific content. The table of contents on these manual pages use such a method to allow visitors to "jump" to specific sections and then back to the top of the page. If you create a hyperlink that points to another page, and you know it has a named anchor/ID on it (and you know what that anchor/ID is), you can append the "#" and anchor/ID name to the end of the link to "jump" to the section on the page you want the hyperlink to access.

 

Inserting an Anchor

Please note that anchors need to have unique names; two anchors cannot share the same name. Since HTML element IDs "count" as anchors too, the naming of all anchors and IDs need to be unique on the page.

  1. Click and place your cursor on the page where you want the anchor placed. If you select a section of text and then insert an anchor, you will lose the text; anchors must be placed on the page on thier own.
  2. Click on the Insert/Edit Anchor button in the Editor Toolbar. The Anchor Properties dialog will show. View a description of this interface for reference.
  3. There is only one field in the dialog: the Anchor Name property. Fill this in with whatever you want to refer to the anchor as. Since anchors work in the background of the page, smaller, yet descriptive names work best. Also, since anchors will be used in URLs, it is important to follow some of the guidelines for filenaming on the web when making these names. For instance, spaces are not URL-friendly, and should not be used in an anchor name.
  4. Once the name is specified, click the OK button to finish.
  5. An anchor icon will be placed in the page where the cursor was located.

 

Editing an Anchor

  1. Right click on the icon of the anchor you wish to edit. The Anchor Context Menu will show.
  2. From the menu, click the Edit Anchor item. The Anchor Properties dialog will open.
  3. Edit the fields of the dialog as needed. View a description of this interface for reference.
  4. Click the OK button to finish and make the change, or click the Cancel button to leave the anchor unchanged. Note that the anchor will appear unchanged in the workspace.

 

Removing an Anchor

  1. Click the icon for the anchor.
  2. Press the Delete key on your keyboard.