Weblabor

Táblázat alapú egy oldal, ha a lap szerkezetét egymásba ágyazott többszörösen összetett táblázatokkal oldjuk meg. Ezekre kényszerültünk a CSS előtti időkben, ha két vagy három oszlopos megjelenést, vagy más speciális hatást akartunk elérni. A táblázat alapú oldalakkal azonban több probléma is van, de van megoldás. A cikkben egy konkrét oldalkialakítás során egy ilyen megoldást ismerhetünk meg, illetve azt, hogy miért rossz ötlet táblázat segítségével kialakítani egy oldal megjelenését.

Mindenekelőtt lássuk, milyen problémák vannak a táblázat alapú oldalkialakítással:

• A forráskód akkor is nagyon bonyolult és szinte átláthatatlan lesz, ha jó úttörő módjára szépen betagoljuk a forrást, minden behúzandó elemet behúzva. Az a tapasztalatom, hogy hiába rakok be mindenféle megjegyzést, például "ez a navigátor tábla eleje", ez meg a "vége", ha valamit egy-két hónap elteltével módosítani akarok, akkor általában nagyon sok ideig tart mire megtalálom, hogy melyik tábla mi is tulajdonképpen. Persze a felhasználók ebből nem érzékelnek semmit, nem is érdekli őket ez a rész.
  
• A táblázatokat csak akkor tudják a böngészők helyesen megjeleníteni ha már beolvasták a </table> jelet. Addig meg nem. Ez sokszor azt jelenti, hogy a böngésző tölt és tölt, mi meg nem látunk semmit. Még szélessávnál is zavaró, nem beszélve a modemes internetről.
  
• A táblázatos oldalak nagyobb fájlméretben férnek csak el a sok <td> és </td> elem miatt.
  
• Ha az oldalunk "quirks" módban készül (nincs megfelelő DOCTYPE az elején), vagy a böngésző egy régebbi darab, minden table elem megtöri a betűbeállításokkal kapcsolatos öröklődést, azaz ha az oldalunkon például Verdana betűtípust akarunk használni, akkor feleslegesen több helyen is definiálnunk kell, hogy az Verdana legyen (Internet Explorerben nem használható az inherit érték).
  
• A táblázatos oldalkialakítás nem arra használja a táblázatokat, amire valók: táblázatos adatok leírására.
  

A megoldás

Használjunk CSS-t! Ez kiküszöböli a fent említett hiányosságokat. Ebben a cikkben be fogom mutatni, hogy hogyan kell megtervezni a lapunkat, hogyan kell HTML kódunkat összerakni, hogy kiszolgálja ezt az igényt. Vagyis hogyan kell elkészíteni egy CSS alapú "tableless" (táblázatok nélküli) oldalt. A táblázat nélküliség nem azt jelenti, hogy az oldalon nem szerepelhet táblázat, hanem azt, hogy nem az oldal megjelenésére, "layout"-jára használjuk, hanem ha kell, akkor arra amire való: táblázatos adatok megjelenítésére.

A feladat

A feladat az volt, hogy a lal.freeblog.hu lapot alakítsam át. Ilyen volt a lap az átalakítás előtt:

Ebből kellett volna egy három oszlopos oldalt csinálnom (vagyis kiegészíteni plusz egy oldallal). Ugye egy többszörösen összetett táblázatba beszúrni egy új oszlopot az nem leányálom. Meghát fent már leírtam, hogy milyen problémáim is vannak a táblázatokkal. Szóval akkor úgy döntöttem, hogy a problémát egy új, CSS alapú, táblázat nélküli lappal fogom megoldani. A kész lapnak 800*600-as és 1024*768-as felbontásban, no meg ezek fölött is jól kellett kinéznie, mindenféle böngészőkkel. Internet Explorerben is. A megoldás: 1 egység alatt összerakni a lapot, hogy bármely böngészőben jól jelenjen meg, ezután 5 egység idő alatt átgyúrni úgy, hogy az Internet Explorer is nagyjából úgy jelenítse meg, ahogy azt mi szeretnénk...

Na akkor hogy is kell?

Akkor lássuk a medvét, állítsuk össze a HTML-t sok sok divvel, és csináljuk meg hozzá a CSS-t! Az biztos, hogy egy olyan cuccot kell összerakni, ami 3 oszlopból indul ki. Nevezzük őket balsávnak, jobbsávnak és középrésznek (bár ezek nem feltétlenül a legjobb elnevezések, de mindenesetre praktikusak).

Rögtön az elején jó, ha belőjük magunknak, hogy melyik rész fog a legtovább nyúlni. Esetünkben ez a középrész lesz.

A kiindulási alapként szolgáló HTML kód összeállítása

Be kell vallanom itt már kissé célirányosnak kell lenni, a div-ek sorrendjénél már figyelembe kell venni a leendő CSS megoldást. Bár vannak más megoldások is, én az abszolút pozícionálást (position: absolute) fogom használni a fő diveknél. Így a három fő div-et bármilyen sorrendben betehetem a HTML kódba, mivel a böngészők nem a HTML kódbeli helyük, hanem a CSS abszolút pozicionálási szabálya alapján fogják megjeleníteni. Azért rakom mégis a középrészt előre, mivel itt lesz a tényleges tartalom, és bizonyos keresőprogramok magasabb helyre teszik az oldalt, ha a keresett szó a HTML kódban előrébb szerepel.

A CSS alapja

A body elemmel megmondjuk, hogy milyen betűtípust akarunk, és 0-ra állítjuk a margókat és a kitöltést. A background definicót itt egyetlen ok miatt adjuk meg. Azt akarjuk, hogy ilyen szinű legyen a bal sáv legalsó dobozának a háttere. De akkor miért itt adjuk ezt meg? Azért mert az Internet Explorer nem tudja a bal sávunk legalsó boxát olyan hosszan lefelé megnyújtani amilyen hosszú a középrész, hanem csak olyan hosszúra hagyja amekkora a tartalma + az alsó doboz paddingja és marginja. Mi viszont azt akarjuk, hogy a legalsó doboz lelógjon a lap aljáig (vagyis a középrész aljával egy vonalban legyen). Ezért azt csináljuk, hogy a lapunk háttere olyan színű, mint amilyen szinűre akarjuk a bal alsó dobozt. Minden más doboznak adunk egy háttérszínt, ennek meg majd nem. Így a box beleolvad majd az alapértelmezett háttérbe és úgy néz ki mintha lelógna odáig. Ha ez nem világos, akkor majd ha kész az oldal, adni kell a bal legalsó boxnak egy border értéket és látható lesz, hogy minek hol a határa.

A balsávot a left: 0, top: 0 pozícióba, vagyis a bal felső sarokba igazítjuk. A jobbsávot pedig a jobb felső sarokba. Mindkettő 200 pixel széles. Ez egy 800*600-as képernyőnél azt jelenti, hogy a középrész 400 pixel, mínusz a böngésző kereteinek szélessége széles lesz. Nagyobb felbontásnál a középrész nagyobb lesz. A középrésznek jobbra és balra 200px-es margót adunk meg, hogy ne lógjon rá se a balsávra, se a jobbsávra, és adunk neki némi keretet, hogy úgy nézzen ki mint ahogy a táblázatos oldalunk nézett ki.

A középrész

A középrészen két boxunk van, egy a fejlécnek egy meg a tartalomnak. Tegyük be a CSS-be a szükséges bejegyzéseket.Semmi érdekes, csak a fejlécnek adunk egy alsó keretet, hogy adja azt a kinézetet mint amit a táblázatos verzió adott. Persze ehhez be kell pár új div-et tenni a HTML kódunkba is:A fejlécbe az oldal fejléc szövege fog bekerülni, illetve egy képet is szeretnénk betenni. Azért esett a választásom a h1 elemre, mivel ez az oldalnak a legfőbb fejléce lesz, illetve a h1-et jobban súlyozzák a keresők is. Azt szeretném, hogy a kép jobb szélre legyen igazítva, a szöveg pedig a maradék hely közepére. A blogcím CSS definició annyiról szól, hogy méretet és színt adunk majd a fejlécben szereplő szövegnek, beállítjuk a magasságát, plusz a hátterébe jobbra igazítottan beteszünk egy képet.Az ehhez tartozó CSS:Na, jöhet a tartalom rész. Beteszünk ide is egy pár design-t módosító CSS elemet, de erről csak ennyit. Itt érdemes valamiféle tartalommal jó alaposan feltölteni ezt a részt, mivel az éles oldalon is itt van a legtöbb szöveg, és így tudjuk majd a legjobban tesztelni, hogy hogyan is néz majd ki a kész oldal.

A balsáv

A bal oldali sávban kiindulásként 3 dobozunk lesz, de persze lehet ennél több is, az is ugyanígy működik.Magyarul semmi különös, csak színek, keretek, kitöltések és más szépítőszerek. A balegy lesz felülről az első dobozunk, a balketto a második, a balharom pedig a harmadik. Így utólag, ezek az elnevezések rosszak, helyesen a bennük levő tartalom szerint kellett volna nevet adni (pl. kereses, archivum, linkek, stb.), hiszen ha a másik oldalra kerülnének, vagy másik pozícióba a bal oldalon, a nevük teljesen értelmetlen lenne.

A balharom lesz az, ami miatt a bodynak adtuk azt a bizonyos background értéket. Itt látszik is, hogy a balegynek és a balkettonek is adunk háttérszínt, a balharomnak pedig nem, hanem hagyjuk, hogy örökölje a balsavtól.

És az ehhez tartozó HTML kód. Itt aztán végképp nincsen semmi érdekes. Fogtam és az eredeti lap forráskódjából bemásoltam minden ide tartozó dolgot. Persze a forrást kicsit pofásítottam, mert a régi nagyon össze volt dobálva. Itt jól lehet látni, hogy a táblázatos oldalakkal ellentétben - ha rendesen betagoljuk tabulátorokkal a forrást - milyen szépen lehet látni, hogy melyik doboz meddig tart. Szóval ha később majd valamit az egyik dobozból át akarunk rakni a másikba, akkor biztos, hogy könnyen meg fogjuk találni.A balharom boxban volt még egy fontos honlapok nevezetű rész, még azt is hozzá kell tennünk. Ennek a links nevet adtam. Itt egy nem trükkös megoldást használtam ahhoz, hogy három oldalon legyen keret, először megadtam, hogy mind a négy oldalon legyen 6px, majd a jobb oldalit felüldefiniáltam. A CSS validator warningol is rá, de csak azért, mert buta.És itt megintcsak fogtam az eredeti HTML kód ide vonatkozó részét és bemásoltam ide.No, akkor a bal oldali sávval meg is vagyunk.

A jobbsáv

Ide nem tudtam, hogy mit akar a kedves kuncsaft, szóval csináltam 2 dobozt a balsavval megegyező színekkel és gondoltam majd ha kiderül, akkor a beltartalmat meg lehet változtatni. Hát lássuk a CSS-t, amiben csak a szokásos szépítőszerek és keretek szerepelnek:A HTML-t meg csak feltöltöttem valami szöveggel, hogy lehessen látni a várva várt végeredményt.Na ha ezen mind végigjutottunk, akkor kész is vagyunk. Meg lehet nézni a végeredményt. Persze pár szemfüles olvasó bizonyára észreveszi, hogy a CSS-ben van pár megjelenést módosító definíció, de ezeket már az előttem szólók úgy is elmagyarázták, így én nem tettem.

Megjegyzések

• Az elnevezésekkel jó vigyázni. Ahogy az előbb is írtam: most úgy hívjuk az egyik dobozunkat, hogy balketto. Ha ezt egyszer csak szeretnénk átrakni a jobb oldalra, akkor azt ugye a HTML kód változtatása nélkül tisztán a CSS módosításával is meg tudjuk tenni. Pár position:absolute; top:valami; right:valami; meg is oldaná. Például a CSS Zen Garden oldalán 500 különféle design van hozzárendelve egyetlen HTML oldalhoz. No ilyenkor félrevezető lehet, hogy balketto-nek hívunk egy jobb oldali boxot...
  
• Ez a design jól néz ki 1024*768 és annál nagyobb felbontásban Explorerrel, Firefoxxal, Operával. 800*600-on tűrhető a Exploreren kívül mindegyikkel. Az Explorer 800*600-on eltünteti vagy megtöri a jobbsáv és a középrész közötti sötétszürke csíkot (a kozepresz border-jét). Ezen nem aggódtam annyira, mert tudom, hogy a lapot 10-15%-ban nézik 800*600-on és ennek kb. 50%-a Explorerrel. Nekik meg úgy kell. De még úgy se olyan csúnya.
  
• Az oldal kialakítása során abszolút pozícionálást alkalmaztam. Másképp is meg lehet oldalni egy oldal felépítését, sőt, egy adott design kapcsán lehet, hogy abszolút pozícionálással nem is fogjuk tudni megoldani a feladatot. Hasznos tippekkel szolgálhat az In search of the One True Layout cikk, mely egy olyan megoldást kíván nyújtani, mely a legtöbb feladatra ráhúzható.
  

Tanácsok táblázatnélküli oldalak létrehozásához

• Először rajzoljuk le magunknak, hogy mit szeretnénk legyártani.
  
• Rajzunkat fordítsuk le a CSS nyelvére valahogy így: "Egy három oszlopos oldalt akarok, amin a fejléc a középső oszlop része", vagy mondjuk: "Egy teljes szélességet lefoglaló fejlécet és alatta egy három oszlopos lapot akarok". Ez segíteni fog az alap HTML összerakásában, és a fő dobozok beazonosításában.
  
• Ezután készítsünk egy HTML file-t, amiben még nincsen semmi, csak a fő divek. Ennek valahogy úgy kell kinéznie mint a "A kiindulási alapként szolgáló HTML kód összeállítása" részben csináltuk itt. Más szavakkal ez azt jelenti, hogy lesznek olyan divek amikben nincsen más tartalom, csak másik divek.
  
• A CSS-ünket először design nélkül, csak az oldal felépítésére koncentrálva kezdjük el. Vagyis nem kellenek betűk, szinek, stb, hanem csak position, float, stb elemek.
  
• Ezután szépen építkezve fejlesszük a HTML-t és a CSS-t egymás melett, először egy-egy elemet teljesen elkészítve (pl. balsáv) és utánna tovább a többi elemet.
  
• Legyünk óvatosak a fix szélességek használatával. Pl. egy 200px széles divben elhelyezhetünk egy 190px széles képet/táblázatot, de a padding és a border értékek miatt lehet, hogy nem fog elférni. Az Explorer biztosan hibásan jeleníti meg, a többi böngészőnél is nem várt hatásra számíthatunk ha pl. a 190px széles képünket betesszük egy 200px széles divbe aminek 15px jobb és baloldali paddingja van.