Lab#10 navigation, links and hover rollovers
Transcript of Lab#10 navigation, links and hover rollovers
LAB#10 Navigation, Links
and Hover Rollovers322432 Web Design Technology
Menu
Navigation means?
Links
Navigation Bar = List of Links
Vertical Navigation Bar
Horizontal Navigation Bar
Navigation
เปนเหมอนปายบอกทางทจะท าใหผเขารบชมเวบของเรานนรวาจะไปยงจดใดของเพจตางๆในเวบของเรา
Navigation นนสามารถท าใหผทเขารบชมเวบเรานนสามารถไปไดถงทกๆเพจของเราในเวบนนได และสามารถทจะกลบมาทหนาหลกของเวบไดดวย ท าใหมความสะดวกในการ ลงค ไปยงหนาตางๆทเรามทงหมดไดท าใหไมมหนาเวบเพจทถกปลอยทงไวโดยไมมการเขาถง
Navigation นนแบงได 3 รปแบบดงน
เมนหลก (Main Menu) เมนเฉพาะกลม เชน Catalogs, Chapters เครองมอเสรม เชน Search Box, Image Map
Navigation ทด ?- หาเจอไดงาย- อานแลวเขาใจงาย- ดเปนระบบไมสบสน- มจ านวนทเหมาะสมไมมากเกนไป- มหลากหลายทางเลอก- มลงคกลบไปหนาหลกได
Links
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 สชมพ */
.linkbox a:active {color: #0000FF} /* selected link สน าเงน*/
<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
Example-2
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
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?
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>
Horizontal Navigation Bar
li { display:inline; }
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden; }
li { float:left; }
a {
display:block; width:60px;
background-color:#dddddd; }
Example3
ค ำสง LAB#10
จาก LAB#9 ใหนกศกษาสราง Navigation bar และมการเชอมโยงลงคภายในเวบ ออกแบบใหสวยงามสามารถใชรปภาพตกแตงเพมเตมได ใหคอมเมนโคดทเลอกใชมาดวยคะแนนเตม 10 คะแนน (คะแนนความเขาใจในเนอหา, ความสวยงามความยากงายของเทคนคทเลอกใช)สงงานในชวโมง