User-Assistance Storyboard WRA 210, SS08

Rachael HodderDave JohnsonAlyson Lowe

As web authors, it is important that we design our sites efficiently. In so doing, we create websites that are faster and allow for more convenient browsing. With that goal in mind, there are many techniques available that an assist in streamlining a websites ease of use. One such tool that no decent website should ever be without is the page anchor. Used to refer a reader directly to specific locations on a web page, anchors speed up travel within the page by providing a quick and painless alternative to long scroll bars. Page anchors can be found on just about any website featuring lengthy pages. For example, Wikipedia entries following the single page per topic format can sometimes take on a life of their own, evolving into rather lengthy and complex data dumps. By adding page anchors that correspond with specific menu items that are contained within the document, Wikipedia users can quickly, and efficiently "pop" down to a select portion of the page document with a simple click. Page anchors are also useful in situations that require several large images to be displayed on the same page. The aim of this tutorial is to show you how to create and use internal anchor links, and at its conclusion, will explain additionally how you can jazz up those links with a hover effect.

Approach the question of where to place links based on perceived user needs

Think semantics, this is very important

Understand the difference between anchor and link

Identifying the most useful locations for anchors and anchor links

Place anchor using <a name="..."> Replace the "..." with your preference of anchor name If using multiple anchors on page, it becomes even more

important to be aware of semantics

Creating an anchor using semantic HTML

This is a example of a site anchor. Notice how the web author has named the anchor according to the heading to which it is attached. Other ways to name the anchor refer to the location of the anchor.

At your chosen link location use the code: <a href="#...“>This is an anchor link</a>

Name your link Note: this operates same as a regular link would; the

difference is that it is internal, linking within the page

Creating a hyperlink directing to your anchor

Here is the way that your link should look: notice how the link is part of a navigation list. Below, is the bare code used to make the link.

Now that you've created your anchor link, you can draw attention to it

Adding a "hover link" will make it more noticeable Simply add the code: a:hover {background-color: [color];

color: [color];} Choose your color and enjoy!

Jazz it up!

Here is the link with the hover effect. The hover effect makes it so that the background color of the link changes with mouse-over. Below, is the CSS that makes the hover effect.

1. How you know you completed task2. Alternative ways to do it3. What could go wrong?

How might you fix it?