Personal tools
You are here: Home Documentation How-tos Using Anchors
Document Actions

Using Anchors

This How-to applies to: 2.5

Let's say you have a page that needs to be very long. You've got lots of content and you want to display it all on one page. To make things easier for your site visitors, you want to create links that will take them directly to the various sections of the page instead of having to scroll up and down manually. This is where anchors come in. This how-to relates only to Kupu version 1.4.

Let's say you have a page that needs to be very long. You've got lots of content and you want to display it all on one page. To make things easier for your site visitors, you want to create links that will take them directly to the various sections of the page instead of having to scroll up and down manually. This is where anchors come in.

Consider this really long web page (click to see)

This is a really long page as you can see. There may be reasons why it needs to be this long, so there some links at the top that outline the five sections of the page.

Our goal will be to use anchors for each of the five sections so that a site visitor can simply click on the links at the top and be taken to the corresponding section without having to scroll down the page.


Step One - Define the Anchors

Before links can be created, we must first create the anchors. Go to the page you wish to create anchors on and push the Edit button to start editing the page.

Let's start and the bottom and work our way up. Scroll down to the very last section and click just to the left of the Section Five subheading.

section-five-with-cursor








Now click the insert anchor icon anchor-14 in your toolbar. You will now see a window like this one:
choose-anchor-14

Choose a paragraph style in the left column.

Any text on your page with that formatting will appear in the list of choices.

You can only associate anchors with the formatting options you see in the left column. "Normal" styling isn't one of the options.




Notice that when you first create the anchor, the targeted text appears twice. Simply push backspace to get rid of the redundant text. (an alternative method of inserting anchors is to highlight the text, which may change the appearance of the text).

section-five-twice


If you repeat Step One for each section of your page, you will have built a library of anchors. These anchors can be selected as a link target via internal link from any page.

Step Two - Internal Link

Now that you have your anchors defined, you are ready to put them into use. At the top of the example page there is a sort of table of contents that lists the name of each section (one through five). We'll start by inserting an internal link for Section Five.

internal-link-with-anchor Linking to an anchor works almost like an other internal link, except that you must choose the proper anchor from the Link to Anchor list on the right.

In addition to the familiar top of page (default) selection, notice that there is now one anchor for each section of my long web page. These anchors can be used as link targets from any page, not just the same page that the anchors happen to be on.



That's all there is to using anchors on your Plone website. The concept is simple, but it will probably take a little practice to master their use. Keep in mind that anchors are an interesting way of customizing how links work, but the standard top of page link is by far the most common on the web today.




by samk last modified 2007-10-10 09:12 All content on this site is licensed under a Creative Commons License.
Still Stumped?
If you've still got questions about Plone, here are your best bets for finding out more:
 

All content in this site distributed under the Creative Commons "Attribution-NonCommercial-ShareAlike" license unless otherwise noted.

Powered by Plone CMS, the Open Source Content Management System