Navigation and Link

19
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

Transcript of Navigation and Link

Page 1: Navigation and Link

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

Page 2: Navigation and Link

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

Page 3: Navigation and Link

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

Page 4: Navigation and Link

“ 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

Page 5: Navigation and Link

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

Page 6: Navigation and Link

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

Page 7: Navigation and Link

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

Page 8: Navigation and Link

GOOD DESIGN NAVIGATION > EASY TO USE

WDS CS KKU

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

EASY TO USE

Web Design Technology - 2015 8

Page 9: Navigation and Link

GOOD DESIGN NAVIGATION > LEARNABILTY AND SIMPLE

WDS CS KKU

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

LEARNABILITY AND SIMPLE

Web Design Technology - 2015 9

Page 10: Navigation and Link

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

Page 11: Navigation and Link

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

Page 12: Navigation and Link

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

Page 13: Navigation and Link

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

Page 14: Navigation and Link

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

Page 15: Navigation and Link

HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE

Horizontal Navigation Bar

li { display:inline; }

WDS CS KKU

Web Design Technology - 2015 15

Page 16: Navigation and Link

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

Page 17: Navigation and Link

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

Page 18: Navigation and Link

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

Page 19: Navigation and Link

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