- bolje odvajanje designa od sadržaja
- jednostavniji i fleksibilniji kod
Ipak, moramo napomenuti, ovom je početnicima malo teže ovladati, no nije i nemoguće. Cijeli koncept ćemo objasniti na primjeru, zajednički ćemo složiti stranicu od nule. Da biste mogli pratiti postupak, skinite si potrebne datoteke i krenimo!
Početak rada
Cilj nam je napraviti stranicu koja će izgledati otprilike ovako. To je predložak kojeg obično prethodno napravimo u Photoshopu ili Fireworksu. Već pri kreiranju predloška treba malo razmišljati kako rasporediti elemente stranice kako bi smo stvarno i mogli realizirati zamišljenu strukturu i dobiti što jednostavniji kod. Pri tome najviše pomaže iskustvo, ali evo i malog recepta: elemente međusobno poravnajte, zamislite što veća područja u koja ćete složiti pojedine elemente tako da "taman štimaju".
Obično u tom programu i izrežemo manje komade slika koji će nam biti potrebni za slaganje u HTMLu.
Ti komadi su ovaj put već izrezani, datoteke koje ste skinuli raspakirajte u novu mapu i nazovite je proba. U toj mapi napravite novu mapu slike i u nju premjestite sve skinute slike. U Dreamweaveru napravite novi dokument i snimite ga pod imenom proba.html u mapu proba. Kad smo to zgotovili spremni smo za ozbiljni rad.
Zadavanje div tagova
Prvo ćemo zadati osnovne div tagove koji definiraju najvažnija područja stranice. To je bolje obaviti u pogledu koda (Code view) pa se prebacite u njega.Prvo ćemo zadati vanjski tag koji obuhvaća sav sadržaj. kliknemo na izbornik Insert > Layout Objects > Div Tag. Pojavit će se dijalog u kojemu jedino u polje ID upišemo wrapper i potvrdimo. Kao rezultat bi se trebao pojaviti slijedeći HTML kod:
Obrišemo sav tekst između početka i završetka div taga i postavimo pokazivač unutra. Ubacimo još pet div tagova i zadamo im redom ove id oznake: header, hormenu, vertmenu, content, footer.
Nakon što ste sve to napravili unutar body tagova bi ste trebali imati slijedeći sadržaj:
<div id="header">Content for id "header" Goes Here</div>
<div id="hormenu">Content for id "hormenu" Goes Here</div>
<div id="vertmenu">Content for id "vertmenu" Goes Here</div>
<div id="content">Content for id "content" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
Dreamweaver je u svaki od novih tagova ubacio tekst "Content for..." jer bi prazan div tag imao visinu 0 piksela i bilo bi nemoguće s njim raditi u pogledu Design.
Ako je do sad sve u redu, prebacite se u pogled Design i spremite dokument.
Ubacivanje sadržaja
U div tagu header obrišemo postojeći tekst i ubacimo sliku zaglavlje1.jpg.
U div tagu hormenu postojeći tekst zamijenimo sa "HOME POLAZNICI TUTORIJALI KONTAKT".
Odaberemo jednu po jednu od tih riječi i za svaku zadamo link (kad je riječ odabrana u panelu Properties u polju link upišemo "#". To nije pravi link, no omogućit će nam da provjerimo kako vizualno funkcionira taj izbornik. Ispred svih linkova (ovo je važno, na prvi pogled logičnije bi bilo iza linkova) ubacimo sliku hormenuext.png. Za kontrolu možemo pogledati kako izgleda taj dio HTML koda:
<img src="/slike/hormenuext.png" width="125" height="16" />
<a href="#">HOME</a>
<a href="#">POLAZNICI</a>
<a href="#">TUTORIJALI</a>
<a href="#">KONTAKT</a> </div>
U tagu vertmenu obrišemo postojeći tekst i ubacimo listu s grafičkim oznakama (najlakše preko properties panela > Unordered List). Od svake stavke u listi napravimo link. Kod za taj tag bi trebao biti slijedeći:
<ul>
<li><a href="#">osnovno u CSSu</a> </li>
<li><a href="#">pozicioniranje CSSom</a></li>
<li><a href="#">stiliziranje teksta</a></li>
<li><a href="#">zaključak </a></li>
</ul>
</div>
U tagu content obršemo postojeći sadržaj i ubacimo tekst (kopirajte prva dva odlomka sa stranice www.lipsum.com/feed/html). U tekstu formirajte odlomke (sav tekst da je unutar <p> tagova). Prije samog teksta ubacite naslov "Lorem ipsum" veličine <h1>. Kliknite ispred prvog slova teksta i ubacite sliku slika1.jpg.
U tag footer umjesto postojećeg teksta ubacite tekst:
"©Webgrupa Tehničke škole u Požegi 2006.".
Znak © možete dobiti iz zbirke simbola (zadnja naredba na traci s alatima Text).
Ukoliko ste obavili sve navedeno, sav sadržaj je ubačen. Ukoliko niste sigurni jeste li sve dobro obavili usporedite s kodom gotove stranice. Ništa više nećemo mijenjati u HTML kodu, osim zadati link prema css datoteci.
CSS
Spremite dokument i idemo praviti CSS stilove. Stilove možete raditi preko Dreamweaver dijaloga: desni klik u CSS panelu > New...
Iako stranica u design pogledu ne izgleda ni približno poput gotove, i nismo tako daleko.
CSS redefiniranje tagova
Prvo ćemo redefinirati tag body (i usput snimit stil u novu CSS datoteku stil.css u istoj mapi gdje je i stranica).
Za body ćemo zadati margin i padding kao 0 (da bismo uklonili prazan prostor na rubovima dokumenta). Osim toga promijenit ćemo i font dokumenta u Verdana veličine small:
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #003366;
margin: 0px;
padding: 0px;
}
Redefinirat ćemo i izgled linkova, napraviti da nisu potcrtani, da budu podebljani te zadati boje za dva različita stanja:
font-weight: bold;
color: #003366;
text-decoration: none;
}
a:hover {
font-weight: bold;
color: #990000;
text-decoration: none;
}
Ovakav stil kao gore napisani (sa dva selektora odvojena zarezom) ne možete zadati preko Dreamweaver dijaloga. To morate ručno u CSS datoteci.
Stilovi za div tagove
Napravit ćemo novi stil sa selektorom #header. On će odrediti kako izgleda zaglavlje dokumenta. Treba mu promijeniti boju pozadine i u desnom kutu ubaciti sliku. Kad to napravite trebali biste dobiti slijedeću definiciju:
background-color: #003366;
background-image: url(slike/zaglavlje2.png);
background-repeat: no-repeat;
background-position: right bottom;
}
Za div hormenu napravimo stil s selektorom #hormenu. Što sve treba napraviti vidljivo je iz slijedeće definicije:
background-image: url(slike/hormenu.gif);
background-repeat: repeat-x;
height: 16px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 175px;
font-size: 0.8em;
white-space: nowrap;
}
Čak i kad smo to napravili slika u tom divu nije na željenom mjestu. Postavit ćemo je u desni kraj ako napravimo slijedeći stil:
float: right;
}
Da bi gore opisana fora radila bitno je da slika bude ispred teksta. Ako ne vjerujete, postavite je iza i pogledajte kako izgleda u pregledniku!
Zaglavlje je sad manje-više na svom mjestu, idemo sad napraviti lijevi izbornik. Zadamo stil sa selektorom #vertmenu. Ključno je da mu damo širinu i zadamo float:
float: left;
width: 175px;
}
Nema vidljivog napretka dok ne zadamo i stil za content:
margin-left: 190px;
margin-right: 50px;
margin-bottom: 50px;
}
Sad je vertikalni izbornik s lijeve strane sadržaja i to je OK.
Na predlošku od kojeg smo krenuli stupac s lijeve strane imao je sivu pozadinu i od sadržaja je bio odvojen iscrtkanom linijom. To ne možemo dobiti zadavanjem sive pozadine za div vertmenu jer njegov sadržaj "kraći" od glavnog sadržaja, u većini slučaja ta pozadina ne bi dokučila skroz do footera.
Zato ćemo napraviti mali trik i postaviti slijedeću pozadinu za tag wrapper:
background-image: url(slike/vertmenu.png);
background-repeat: repeat-y;
background-position: left;
}
Još treba srediti podnožje dokumenta, zadajemo stil za div footer:
background-color: #EEEEEE;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
text-align: center;
padding: 20px;
font-size: 0.7em;
}
Još malo lickanja
Sredit ćemo sliku u tekstu tako da se tekst omata oko nje s desne strane:
float: left;
margin-right: 15px;
margin-bottom: 15px;
}
Lista koja čini lijevi izbornik ne izgleda kao u predlošku pa ćemo i nju malo dotjerati:
margin: 20px;
padding: 0px;
list-style-position: outside;
list-style-image: url(slike/dot.png);
}
Još samo treba malo razmaknuti linkove u horizontalnom izborniku:
margin-right: 15px;
margin-left: 15px;
}
Rezultat nakon svih ovih lickanja bi trebao biti ovakav.
i na kraju...
Ako smo napravili sve po uputama - onda je gotovo!
Pokušajmo malo rezimirati što smo naučili:
- već pri izradi grafičkog predloška treba planirati elemente stranice tako da se zamišljeno može i realizirati
- pri izradi stranice prvo napravimo sve div tagove i ubacimo većinu sadržaja
- kad god je moguće u CSSu koristimo redefiniranja tagova i složene selektore, a klase ako baš moramo
- sadržaj u dva stupca dobijeno tako da jednom div tagu zadamo fiksnu širinu te floating (left ili right), a drugi stupac odmaknemo s te strane barem za širinu prethodnog (zadamo mu margin veći ili jednak širini stupca s floatingom).
- nadam se da se slažemo da iako je malo teže za naučiti, pozicioniranje CSSom i div tagovima je bolje nego tablicama
