Web Design Principles

5th Edition

Chapter Nine
Planning Site Navigation

Objectives
When you complete this chapter, you will be able to:
Create usable navigation
Build text-based navigation
Use graphics for navigation and linking
Use lists for navigation
Build horizontal navigation bars
Build vertical navigation bars
Use background color and graphics to enhance
navigation
Create hover rollovers
Web Design Principles 5th Ed.

Creating Usable 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?

Web Design Principles 5th Ed.

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

Web Design Principles 5th Ed.

Creating Usable Navigation

Provide consistent, easy-to-understand links
Provide an alternative to the browsers Back
button that lets users return to their starting
point

Web Design Principles 5th Ed.

Web Design Principles 5th Ed.

Limiting Information Overload

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

Web Design Principles 5th Ed.

Building Navigation Structures

Building Text-Based Navigation

Text-based linking is often the most effective
way to provide navigation on your site
Always provide a text-based set of links as an
alternate means of navigation

Web Design Principles 5th Ed.

10

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
Web Design Principles 5th Ed.

11

Sample Text Navigation

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

Web Design Principles 5th Ed.

12

Web Design Principles 5th Ed.

13

Linking with a Text Navigation Bar

The Table of Contents page must link to the other
main pages of the Web site, allowing users to go
directly to the pages they want
Achieve this by adding a simple text-based
navigation bar

Web Design Principles 5th Ed.

14

Web Design Principles 5th Ed.

15

Linking to Chapter Pages

The Table of Contents page needs links to the
individual chapter files in the Web site

Web Design Principles 5th Ed.

16

Web Design Principles 5th Ed.

17

Adding Internal Linking

Add a back to top link that lets users return to the
top of the page

Web Design Principles 5th Ed.

18

Web Design Principles 5th Ed.

19

Adding an Internal Navigation Bar

You can use additional fragment identifiers in the
table of contents to add more user-focused
navigation choices

Web Design Principles 5th Ed.

20

Web Design Principles 5th Ed.

21

Linking to External Document

Fragments
You can let users jump from the table of contents to
the exact topic they want within each chapter
This requires adding code to both the Table of
Contents page and each individual chapter page

Web Design Principles 5th Ed.

22

Web Design Principles 5th Ed.

23

Adding Page Turners

You can enhance the functions of the navigation
bar in the chapter pages by adding page-turner
links
Page turners let you move either to the previous or
next page in the collection

Web Design Principles 5th Ed.

24

Web Design Principles 5th Ed.

25

Web Design Principles 5th Ed.

26

Adding Contextual Linking

Adding Contextual Linking

Contextual links allow users to jump to related
ideas or cross-references by clicking the word
or item that interests them
These are links that you can embed directly in
the flow of your content by choosing the key
terms and concepts you anticipate your users
will want to follow

Web Design Principles 5th Ed.

28

Web Design Principles 5th Ed.

29

Using Graphics for Navigation and

Linking

Using Graphics for Navigation and

Linking
If you use graphics for navigation, use the same
graphics consistently throughout your site
These provide predictable navigation cues for the
user
Reusing graphics minimizes download time

Web Design Principles 5th Ed.

31

Using the alt Attribute

Provide alternate text-based links in addition to
graphical links
Include alt attributes in your <img> tags
The alt attribute is important to accessibility

Web Design Principles 5th Ed.

32

Web Design Principles 5th Ed.

33

Using Icons for Navigation

Be careful with navigation icons
Not everyone agrees on their meaning
Many Web sites include descriptive text within
navigation icons

Web Design Principles 5th Ed.

34

Using Lists for Navigation

Using Lists for Navigation

The HTML list elements are the preferred element
for containing navigation links
Lists provide an easy way to create navigation that
can be styled with CSS
<ul id="navlist">
<li><a href="index.html">Home</a></li>
<li><a href="history.html">History</a></li>
<li><a href="how.html">How it Works</a></li>
<li><a href="clubs.html">Balloon Clubs</a></li>
<li><a href="festivals.html">Festivals</a></li>
<li><a href="rides.html">Where to Ride</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
Web Design Principles 5th Ed.

36

Web Design Principles 5th Ed.

37

Removing Default Padding and

Margin
Most lists have built-in padding or margin values
When creating navigation lists, you will need to
remove this default spacing
Set the margin padding properties to zero for the
UL element as shown
ul#navlist {
padding: 0;
margin: 0;
}
Web Design Principles 5th Ed.

38

Removing Default Bullets

HTML lists come with built-in bullets
When creating lists for navigation, you can remove
the default bullets
Use the list-style-type property as shown
ul#navlist {
padding-left: 0;
margin-left: 0;
list-style-type: none;
}
Web Design Principles 5th Ed.

39

Web Design Principles 5th Ed.

40

Building Horizontal Navigation

Bars

Horizontal Navigation
In a standard list, each item is on its own line
To create a horizontal navigation bar using the list,
you need to set the list item display setting to
in-line
This allows the list to display on one line
ul#navlist li{
display: inline;
}

Web Design Principles 5th Ed.

42

Web Design Principles 5th Ed.

43

Customizing the Horizontal

Navigation Bar
You can customize the basic list navigation with
CSS properties
For example, you can:
Add borders, background colors, or images
Set space between buttons

Web Design Principles 5th Ed.

44

Web Design Principles 5th Ed.

45

Controlling Navigation Bar Width

Horizontal navigation bars will wrap with the
browser
To prevent this, set a width for your navigation list
ul#navlist {
padding: 0;
margin: 10px 0px 0px 0px;
list-style-type: none;
width: 700px;
}
Web Design Principles 5th Ed.

46

47

<html>
<head>
<style>
ul#l1 li{
display: inline;
margin: 10px 0px 0px 0px;
border-style:double;
border-color:red;
background-color:yellow;
}
</style>

48

<body>
<ul id="l1">
<li>Home </li>
<li>History</li>
<li>How it works</li>
<li>About</li>
<Li>Interests</li>
<li>Skills</li>
</ul>
</body>
</html>

49

50

Web Design Principles 5th Ed.

51

Controlling Navigation Button Width

To create navigation buttons that are all the same
width, change the display type to block
Float the boxes so they align next to each other

Web Design Principles 5th Ed.

52

Web Design Principles 5th Ed.

53

Building Vertical Navigation Bars

Building Vertical Navigation Bars

Use a standard list structure without changing the
display type as you did for a horizontal navigation
bar
The <a> elements in the list must be set to a block
display property value

Web Design Principles 5th Ed.

55

Web Design Principles 5th Ed.

56

Using Background Color and

Graphics To Enhance Navigation

Using Background Color and

Graphics To Enhance Navigation
You can use background colors and graphics in a
variety of ways to enhance your navigation
You can indicate location with graphic or
background color
You can create interactive hovers that change
when the user points to a link

Web Design Principles 5th Ed.

58

Indicating History
Use the link pseudo-classes to show users where
they have been
You can display a graphic based on the state of the
link
In this example, the visited state causes a graphic
check mark to display

Web Design Principles 5th Ed.

59

Web Design Principles 5th Ed.

60

Indicating Location
Location can be indicated by a change in text
weight, text color, or background color or with a
graphic

Web Design Principles 5th Ed.

61

Web Design Principles 5th Ed.

62

Creating Hover Rollovers

CSS Links ( Pseudo-classes )

a link has four different states that it can be in. CSS

allows you to customize each state
link - this is a link that has not been used, nor is a
mouse pointer hovering over it
visited - this is a link that has been used before,
but has no mouse on it
hover - this is a link currently has a mouse pointer
hovering over it/on it
active - this is a link that is in the process of being
clicked

 a:link { color: white; background-color: black; textdecoration: none; border: 2px solid white; }
a:visited { color: white; background-color: black;
text-decoration: none; border: 2px solid white; }
a:hover { color: black; background-color: white;
text-decoration: none; border: 2px solid black; }

<html>
<head>
<style>
ul#l1 li{
margin: 10px 0px 0px 0px;
border-style:double;
border-color:red;
background-color:yellow;
width:100px;
list-style-type:none;
}
a:link { color: blue; background-color:
black; text-decoration: none; border: 2px
solid white; }
66

 a:visited { color: red; background-color:

black; text-decoration: none; border: 2px
solid white; }
a:hover { color: black; background-color:
white; text-decoration: none; border: 2px
solid black; }
</style>
</head>
67

68

69

Changing Text Color and

Background Color on Hover
The :hover pseudo-class lets you add interactivity
when users scroll over your navigation links
In this example, when the user hovers the mouse
over the link:
The text color changes to white (#fff)
The background color changes to bright blue
(#0033cc)

Web Design Principles 5th Ed.

70

ul#navlist a:hover {
color: #fff;
background-color: #0033cc;
font-weight: bold;
}

Web Design Principles 5th Ed.

71

Changing Background Images on

Hover
When the user hovers the pointer over a navigation
button, the button color changes

Web Design Principles 5th Ed.

72

Web Design Principles 5th Ed.

73

Underlining on Hover
You can use the hover pseudo-class to turn
underlining on when the user points to a link
a:hover {text-decoration: underline;}

Web Design Principles 5th Ed.

74

Web Design Principles 5th Ed.

75

Hyperlink types
There are three types of hyperlinks:1. Internal: Links to anchors in the current page.
2. It is necessary to mark the location with the help
of <a> tag using name attribute.
3. Then link with the help of href attribute followed by
# symbol.
4. <a href=#top>

<html>
<head>
<title>Delta engineering company</title>
<h1 align =center>Delta Engineering company pvt ltd</h1>
</head>
<body bgcolor="yellow" >
<hr align=left width=100% size=5 color=violet>
<div>
<p>
<a name="top">IDENTIFY METRICS CUSTOMERS
</p>
<p>
Functional Management:
</p></div>
<a href="#top">top</a>
</body></html>

Local
Links to the other pages within your domain or web
site.

<html>
<body>
<a href="list.html">link to a list</a>
<br>
<a href="frame.html">link to a frame</a>
<br>
<a href="img.html">link to an image</a>
</body>
</html>

Global links
Links to domains outside your web site.

<html>
<body>
<a href="list.html">link to a list</a>
<br>
<a href="frame.html">link to a frame</a>
<br>
<a href="img.html">link to an image</a>
<br>
<a href="http://www.google.com">link to Google</a>
</body>
</html>

Attributes of the body tag to change the default

color of the hyperlink
Link :Changes the default color of the hyperlink
Alink:Changes the default color of the active
hyperlink.
Vlink:Changes the default color of the visited
hyperlink.

Anchor tag
The <a> tag can be used in two ways:
To create a link to another document, by using the
href attribute
To create a bookmark inside a document, by using
the name attribute

HTML Links - The target Attribute

The target attribute specifies where to open the
linked document.
The example below will open the linked document in
a new browser window or a new tab:
<a href=" http://www.mu.ac.in " target="_blank">Visit
mumbaiuniversity</a>

Target
Value

Description

_blank

Opens the linked document in a new window or tab

_self

Opens the linked document in the same frame as it

was clicked (this is default)

_parent

Opens the linked document in the parent frame

_top

Opens the linked document in the full body of the

window

framename Opens the linked document in a named frame

Attribute of <A >tag

ACCESSKEY--An access key is a shortcut key a reader
can use to activate the hyperlink.
If you set the access key to the letter "C",
for example, Windows users can press shift +Alt+C on
their keyboards to activate the link.
CHARSET--Denotes what character encoding to use for
the linked document.

 HREF--Gives the URL of the Web resource to which the hyperlink

should point.
HREFLANG--Denotes the language context of the linked resource.
NAME--Specifies the name of the anchor being set up.

<html>
<body link="red" alink="green" vlink="cyan">
<a href="list.html" target="_blank" accesskey="A">link to a list</a>
<br>
<a href="frame.html" accesskey="B">link to a frame</a>
<br>
<a href="img.html" accesskey="C">link to an image</a>
<br>
<a href="http://www.google.com">link to Google</a>
<br>
<a href="html1.html" > <img src="koala.jpg"></a>
</body>
</html>

REL--Describes the nature of the

forward link.
Value

author
bookmark
help

Description
Links to an alternate version of the document (i.e. print
page, translated or mirror)
Links to the author of the document
Permanent URL used for bookmarking
Links to a help document

license

Links to copyright information for the document

next

The next document in a selection

nofollow

Links to an unendorsed document, like a paid link.

("nofollow" is used by Google, to specify that the Google
search spider should not follow that link)

alternate

noreferrer
prev

Specifies that the browser should not send a HTTP referer

header if the user follows the hyperlink
The previous document in a selection

<html>
<head>
<title>Write title of document.</title>
</head>
<body>
<p>rel attribute of anchor tag in HTML5.</p>
<a rel="nofollow" href="http://www.google.co.in/" >
Do not follow this link.</a><br>
<a rel="alternate" href=ass1.html"
hreflang="en">English version of document</a><br>
<a rel="next" href=frame.html">Open previous document</a
><br>
<a rel="prev" href=img.html">Open next document</a><br>
</body>
</html>

 TABINDEX--Specifies the link's position in the

document's tabbing order.
TARGET--Tells the browser into which frame the
linked document should be loaded.

Summary
Usable navigation is the result of working with the
power of hypertext and designing for your users
needs
Work from the users point of view
Make all areas of your Web site quickly accessible
Provide plenty of location cues
Use text-based navigation bars
Use CSS to build attractive horizontal and vertical
navigation bars using simple lists

Web Design Principles 5th Ed.

90

Summary
Use background colors, text colors, and graphics to
enhance navigation
Use the :hover pseudo-class to add interactivity

Web Design Principles 5th Ed.

91