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

Navigation and Link

  • 1.
    NAVIGATION, LINKS AND HOVERROLLOVERS 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 NavigationBar = 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 isa 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 navigationmenu 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 NIVAGATIONTYPE 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 NIVAGATIONTYPE 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 NIVAGATIONTYPE 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 NIVAGATIONTYPE DESIGN LINK EXAMPLE Horizontal Navigation Bar li { display:inline; } WDS CS KKU Web Design Technology - 2015 15
  • 16.
    HOME INTRO NIVAGATIONTYPE 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 NIVAGATIONTYPE 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 NIVAGATIONTYPE 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 yourproject “ Personal Blog” followed your site at least 4 html pages Example Home, About me, Lab, Lesson, and etc. Web Design Technology - 2015 19