Bezlični izgledovi otvaraju nove granice dizajna
Postoji mnogo razloga da ne koristite tablice za izgled . Jedan od najčešćih razloga koji ljudi daju za nastavak korištenja je zato što je teško napraviti raspored s CSS-om. Iako CSS skriptiranje ne uključuje krivulju učenja, kada shvatite kako napraviti CSS izgled, možda ćete biti iznenađeni koliko je to lako. I nakon što naučite, obratit ćete se na drugi najčešći razlog zbog kojeg ljudi daju da ne koriste CSS - "Brže je pisati tablice." Brže je jer znate tablice, ali nakon što naučite CSS, možda ćete biti jednako brzo s tim.
Podrška preglednika CSS pozicioniranja
CSS pozicioniranje je dobro podržano u svim modernim preglednicima . Osim ako ne gradite web-mjesto za Netscape 4 ili Internet Explorer 4, vaši čitatelji ne bi trebali imati poteškoća s gledanjem vaših web-stranica postavljenih u CSS-u.
Preispitivanje načina na koji gradite stranicu
Kada gradite web mjesto pomoću tablica, morate razmišljati u tabličnom obliku. Drugim riječima, razmišljate o stanicama i redcima i stupcima. Vaše web stranice će odražavati ovaj pristup. Kada se prebacite na dizajn pozicioniranja CSS, početi ćete razmišljati o svojim stranicama u smislu sadržaja, jer se sadržaj može postaviti na bilo kojem mjestu u rasporedu, čak i slojevito na vrhu drugog sadržaja.
Različite web stranice imaju različite strukture. Da biste izgradili učinkovitu stranicu, ocijenite strukturu bilo koje stranice prije nego što dodijelite sadržaj. Primjerna stranica može sadržavati pet različitih odjeljaka:
- Zaglavlje . Naslov oglasa bannera, naziv web mjesta, navigacijske veze, naslov članka i nekoliko drugih stvari.
- Desni stupac . Ovo je desna strana stranice s okvirom za pretraživanje, oglasima, video kutijama i područjima za kupnju.
- Sadržaj . Tekst članka, bloga ili košaricu - meso i krumpir stranice.
- Inline oglasi . Oglasi se ugrađuju unutar sadržaja.
- Podnožje . Donja navigacija, informacije o autu, informacije o autorskim pravima, niže oglase bannera i povezane veze.
Umjesto da stavite tih pet elemenata u tablicu, upotrijebite HTML5 elemente za presijecanje kako biste definirali različite dijelove sadržaja, a zatim koristite CSS pozicioniranje kako biste stavili elemente sadržaja na stranicu.
Identificiranje vaših odjeljaka sadržaja
Nakon što definirate različita područja sadržaja vaše web-lokacije, morate ih upisati u svoj HTML. Iako možete, općenito, stavljati svoje odjeljke u bilo koju narudžbu, prvo je dobro postaviti najvažnije dijelove stranice. Ovaj pristup pomoći će i kod tražilice optimizacije.
Da biste demonstrirali pozicioniranje, predvidite stranicu s tri stupca, ali bez zaglavlja ili podnožja. Pomoću pozicioniranja možete stvoriti bilo koju vrstu izgleda koji vam se sviđa.
Za raspored u tri stupca odredite tri odjeljka: lijevi stupac, desni stupac i sadržaj.
Ti će odjeljci biti instanciirani pomoću elementa ARTICLE za sadržaj i dva elementa SECTION za dva stupca. Sve će također imati atribut koji ga identificira. Kada koristite ID atribut, morate pridružiti jedinstveni naziv za svaki id.
Postavljanje sadržaja
Pomoću CSS-a odredite položaj elemenata ID-a. Pohranite podatke o poziciji u takav stilski poziv:
#content {
}
Sadržaj unutar tih elemenata zauzima onoliko prostora koliko može, naime 100 posto širine trenutačne lokacije ili stranice. Da biste utjecali na lokaciju odjeljka bez prisile na fiksnu širinu, promijenite svojstvo ispuna ili margine.
Za ovaj izgled, postavite dva stupca na fiksne širine, a zatim postavite njihov položaj apsolutnom, tako da ne bi utjecali na mjestu gdje se nalaze u HTML-u.
# lijevi stupac {
pozicija: apsolutna;
lijevo: 0;
širina: 150px;
margina-lijevo: 10px;
margin-top: 20 piksela;
boja: # 000000;
padding: 3px;
}
# desni stupac {
pozicija: apsolutna;
lijevo: 80%;
vrh: 20px;
širina: 140px;
padding-lijevo: 10px;
z-indeks: 3;
boja: # 000000;
padding: 3px;
}
Zatim za područje sadržaja postavite margine s desne strane i lijevo tako da se sadržaj ne preklapa s dva vanjska stupca.
#content {
vrh: 0px;
margina: 0px 25% 0 165px;
padding: 3px;
boja: # 000000;
}
Određivanje stranice pomoću CSS-a umjesto HTML tablice zahtijeva malo više tehničkih vještina, no isplata je od fleksibilnijeg i osjetljivijih dizajna te veća jednostavnost kasnijih strukturnih prilagodbi vašoj stranici.