navigation and linking

7/23/2019 Navigation and Linking

1/91

Web Design Principles

5thEdition

Chapter NinePlanning Site Navigation


2/91

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 horiontal navigation bars

Build vertical navigation bars

Use background color and graphics to enhance

navigation

Create hover rollovers

2Web Design Principles 5thEd.


3/91

Creating Usable Navigation


4/91

4


!rovide enough location information to let the

user answer the following navigation

"uestions:

Where am #$

Where can # go$

%ow do # get there$

%ow do # get back to where # started$

Web Design Principles 5thEd.


5/91

5


&o answer these "uestions, provide the

following information:

'et users know what page they are on and

what type of content they are viewing

'et users know where they are in relation to

the rest of the site



6/91

6


!rovide consistent, easy-to-understand links

!rovide an alternative to the browser(s Back

button that lets users return to their starting

point



7/91



8/91

!

"i#iting $n%or#ation Overload

Create manageable information segments

Control page length

Use hypertext to connect facts, relationships,

and concepts



9/91

&'ilding Navigation (tr'ct'res


10/91

)*

&'ilding +e,t-&ased Navigation

&ext-based linking is often the most effective

way to provide navigation on your site

)lways provide a text-based set of links as an

alternate means of navigation



11/91

))

(a#ple +e,t Navigation

&o main pages *%ome, &able of Contents,

#ndex+

&o the top of each chapter

Within the &able of Contents page to chapter

descriptions rom &able of Contents page to specific topics

within each chapter

&he following screens demonstrate a

variety of text-based navigation options:



12/91

)2

(a#ple +e,t Navigation

Between the previous and next chapter

Within chapter pages to each topic

&o related information by using contextual

links

&he following screens demonstrate a

variety of text-based navigation options

*continued+:



13/91

)Web Design Principles 5thEd.


14/91

)4

"in/ing 0ith a +e,t Navigation &ar

&he &able of Contents page must link to the other

main pages of the Web site, allowing users to go

directly to the pages they want

)chieve this by adding a simple text-basednavigation bar



15/91

)5Web Design Principles 5thEd.


16/91

)6

"in/ing to Chapter Pages

&he &able of Contents page needs links to the

individual chapter files in the Web site



17/91



18/91

)!

1dding $nternal "in/ing

)dd a /back to top0 link that lets users return to the

top of the page



19/91



20/91

2*

1dding an $nternal Navigation &ar

1ou can use additional fragment identifiers in the

table of contents to add more user-focused

navigation choices



21/91

2)Web Design Principles 5thEd.


22/91

22

"in/ing to E,ternal Doc'#ent

3rag#ents

1ou can let users 2ump from the table of contents to

the exact topic they want within each chapter

&his re"uires adding code to both the &able of

Contents page and each individual chapter page



23/91



24/91

24

1dding Page +'rners

1ou can enhance the functions of the navigation

bar in the chapter pages by adding page-turner

links

!age turners let you move either to the previous ornext page in the collection



25/91



26/91



27/91

1dding Conte,t'al "in/ing


28/91

2!

1dding Conte,t'al "in/ing

Contextual linksallow users to 2ump to related

ideas or cross-references by clicking the word

or item that interests them

&hese are links that you can embed directly inthe flow of your content by choosing the key

terms and concepts you anticipate your users

will want to follow



29/91



30/91

Using raphics %or Navigation and

"in/ing


31/91

Using raphics %or Navigation and

"in/ing

#f you use graphics for navigation, use the same

graphics consistently throughout your site

&hese provide predictable navigation cues for the

user 3eusing graphics minimies download time



32/91

Using the alt 1ttrib'te

!rovide alternate text-based links in addition to

graphical links

#nclude alt attributes in your 4img5 tags

&he alt attribute is important to accessibility



33/91



34/91

Using $cons %or Navigation

Be careful with navigation icons

6ot everyone agrees on their meaning

7any Web sites include descriptive text within

navigation icons



35/91

Using "ists %or Navigation


36/91

Using "ists %or Navigation

&he %&7' list elements are the preferred elementfor containing navigation links

'ists provide an easy way to create navigation that

can be styled with C88

Home

History

How it Works

Balloon lubs

!estivals

Where to ide

!$%



37/91



38/91

e#oving De%a'lt Padding and

argin

7ost lists have built-in padding or margin values

When creating navigation lists, you will need to

remove this default spacing

8et the margin padding properties to ero for theU' element as shown

ul&navlist '

(addin)* +,

mar)in* +,

-

!Web Design Principles 5thEd.


39/91

e#oving De%a'lt &'llets

%&7' lists come with built-in bullets

When creating lists for navigation, you can remove

the default bullets

Use the list-style-type property as shownul&navlist '

(addin)left* +,

mar)inleft* +,

liststylety(e* none,

-



40/91

4*Web Design Principles 5thEd.


41/91

&'ilding 7ori8ontal Navigation

&ars


42/91

7ori8ontal Navigation

#n a standard list, each item is on its own line

&o create a horiontal navigation bar using the list,

you need to set the list item display setting to

in-line &his allows the list to display on one line

ul&navlist li'

dis(lay* inline,

-



43/91



44/91

C'sto#i8ing the 7ori8ontal

Navigation &ar

1ou can customie the basic list navigation with

C88 properties

or example, you can:

)dd borders, background colors, or images

8et space between buttons



45/91



46/91

Controlling Navigation &ar Width

%oriontal navigation bars will wrap with the

browser

&o prevent this, set a width for your navigation list

ul&navlist '(addin)* +,

mar)in* +(x +(x +(x +(x,

liststylety(e* none,

width* 0++(x,

-



47/91

4


48/91

4html5

4head5

4style5

ul9l li;

display: inline?top?@$DEN+$3A E+$C( CU(+OE(

4?p5

4p5

unctional 7anagement: 4?p54?div5

4a href@A9topA5top4?a5

4?body54?html5


78/91

'ocal

'inks to the other pages within your domain or web

site. 4html5

4body5

4a [email protected] to a list4?a5

4br5

4a [email protected] to a frame4?a5

4br5

4a [email protected] to an image4?a5

4?body5

4?html5


79/91

Ilobal links

'inks to domains outside your web site. 4html5

4body5

4a [email protected] to a list4?a5

4br5 4a [email protected] to a frame4?a5

4br5

4a [email protected] to an image4?a5

4br5

4a href@Ahttp:??www.google.comA5link to Ioogle4?a5

4?body5

4?html5

)tt ib t f th b d t t h th d f lt


80/91

)ttributes of the body tag to change the default

color of the hyperlink

'ink :Changes the default color of the hyperlink

)link:Changes the default color of the active

hyperlink.

Jlink:Changes the default color of the visitedhyperlink.


81/91

)nchor tag

&he 4a5 tag can be used in two ways:

&o create a link to another document, by using the

href attribute

&o create a bookmark inside a document, by usingthe name attribute

7+" "in/s +he target 1ttrib'te


82/91

7+" "in/s - +he target 1ttrib'te

&he target attribute specifies where to open the

linked document.

&he example below will open the linked document in

a new browser window or a new tab: 4a href@A http:??www.mu.ac.in A target@AKblankA5Jisit

mumbaiuniversity4?a5


83/91

&arget

Jalue Eescription

Kblank Lpens the linked document in a new window or tab

KselfLpens the linked document in the same frame as it

was clicked *this is default+Kparent Lpens the linked document in the parent frame

KtopLpens the linked document in the full body of thewindow

framename Lpens the linked document in a named frame


84/91

)ttribute of 4) 5tag

)CCF88MF1--)n access key is a shortcut key a reader

can use to activate the hyperlink.

#f you set the access key to the letter ACA,

for example, Windows users can press shift N)ltNC on

their keyboards to activate the link.

C%)38F&--Eenotes what character encoding to use for

the linked document.


85/91

%3F--Iives the U3' of the Web resource to which the hyperlink

should point.

%3F')6I--Eenotes the language context of the linked resource.

6)7F--8pecifies the name of the anchor being set up.


86/91

=ht#l@

=bod: lin/>?red? alin/>?green? vlin/>?c:an?@

=a hre%>?list.ht#l? target>?Bblan/? access/e:>?1?@lin/ to a list=a@

=br@

=a hre%>?%ra#e.ht#l? access/e:>?&?@lin/ to a %ra#e=a@

=br@

=a hre%>?i#g.ht#l? access/e:>?C?@lin/ to an i#age=a@

=br@

=a hre%>?http000.google.co#?@lin/ to oogle=a@

=br@

=a hre%>?ht#l).ht#l? @ =i#g src>?/oala.jpg?@=a@

=bod:@

=ht#l@

3F'--Eescribes the nature of the


87/91

forward link.

Jalue Eescription

alternate'inks to an alternate version of the document *i.e. printpage, translated or mirror+

author 'inks to the author of the document

bookmark !ermanent U3' used for bookmarking

help 'inks to a help document

license 'inks to copyright information for the document

next &he next document in a selection

nofollow'inks to an unendorsed document, like a paid link.*AnofollowA is used by Ioogle, to specify that the Ioogle

search spider should not follow that link+

noreferrer8pecifies that the browser should not send a %&&! refererheader if the user follows the hyperlink

prev &he previous document in a selection


88/91

=ht#l@

=head@

=title@Write title o% doc'#ent.=title@

=head@

=bod:@

=p@rel attrib'te o% anchor tag in 7+"5.=p@

=a rel>?no%ollo0? hre%>?http000.google.co.in? @

Do not %ollo0 this lin/.=a@=br@ =a rel>?alternate? hre%>ass).ht#l?

hre%lang>?en?@English version o% doc'#ent=a@=br@

=a rel>?ne,t? hre%>%ra#e.ht#l?@Open previo's doc'#ent=a

@=br@

=a rel>?prev? hre%>i#g.ht#l?@Open ne,t doc'#ent=a@=br@

=bod:@

=ht#l@


89/91

&)B#6EFO--8pecifies the linkPs position in the

documentPs tabbing order.

&)3IF&--&ells the browser into which frame the

linked document should be loaded.


90/91

('##ar:

Usable navigation is the result of working with the

power of hypertext and designing for your users(

needs

Work from the user(s point of view

7ake all areas of your Web site "uickly accessible

!rovide plenty of location cues

Use text-based navigation bars

Use C88 to build attractive horiontal and verticalnavigation bars using simple lists

*Web Design Principles 5th

Ed.


91/91

('##ar:

Use background colors, text colors, and graphics to

enhance navigation

Use the :hover pseudo-class to add interactivity

navigation and linking

Documents