NAVIGATION, LINKS AND HOVER ROLLOVERS

322432 Web Design Technology

By Yaowaluck Promdee, Dr.Sumonta Kasemvilas

WDS CS KKU

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

Web Design Technology - 2015 1

Meaning of Navigation

Links Navigation Bar = List of Links

Vertical Navigation Bar

Horizontal Navigation Bar

WDS CS KKU

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

INTRODUCTION

Web Design Technology - 2015 2

NAVIGATION • Navigation is a section of website or online page intended to aid visitors in traveling through the online document. • These sections of the webpage will include links to the most important sections of the site.

WDS CS KKU

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

Web Design Technology - 2015 3

“ The navigation menu on the website is like a road on a street or a level directory in a shopping mall. You can’t reach your destination without first knowing where you are.” By Tomas Laurivicius

WDS CS KKU

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

Web Design Technology - 2015 4

TYPE OF NAVIGATION •  Main Menu •  Secondary Example Catalogs, Chapters •  Help menu Example Search Box, Image Map

WDS CS KKU

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

Web Design Technology - 2015 5

GOOD DESIGN NAVIGATION •  Easy to use •  Learnability •  Simple, User friendly •  Mega Drop-Down •  Where You Are •  Back to homepage

WDS CS KKU

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

Web Design Technology - 2015 6

GOOD DESIGN NAVIGATION > EASY TO USE

WDS CS KKU

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

EASY TO USE

Navigation should be a prominent element of your design.

Web Design Technology - 2015 7

GOOD DESIGN NAVIGATION > EASY TO USE

WDS CS KKU

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

EASY TO USE

Web Design Technology - 2015 8

GOOD DESIGN NAVIGATION > LEARNABILTY AND SIMPLE

WDS CS KKU

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

LEARNABILITY AND SIMPLE

Web Design Technology - 2015 9

GOOD DESIGN NAVIGATION > WHERE YOU ARE

WDS CS KKU

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

WHERE YOU ARE

Breadcrumb Navigation

Web Design Technology - 2015 10

GOOD DESIGN NAVIGATION > WHERE YOU ARE > IN THE PROCESS

WDS CS KKU

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

WHERE YOU ARE

Web Design Technology - 2015 11

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

LINKS

WDS CS KKU

a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouse over it a:active - a link the moment it is clicked

Web Design Technology - 2015 12

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

Navigation Bar = List of Links <ul> <li><a href=“#home">Home</a></li> <li><a href=”#news">News</a></li> <li><a href=”#contact">Contact</a></li> <li><a href=”#about">About</a></li> </ul>

ul { list-style-type:none; margin:0; padding:0; } Output?

WDS CS KKU

Web Design Technology - 2015 13

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

Vertical Navigation Bar a { display:block; width:60px; }

/* HTML */ <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul>

WDS CS KKU

Web Design Technology - 2015 14

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

Horizontal Navigation Bar

li { display:inline; }

WDS CS KKU

Web Design Technology - 2015 15

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

/*CSS*/ .linkbox a:link {color: #FF0000} /* unvisited link ………..*/ .linkbox a:visited {color: #00FF00} /* visited link ……………..*/ .linkbox a:hover {color: #FF00FF} /* mouse over link pink color */ .linkbox a:active {color: #0000FF} /* selected link ………………*/

WDS CS KKU

EXAMPLE1

Web Design Technology - 2015 16

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

EXAMPLE 2

a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}

WDS CS KKU

Web Design Technology - 2015 17

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a { display:block; width:60px; background-color:#dddddd; }

EXAMPLE3

WDS CS KKU

Web Design Technology - 2015 18

ASSIGNMENT#10

WDS CS KKU

Creating your project “ Personal Blog” followed your site at least 4 html pages Example Home, About me, Lab, Lesson, and etc.

Web Design Technology - 2015 19