Mind tudjuk, hogy weboldalaink tartalmát modulokban szoktuk elhelyezni. Most ennek fogom bemutatni az alap kódját. Kétféle módszer is létezik a modulok kódolására, mindkettőt igyekszem bemutatni.

 

Egy modul jobb esetben 3 részből áll: fejléc, közép rész, lábléc, de állhat kettőből is (ha nincs lábléc). A fejlécben helyezkedik el a cím, a középsőben a tartalom, a láblécben pedig oldalsó modul esetében semmi, de friss modul esetében megjelenhet a közzétevő személy neve, közzététel ideje, kategória, stb.  Most nem fogjuk ennyire kivesézni a dolgot, hanem a két változatot mutatnám be.

 

Táblázatos modul

Ebben az esetben a modul egy táblázatban jelenik meg, az rajzolja ki a formáját. Mind ismerjük a táblázatok működését, <tr> taggel nyitunk új sort, <td> taggel pedig új cellát. Először nekem is bonyolultnak tűnt pedig nem is az.

Egy 3 szintes modul egy olyan táblázatból áll, aminek 1 oszlopa, és 3 sora van, tehát 3-szor kell használnuk a <tr> és <td> tageket. Először is, csak egy cellás táblázatot készítek, ez lesz a fejléc cellája, utána kerül bővítésre.

<table>
<tr>
<td>
fejléc
</td>
</tr>
</table>

Ha azt szeretnénk, hogy ebben szerepeljen a stíluskészlet megadása, tehát a modul formázása, akkor a css megfelelő kódját is meg kell jelenítenünk benne, hiszen így csak egyszerű cella jelenik meg. Ezt így kellene csinálni:

<table>
<tr>
<td class="header1>
fejléc
</td>
</tr>
</table>

Tehát a class=”header1″ részt mindig a cella, vagyis a <td> tagjében kell megemlíteni. Ezzel utalunk a stíluskészlet egy részére, vagyis ebben az esetben a modulfejléc stílusára. Ezzel meg is jelenik egy fejrészünk. Most hozzáadom a többit is, az előzőekhez hasonlóan.

<table>
<tr>
<td class="header1>
fejléc, modul címe
</td>
</tr>
<tr>
<td class="middle1>
A modul tartalma.
</td>
</tr>
<tr>
<td class="footer1>
lábléc
</td>
</tr>
</table>

Az egész körülbelül ilyen lesz, hiszen a modul kinézetét nem a táblázatkódban szabjuk meg, hanem a css-ben. Ez egy modul kódolása. Viszont a táblázatkódos modul nagyon zavaros lehet, hiszen lényegesen több mindent kell a css-ben bekódolni (pl mivel alapértelmezetten a cellában függőlegesen középen helyezkedik el a szöveg, ezért a css-ben kell azt is megkódolni vagy a táblázatban) Ezért lett ismeretes a másik modul kódolási módszer, ami pedig nem más, mint a:

 

<div> tages modul

Ennél a módszernél is megjelenik a három modulrész, itt tulajdonképpen az egészet a modul meghatározásával kell kezdenünk:

<div id="modul">
....modul kód...
</div>

Egy <div> taggel meghatározzuk azt is, hogy itt most modulról lesz szó, ezzel tudjuk elkülöníteni egymástól a modulokat, csupán a stíluskészletben meg kell említenünk a modul készletét is (#modul), de ez már egy másik kérdés. Most következhet a modul többi része, ami csak abban tér el a táblázatostól, hogy nyilván nincsenek cellák és sorok, a <div> tageket csak sorban kell megadnunk. E szerint így fog kinézni a modulunk:

<div id="modul">
<div class="header1">Modul cím</div>
<div class="middle1">
Tartalom
<div class="footer1">Lábléc</div>
</div>

Itt fontos, hogy a <div> tagek mindig kapjanak lezárást a megfelelő helyen, ezért nagyon oda kell figyelni rájuk, különben elcsúszhat. Viszont ez egy egyszerűbb megoldás, mint a táblázatkódos.

 

Mindkét megoldásban meg kell jeleníteni a stíluskészletben (css) az adott modulok készletét. Nálam ez mindig header1, middle1, footer1 stb. Remélem, érthető volt a segítség.


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *