Persistent Page Indicator

By: Stephanie Sullivan

Page 1 of 2

Set for printing


When developing Web sites using good principles of usability, it is good practice to use an indicator showing what page the person is on as they surf through your site. Some people use bread crumbs as well as a persistent page indicator (many times like the down state of the button) indicating that "you are here." This page indication can be achieved by simply placing a class on the proper navigation item (and changing the item it's placed on from page to page). However, when using server-side includes, templates or library items in Dreamweaver, since the same menu is used on each instance of the page, it can be a more challenging process. Don't worry though—CSS and the descendant selector handle the challenge quite nicely. Below is a quick example of a "you are here" page indicator for the home page.

Image One - "Down-state" persistent page indicator

You Are Here

Whether you create your CSS buttons using p, div or ul elements, this method will work nicely. For the sake of this tutorial, and since it's the way I create most of my CSS buttons, I'll demonstrate the technique using an unordered list (ul) method. Currently, one of the methods more commonly used to create a page indicator is to place a class or ID on the navigation item that corresponds to the page the user is on. So, for example, when the surfer is visiting the web site's about page, the code on that page may look something like the following:

  <li><a href="index.htm">Home</a></li>
  <li id="current"><a href="about.htm">About Us</a></li>
  <li><a href="contact.htm">Contact Us</a></li>
  <li><a href="javascript:;">Button Four</a></li>
  <li><a href="javascript:;">Button Longname</a></li>

In the style sheet, you would have a selector for an ID called current. This ID would cause the button to render in a unique state (many times similar to, or the same as, the down state of the button). In theory, this method works just fine. There can be a couple of problems with it though. First, you have to go into the menu in each page of the site and place the current ID on the proper list item. In larger sites, this can be quite tedious. A second, and larger, problem comes if you're using Dreamweaver templates. The menu area must be editable in order to make the changes on the child pages. This means that later, when you need to make sitewide changes to the menu area, the changes won't propagate to the child pages. This defeats much of the reason for using a template -- the ease of updating. If your menu is created using a library item, you'll have to create multiple versions and then place a different one on each page. This defeats the purpose and beauty of this tool as well.

In this tutorial, I'll assume you're using Dreamweaver templates. If you're not using Dreamweaver and simply want to learn how to use descendant selectors for the persistent page indicator technique, simply skip the Dreamweaver-specific portions. All else will be the same. (All screen shots in this tutorial are from Dreamweaver 8.)

Step 1. Preparing the Menu

The first step is to give each of the li elements in our unordered list a unique ID (the ID is placed on the p or div elements if you are using those instead of an unordered list). This allows a single list to be used in your template to propagate to every child page without being forced to make the template region editable. If you're using DW Library items, you'll also have one list to put into each page. Let's amend our previous list example:

  <li id="home"><a href="index.htm">Home</a></li>
  <li id="about"><a href="about.htm">About Us</a></li>
  <li id="contact"><a href="contact.htm">Contact us</a></li>
  <li id="four"><a href="javascript:;">Button Four</a></li>
  <li id="longname"><a href="javascript:;">Button Longname</a></li>

Step 2. Making the Body Element Editable in a Dreamweaver Template

When you create a template in Dreamweaver, the body element is in a locked region. You are unable to change it in subsequent child pages. We're going to use one of the lesser known techniques, template parameters, so we can edit the opening tag of the body element in our template's child pages. The simplest way to do it is the following:

  1. In the template, place an ID on the body element. Something simple and recognizable like <body id="testpage">.
  2. While your cursor is still in the opening tag of the body element, go up to the menu and choose Modify > Templates > Make Attribute Editable... If there are any other attributes on your body element, like JavaScript, you'll need to choose ID from the attribute dropdown list since all available attributes will appear there. Check the box, Make attribute editable, and click OK.

    Image Two - Making the body element editable

  3. The body element of your template will now look a little strange. Something similar to -- <body id="@@(id)@@">. This syntax is the code Dreamweaver uses so that you can change the value of the ID attribute on the body element on child pages. Save the template and make sure to allow any child pages you've already created to be updated.

Page 1 of 2 1 2 Next

Download Support Files

CSS, Dreamweaver, DW, persistent page indicator, descendant selector, list menu, template, library item, server-side include, SSI, descendent, you are here