SiteSpinner Pro Tutorials: Bookmarks on Web Pages

Why use bookmarks?

A bookmark is useful for navigation within a page. It takes you directly to any part of the page. Often it will be to a paragraph heading, or perhaps an image. Bookmarks are particularly useful where a single page extends over two or more screens. We have used bookmarks extensively in these tutorials.

A common bookmark takes you back to near the top of the current page -- there is one marked "Top" in red at the head of this page -- just so you can see where it is. Normally it would be invisible.

Parts of a bookmark

A bookmark consists of two parts:

The anchor or bookmark itself. Embed the anchor in the text with the Text Editor Link Editor. You can't make anchors on objects, only from within text
A link to the anchor. This link can be either from the current page or from any other page in your project. Or indeed from any page anywhere on the web. Strictly speaking, this is also called an anchor, but for clarity here, we are calling it a link.

Placing an anchor in your text
Normally you will bookmark a paragraph. So bookmarks are often just ahead of the paragraph heading or the opening word of the paragraph.

While inside the Text Editor, start as you would if you were making a page link. There are a number of ways to do this. One way is to place the cursor just ahead of the anchor point and press Ctrl+I (Insert Link). The Link Editor window should appear -- see the image below. Then:

Leave the Link Type: blank as shown below
Make sure the other field at the top -- Select or enter the URL to link to: -- is blank
Enter the bookmark name in the Assign a bookmark name: field. We used the name Top -- to make the "Top" anchor at the top of this page
Leave the other fields blank
Click OK on the Link Editor
Click the Save and Close button on the Text Editor

Making an invisible independent anchor

Instead of making an anchor inside a normal visible text object as above, you can make one inside an invisible text object -- we'll do that here. Let's use a small text object that will bookmark whatever place you drag-and-drop it to. (For this example, let's bookmark the image just above.) This anchor needs to meet these requirements:

It should be visible on your workpage, but invisible on your published page
It should bookmark objects other than text. By placing the anchor alongside say an image, you can effectively bookmark the image
It should work with browsers IE8, Firefox/Netscape, Opera and Chrome

A text object of just two spaces seems to fit the bill. Two spaces rather than none or one keeps Opera happy. You may find something different that suits you better -- like white text on a white background. But for this example, we'll use a text object consisting of two spaces as the base for the anchor.

To make the anchor, take the following steps:

Make a text object consisting of just two spaces. While still inside the Text Editor, open the Link Editor. There are a number of ways to do this. One way is to right click the Text Editor window then select Create Link. You will see the link editor window appear (image below)
Leave the Link Type blank as shown
Enter the name of the bookmark -- here we used the name Image, because we are bookmarking an image
Click OK on the Link Editor, then the Save and Close button on the Text Editor.

The image below shows the Link Editor settings.

Move the text object to the left and top of the object you want to bookmark. Because the "visible" part of the text object consists of just spaces, it will be invisible when you preview or publish the page.

Making the anchor readable

If you have a number of independent anchors, it can be hard to remember the name you used for each one. In the Text Editor we set a small 8pt font in red and selected Make HTML links Visible. Such anchors are still of course invisible on your published page. But sizing the anchor so that, when in workpage view, you can see the name makes it easier when you later want to make links to that anchor.

Our independent anchor, Image is visible back up this workpage in the left-hand margin, and has this extra treatment.

Linking from within the page

Now we have an anchor -- something to link to. Let's make a link to the independent anchor which simply says "Top of Page".

Start a new text object which says "Top of Page". There is one just below. From within the Text Editor Link Editor set:
Link Type: leave blank
Link URL : #Top
The image below shows the result.

Notice the hash (#) ahead of the anchor name. All links to anchor names must have this prefix. The resulting "Top of Page" text link is positioned just to the right of the image. In preview, click on it and you should go -- guess where?

In much the same way, you can set the same link on a image. The picture below shows the Quick Editor view of the one on the up-arrow.

We filled out the Title: field here too. That is not essential, but it is recommended practice for images.

Hover to see the URL
As with any link, hover your mouse over the link and look at your browser status bar to see what the browser thinks it leads to. This is a very useful thing to do if the link to your anchor is not working.

Try your own bookmark
There is already an anchor further up this page, alongside an image (as discussed above). The anchor is called Image. Try making a link to it on the text here: Link to Image above.

Bookmarks are case sensitive

The IE8 browser thinks that anchors called Top and top are the same, but other browsers think they are different. For this reason, we suggest you avoid tempting fate and always use a consistent style -- e.g. always use lower-case anchor names.

However, you can adopt any style you like, so long as you can apply it consistently to both the anchor name and the link URL. In these tutorials, we have opted to use CamelCapitals, because they are a little easier to read.

Avoid strange characters
Avoid punctuation and spaces in bookmarks -- see naming suggestions.

Page renaming
Renaming pages does not affect links to bookmarks, provided the link is in the same page as the bookmark. A link like #MyAnchor will survive any page renaming.

Links to bookmarks on other pages are not automatically updated if you rename the page containing the bookmark. A link like MyPage.html#MyAnchor won't be updated -- even though it has the actual page name in it. So if you rename MyPage.html, you will also need to manually update any bookmark links containing the page name MyPage.html.

Link tangles
Sometimes you can get into a tangle with links. If that happens, select the main menu Options > Expand Hyperlinks or the toolbar button "Make HTML links Visible" This will make everything visible so that you can easily delete any junk.

When expanded, a valid anchor (bookmark) will look like below. Preview this -- it won't make much sense in workpage view!
<a name="Top"></a>

A valid link to a bookmark will look like this:
<a href="#Top">Top of page</a>

Watch for hidden links

Check that your link is not hidden behind other text objects. This is easy to do -- the background of text objects is usually set to "no color" -- transparent. If you have a link under the transparent background, it will look normal. But while it will work in some browsers, it won't work in others. You can hover your mouse over the link, but you will not get the cursor symbol that denotes an active link (usually a hand).

There are three fixes -- either move something, or bring the link to the top. If that does not work, try redoing the link again from the beginning.

To demonstrate, here is a "Top of page" link placed deliberately under some blank lines at the end of this text object. It will work in IE8 and Opera, but not in Firefox/Netscape or Chrome.

Back button
When testing bookmarks, the Back button on your browser is very useful. Back will return you to where you were at the time you clicked on the link.

If the bookmark doesn't work
If you find that your bookmark doesn't work, here are some points to double check:

When making an anchor, do not place a # ahead of the anchor name. MyAnchor is a valid name for an anchor, but not #MyAnchor. The hash goes only in links to the anchor
The Link Type must be always blank
If linking to an anchor on the current page, the link URL has this form: #MyAnchor
If linking to an anchor on another page, the link URL has this form: MyPage.html#MyAnchor
Include the file extension .html after the page name
If you make an invisible anchor, make sure you really did make it. You should see its location on your workpage marked with at least a little box
Check if you have renamed the page with the bookmark
Bookmarks are case-sensitive
Watch out for hidden links
Use a sensible name -- see naming suggestions.