Thursday, October 01, 2009

How to Use Bookmarks and Anchors On Your Webpage

Have you ever been on a website, clicked on a link, and instead of being taken to a new page, were zoomed down to another line or paragraph on the same page? This type of link is called a bookmark and should not be confused with Bookmarks in the sense that browsers have come to use the term to describe websites you "save" in a Favorites list. These bookmark links provide website owners with an easy way to present a lot of related content on one long page while still making specific sections of that content immediately accessible to site visitors. Today I'm going to walk users of the Evergreen Content Management System through how to implement bookmarks on their pages when it makes sense to do so.

1. Create a Table of Contents
Before you can link anything to anywhere, you'll need to create the link text. Be sure to place this TOC near the top of the page for immediate user accessibility. Formatting is entirely up to you. See below for an example of how I did it:



2. Add Content
Once you've created your TOC, you'll now need to add the content it will ultimately link to. Most of the time, you'll have an FAQ document lying around in a Word doc that you'll simply need to copy and paste into your Evergreen WYSIWYG. Don't forget to use the Paste from Word tool to avoid formatting headaches! ()

Once the content has been added, you're ready for the next step: Adding Anchors

3. Adding Anchors
So you've created your TOC and added in all of your content. Now you need a way to tell the browser how far down the page it should go when your TOC items have been clicked. Here's where anchors come in.

First, find the line of content that you plan on linking your first TOC item to. Click your cursor just to the left of the first word in that line so its actively blinking within the WYSIWYG.

Next, click the scary trident-looking icon () in the WYSIWYG ribbon menu. This will load a popup window where you will need to write the name of this new location. Note: you cannot use spaces when naming anchors, so be sure to separate words in your anchor name with hyphens or underscores.



Once you've decided on an appropriate name, click "Insert" to save it. Now repeat this process for the rest of your anchors. When finished, you can move onto the final step: Linking to Your Anchors

4. Linking to Your Anchors
Now, return to your TOC and highlight the first entry. Next, click the "Link" icon (). You may be already quite familiar with this tool as it is also used to create hyperlinks to other sites and other pages on your own site. Today, we'll expand its use to include bookmark links.

Click the bubble labeled "Bookmark", then select the appropriate anchor you created for this entry. Once selected, click "Insert", "Apply", and "Ok". You've just created your first bookmark from start to finish! Now repeat this process for the rest of your TOC entries. Once you're done, your TOC and associated page content should look and function (something) like this.

No comments:

Post a Comment