Navigation and Link
•
0 likes•3,482 views
What's a navigation?, how to create a navigation bar, Good design of navigation, Links and hover rollover. Navigation design with CSS and HTML.
Report
Share
Navigation and Link
- 1. 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
- 2. 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
- 3. 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
- 4. “ 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
- 5. 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
- 6. 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
- 7. 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
- 8. GOOD DESIGN NAVIGATION > EASY TO USE WDS CS KKU HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE EASY TO USE Web Design Technology - 2015 8
- 9. GOOD DESIGN NAVIGATION > LEARNABILTY AND SIMPLE WDS CS KKU HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE LEARNABILITY AND SIMPLE Web Design Technology - 2015 9
- 10. 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
- 11. 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
- 12. 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
- 13. 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
- 14. 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
- 15. HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE Horizontal Navigation Bar li { display:inline; } WDS CS KKU Web Design Technology - 2015 15
- 16. 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
- 17. 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
- 18. 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
- 19. 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