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 คะแนน (คะแนนความเขาใจในเนอหา, ความสวยงามความยากงายของเทคนคทเลอกใช)สงงานในชวโมง