2011. november 8., kedd

Elrendezések

Ma egy nagyon érdekes és hasznos dologgal ismerkedünk meg. Ha az oldalunkat szeretnénk "dizájnolni", akkor a jelenlegi tudásunkkal <table> táblázattal készítenénk el. Az első gyakorló feladat is valami ilyesmi volt. Nézzünk is meg egy képet:


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. 
  1. az egész oldal,
  2. a sötétzöld fejléc
  3. a világoszöld menübar
  4. a szürke tartalomblokk
  5. és a sötétzöld lábléc
Most mindegyiknek adjunk egy nevet:
  1. az egész oldal --> egesz
  2. a sötétzöld fejléc --> fejlec
  3. a világoszöld menübar --> menu
  4. a szürke tartalomblokk --> tartalom
  5. 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.

  • "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:

  1. 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;">.
  2. 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.