[HTML/CSS][Tutorijal]Kreiranje navigacije

Započeo Schwarz, Avgust 13, 2014, 23:04:11 POSLE PODNE

prethodna tema - sledeća tema

0 članova i 1 gost pregledaju ovu temu.

Tutorijal:Kako kreirati navigaciju na vas web site

Pozdrav svima nisam znao sta da radim pa sam resio da napisem jedan tutorijal da ozivim malo ovaj podforum, vidim da odavno nije napisano nista novo.
Kao sta kaze i sam naslov danas cu vam objasniti kako napraviti navigacija ili meni na web stranu.

Evo kako bi izgledala nasa navigacija:

1.Osnovne stvari u HTML delu
Prvo sto cemo uraditi je da kreiramo jedan file u koj cemo dodavati HTML deo. Prvo kreirajte jedna papka i u nje napravite jedan prazan text file i zacuvajte ga kao Index.html
Nakon sta napravite jedan prazan text file dodajemo neke osnovene elemente HTML dokumenta i njegove deklaracije:
Da postavimo te osnovne elemente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--Ovo pretstavja osnova deklaracija HTML koda, ovo sluzi da bi web pretrazivac uocio za koj programski jezik se radi-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>

Nakon sto dodamo osnovne elemente i deklaracije, u Head tagu dodajemo naslov nase web strane i link za povzrzavanje CSS dela sa HTML dela.
Naslov dodajemo sa <title> tagu.
<title>Kako kreirati navigaciju</title>
Nakon sta smo dodali naslov nase strane dodajemo link za povrzavanje CSS i HTML dela.
<link rel="stylesheet" href="style.css" />
2.Kreiranje Menija
Nakon sta smo postavili neke osnovne stvari na redu je deo gde kreiramo meni. Taj deo cemo staviti u tag BODY. Jer radimo sa eksteren css deo gde se kreira meni ili navigacija stavicemo u div da bude preglednije i laksije.
U BODY tagu kreiramo jedan DIV on se kreira na sledeci nacin <div id="navigacija"> Dali smo div-u id navigacija sta ni je potrebno za CSS deo.
Nakon sto kreiramo div sledeco za kreiranje su linkove u vidu liste. Linkove i liste kreiramo na sledeci nacin <a href="link do strane"><li>Text</li></a> Ovde koristimo <a> i <li> tagove.
Ja cu sad preskociti da vam objasnavam ceo deo gde stavjamo gde kreiramo liste i dodajemo linkove.
Evo vam deo kako treba da izgleda taj deo, naravno ako vi zelite mozete da dodate vise opcije na listu.

<div id="navigacija">
<a href="www.link.com"><li>Pocetna</li></a>
<a href="www.link.com"><li>O nama</li></a>
<a href="www.link.com"><li>Usluge</li></a>
<a href="www.link.com"><li>Kontakt</li></a>
</div>

Na kraju zatvaramo DIV sa tagom </div>
To bi bilo sve sa HTML deo oko kreiranje navigacije.
Celi HTML del izgleda ovako:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML & CSS Navigacija</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="navigacija">
<a href="www.link.com"><li>Pocetna</li></a>
<a href="www.link.com"><li>O nama</li></a>
<a href="www.link.com"><li>Usluge</li></a>
<a href="www.link.com"><li>Kontakt</li></a>
</div>
</body>
</html>

3.CSS
Da bi navigacija bila ono sto je potreban je CSS i njegova mogucnost stiliziranja.
Da zapocnemo:
Prvo sta treba da uradimo da kreiramo jedan prazan text file u istu papku gde je Index.html style.css
Onda odredujemo neke osnovne stvari kako bi trebala izgledati navigacija.
#navigacija {
width: 500px; /* dužina menija */
height: 50px; /* visina menija */
background-color: #00FFFF; /* kod za odreÄ'enu nijansu plave boje */
}

Tu odredujemo duzina visina navigacije i pozadinu navigacije.
#navigacija a {
font-size: 15px; /* veličina teksta */
color: #FF7F50; /* kod za odreÄ'enu nijansu narandzaste boje */
}

U ovaj deo odredujemo velicina teksta i boja teksta sta stoji u navigaciju.
#navigacija a li {
float: left; /* svi elementi se reÄ'aju jedan do drugog, po levoj strani */
width: 125px; /* dužina elementa */
height: 35px; /* Å¡irina elementa */
list-style: none; /* uklonjene tačkice */
padding-top: 15px; /* sadržaj pomeren 15 piksela od gornje ivice unutar<ul> i <li>taga. */
text-align: center; /* centralno horizontalno poravnanje */

Ovde uredjujemo sve elemente navigacije kao sta su duzina poravnanje i ostalo.
#navigacija a li:hover {
background-color: #002F2F; /* odreÄ'ena nijansa tamno plave boje */
}
Ovaj del je kad prodjes sa mis na neki element iz navigacije da mu postavi naka boja.
To bi bilo sve i CSS del sve to zajedno izgleda ovako.
#navigacija {
width: 500px; /* dužina menija */
height: 50px; /* visina menija */
background-color: #00FFFF; /* kod za odreÄ'enu nijansu plave boje */
}
#navigacija a {
font-size: 15px; /* veličina teksta */
color: #FF7F50; /* kod za odreÄ'enu nijansu narandzaste boje */
}
#navigacija a li {
float: left; /* svi elementi se reÄ'aju jedan do drugog, po levoj strani */
width: 125px; /* dužina elementa */
height: 35px; /* Å¡irina elementa */
list-style: none; /* uklonjene tačkice */
padding-top: 15px; /* sadržaj pomeren 15 piksela od gornje ivice unutar<ul> i <li>taga. */
text-align: center; /* centralno horizontalno poravnanje */
}
#navigacija a li:hover {
background-color: #002F2F; /* odreÄ'ena nijansa tamno plave boje */
}



Ukoliko nije vi nesta jasno mozete da skinete ceo paket i pogledate: DOWNLOAD

!!Ovaj tutorijal nije namenjen absolutne pocetnike u HTML/CSS, pre da radite ovo preporucijem vi da pogledate ovaj tutorijal:CLICK
Ukoliko imate neku zabelesku na ovaj tutorijal slobodno recite ja sam pocetnik u ovo pa mozno je da pravim neke greske i vi ste tu da mi pomognete da ih ispravim.
©Schwarz
Poslednja Izmena: Avgust 16, 2014, 20:28:36 POSLE PODNE od Schwarz

Obogati jos malo pa cu je staviti na sticky, inace je dobro napisano. Mozda je trebalo jos malo objasnjenja s obzirom da je za pocetnike. Mnogi delovi koda su ubaceni, a nisu objasnjeni. U sustini videce sve kao graf. prikaz, ali trebalo bi da im se malo objasni.
Sredi to i bice sticky..

[FS] Bank Sistem
[TuT] Array Sistem (Napredna)


"Pa krenite na mene i provesce te se super ko kapetan Kuka kada levom brise dupe"

www.denis-lapi.com

Ok objasnicu u toku dana malo HTML del, napomenuo sam ja da nije ovo za absolutne pocetnike.

Citat: Schwarz poslato Avgust 14, 2014, 06:03:11 PRE PODNE
Ok objasnicu u toku dana malo HTML del, napomenuo sam ja da nije ovo za absolutne pocetnike.
Sredi jos malo i stavicu sticky. Inace, hteo bih da te pohvalim zbog jezika, s obzirom da si iz Makedonije, koliko se secam (y) :D

[FS] Bank Sistem
[TuT] Array Sistem (Napredna)


"Pa krenite na mene i provesce te se super ko kapetan Kuka kada levom brise dupe"

www.denis-lapi.com

BUMP! Autor je editovao temu, doradio je kako bi bila laksa za citanje i ucenje. S toga, ide sticky

[FS] Bank Sistem
[TuT] Array Sistem (Napredna)


"Pa krenite na mene i provesce te se super ko kapetan Kuka kada levom brise dupe"

www.denis-lapi.com