BAZA ZNANJA

Kurs: --- Adobe Dreamweaver CS5.5

Modul: CSS za Layout

Autor: Vuk Ninić

Naziv jedinice: CSS Layout

Unos div elemenata

Kao što je slućaj kod mnogih elemenata, div tagove možemo uneti na više načina. Možemo ih izabrati iz padajućih menija Insert > Layout Objects > Div Tag ili izabrati iz Insert panela opciju Insert Div Tag (ikonica kvadrata sa elementima unutar njega) koja se nalazi i u grupi Common, kao i Layout. Bilo koji način da smo izabrali, otvoriće se sledeći dijalog:

 

Insert opcija omogućava da izabremo gde će se novi div nalaziti:

• At Insertion point - postaviće div gde je kursor
• Before tag - postavlja div pre taga koji biramo u padajućem meniju desno
• After start of tag - postavlja div odmah posle početka taga koji biramo u padajućem meniju desno
• Before end of tag - postavlja div odmah pre završetka taga koji biramo u padajućem meniju desno
• After tag - postavlja div odmah posle taga koji biramo u padajućem meniju desno

Ukoliko smo selektovali određeni element ili više njih, prva stavka će, umesto At insertion point, glasiti Wrap around Selection i omogućava da novi tag obuhvati izabrane postojeće elemente.

Class i ID opcije omogućavaju izbor klase, odnosno ID vrednosti, ukoliko su dostupne, a koje će biti dodeljene divu koji kreiramo. Zapamtite, sve klase koje postoje će biti na raspolaganju, a istovremeno, samo neiskorišćene ID vrednosti, jer kao što smo ranije pomenuli, ID se može samo jednom naći na određenoj stranici.

Takođe, možemo ručno uneti ime klase ili ID vrednost i izabrati opciju New CSS Rule koje omogućava kreiranje novog CSS opisa i poznati CSS Rule definition dijalog.

Unos AP div elemenata

Kao i malopre pomenute div tagove, AP div tagove možemo uneti tako što ćemo izabrati iz padajućih menija Insert > Layout Objects > AP div ili izabrati iz Insert panela opciju Draw AP div. Prva mogućnost unosi AP div na stranu sa nekim default podešavanjima, dok druga opcija nam menja kursor i očekuje da sami nacrtamo AP div na strani. Držeći levi taster miša možemo nacrtati div gde želimo.

AP div tagovi su obični div tagovi kojima DW odmah dodaje CSS i smešta ga u HEAD deo strane. Ne dodaje bilo koji CSS, već postavlja apsolutno pozicioniranje.

Na primer, nacrtali smo AP div na strani, DW bi dodao ovakav CSS:

#apDiv1 {
	position:absolute;
	left:300px;
	top:150px;
	width:200px;
	height:300px;
	z-index:1;
}

Odmah je kreirao ID vrednost. Postavio je position, z-index i left/right vrednost zbog pozicije, kao i width/height vrednosti za veličinu.

AP div u Design prikazu

Takođe, u Properties Inspectoru se nalaze sva podešavanja za AP div kada je on selektovan na strani.

Properties Inspector – selektovan AP div

Ranije smo govorili o pozicioniranju elemenata i normalnom toku. Budite svesni da su svi AP div tagovi apsolutno pozicionirani na strani i da shodno tome ne ulaze u normalan tok strane, te bi trebalo biti maksimalno oprezan sa njima.

Kreiranje CSS rasporeda strane

U prethodnoj jedinici smo samo pomenuli CSS layout raspored. Raspored strane se sastoji od nekoliko ili više div tagova koji su tačno struktuirani i raspoređeni CSS-om i koji čine neku vrstu šablona strane. Često se koristi i termin CSS layout, pozajmljen iz engleskog jezika. Dobra praksa je da uvek prvo osmislite i kreirate raspored strane, a tek onda unosite sam sadržaj. Ukoliko će više strana imati isti sadržaj, utoliko je bitnije pravilno postaviti osnove.

Dobar broj modernih sajtova ima sledeću strukturu: Zaglavlje (Header) na vrhu strane, glavni sadržaj (Main) u kome se, kako mu i ime kaže, nalazi glavni sadržaj strane, sporedni sadržaj (Sidebar) i dno strane (Footer). Na većini sajtova postoji i div sa navigacijom koji se nalazi iznad ili ispod zaglavlja. Možemo dodati i div oko svega (odmah posle Body) kojim ćemo centrirati sav sadržaj. Dalje, regione na sajtu možemo deliti u dalje blokove i celine.

Ovi termini, kao i terminologija nikako nisu obavezni, možemo praviti kakvu god strukturu želimo i davati bilo koja imena  regionima (divovima).

Pogledaćemo neke primere sajtova koji se danas mogu naći na netu:

Adobe Dreamweaver sajt

Adobe Dreamweaver saj ima sličan raspored o kome smo pričali. Na vrhu je navigacija koja se prostire celom širinom. Ispod je zaglavlje koje nosi naslov i druge informacije. Zatim sledi glavni sadržaj i sidebar koji počinju u istoj visini i tako dalje.

LINKgroup sajt

Sajt kompanije LINKgroup ima vrlo sličan raspored. Na vrhu su navigacija i header, a slede glavni sadržaj i sidebar, koji je u ovom slučaju iskorišćen za vesti i logoe partnera.

Naxi radio sajt

Sajt jedne popularne beogradske radio-stanice sadrži pregršt informacija, nema istu ciljnu publiku i u drugačijem kontekstu je od prethodno pomenutog, ali opet ima sličnu strukturu, raspored. Na vrhu (ako zanemarimo reklame) se nalazi header sa logotipom i nekim informacijama. Zatim sledi navigacija koja vizuelno čini celinu sa headerom. Ispod je glavni sadržaj izdeljen u više celina, a desno sidebar.

Platforma link elearning

Posle ovih primera osvrnućemo se i na sajt/platformu Link elearning. U ovom primeru se tačno vizuelno mogu distancirati regioni. Header i navigacija su spojeni, glavni sadržaj je desno, a sidebar levo, gde su njegovi delovi jasno naznačeni okvirima, upadljivijim od glavnog sadržaja.

Unos sadržaja

Za naš prvi raspored stranice možemo uneti sledeće div tagove: wrapper i unutar njega header, main, sidebar i footer. Unosimo ih kao obične tagove i vodićemo računa da svi idu jedan za drugim, da se ne ukrštaju. Samo će wrapper biti oko svih. Ako smo pravilno uneli te divove, u kodu bi trebalo da imamo:

<div id="wrapper">
  <div id="header">Header</div>
  <div id="main">Main</div>
  <div id="sidebar">Sidebar</div>
  <div id="footer">Footer</div>
</div>

Odmah pre i posle ovog koda stoji početak i kraj body taga. U dizajn prikazu videćemo nešto poput sledećeg:

Novi div tagovi

Kao što vidite, divovi su poređani jedan ispod drugog u punoj, maksimalnoj širini i sa visinom koja zavisi od teksta, pri tom tekst nije stilizovan. Ovde trenutno ne postoji nikakva stilizacija, samo smo kreirali HTML osnovu i potrebno je da dodamo CSS.

Inače, Dreamweaver poseduje odličnu opciju koja može pomoći u radu. Ukoliko otvorimo meni sa vizuelnim pomagalima iz Document toolbara, možemo izabrati CSS Layout Backgrounds opciju, koja će obojiti pozadinu divova u različite boje i time ih distancira jedan od drugog. Ova opcija je vidljiva samo nama dok radimo i neće biti vildljiva na strani u browseru. Divovi su i dalje providni i čekaju da im mi kroz CSS dodamo pozadinu. Svaki put kada uključimo/isključimo ovu opciju, dobićemo drugačije boje.
 

Vizuelna pomagala – distancirani divovi

Sada ćemo izabrati kreiranje novog CSS opisa iz CSS Styles panela. Pojaviće se dijalog o kome smo već govorili. Selektor će biti #wrapper (unesite ako je potrebno) jer želimo da tim novim opisom stilizujemo taj div koji smo malopre kreirali. U donjem delu dijaloga ćemo postaviti da se kreira novi CSS fajl.

Novi CSS opis - #wrapper div

Pošto smo ovako uneli podatke i potvrdili, otvoriće se sledeći dijalog u kome biramo gde snimamo CSS fajl. Ja sam kreirao podfolder CSS i u njemu ću snimiti fajl layout.css koji će nam služiti za raspored elemenata.

Novi CSS fajl

Pošto smo snimili CSS fajl, dolazimo do CSS Rule definition dijaloga. Postavljamo podešavanja za wrapper, a onda ponavljamo i za ostale divove ove korake (osim snimanja CSS fajla).

#wrapper - podešavanje opisa

Kreiranje divova, odnosno njihovu stilizaciju predstavili smo u video-materijalu koji prati ovu lekciju, tako da detaljno možete ispratiti svaki korak.

Live View

Ukoliko želimo da proverimo kako naša strana izgleda u browseru, možemo učiniti baš to, pokrenuti je u browseru pomoću File > Preview in browser padajućeg menija i tako dalje ili iskoristiti Live View opciju. Live view nam omogućava da u okviru DW-a prikažemo stranu kao da smo u browseru i to vrlo korektno, jer DW koristi WebKit osnovu za prikaz.

Live View možemo najlakše pokrenuti klikom na istoimeno dugme u Document toolbaru.

Live View opcija

Tada se prikaz u dizajn delu pretvara u browser i ponaša isto. Čak, možemo pratiti linkove ka drugim stranama ukoliko pritisnemo i držimo taster Ctrl pre nego što kliknemo na link. Tada, vrlo koristan je Browser Navigation toolbar (koji pozivamo putem menija: View > Toolbars > Browser Navigation, ukoliko nije uključen).

Tako stičemo utisak o celom našem sajtu. Ali šta ako primetimo grešku na nekoj strani koja nije otvorena? Ne možemo odmah vršiti izmene iz live prikaza. Zato postoji opcija Edit the Live View page in a new tab. Ova opcija koja se nalazi u pomenutom Browser navigation toolbaru, otvoriće nam trenutno prikazanu stranu u novom tab prozoru Dreamweavera. Obratite pažnju na to da neće biti dostupna ukoliko je van našeg sajta (ukoliko ste npr. došli putem linka do www.google.com i slično).

Edit the Live View page in a new tab opcija

Live inspect

Kao dodatnu pomoć u Live prikazu, Adobe je od verzije CS5 u Dreamweaver dodao opciju Live Inspect¹ . Pošto uključimo pomenutu opciju putem Document toolbara (nalazi se odmah pored Live View), možemo preći mišem preko bilo kog elementa, gde će se pojaviti određene boje.

Zeleno-plava predstavlja sadržaj elementa, Padding je ljubičast, margina žuta i tako dalje. Ovo je vrlo korisno jer možemo lako ustanoviti koja opcija šta čini na stranici.

Live inspect opcija nad slikom

¹Ukoliko ste do sada koristili Firebug za Firefox ili Firefly za Operu, onda će ova opcija biti poznata jer funkcioniše vrlo slično.