Tableless Layouts odpira nova oblikovalska meja
Obstaja veliko razlogov, da ne uporabljate tabel za postavitev . Eden od najpogostejših razlogov, zaradi katerih jih ljudje še naprej uporabljajo, je, ker je težko narediti postavitev s CSS. Čeprav skriptiranje CSS ne vključuje učne krivulje, ko razumete, kako narediti CSS postavitev, boste morda presenečeni nad tem, kako enostavno je. In ko se boste naučili, boste naslovili drugi najpogostejši razlog, zaradi katerega ljudje ne bodo uporabljali CSS - "Hitreje je pisati tabele." Hitreje je, ker poznate tabele, vendar ko boste izvedeli CSS, boste morda prav tako hitro s tem.
Brskalnik podpira pozicioniranje CSS
Postavitev CSS je dobro podprta v vseh sodobnih brskalnikih . Razen če gradite spletno mesto za Netscape 4 ali Internet Explorer 4, vaši bralci ne smejo imeti težav pri ogledu spletnih strani, ki jih postavlja CSS.
Razmišljajte o tem, kako ustvarite stran
Ko gradite spletno mesto z uporabo tabel, morate razmišljati v obliki tabele . Z drugimi besedami, razmišljate v smislu celic, vrstic in stolpcev. Vaši spletni strani bodo odražali ta pristop. Ko se premaknete v oblikovanje postavitve CSS, boste začeli razmišljati o svojih straneh glede vsebine, saj se lahko vsebina postavi kjerkoli želite v postavitvi - celo nad drugimi vsebinami.
Različne spletne strani imajo različne strukture. Če želite zgraditi učinkovito stran, ocenite strukturo katere koli strani, preden jo dodelite vsebini. Primerna stran lahko vključuje pet ločenih delov:
- Glava . Domov do oglasne pasice, ime spletnega mesta, navigacijske povezave, naslov članka in tudi nekaj drugih stvari.
- Desni stolpec . To je desna stran strani z iskalnim poljem, oglasi, video okenci in trgovinskimi območji.
- Vsebina . Besedilo članka, objave v spletnem dnevniku ali nakupovalnega vozička - mesno-krompir na strani.
- Inline oglasi . Oglasi so vključeni v vsebino.
- Noga . Spodnja navigacija, informacije o avtorju, informacije o avtorskih pravicah, nižje pasice in povezane povezave.
Namesto da bi te pet elementov vstavili v tabelo, uporabite segmentacijske elemente HTML5, da določite različne dele vsebine in nato uporabite pozicioniranje CSS, da postavite elemente vsebine na stran.
Prepoznavanje vaših vsebinskih razdelkov
Ko določite različna področja z vsebino vašega spletnega mesta, jih morate zapisati v svoj HTML. Čeprav lahko svoje postavke postavite v poljuben vrstni red, je dobro, da najprej postavite najpomembnejše dele vaše strani. Ta pristop bo pomagal pri optimizaciji iskalnikov.
Da bi prikazali pozicioniranje, si lahko ogledate stran s tremi stolpci, vendar brez glave ali noge. S pozicioniranjem lahko ustvarite poljubno vrsto postavitve, ki vam je všeč.
Za postavitev v treh stolpcih določite tri dele: levi stolpec, desni stolpec in vsebino.
Ti deli se bodo instancirali z uporabo elementa ARTICLE za vsebino in dva elementa SECTION za dva stolpca. Vse bo imelo tudi atribut, ki ga bo identificiral. Ko uporabljate atribut id, morate za vsak ID dodeliti edinstveno ime.
Postavitev vsebine
Z uporabo CSS določite položaj za svoje ID'd elemente. Podatke o položaju shranite v slogovni klic, kot je ta:
#content {
}
Vsebina znotraj teh elementov bo porabila toliko prostora, kot je mogoče, in sicer 100 odstotkov širine trenutne lokacije ali strani. Če želite vplivati na lokacijo odseka, ne da bi ga prisilili na določeno širino, spremenite oblazinjenje ali lastnosti robov.
Za to postavitev nastavite dva stolpca na fiksno širino in nato nastavite njihov položaj absolutno, tako da ne bodo vplivali na to, kje so v HTML-ju.
# left-column {
položaj: absolutno;
levo: 0;
širina: 150px;
margin-left: 10px;
margin-top: 20px;
barva: # 000000;
padding: 3px;
}
# desni stolpec {
položaj: absolutno;
levo: 80%;
na vrh: 20px;
širina: 140px;
padding-left: 10px;
z-indeks: 3;
barva: # 000000;
padding: 3px;
}
Nato za področje vsebine nastavite robove na desni in levi, tako da vsebina ne bi prekrivala dveh zunanjih stolpcev.
#content {
na vrh: 0px;
margina: 0px 25% 0 165px;
padding: 3px;
barva: # 000000;
}
Če določite svojo stran s CSS namesto tabele HTML, potrebujete malo več tehnične spretnosti, vendar pa izplačilo izhaja iz bolj prilagodljivih in odzivnih modelov ter lažje naredite strukturne prilagoditve na vaši strani kasneje.