navigation and link
TRANSCRIPT
![Page 1: Navigation and Link](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/1.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/2.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/3.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/4.jpg)
“ 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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/5.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/6.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/7.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/8.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/9.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/10.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/11.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/12.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/13.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/14.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/15.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/16.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/17.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/18.jpg)
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](https://reader031.vdocuments.site/reader031/viewer/2022030217/5886eb6f1a28abba528b5e97/html5/thumbnails/19.jpg)
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