Navigation Considerations

To this date we have covered four important technical skills:
  1. Choosing a background image or color

  2. Adding a graphic to our homepage

  3. making tables

  4. making links

I have provided a step-by-step review of these skills in the preceding review lessons: January 29th and February 5th. Please refer to them while making changes to your web pages. As always, if you need more help with these skills, please come by my office or send me an email at: matthew633@hotmail.com With these basic skills in hand ( or at least somewhat within reach) it's time to think about some design considerations that will help your web site appear more professional and user-friendly.

To keep this tutorial open and also see work on your page at the same time go to the File menu at the top of the browser window. Select New from the pull-doen menu, and then select (Navigator) window. This will open another browser window. In this new window type in the address for the page you want to work on. Then open that page with Netscape composer.

Navigation Concerns

When we use the term Navigation we are refering to the ability of visitors to travel from one page in your web site to another page. This is done primarily through the use of internal links. Though it may seem like a small item, the placement of your links is important to the overall ease with which someone can use your site.

Placement:

Small sites- At the moment your websites are most likely quite small (1-3 pages). Even so, it's not too soon to start thinking about link placement. As the owner of a small site you have relatively few links and thus a relatively large degree of freedom in how you arrange those links. However, I do have some suggestions which might prove helpful:
  • Place a Back link on the bottom of each page that returns to the previous page.

  • Place a Home link on the bottom of each page that returns to the home page.

  • If you have a page that is particularly long (more than two screen lengths) it is very helpful to have a row of links across the bottom of the page as well as a link that will take the visitor back to the top of the page.A link that takes a visitor from one point in a page to another point in the same page is called a Target.

Large sites- As your site grows in size, it will no longer be possible to place links to everyone of your pages on your home page. Doing so would only serve to clutter that page needlessly and a cluttered home page makes a bad impression on visitors. Rememebr, your homepage is like the front door to your site. It should look clean and inviting. Therefore, as your sight grows it is advisable to divide it into major sub sections. Major sub sections are groupings of pages with a common theme/purpose.
For example:The major sub sections of my web site are called:
  • Teacher Center

  • Activity Center

  • Writing Center

  • Web Design Center

These major sub sections can be seen on my home page (home page).

By dividing a large site into sub sections you achieve a multi-dimensional layering scheme in which each individual minor page averages no more than one and a half to two screen lengths. Each major sub section should be essentially a self-contained unit with its own set of links to take the visitor around that sub section and to each of your other major sub sections. For an example of this organization scheme please visit the writing center.
These sets of links on each major sub section page not only provide for easier navigation but also help to tie the web site together.
For non-major sub section pages a simple Back link will suffice. This is a convenience for visitors and will be appreciated.


Making Targets

  1. Open your page in Netscape Composer.
  2. Put your mouse cursor on the part of the page where you want to target to be.
    For example: if you want to go from the bottom of a long page back to the top, place the target at the top of the page.

  3. Click on the button that says Target at the top of the screen. A small box should open.

  4. Enter the name you want for the target.
    For example: top.
    If you put more than one target on a page, be sure to name each target something different. Every target needs a unique name.

  5. Press apply and then close.

  6. Now it's time to choose the location for the link that visitors will click on to reach the target. If you are making a link back to the top, I suggest that you place it at the bottom of your page. Note: Targets will not be seen by the visitor but the link to the targets will be seen.

  7. Click on the button that says Link at the top of the screen. The link box will appear.

  8. Within the white box that says Select a named target in the current page (optional): select your target's name. For example: top.

  9. In the white rectangle that says Link to a page location or local file delete the word that's already there and then type in the word that you want to appear on the screen. For example: Back to Top.

  10. Press apply and then close. Your link should now appear on your page.


Background Colors/Color Schemes and Continuity (the one site feeling)

Notice that all the pages in the web site I have created for this class have the same sets of colors used consistently over and over again. This includes the background, text, and links. By carefully doing this I have helped to foster the feeling/impression that these pages are all part of one web site. As you design your own site try to develop a unique color scheme and consistently apply it throughout.

Note: if your changes don't appear on the screen when you view your revised page, press the reload button at the top of the window.  

  Back To the Web Design Center | Back to Top