Lab#10 navigation, links and hover rollovers
-
Upload
yaowaluck-promdee -
Category
Education
-
view
431 -
download
2
description
Transcript of Lab#10 navigation, links and hover rollovers
![Page 1: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/1.jpg)
LAB#10 Navigation, Links
and Hover Rollovers 322432 Web Design Technology
By Yaowaluck Promdee, Sumonta Kasemvilas
![Page 2: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/2.jpg)
Menu
Navigation means?
Links
Navigation Bar = List of Links
Vertical Navigation Bar
Horizontal Navigation Bar
![Page 3: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/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.
![Page 4: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/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
![Page 5: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/5.jpg)
Type of Navigation
Main Menu
Secondary
Example Catalogs, Chapters
Help menu
Example Search Box, Image Map
![Page 6: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/6.jpg)
Good Navigation ?
- Easy to use
- Learnability
- Simple, User friendly
- Mega Drop-Down
- Where You Are
- Back to homepage
![Page 7: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/7.jpg)
Designing A Winning Navigation Menu: Ideas And Inspirations
By Tomas Laurinavicius. Filed in Web Design
From : http://www.hongkiat.com/blog/navigation-design-ideas-inspiration/
Information Architecture
Navigation planning should start
with information architecture. It
is vital to sit down and
brainstorm about a website’s
information architecture.
![Page 8: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/8.jpg)
Using User-Enabled Technologies
Avoid using Flash, JavaScript, jQuery or anything else that risk inhibiting access to your website navigation in building
your navigation bar, or at least make sure they are able to degrade gracefully.
http://www.hongkiat.com/blog/css-javascript-fallback-methods/
Example
x Rounded Corners With Images
x JQuery Dropdown Menu System
X Targeted Internet Explorer Styles
![Page 9: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/9.jpg)
Use Simple, User-Friendly Terms
It is better to use simple, obvious and terms that are easy
to figure out than to keep to industry-only terms for your navigation menu.
![Page 10: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/10.jpg)
Indicate Where You Are
It is crucial to let the user know where he is at all times. You
can do this by changing the link’s background, color of the
page name or turn the text bold in the navigation menu to make it different from others. Breadcrumb navigation
![Page 11: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/11.jpg)
Use Web Conventions
It is all about easy-to-use and intuitive website navigation. Web
conventions make it a lot easier for designers to work around their
designs. Most users would click on the website logo to get back to the homepage, so design your logo to do that.
You can learn more about web conventions here:
• 10 Web Design Conventions
• Don’t Reinvent the Web Design Wheel
• Design With Web Conventions
![Page 12: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/12.jpg)
![Page 13: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/13.jpg)
Links
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
![Page 14: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/14.jpg)
Example-1 /*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 ………………*/
![Page 15: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/15.jpg)
<a href="css_chapter01.html">Chapter1</a>
<a href="css_chapter02.html">Chapter2</a>
<a href="css_chapter03.html">Chapter3</a>
<a href="css_chapter04.html">Chapter4</a>
<a href="css_chapter05.html">Chapter5</a>
Ex.1- HTML
![Page 16: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/16.jpg)
Example-2
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
![Page 17: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/17.jpg)
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; }
Show?
![Page 18: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/18.jpg)
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>
![Page 19: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/19.jpg)
Horizontal Navigation Bar
li { display:inline; }
![Page 20: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/20.jpg)
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden; }
li { float:left; }
a {
display:block; width:60px;
background-color:#dddddd; }
Example3
![Page 21: Lab#10 navigation, links and hover rollovers](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fd89d1a28ab57368b4627/html5/thumbnails/21.jpg)
Assignment LAB#10
- Creating your project “Science Web”
followed your site map 4 html pages
Example
About us, Programs, Service, Contact us