6. Lecke: Oldalfelosztások, tárolók

iDevice ikon Célok
  • Ismerje az oldalfelosztások lényegét, módjait
  • Ismerje a tároló fogalmát
  • Ismerje a div tag használatát
  • Ismerje a keretek, margók definiálását stílussal
  • Ismerje a háttérbeállításokat

Tartalom
  • Oldalfelosztási módok
  • A div tag
  • Keretek, margók megadása
  • Háttérbeállítások

 

Oldalfelosztások

A HTML nyelv egyik alapvető jellemzője, hogy a tag-ek egymásba ágyazhatóak, így a tartalmazás segítségével adják meg az oldal szerkezetét. Amikor egy tag egy (vagy több) másik tag-et tartalmaz, általánosan tárolónak nevezzük. Természetesen bizonyos tag-ek nem alkalmasak tárolónak (például a kép), míg másoknak ez az elsődleges szerepük.
Ahogy a második leckében szerepelt, a weboldalakat több részre bontjuk, hogy az egyes részeket egybe tudjuk formázni, megadhassuk az egymáshoz való viszonyukat. Ennek eszköze a tárolók használata és több módja létezik. A legrégebbi és mára már teljesen elavult módszer a keretek (frame) használata. Ez nemcsak hatékonyságban rossz, de a keresők is nehezebben indexelik az ilyen oldalakat. A keretes oldalfelosztás hátrányai:

  • Nehezebb navigálni a keretes oldalakon.
  • Nehezebb nyomtatni.
  • Nehezebb a kódban tájékozódni, mivel több html állomány kell.
  • Nehezen indexelik a keresőmotorok.
  • Nehéz az oldalhoz könyvjelzőt rendelni.

A HTML5-ből már ki is kerültek a keretekhez tartozó tag-ek.
Ezután a táblázatos felosztás vált általánossá. A mai oldalak összetettsége miatt túl összetett táblázatot kellett készíteni, illetve egymásba ágyazni. Valamint a sor- és oszlopösszevonások miatt túl átláthatatlan a forráskód illetve a módosítása rettenetesen nehéz. Ráadásul a táblázat szerkezetéből adódóan csak sorok és oszlopok segítésével lehetett a felosztást meghatározni, így bizonyos szerkezeteket nem lehet felépíteni.
A mai általánosan elfogadott oldalfelosztás a div tag segítségével történik, ami teljesen szabadon definiálható az oldalon belül és jól formázható. Ennek használata sokkal nagyobb szabadságot ad a fejlesztőnek illetve a módosítás is könnyen kezelhető stílusok segítségével.

A div
A div tag egy általános tároló, amelynek formázás nélkül nincs semmi alapértelmezett formátuma. Arra használjuk, hogy egy „dobozt" definiáljuk, amelybe bármilyen elemet bele tudunk foglalni. Mindig téglalap formájú, de a méretét és formáját szabadon változtathatjuk. A fő funkciója, hogy a weboldalt több blokkra tudjuk bontani és azokat szabadon tudjuk mozgatni az oldalon, meghatározhassuk az egymáshoz és az oldaloz való viszonyát (lásd 9. lecke). A div alkalmazása a ma legjobb oldalfelosztási mód, mivel sokkal áttekinthetőbb és rugalmasabb, mint a korábbi keretes vagy táblázatos módszer. Megfelelő div-ek és stílusok használatával tetszőleges oldalfelosztás megvalósítható. A 2. Leckében található 4. ábrán a beszámozott részeket is egy-egy div-vel hozzák létre.
A tárolók használatához fontos tulajdonságok a méretük illetve az elhelyezésük. Mivel a div téglalap alakú, következik, hogy szélességet (width) és magasságot (height) adunk meg általában pixelben.

width : 200px;
height : 100px;

Természetesen bármilyen elemnek a méretét ezekkel a tulajdonságokkal kell megadni.
Sokszor előfordul, hogy bizonyos elemnek nem akarunk pontos méretet adni, csak egy felső vagy alsó korlátot a szélességre, vagy magasságra. Így például a magasságra meg tudunk adni egy minimum értéket, aminél kisebb magassága nem lesz az elemnek, de ha tartalma olyan sok, akkor nagyobbra növelheti a böngésző.

min-width : 500px;
max-width : 1000px;
min-height : 500px;
max-height : 1000px;

Az elemek oldalon való elhelyezéséről részletesen lesz szó a 9. Leckében.



Keretek, margók, térközök, hátterek

A tárolókkal kapcsolatos leggyakoribb formázási beállítások a tároló kerete, margója, belső margója, valamint a hátterének megadása. Természetesen bármely olyan elemnek meg lehet adni ezeket a tulajdonságokat, amelyeknél van értelme a tulajdonságnak.


Keret
Egy elem keretét több módon meg lehet adni. Ha a keret mind a négy oldala ugyanolyanra akarunk formázni, akkor egyben meg lehet adni a keret tulajdonságait a

border-

kifejezéssel kezdve a tulajdonságokat.
Szét is lehet választani és egyenként megadni mind a négy oldalt. Ilyenkor a

border-top-
border-right-
border-bottom-
border-left-

kifejezéssel kezdve a tulajdonságot csak a fölső (top), jobb (right), alsó (bottom) és bal (left) keretvonalra érvényes a megadott formátum.
A keret tulajdonságai a következők:
A keret stílusa, amely a vonal stílusát jelenti, mint folytonos, szaggatott, stb. Például a folyamatos vonal beállítása a teljes keretre:

border-style : solid;

A keret vonalának színe megadható. A szín megadásának módja ugyanúgy működik, ahogy az 5. fejezetben a szövegeknél már szerepelt. Például a fölső keretvonal színét pirosra állítása:

border-top-color : red;

Végül a keret vonalának vastagsága adható meg, amelyet pixelben számolunk. Például a alsó keret vastagsága 3 pixel:

border-bottom-width : 3px;

A keret tulajdonságokat össze lehet vonni két féle módon is. Az egyik, ha a tulajdonságokat egyben adjuk meg vastagság, stílus és szín sorrendben szóközzel elválasztva az értékeket. Tehát egy 1 pixel vastag, szaggatott, kék keretet megadhatunk a következő módon:

border : 1px dashed blue;

A másik összevonási lehetőség, ha a keret egyes vonalaira hivatkozunk egy tulajdonság megadásával. Ennek egyik módja, ha föntről kezdve óra járásának megfelelően, azaz fölső, jobb, alsó és bal keret sorrendben adjunk meg az értékeket szóközzel elválasztva. Például a fölső keretet pirosra, a jobb oldalit zöldre, az alsót kékre és a bal oldalit sárgára színezést egyben meg lehet adni:

border-color : red green blue yellow;

További összevonási lehetőség, ha egyben formázzuk fölső-alsó és bal-jobb kereteket, amelyek így azonos beállítást kapnak. Például ha a fölső és alsó vonal pontozott, míg a bal és a jobb dupla vonal, akkor ez megadható egyben is:

border-style : dotted double;

Margók

A margókból két fajtát különböztetünk meg, az egyiket az elem és külső környezetének, míg a másik az elem és a tartalmának a távolságát adja meg.

Külső margó
Azt adja meg, hogy az elem (például egy div) és a környezetének mi a távolsága. Ezt úgy éri el mintha az elem méretét növelné, azaz a bal oldaltól való távolság növelésével az elemet jobbra tolja, míg a jobb oldalon való távolságnövelés hatására a jobb oldali környezetet tolja messzebb. A távolságot megadhatjuk pixelben:

margin : 10px;

vagy százalékban, amikor az elem méretéhez igazítja a távolságot:

margin : 10%;

végül automatikus margóállítás is lehetséges:

margin : auto;

Belső margó
Azt adja meg, hogy az elem és a tartalma között mekkora a távolság. A távolság növelésével nem a tartalomnak a méretét növeli, hanem magának a formázott elemnek a méretét. Az értéke ennek is pixelben és százalékban adható meg:

paddig : 10px;
padding : 10%;

Mindkét margó esetén hasonlóan lehet bontásban és összevonva is megadni a távolságot, ahogy a keret esetében. Tehát például a bal oldali külső és belső margó megadható

margin-left : 25px;
padding-left : 25px;

módon. Míg egy sorban is megadható fölső, jobb, alsó és bal sorrendben megadva szóközzel elválasztva

margin : 10px 15px 20px 25px;

Továbbá egyben megadható a fölső-alsó és bal-jobb távolság szóközzel elválasztva:

padding: 10px 0px;

Valamint természetesen mind a négy irányban egyben megadható:

padding : 5px;

10. Ábra: Egy HTML elem margói és helyfoglalásának szélessége

Egy elem tényleges helyfoglalási mérete több értékből tevődik össze. Függőlegesen az elem magassága, a fölső és alsó, külső illetve belső margója valamint a fölső és alsó keretének a vastagságának az összege. Vízszintesen hasonlóan a bal külső margója, bal keret vastagsága, bal belső margója, elem szélessége, jobb belső margója, jobb keret vastagsága, jobb külső margójának összege.

Megjegyzés
Mivel sok böngésző eltérő módon kezeli alapértelmezettként a margók méretét, így sokszor a stíluslapok legelején megadjuk, hogy egyik elemnek se legyen se belső, se külső margója, majd a későbbi stílusokkal minden elemnek megadjuk pontosan a megfelelő margóbeállításokat.

* {
magin : 0px;
padding : 0px;
}

Ma már nagyon sokféle felbontást használnak a felhasználók, így nehéz olyan weboldalt készíteni, amelyik a felbontáshoz igazodik. Inkább az a jellemző, hogy az oldal egész tartalmát berakjuk egy tárolóba.

<body>
<div id="main">
...
</div>
</body>

Ennek a tárolónak adott méretet adunk, ami igazodik ahhoz a felbontáshoz, amihez optimalizálunk (ez ma még az 1024*768). Sokszor ezt a tárolót az oldal közepére igazítjuk, amit szintén a margóval tudunk elvégezni az auto értékkel.

div#main {
width : 900px;
min-height : 500px;
margin : 0px auto;
}

Háttér
A háttérbeállítás az egyik legalapvetőbb design jellemző, ami egy weboldalon jelentkezik. Két háttér beállítás lehet, az egyik a háttérszín, a másik a háttérkép. Természetesen mindkettőt meg lehet adni egyszerre, hiszen ha a háttérkép nem fedi le a teljes elemet, akkor a háttérszín is látszik.

Háttérszín
A színek megadása ugyanúgy működik, ahogy az 5. leckében a szövegszínnél már szerepelt.

background-color : white;


Háttérkép
Bármilyen kép betölthető egy elem háttereként, természetesen vigyázni kell, hogy esetlegesen ne nyomja el az elem tartalmát, szövegnél olvasható maradjon, stb. A háttérkép lehet távoli elérésű, de ennek megvan a veszélye, hogy ha törlődik az eredeti helyről, akkor a mi weboldalunkról is eltűnik.

background-image : url(hatterkep.png);

A kép és az elem méretének eltéréséből adódóan a kép többféle módon viselkedhet. Ha a kép kisebb, akkor a kép ismétlődését meg lehet adni, alapértelmezésként minden irányban ismétlődve kitölti a teljes elemet. Ettől függetlenül megadható a teljes ismétlődés a

background-repeat : repeat;

módon. Ha csak vízszintesen illetve függőlegesen szeretnénk ismétlődés, akkor a

background-repeat : repeat-x;
background-repeat : repeat-y;

értékkel adhatjuk meg. Végül, ha egyáltalán nem szeretnénk ismétlődést, akkor a kövekező módon adhatjuk meg:

background-repeat : no-repeat;

Amikor a háttérkép nem tölti ki az elemet és nem is ismétlődik, akkor érdekes lehet, hogy az elemen belül hol jelenjen meg. Erre szolgál a pozícionálás. Ez megadható úgy, hogy először a vízszintes elhelyezés majd a függőleges elhelyezést adjuk meg szóközzel elválasztva. Ez megtehető igazításként, a bal (left), közép (center), jobb (right), fönt (top) és lent (bottom) valamilyen kombinációjával, például jobbra és le helyezve:

background-position : right bottom;

Valamint megadható a tároló elem méretéhez viszonyított százalékban, vagy konkrétan pixelben. Ilyenkor mindig ez elem bal fölső sarka a 0px 0px, és a kép bal fölső sarkát fogja az adott pontba helyyezni:

background-position : 100px 50;

Amikor az elem mérete annyira nagy, hogy nem fér el a böngésző ablak látható részén, akkor érdekes beállítási lehetőség, hogy az oldal görgetésekor hogyan viselkedjen a háttérkép. Két beállítás lehetséges, amikor a kép az oldallal együtt mozog (scroll), illetve a görgetés alatt az ablakhoz viszonyított helyzete nem változik (fixed):

background-attachment : scroll / fixed;

 

iDevice ikon Feladat
Az eddig elkészült oldalakat egészítse ki úgy, hogy tegye be az oldal tartalmát egy általános tárolóba! Egészítse ki az általános stíluslapját az oldal háttérkép megadásával, formázza meg az általános tárolót, igazítsa középre, méretezze megfelelően és állítsa be a háttérszínét! Adjon a tárolónak keretet és formázza elgondolása szerint! Állítsa be, hogy a tároló az oldal tetejétől valamivel lejjebb kezdődjön és a szövegtartalom egyik irányból se tapadjon a tároló keretére!

iDevice kérdés ikon Feleletválasztós teszt
Melyik állítás helytelen?
  
A táblázatos oldalfelosztás könnyebb a div-es oldalfelosztásnál, mivel a cellák jól meghatározott tárolók.
A div-es oldalfelosztás korszerűbb, mint a táblázatos, mivel dinamikusabb felépítésű.
A keretes oldalfelosztás nem hatékony, mert a keresők nehezebben indexelik az ilyen weboldalakat.

Mire való a div?
  
Általános blokkos tároló.
Az oldalt vele lehet részekre darabolni.
Szövegek egy részét lehet egységbe foglalni.

Mire való a margin tulajdonság?
  
Megadni az elem és a környezetének a távolságát.
Megadni az elem és az oldal szélé közötti távolságot.
Megadni a böngésző széle és az oldal tartalma közötti távolságot.

Mire való a padding tulajdonság?
  
Az elem és a tartalma közötti távolságot lehet megadni vele.
A böngésző széle és az oldal tartalma közötti távolságot lehet megadni vele.
Az elem és környezetének távolságát lehet megadni vele.

Mi határozza meg egy elem szélességi helyfoglalását?
  
Az elem szélességének, bal és jobb belső és külső margójának, bal és jobb keretének összege.
Az elem width tulajdonsága.
Az elem böngésző által meghatározott szélessége.