Svaka web stranica ima navigaciju da bi korisnici pronašli sav sadržaj koji im je namijenjen.Navigacija je lista(izbor) svih linkova do određenog sadržaja odnosno ostalih stranica u cjelini.
Svaka web stranica ima svoju naslovnu stranicu - index datoteku.Najviše korištene ekstenzije su: .html, .htm, te .php no to naravno ovisi o namjeni i mogućnostima koja stranica mora imati.
Prvo što vam treba je novi folder - glavni direktoriji vaše web stranice.
Možete ga nazvati bilo kako npr. css-nav,web,htdocs...
Pretpostavimo da ste nazvali direktoriji css-nav.Unutar tog direktorija napravite prvo index.html datoteku:
<!DOCTYPE html> <!-- HTML datoteka -->
<HTML>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css"> <!-- CSS datoteka -->
<body>
<title>Index - Naslovna</title> <!-- Ovo je naslovna stranica -->
<center><h2>Naslovna stranica</h2></center>
<div id="navbar">
<ul>
<li><a class="active" href="index.html">Naslovna</a></li>
<li><a href="news.html">Novosti</a></li>
<li><a href="contact.html">Kontakt</a></li>
<li><a href="about.html">O nama</a></li>
</ul>
</div>
<div id="content">
Ovo je tekst odnosno sadržaj naslovne stranice.Stavili smo ovaj tekst ispod navigacije.
Ako želite otići na drugu stranicu jednostavno pritisnite na likove iznad.
</div>
</body>
</head>
</HTML>Kada spremite datoteku te ju otvorite primjetiti ćete da nam fali CSS datoteka.U index.html datoteci smo već definirali ime datoteke:
<link rel="stylesheet" href="index.css"> <!-- CSS datoteka -->
Sada ćemo napraviti tu datoteku te u njoj definirati izgled(stil) navigacije te samog sadržaja.
Ovoga puta ćemo preko CSS-a postaviti i poziciju tih elemenata - navbar i content.
Sada dakle moramo napraviti index.css datoteku u direktoriju css-nav:
/* Uklanjamo točke sa liste te centriramo navigaciju */
#navbar ul {
list-style-type: none;
overflow:hidden;
margin:auto;
width:50%;
}
/* Želimo da navigacija bude horizontalna */
#navbar li {
float:left;
padding-right:2px;
}
/* Prikazujemo linkove kao dugmad */
#navbar li a {
display:block;
text-decoration: none;
background-color:darkorange;
padding:20px 22px;
color:white;
}
/* Boja aktivnog linka - trenutne stranice */
#navbar li a.active {
color:black;
}
/* Kada označimo dugmad mijenjamo im boju */
#navbar li a:hover {
background-color:orange;
}
/* Okvir za sadržaj ispod navigacije */
#content {
margin: auto;
background-color:dimgray;
padding: 20px;
width:50%;
text-align:center;
color:white;
}Kada spremimo datoteku naša naslovna stranica ima navigaciju:
Sada nam preostaje da napravimo i ostale stranice kao što su novosti - news.html:
<!DOCTYPE html> <!-- HTML datoteka -->
<HTML>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css"> <!-- CSS datoteka -->
<body>
<title>Novosti</title> <!-- Ovo je naslovna stranica -->
<center><h2>Novosti</h2></center>
<div id="navbar">
<ul>
<li><a href="index.html">Naslovna</a></li>
<li><a class="active" href="news.html">Novosti</a></li>
<li><a href="contact.html">Kontakt</a></li>
<li><a href="about.html">O nama</a></li>
</ul>
</div>
<div id="content">
Ovo je tekst odnosno sadržaj stranice s novostima.Stavili smo ovaj tekst ispod navigacije.
Ako želite otići na drugu stranicu jednostavno pritisnite na linkove iznad.
</div>
</body>
</head>
</HTML>Gotovo ista stranica sa malo drukačijim tekstom no promijenili smo aktivni link(dugme):
<li><a class="active" href="news.html">Novosti</a></li>Na isti način možemo stvoriti i ostale stranice(contact.html i about.html).Trebamo samo promjeniti aktivni link te sam sadržaj na stranici naravno.
Primjedbe
Objavi komentar