Dizajniranje bez tablica za početnike #1

Uvod

Ovo je prvi dio u seriji tutoriala pomoću kojega ćete, nadam se naučiti osnove izrade web stranica bez korištenja tablica za vizualni izgled stranica. U ovome tutorialu ću pokazati kako napraviti početnu stranicu, koja će se sastojati od zaglavlja, dva stupca i podnožja, znači nekakvu standardnu stranicu.

Primjer stranice koju koju ću napraviti u ovome tutorialu možete pogledati ovdje. Datoteke završenog djela možete skinuti ovdje.

Zašto dizajnirati bez tablica?

Pošto je ovo tutorial ovome pitanju neću posvetiti puno mjesta. Na bespućima interneta možete pročitati brezbojene rasprave o tableless i table based dizajnu. Ja ću ovdje navesti samo neke osnovne razloge zašto dizajnirati bez tablica.

Prvi i osnovni razlog je zato što tablice nisu napravljene da bi se u njima određivao izgled web stranice. Tablice imaju svoju specifičnu svrhu - pohranjivanje tabličnih podataka!. Mnogi ljudi kada prelaze na tableless dizajn imaju tendenciju da potpuno izbace tablice iz uporabe. To je pogrešan pristup! Tablice imaju svoju svrhu i vrlo su dobre kada ih koristimo za ono, za što su namjenjene.

Ako trebam napraviti izgled sajta onda NEĆU koristiti tablice.
Ako trebam napraviti popis svih zaposlenika u nekoj velikoj firmi sa njihovim godinama, JMBG-om, adresom i funkcijom onda HOĆU koristiti tablice. Kužite razliku? Dizajn stranice - NE, puno povezanih podataka - DA.

Drugi razlozi obuhvaćaju to da će dizajn bez tablica biti manji, odnosno brže će se učitavati, biti će lakši za čitanje, lakše će se moći održavat itd. Za više informacija odite ovdje. A mi krećemo na izradu vaše prve tableless stranice.

Filozofija dizajna bez tablica

Namjerno sam upotrijebio riječ filozofija zato što dosta ljudi koji su prešli na tableless smatraju to filozofijom, umjetnošću, zenom. Ja sam jedan od njih, i kada se ufurate u ovaj oblik dizajniranja i kada steknete više iskustva nećete se htjeti više vratiti na table based dizajn. Da bi se malo ufurali u ovu vrstu dizajna posjetite csszengarden i pogledajte što sve možete učiniti koristeći samo CSS i HTML

Ako koristite Dreamweaver ili nedaj bože Frontpage, moj savjet vam je da zaboravite ugodno klikanje i WSIWYG filozofiju. U DW-u se sada lagano prebacite na code view, a ako koristite FP isključite ga i uključite si notepad ili još bolje skinite Notepad2, pošto će vam on bojati kod, tako da vam se bude lakše snaći u njemu.

Kada dizajniramo bez tablica, koristimo samo HTML i CSS. U HTML-u određujemo elemente, odnosno markup stranice, a u CSSu određujemo kako će pojedini element na stranici izgledati i kako će se ponašati. Najčešće korišteni elementi za markup su DIV tagovi. DIV tagove možete zamisliti kao kutije u koje ćemo stavljati sadržaj ili grafičke elemente (pozadine, slike, obrube i sl.). Dobra stvar kod DIV tagova je što im morate dati neko ime, barem onim glavnima npr. zaglavlju stranice ćete dati ime “zaglavlje”, podnožju ćete dati ime “podnozje”, izborniku ćete dati ime “izbornik” itd. Znači biti će vam se lakše snaći u kodu jer će biti napisan na jeziku koji vi kao dizajner možete razumjeti.

Početak…

Dobar početak bi bio da na papiru nacrtate kako želite da vam izgleda kostur stranice. Ja ću ovdje koristiti primjer kostura stranice koju ćemo praviti. To što nacrtate na papiru bi trebalo izgledati otprilike ovako:

Kliknite na sliku da ju vidite uvećanu

Primjetite kako svaka od ovih obojanih kutija ima svoj naziv, i taj naziv označava što ćemo stavljati u određenu kutiju, svaka kutija je div tag. Znači kutija koju smo nazvali #omotac u sebi sadrzi sve ostale kutije, kutija sadrzaj u sebi sadrzi samo kutije #lijevo i #desno itd.

Sada taj crtež treba prevesti u jezik koji računalo, odnosno web preglednik razumije, taj jezik se zove HTML. Sada otvorite svoj omiljeni txt editor i DW u code view modu i napišite ili kopirajte sljedeće:

ako koristite DW ovaj korak možete preskočiti pošto će DW sam ubaciti ovo zaglavlje trebate promjeniti samo sadržaj izmeđ title tagova ako želite. Ovo je naime zaglavlje vaše HTML stranice u kojem je određen DOCTYPE, naslov, charset itd. Sve što budete dalje upisivali mora doći između body tagova, osim ako ne naglasim drukčije. Sada taj dokument snimite i nazovite ga kako hoćete, ja ću svoj nazvati tableless.html (mora imati nastavak .html kako bi ga web preglednik mogao dobro protumačiti)

Nakon što smo napravili ovu pripremnu radnju možemo pristupiti izradi kostura stranice. Pomoću sljedećeg koda ćemo definirati kostur kako smo ga nacrtali:

Tagovi koji počinju sa !– i završavaju sa –> su samo komentari (njih će vaš browser preskočiti kada bude očitavao stranicu) koji pomažu da znate gdje završava koji DIV tag odnosno kutija. Sada to možda ne izgleda bitno jer je sve dosta čitko ali kada unesemo sadržaj moglo bi se malo zakomplicirat, zato je dobra praksa da obilježavate gdje vam završava koji DIV tag. U DIV tagu piše nešto kao id=”neko_ime”, to je ime tog taga i ono nam služi da bi ga mogli pozvati u CSS datoteci koju ćemo uskoro napraviti. Ako sad pokrenete datoteku tableless.html nećete vidjeti ništa, pošto još nismo oblikovali DIV tagove a nemaju nikakve obrube po defaultu. Primjetite nadalje, ako niste upućeni u HTML da svaki tag počinje sa recimo u slučaju DIV tagova sa < div > a završava sa < / div > znači kada tag započnemo sa < / to znači da s tim zatvaramo jedan blok, odnosno tag.

CSS

Znači u prethodnom poglavlju smo napravili kostur naše stranice, sada bi taj kostur trebali oblikovati. Kada kažem oblikovati, mislim na CSS. CSS nam služi da bi objekte koje smo postavili na stranice, u ovom slučaju DIV tagove mogli pozvati i reći im kako da se ponašaju. Vidjet ćete kasnije da se u CSS-u mogu oblikovati praktički svi tagovi, ne samo DIV.

Onima koji se prvi puta susreću sa CSS-om ću malo pojasniti kako on radi. Zamislite da smo u neku HTML datoteku upisali neki DIV tag, i nazvali ga npr. kutija. Kada bi otvorili tu datoteku u njoj nebi vidjeli ništa, zato što kutija nije oblikovana. Da bi ju oblikovali otišli bi u CSS datoteku i u njoj bi napisali, naravno drugim riječnikom, npr. hoću da kutija bude širine 200px, visine 300px, da ima pozadinu crvene boje, da joj gornji obrub bude sive boje i debljine 2px, a donji obrub da joj bude crne boje i debljine 1px. Na ovaj bi to način rekli čovjeku, računalu naravno moramo reći na drugom jeziku, koji u ovom slučaju baš i nije puno kompliciraniji, pogledajte sljedeći kod:

Ovako izgleda bez komentara:

Kao rezultat dobijemo nešto poput ovoga:

Ako znate engleski CSS će vam biti poprilicno lagan za razumjeti pošto za svako svojstvo (širina, visina, pozadina itd.) postoji čisti engleski naziv za to. Znači npr. width:200px; nam je svojstvo širine. Svako svojstvo pojedinog objekta moramo završiti sa ;, to označava da nam to svojstvo tu završava.

Ajmo sada napraviti CSS datoteku za naš kostur. U DW-u ili u nekom drugom txt editoru otvorite novu datoteku i spremite je u isti folder kao i tableless.html i nazovite ju naprimjer tableless_stil.css. Prije nego počnemo upisivati oblikovanja, otvorit ćemo našu tableless.html datoteku i u nju pozvati CSS datoteku koju smo napravili. To ćete napraviti tako da ispod title tagova u .html datoteci upišete sljedeće:

Sa ovim kodom našem web pregledniku govorimo da se oblikovanja za ovu web stranicu nalaze u datoteci tableless_stil.css i da ih tamo potraži. Oblikovanja smo mogli upisivati i u samu HTML datoteku, ali radi bolje preglednosti to nećemo za sada raditi, a i ja osobno mislim da je ovo bolja praksa.

Sada odite u folder u kojem vam se nalaze ove .css i .html datoteke i unutar tog foldera napravite novi folder kojg ćete nazvati images i u nju spremite slike koje vam se nalaze u .zip datoteci koju ste skinuli na početku tutorijala. Znači gradient.gif i zaglavlje.jpg.

Kada smo napravili ove pripremne radnje, možemo početi sa upisivanjem CSS oblikovanja u našu tableless_stil.css datoteku. Prvo ću vam dati kod sa objašnjenjima pojedine linije, a ispod toga će vam pisati čiti kod bez komentara:

Ovako će to izgledati bez komentara:

Padding i margine

Ljudi se nekad bune izmedju paddinga i margina najlakše ću vam objasniti koja je razlika sljedećom slikom:

Žute strelice označavaju margine, dok crvene strelice označavaju padding. Dakle margina je razmak koji će biti između nekog objekta i ruba stranice ili objekta u kojem se nalazi objekt kojemu određujemo marginu. A padding je unutarnji razmak koji će biti primjenjen na objekte koji se nalaze unutar nekog objekta, u gornjem slučaju tekst u DIVu 2. Kod paddinga morate malo pripaziti prilikom određivanja širine ili visine objekta. Npr. ako želite da objekt bude širine 500px i da ima padding 5px sa lijeve i desne strane. Onda ćete morati napisati da da je objekt širine 490px, jer će u protivnom objekt zapravo biti širine 510px a ne 500px kako samo htjeli. Znači moramo oduzeti širinu paddinga od ukupne širine, 5px sa lijeve i 5px sa desne strane je 10px. 500px - 10px = 490px.

Nadalje primjetite kako sam kod #desno selektora upisao da je padding: 0 5px 0 5px; to smo mogli napisati i ovako:
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;

ali da nebi pisali tako dugačak kod možemo koristiti skraćenice, prvi broj predstavlja gornji padding, drugi predstavlja desni, treći predstavlja donji i četvrti broj predstavlja lijevi padding. Znači idu u smijeru kazaljke na satu. Istu stvar možete napraviti i za margine i za još neka svojstva. Ako bi npr. napisali da je margin:5px; to bi značilo da je margina sa sve četiri strane 5px. Isto vrijedi i za padding.

Ajmo dalje…. Sadržaj

Sada kada smo napravili osnovni CSS trebali bi dobiti nešto otprilike ovako kada otvorimo tableless.html u našem web pregledniku:

Kliknite na sliku za uvećanje

Sada kada smo definirali izgled kostura stranice možemo pristupiti unošenju sadržaja u iste, za početak ćemo unijeti naslov stranice u zaglavlju, znači izmedju < div id = "zaglavlje" > i < / div > upišite sljedeće u vašoj tableless.html datoteci:

Tag h1 označava glavni naslov, onda ga slijedi h2 pa h3 itd. Kada nebi stilizirali te naslove h1 bi bio najveći, h2 malo manji, h3 još manji itd. Ali ako ih stilizirate onda mogu izgledati kako hoćete, što ćemo napraviti malo kasnije

Sada ćemo dodati nekakav izbornik na našu stranicu, pošto će se izbornik nalaziti u DIVu lijevo onda sljedeći kod upišite između < div id = " lijevo " > i < / div >:

Izbornik ćemo napraviti u ne-poredanoj listi. Tag ul označava početak liste a tagovi li označavaju svaku stavku u listi. Pomoću < a href="#" > taga pravimo linkove na stranice koje želimo, umjesto # inače upisujemo put do određene stranice npr. http://www.google.com, ali za ovaj primjer, linkove ćemo vezati za stranicu na kojoj se već nalazimo, zato upisujemo tarabu (#).

Sada ćemo dodati glavni sadržaj on će se nalaziti u DIVu desno, sljedeći kod upišite između < div id=" desno " > i < / div >:

Ovdje se opet upoznajemo sa novim tagom a to je p tag. P tag označava paragraf odnosno odlomak. Odlomak ćemo kasnije oblikovati u CSS-u kao i ostale tagove

I za kraj ćete sljedeći kod unijeti u DIV podnozje, upišite sljedeći kod između < div id="podnozje" > i < / div >:

Ovdje smo na p tag primjenili klasu footer, to ćemo u CSS-u definirati tako da nam odlomak u podnozju izgleda malo drukcije od ostalih odlomaka koje budemo upisivali.

Ajmo oblikovati sadržaj…

Sada kada smo završili sa html-om bi trebali dobiti otprilike nešto ovako:

Kliknite na sliku za uvećanje

Ajmo se ponovno vratiti na našu CSS datoteku i napravit oblikovanje tagova koje smo sada dodali u tableless.html. Sljedeći kod upišite iznad prvog unosa u CSS datoteci znači iznad #omotac:

Malo o a:link, a:visited, a:hover

a:link, a:visited, a:hover su posebni selektori kojima odrđujemo kako će se ponašati linkovi na našim stranicama. a:link određuje kako će se izgledati link dok još nismo kliknuli na njega. a:visited određuje kako će izgledati link kada smo klinknuli na njega, pomaže posjetocu da zna na kojim stranicama je već bio. U našem slučaju će izgledati isto kao i ne posjećeni link. a:hover određuje izgled linka kada pređemo preko njega mišem.

I to bi bilo to, naš finalni rezultat bi trebao izgledati ovako. O CSS-u se ima još puno toga za reći, i u jednom od sljedećih postova ću to i napraviti. Zasad se nadam da vam je ovaj tutorial pomogao da napravite prvi korak prema dizajniranju bez tablica. Slobodno u komentare upišite sve što vam nije jasno i ako imate kakvih problema sa tutorialom. I ako vam se da, upišite dali vam je tutorial pomogao i dali biste željeli vidjeti više takvih i iz kojih područja web dizajna.

Ovaj unos je postavljen 21.06.2007 u 10:05 i pohranjen je pod HTML i CSS, Tutoriali. Možete pratiti odgovore kroz RSS 2.0 feed. Možete preskočiti do kraja stranice i ostaviti komentar. Pinganje trenutno nije dozvoljeno.