Creating a Website Part Two Navigation Creating Usable

Creating a Website Part Two Navigation

Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions: • • Where am I? Where can I go? How do I get there? How do I get back to where I started?

Creating Usable Navigation To answer these questions, provide the following information: • Let users know what page they are on, and what type of content they are viewing • Let users know where they are in relation to the rest of the site

Creating Usable Navigation • Provide consistent, easy-to-understand links • Provide alternatives to the browser’s Back button that lets users return to their starting point

Limit Information Overload • Create manageable information segments • Control page length • Use hypertext to connect facts, relationships, and concepts

Using Text-Based Navigation • Text-based linking is often the most effective way to provide navigation on your site • It can work in both text-only and graphical browsers • Always provide a text-based set of links as an alternate means of navigation

Sample Text Navigation The following screens demonstrate a variety of text-based navigation options: • To main pages (home, table of contents, index) • To the top of each chapter • Within the table of contents page to chapter descriptions • From table of contents page to specific topics within each chapter

Sample Text Navigation The following screens demonstrate a variety of text-based navigation options: • Between the previous and next chapter • Within chapter pages to each topic • To related information by using contextual links

Graphics for Navigation • • Standardize your navigation graphics Provide predictable navigation cues for the user Repeat graphics to minimize download time Use consistent placement and design of navigation graphics to reassure the user • Use easily understandable graphics

Navigation Summary • Work from the user's point of view. Think about where users want to go within your site, and make it easy for them to get there. • Add plenty of links so it's easy to get around your site. Link to fragments as well as whole pages. Make it easy to get back to your navigation options. • In addition to providing links, make sure you provide plenty of location cues to let the user know where they are

Navigation Summary continued • Do you have to use graphics for linking? Rethink the objectives of your site and determine whether text will do as well. Every additional graphic adds to download time. • Don't forget to provide ALT values to your <img> tags to provide alternate navigation options for the user

Step Six Actual Building the Pages • • Tables Forms Graphics Typography

Using Table Elements • To build effective page templates, you must be familiar with the HTML table elements and attributes • The <table> element contains the table information, which consists of table row elements <tr>, and individual table data cells <td>. These are three elements you will use most frequently when you are building tables.

Basic Table Code <TABLE BORDER> <TR><TD>Stock Number</TD><TD>Description</TD><TD>List Price</TD></TR> <TR><TD>3476 -AB</TD><TD>76 mm Socket</TD><TD>45. 00</TD></TR> <TR><TD>3478 -AB</TD><TD>78 mm Socket</TD><TD>47. 50</TD></TR> <TR><TD>3480 -AB</TD><TD>80 mm Socket</TD><TD>50. 00</TD></TR> </TABLE>