Using Bookmarks to Get Somewhere within a Page

A bookmark is an invisible spot inside a Web page that can be used as the destination of a link. Bookmarks enable you to better control where visitors end up after they click a hyperlink. A link without the benefit of a bookmark drops visitors off at the top of the destination page. When a visitor clicks a hyperlink that leads to a bookmark inside a page, the visitor jumps straight to the bookmark location.

Bookmarks are like express elevators, especially in long pages that normally require lots of scrolling. For example, your question-and-answer page may have questions at the top and the answers below. Certainly, your visitors can scroll the whole page and read all the answers. Bookmark each answer, though, and link to it from the question, and you give them a much faster way to get to the answer to that single question they want to read. All a visitor has to do is click the question and-answer, ho!

Tip 

To make a good thing an even better thing, add a bookmark at the top of the question list and link to it from each answer. Then a visitor who has read the answer can jump back to the question list.

As with hyperlinks, creating bookmarks is a two-step process: Add the bookmark (the destination), and then create the hyperlink to it.

Creating bookmarks

A bookmark can be the current location of the cursor or any selected bit of text: a word, a phrase, or even a letter. Text defined as a bookmark looks (and acts) no different from regular text; the text is simply flagged with an invisible marker to which you can point a hyperlink.

To create a bookmark, follow these steps:

1. In the page, select the text you want to turn into a bookmark.

   Or place the cursor in the location where you want the bookmark to sit without selecting any text.

   REMEMBER 

   The bookmark eventually becomes the hyperlink destination.

2. Choose Insert Bookmark.

   The Bookmark dialog box appears. If you selected text in Step 1, the text is visible in the Bookmark Name text box. (Expression Web wisely assumes that you want to give the bookmark the same name as the text it's made of.) Otherwise, the text box is empty.

3. If the text box is empty (or if you want to choose a different name), type a brief name in the Bookmark Name text box.

   A good name describes the bookmark's function or location.

4. Click OK.

   The dialog box closes. If the bookmark is made of text, a dotted line appears underneath the selected text in Design view. If the bookmark is a single point, a flag icon appears at the location of the bookmark. (In real life, bookmarks are invisible. Visitors viewing your page with a browser can't distinguish bookmarks from regular text unless they sift through the page's underlying HTML code.)

   Tip 

   If you don't see the bookmark flag in Design view, turn on Show Paragraph Marks. To do so, choose View Formatting Marks and then click Show. Make sure Paragraph Marks is selected, as shown in Figure 4-5.

   
   Figure 4-5: Viewing bookmark flag icons in Design view.

5. Click Save to save the new bookmark information.

Linking to a bookmark

Any bookmark on any page in your Web site is an eligible candidate for a link. To forge this link, follow these steps:

1. In the page, select the hyperlink source.

   This step is the same as for creating a regular link: Select the word, phrase, or picture you want to turn into a hyperlink.

2. Click the Insert Hyperlink button to open the Insert Hyperlink dialog box.

3. In the dialog box's file list, click the page that contains the bookmark to which you want to link, and then click the Bookmark button.

   Or, if the bookmark is in the same page as the hyperlink, in the dialog box's Link To area, click the Place in This Document icon.

   Depending on which item you click, either the Select Place in Document dialog box appears, or the Insert Hyperlink dialog box changes its options to display essentially the same information-the bookmarks inside the selected page.

4. From the list of bookmarks, click the bookmark to which you want to link.

5. Click OK. (If the Insert Hyperlink dialog box is still open, click OK again to close it.)

   The dialog box closes, and the bookmark and hyperlink live happily ever after. (Trumpets sound.)

GLANCE AT THE CODE 

Take a minute now to peek at the code for bookmarks. Here's one that considerate Web designers often include in long Web pages. Tucked into the top of a Web page, it gives visitors a way to quickly jump back to the beginning of the page:

 <a name="top"></a> 

Notice that the bookmark also uses the <a></a> (anchor) tag pair. The opening tag contains the bookmark name (in this case, top), referring to the top of the Web page. Here's what a link to this bookmark looks like elsewhere on this page:

 <a href="#top">Back to top</a> 

Notice that the hyperlink destination consists of the # symbol followed by the bookmark name. The # symbol tells the browser that this hyperlink destination is on the same page. The hyperlink source, the magic bit of text the visitor clicks to get to the bookmark, is the text Back to top.

Dismantling bookmarks

Get rid of any bookmarks that outlive their usefulness. The procedure is quick and painless (for both you and the bookmark). If the bookmark is made up of text, right-click inside the bookmark you want to dismantle, and from the pop-up menu that appears, choose Bookmark Properties. In the Bookmark dialog box that appears, click Clear. If the bookmark is marked with a flag icon, place the cursor to the right of the flag icon and then press the Delete key.