Hogyan csinálnánk meg?
- Létrehoznánk egy táblázatot, ami három soros és 2 oszlopos.
- Az első és utolsó sor celláit összevonjuk.
- Színt adunk a különböző celláknak, majd megadjuk a szöveget is, amit formázunk.
Kód:
Azonban több oka is van annak, hogy miért ne ezt használjuk. Egyrészt mert elavult, másrészt mert nem felel meg a szabványoknak, harmadrészt pedig ha CSS-t használunk, akkor sokkal egyszerűbb dolgunk lesz később. Mi még nem ismerjük a CSS-t, de amire most szükségünk van, azt megtanuljuk.
Először nézzük meg újra a képet:
Ha jobban szemügyre vesszük, akkor 5 részből áll.
- az egész oldal,
- a sötétzöld fejléc
- a világoszöld menübar
- a szürke tartalomblokk
- és a sötétzöld lábléc
Most mindegyiknek adjunk egy nevet:
- az egész oldal --> egesz
- a sötétzöld fejléc --> fejlec
- a világoszöld menübar --> menu
- a szürke tartalomblokk --> tartalom
- a sötétzöld lábléc --> lablec
Most hogy felosztottuk "vizuálisan", valahogy ezt a kódban is meg kéne tenni. Erre szolgál a <div> tag. Ilyenkor ugye nincs szükségünk a táblázatra. A kódunk csak a <div>-ekkel így néz ki:
FONTOS: <div>-ek esetében a CSS-es formázást kell használnunk.
SZINTAXISA: <div id="valami" style="width:500px;height:500px;">
TEHÁT: style attribútum értékén belül pontosvesszővel elválasztva megadjuk az adatokat.
Most akkor menjünk végig a különböző <div>-ek tulajdonságain.SZINTAXISA: <div id="valami" style="width:500px;height:500px;">
TEHÁT: style attribútum értékén belül pontosvesszővel elválasztva megadjuk az adatokat.
- "egesz" - a táblázat esetén 500px-volt, most is annyi legyen a szélessége (ezt a többinél már nem kell beállítanunk, hiszen az egész elrendezésre kihat). Háttérszínt nem kell megadnunk, hiszen annak egyrészt nem lenne értelme (mert a később megadott érték felülírja az előzőt), másrészt az egész elrendezésre kihatna.
- "fejlec" - háttérszíne legyen #008000.
- "menu" - háttérszíne #00FF00, szélessége 100px, magassága 200px.
- "tartalom" - háttérszíne legyen #eeeeee, szélessége pedig 400px (Miért? Az "egész" szélessége 500pixel, ha azt szeretnénk, hogy a "menu" és "tartalom" elférjen egymás mellett, akkor a teljesből ki kell vonnunk a "menu" szélességét --> "teljes"-"menu"="tartalom" --> 500-100=400), magassága legyen ennek is 200 pixel.
- "lablec" - háttérszíne legyen #008000.
Kódban:
Most elhelyezzük a <div> és </div>-ek között a szövegeket:
IDE TARTOZIK: Google Chrome-ban az oldal helyi menüjében (egér jobb klikk) van egy Elem vizsgálata nevű menüpont. Erre kattintva jól láthatók a <div>-ek és azok méretei, elhelyezkedése.
A <div>-ek már megvannak, azonban nem éppen úgy helyezkednek, hogy mi szeretnénk. Menjünk is sorjában:
- A "fejlec" alatt van egy jókora fehér sáv. Ez valójában a <h1> alsó margója. Egyszerűen eltüntethetjük a következő képpen: <h1 style="margin-bottom:0;">.
- A "tartalom"-nak a "menu" mellett kéne lenni. Ezt úgy érhetjük el, ha a "tartalom"-ot odalebegtetjük. A lebegtetés kb. úgy működik, mint amikor egy kép a szöveg előtt van (pl.: egy szövegszerkesztőben). A lebegtetés így érjük el: <div id="valami" style="float:left">. Ezt írjuk be a "menu"-be és a "tartalom"-ba is, hiszen ha csak a "menu"-be írjuk be, akkor a "tartalom" a "menu" alá fog csúszni. A lebegtetésről majd lesz egy lecke, amikor a CSS-t tanuljuk.
Kódban:
Eredmény:
Ezzel a módszerrel (a táblázatossal is) nagyon sokféle dizájnt létre lehet hozni, és még a szabványnak is megfelel :D
Legközelebb megnézzük a DTD és egy picit belekukkantunk a CSS használatába.
Legközelebb megnézzük a DTD és egy picit belekukkantunk a CSS használatába.