Uvod
Pošto smo se upoznali sa osnovnim HTML tagovima i osnovama CSS-a, na red (sasvim prirodno), dolazi diskusija o opštoj strukturi web stranica, to jest, o 'tehnikalijama' koje omogućavaju pravilan raspored elemenata (a svakako je red da prodiskutujemo i o opštoj estetici web stranica).
Pri projektovanju sajtova, najveću pažnju treba posvetiti pravilnom rasporedu elemenata, ali (budimo iskreni), ni u kom slučaju 'ne šteti' ni to da stranice izgledaju lepo.
Dopadljivost se dodatno postiže i upotrebom adekvatnih boja, oblika i veličina slova (kao i slika i drugih elemenata), međutim, za početak je potrebno da se upoznamo i sa nekolicinom novih tagova (od kojih se jedan koristi za definisanje podele) ....
Div - Generički blok kontejner
Ako malo bolje razmislimo, neće biti teško da dođemo do zaključka da, do sada poznate tagove, ne možemo (zapravo) koristiti za podelu stranica.
HTML specifikacija predviđa da se preko <a> tagova definišu linkovi prema spoljnjim stranicama, preko <img> tagova slike, a preko <p> tagova pasusi, međutim, u pitanju su tagovi sa konkretnom namenom i nijedan od njih nije pogodan za definisanje opšte strukture web stranica (a isti je slučaj i sa drugim tagovima sa kojima smo se do sada upoznali).
Pored navedenih tagova (i ostalih tagova specifične namene), postoje i takozvani "generički kontejneri", tagovi <div> i <span> - nespecijalizovani tagovi opšte namene, pogodni za smeštaj drugih HTML elemenata.
Definicija
U okviru jezika HTML, tag <div> (eng. "division" - podela), predstavlja generički (opšti) blok element, koji sam po sebi nema pojavni oblik (grafički sadržaj, dimenzije i sl), ali je pogodan za definisanje (odnosno, 'uokviravanje'), nezavisnih odeljaka HTML strukture - i može se stilizovati preko CSS-a.
Na primer, preko taga <div>, sav HTML kod koji je vezan za navigacionu traku sa linkovima, može se smestiti u jedan pregledan odeljak (i potom se svi elementi mogu povezati sa CSS-om i sl).
<div id='nav_traka'>
<a href='./'>Početna</a>
<a href='./blog.html'>Blog</a>
<a href='./kontakt.html'>Kontakt</a>
</div>
Uloga div elemenata u podeli stranica
Ukoliko unutar <body> tagova (dok HTML datoteka još nije povezana sa CSS-om), samo definišemo tri <div> odeljka ("i ne uradimo ništa drugo") - nećemo učiniti mnogo toga po pitanju prostorne podele.
Međutim, ako svemu dodamo i CSS, moći ćemo (u vizuelnom smislu), da rasporedimo tri elementa jedan ispod drugog, ili jedan pored drugog, pri čemu podela može biti ravnomerna (ili u proizvoljnim proporcijama), a nekom od elemenata može se zadati i fiksna visina (ili širina, u zavisnosti od pravca raspoređivanja), tako da ostali elementi ravnomerno popune preostali prostor.
Upravo smo opisali način za podelu stranica sa kojim se posetioci sajtova susreću svakodnevno, i čitaoci mogu naslutiti da takav način raspodele nije komplikovan (niti treba da bude).
Na stranici koja sadrži tekst koji trenutno čitate, navigaciona traka nalazi se u zasebnom <div> kontejneru koji je dodatno podeljen na odeljke sa linkovima i drugim sadržajima (isto važi i footer), sam tekst članka je u zasebnom <div> odeljku, a postoji još i nekoliko drugih odeljaka - i sve to čini stranicu pregledn(ij)om.
Sada kada smo stekli okvirnu predstavu o ulozi <div> elemenata u podeli stranica, možemo započeti sa proučavanjem tehnika za podelu stranice, ali, osvrnimo se pre toga i na generički inline element - <span>.
Span - Generički inline kontejner
Tag <span> ("raspon"), predstavlja generički kontejner linijskog tipa (inline element), koji takođe sam po sebi nema pojavni oblik, ali se (baš kao i <div> kontejner), može stilizovati preko CSS-a.
Tekst obojen u <span style='color: #ff4444;'>crveno</span>.
Za razliku od <div> elemenata, <span> elementi ne igraju ulogu u definisanju opšte strukture HTML dokumenta, ali, sasvim dobro dođu kada je potrebno sporadično stilizovati delove pasusa (primećujete recimo u našim člancima da su tagovi i sitniji blokovi koda u pasusima, formatirani na poseban način).
Podela stranice - osnovna HTML struktura
Da bismo se što bolje upoznali sa tehnikama za podelu stranice, koristićemo jednostavan primer kakav smo već nagovestili: posmatraćemo kako možemo deliti stranicu po horizontali i po vertikali, preko tri <div> elementa.
Okvir stranice
U web dizajnu (zarad preglednosti), celokupan sadržaj stranice tipično se smešta u zaseban <div> kontejner kome se pripisuje prigodan id (najčešće "wrapper", ali mi ćemo za ovaj školski primer koristiti id "okvir").
Odmah na početku, pre nego što se definišu ostali elementi strukture i počne sa unosom sadržaja, dodaćemo prazan <div>.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id='okvir'>
</div>
</body>
</html>
Znamo da - ako otvorimo praznu stranicu u browseru - nećemo videti ništa (osim bele pozadine), i da je stoga potrebno: ili da definišemo sadržaj, ili da definišemo stil.
Ovoga puta definisaćemo stil.
* {
margin: 0;
padding: 0;
}
#okvir {
width: 100vw;
height: 100vh;
background: #0099ee;
}
Boja koju smo koristili neće na kraju ostati, već predstavlja svojevrstan mehanizam provere ("za svaki slučaj").
Jedinice koje smo koristili za zadavanje visine i širine nisu procenti (relativne jedinice koje nas mogu često i "prevariti"), već jedinice vw (viewport width) i vh (viewport height), koje su vezane za dimenzije ekrana ("viewport-a"), i definisane su na sledeći način:
- 1vw = 1% širine ekrana
- 1vh = 1% visine ekrana
Unutrašnji div elementi
Shodno 'propozicijama' koje smo ranije naveli, stranicu ćemo nadalje podeliti na tri dela ....
<body>
<div id='okvir'>
<div id='div_01'>
</div>
<div id='div_02'>
</div>
<div id='div_03'>
</div>
</div>
</body>
.... ali, naravno, generički <div> elementi nemaju (bez CSS-a), vidljive odlike koje signaliziraju da podela postoji.
HTML struktura primera je sada kompletna, a za dalje definisanje (vizuelne) podele koristićemo flexbox, moderan, popularan i veoma funkcionalan način za raspoređivanje elemenata stranice (preko CSS-a).
Flex box - osnove
U CSS-u, "Flex box", predstavlja skup tehnika (to jest, modul), koji omogućava vizuelno pozicioniranje, poravnanje i distribuiranje elemenata, što se praktično može iskoristiti za vizuelnu podelu, pre svega stranica, ali naravno i pojedinačnih elemenata.
Unutar tzv. flex kontejnera, unutrašnji elementi mogu se raspoređivati ravnomerno ili u nekim drugim proporcijama (shodno raspoloživim dimenzijama nosećih okvira), i takođe se mogu automatski centrirati ili pozicionirati na neki drugi način (horizontalno ili vertikalno).
Osnovne odlike
Glavna odlika flexbox-a je automatsko širenje i skupljanje shodno raspoloživom prostoru (sama reč "flex" na engleskom jeziku označava upravo, širenje i skupljanje), ali je i "fleksibilnost", u smislu prilagodljivosti, svakako odlika flexbox-a.
Uz sve navedeno, određenim elementima moguće je zadati i fiksne dimenzije (da budemo precizni - jednu od dve dimenzije), što dodatno olakšava posao web dizajnera.
Kreiranje flex kontejnera
Raspoređivanje elemenata preko modela Flex box, funkcioniše tako što određeni HTML element (tipično <div>), preuzima ulogu flex kontejnera (okvira, nosača), što potom omogućava razmeštaj unutrašnjih elemenata po ranije navedenim pravilima.
U primeru koji koristimo, <div> element kome smo prethodno pripisali id "okvir", postaće flex kontejner;
#okvir {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
width: 100vw;
height: 100vh;
background: #0099ee;
}
Izgled i ponašanje nosećeg elementa definisani su preko svojstva display koje ima vrednost "flex", i parametara flex-direction, justify-content i align-items, koji bliže određuju svojstva flex kontejnera (sledi objašnjenje).
Svojstvo display
Sa atributom display susreli smo se u prethodnom članku, kada je bilo potrebno definisati fizičke dimenzije dugmeta koje predstavlja link, što, bez dodatnih intervencija - nismo mogli da uradimo, budući da su <a> tagovi, linijski elementi (pa smo za atribut display koristili vrednost block).
Vrednost flex koju smo naveli u prethodnom odeljku, takođe definiše blok elemente, * i sve što treba da uradimo da bismo definisali flex kontejner, je da napišemo:
#okvir {
display: flex;
}
.... međutim, ovakav flex kontejner (iako tehnički ispravan), verovatno se neće ponašati onako kako smo zamisliti (osim ako se naša zamisao ne poklapa sa podrazumevanim vrednostima svih parametara flex modela), pa je stoga krajnje preporučljivo da podesimo i ostale parametre.
Svojstvo flex-direction
Svojstvo flex-direction određuje pravac i smer raspoređivanja elemenata. Moguće vrednosti su:
#okvir {
flex-direction: row;
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse;
}
-
row- raspoređivanje elemenata sleva nadesno (elementi su jedni pored drugih)
Slika 9. - flex-direction: row; - elementi se raspoređuju jedan pored drugog, redom koji je naveden u HTML dokumentu. -
column- raspoređivanje elemenata odozgo nadole (elementi su jedni ispod drugih)
Slika 10. - flex-direction: column; - elementi se raspoređuju jedan ispod drugog, redom koji je naveden u HTML dokumentu. -
reverse-row- raspoređivanje zdesna nalevo
Slika 11. - flex-direction: reverse-row; - elementi se raspoređuju jedan pored drugog, redom koji je suprotan od onog koji je naveden u HTML dokumentu. -
reverse-column- raspoređivanje odozdo nagore
Slika 12. - flex-direction: reverse-column; - elementi se raspoređuju jedan ispod drugog, redom koji je suprotan od onog koji je naveden u HTML dokumentu.
Ako se koriste opcije row i column, elementi se raspoređuju shodno rasporedu koji je (praktično), naveden u HTML-u, dok opcije reverse-row i reverse-column (kao što nazivi sugerišu), obrću redosled.
Svojstvo justify-content
Sada kada je izabrana glavna osa po kojoj će se elementi raspoređivati (horizontalna ili vertikalna), preko svojstva justify-content može se definisati poravnanje elemenata u odnosu na glavnu osu.
U našem primeru, glavna osa biće horizontalna (flex-direction: row;), a moguće vrednosti atributa justify-content su:
#okvir {
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;
}
-
flex-start- poravnanje elemenata u odnosu na početak
Slika 14. - justify-content: flex-start; - elementi se raspoređuju tako da se ravnaju od početka. -
flex-end- poravnanje elemenata u odnosu na kraj
Slika 15. - justify-content: flex-end; - elementi se raspoređuju tako da se ravnaju prema kraju. -
center- centralno poravnanje
Slika 16. - justify-content: center; - elementi se raspoređuju tako da su centrirani. -
space-around- poravnanje koje svakom elementu dodeljuje jednak prostor (praktično - marginu), sa obe strane (pri čemu je prostor između dva susedna elementa, očigledno, veći od prostora između ivice i prvog elementa, ili poslednjeg elementa i suprotne ivice)
Slika 17. - justify-content: space-around; - elementi se raspoređuju tako da su "margine" koje su dodeljene svakom elementu identične. -
space-evenly- poravnanje u kome je međuprostor između dva susedna elementa, isti kao i prostor između prvog i poslednjeg elementa i odgovarajućih ivica
Slika 18. - justify-content: space_evenly; - elementi se raspoređuju tako da su svi međuprostori identični. -
space-between- prvi i poslednji element su poravnati sa ivicama, a svi ostali međuprostori su identični
Slika 19. - justify-content: space-between; - elementi se raspoređuju tako da su prvi i poslednji element naslonjeni na ivice, dok su svi ostali međuprostori ravnomerno podeljeni.
Svojstvo align-items
Svojstvo align-items određuje poravnanje elemenata u odnosu na 'preostalu osu'. Ako je za flex-direction izabrana opcija row, osnovna osa za raspoređivanje (kojoj odgovara parametar justify-content), je horizontalna, pa shodno tome parametar align-items definiše poravnanje po vertikalnoj osi.
Moguće vrednosti su:
#okvir {
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
align-items: baseline;
}
-
flex-start- poravnanje elemenata u odnosu na početak
Slika 21. - align-items: flex-start; - gledano u odnosu na drugu osu poravnanja, elementi se raspoređuju uz početak. -
flex-end- poravnanje elemenata u odnosu na kraj
Slika 22. - align-items: flex-end; - gledano u odnosu na drugu osu poravnanja, elementi se raspoređuju uz kraj. -
center- centralno poravnanje
Slika 23. - align-items: center; - gledano u odnosu na drugu osu poravnanja, elementi se centriraju. -
stretch- elementi se "razvlače" od ivice do ivice
Slika 24. - align-items: stretch; - gledano u odnosu na drugu osu poravnanja, elementi se protežu od ivice do ivice. -
baseline- elementi se poravnavaju u odnosu na osnovnu ivicu za ispis teksta (donju ivicu malih slova koja nemaju donji produžetak (kakav se sreće na slovima kao što su, primera radi, "j" i "g"))
Slika 25. - align-items: baseline; - gledano u odnosu na drugu osu poravnanja, elementi se ravnaju u odnosu na donju ivicu svog tekstualnog sadržaja.
Svojstva za unutrašnje elemente - flex-shrink, flex-grow i flex
Svojstva flex-shrink, flex-grow i flex (u pitanju je skraćeni zapis prva dva parametra), pripisuju se unutrašnjim elementima koji su sadržani u flex kontejnerima - i upravo se preko tri navedena parametra obezbeđuje automatsko širenje i skupljanje.
Ako zapišemo ....
#centralni {
flex-grow: 1;
flex-shrink: 1;
}
.... centralni element stranice širiće se i skupljati ("fleksovati"), po potrebi, međutim, možemo to navesti i jednostavnije:
#centralni {
flex: 1;
}
Kod sa gornje slike postiže isti efekat kao da smo naveli oba parametra (flex-shrink i flex-grow), i zadali im vrednost 1.
Ali, šta ako vrednost atributa flex nije 1?
Razmotrićemo primer sa tri elementa, pri čemu će atribut flex levog i desnog elementa imati vrednost 1, dok će vrednost atributa flex za centralni element biti 3.
Program koji prikazuje stranicu, protumačiće kod na sledeći način: 1 + 3 + 1 = 5, što se može shvatiti i kao pet petina, i stoga će levi i desni element (shodno navedenom), dobiti jednu petinu širine, dok će centralni element dobiti tri petine.
Pored svega do sada navedenog, ponovićemo da se elementima mogu zadavati i fiksne dimenzije, što omogućava jednostavnu podelu stranice (kao što ćemo videti u narednim primerima).
Podela stranice putem flexbox-a
Preko flexbox-a lako se može uspostaviti (a takođe i promeniti ), prostorna struktura stranice. Takav pristup je vrlo zanimljiv, pogotovo u kontekstu responzivnog web dizajna (čime ćemo se baviti u VI nastavku), a jednostavan primer preraspoređivanja <div> elemenata, videćemo već u nastavku.
Horizontalna podela
U prvom koraku, flex kontejner ("okvir"), podelićemo ravnomerno po horizontali, na sledeći način:
* {
margin: 0;
padding: 0;
}
#okvir {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}
#div_01 {
flex: 1;
background: #ffc0b0;
}
#div_02 {
flex: 1;
background: #b0ffa0;
}
#div_03 {
flex: 1;
background: #b0d3ff;
}
Rezultat možemo videti na sledećoj slici:
Vertikalna podela
U drugom koraku, flex kontejner ("okvir"), takođe ćemo podeliti ravnomerno, ali - ovoga puta vertikalno.
Prepravićemo samo sledeći deo koda (ostatak "ne diramo"):
#okvir {
flex-direction: column;
}
Rezultat možemo videti na sledećoj slici:
Za kraj, prepravićemo kod tako da visina gornjeg i donjeg <div> elementa bude fiksna (kao što je uobičajeno za navigacionu traku i footer), dok će selektor div_02 ostati isti:
#div_01 {
height: 60px;
background: #ffc0b0;
}
#div_02 {
flex: 1;
background: #b0ffa0;
}
#div_03 {
height: 100px;
background: #b0d3ff;
}
Rezultat možemo videti na sledećoj slici:
U pitanju je podela kakvu ćemo koristiti u sledećem članku (i sa kakvom se inače srećemo - veoma često).
Sledeći koraci ....
Upotrebom tehnike flexbox (kao što smo videli), na veoma jednostavan način se može napraviti funkcionalna i estetski dopadljiva podela stranice, međutim, u ovom članku smo za navedeni zadatak koristili "obične" <div> elemente (odnosno tagove).
U sledećem nastavku: Web dizajn - 5. deo, pozabavićemo se HTML5 standardima i specijalizovanim div tagovima.