Design » Igény/Lehetőség » Oldalszerkezet

(Design-ból oldalszerkezet összeállítása, csak HTML-el és CSS-vel. Az általam használt módszer leírása és DEMÓ kezdőknek.)

(Lépés a  "Css háttér elrendezés" ) kérdésre

Egy egyszerű "DESIGN-KÉP" kiindulási alapként:

Első lépés a "DESIGN-KÉP", az igények és a lehetőségek áttekintése, tanulmányozása. Ha megrendelésre történik , akkor annak igénye a legfontosabb. Fel kell térképezni, hogy a "DESIGN-KÉP"-en hol vannak "homogén" területek. Ezeket lehet később háttérképként kivágni és ezeken lehet gördíthető tartalmat elhelyezni.

A fenti "DESIGN-KÉP"-en ezek a következők:

Második lépés a "DESIGN-KÉP" feldarabolása a kialakult elrendezési elképzelés függvényében. Ehhez célszerű egy darabolási vonalakkal megjelölt "DESIGN-KÉP" változatot készíteni.

Az általam mintaként választott "DESIGN-KÉP"-en egy lehetséges feldarabolás így néz ki:

Miután az elképzelések megfogalmazódtak bennünk, harmadik lépésként célszerű azt írásban rögzíteni(magunknak ill. megrendelőnek), hogy a munka során útmutatóként lehessen felhasználni. Természetesen ezt a folyamat során többször lehet és kell is módosítani.

Az elképzelések, szerkesztési feltételek a fenti mintához és demóhoz:

Negyedik lépésként már konkrét programozás következik, mégpedig az oldal szerkezetének összeállítás sok-sok "DIV-doboz" egymás mellé ill. egymásba helyezésével(Én erre sosem használok táblázatot!). A szerkezet összeállítását mindig kívülről befelé haladva a következő módszerek(szamárvezetők) felhasználásával készítem el:

Módszerek, technikák, szamárvezetők:

Ha az oldalszerkezet színezett "DIV-doboz"-okkal összeállt, akkor ötödik lépésként el kell készíteni a háttérként szolgáló kép-elemeket. Természetesen ha az összkép valamelyik beillesztési lépésnél nem megfelelő akkor jöhet a szerkezet vagy a kép-elem módosítása.

A konkrét példa ismertetése:

A legkülső id="oldal" azonosítójú "DIV-doboz"-t függőlegesen három részre osztottam fel. Ezek közül a felső id="header" és a az alsó id="footer" fix magasság/szélesség, a középső id="content" fix szélesség beállítást kapott. Mind a három dobozt vízszintesen további három-három részre tagoltam, hogy a fent bemutatott "DESIGN-KÉP" vízszintes tagolódását le tudjam képezni. Az így keletkező 3x3 szerkezeti doboznak külön-külön építettem fel a belső szerkezetét, hátterét(scrollozható és nem scollozható háttérrészletek függvényében).

A feldarabolás eredménye itt látható:
Az id="header", id="content" és id="footer" hátterei pedig így állnak össze:

Az id="header" és id="footer" left/center/right dobozának hátterét hasonló módszerrel, de különböző darabszámmal (3 variációban, 5 db vagy 8 db kép elemmel) oldottam meg. Mindegyiknél, egy relatív "háttér DIV"-ben több abszolút "képrészlet DIV"-et pozícionáltam be a megfelelő helyre. Ez a módszer azért nem okoz gondot, mivel mindegyik "háttér DIV" elem különböző értékű, de fix W/H paraméterrel rendelkezik. Végül egy relatív "tartalom DIV" 20px-es paddinggal került a dobozokba, hogy a tartalom a homogén területen belül maradjon.

A id="content" blokk szerkezete a "feldarabolás eredménye" képen látszik. Itt először elhelyeztem 4 db ugyanakkora szélességű, de más-más háttérképpel rendelkező DIV-et(con-bg1, con-bg2, con-bg3, con-bg4). Ezek adják meg változó magasságú tartalmak esetén a left/center/right oszlopok határoló háttér-elemeit függőlegesen ismétlődve. Az utolsó DIV-ben három, a con-bg4 blokkal azonos szélességű DIV-et helyeztem el egymás alá. Ezek közül a fix magasságú felső(height:24px;) és alsó(height:24px;) a középső tartalmi blokk felső/alsó lezáró hátterének elhelyezésére szolgál. A harmadik(középső) pedig a tartalom elhelyezésére.

A tartalom formázását mindegyik blokknál a legbelső DIV-ben ( id="head-l-content", id="head-c-content", id="head-r-content", class="con-cl-content", class="con-cc-content", class="con-cr-content", id="foot-l-content", id="foot-c-content", id="foot-r-content" ) kell végrehajtani, hogy ne essen szét az oldal. A fentiek közül a "con" kezdetű azonosítóval rendelkező blokkok függőlegesen növekedhetnek a tartalom függvényében, továbbá ezekből több is elhelyeztő a befoglaló egységben.

Bár első ránézésre kicsit bonyolultnak tűnik az oldal szerkezete, de van hozadéka is:

A kész forráskód megjelenése különböző oldal felosztási paraméterekkel a DEMÓ-ban ki is próbálható. Három különböző monitor felbontáshoz beállított kombinácóban, kombinációnként három-három különböző magasság/szélesség blokk-arány variációban.

Remélem, hogy ha valaki most kezd weboldal szerkesztésébe, akkor segítségére lesz ez a rövid leírás valamint a DEMÓ forráskódjának áttanulmányozása. Várhatólag az olvasónak lesznek ötletei, megoldási módszerei, melyeket ezen leírás sugall. Az valószínű, hogy sablonként a leírás nem használható(mivel egy-egy DESIGN és a hozzákapcsolódó igények, elvárások mindig kicsit más megoldást hoznak végeredményként), de mint egy weboldal elkészítésének "technikai vonalvezetője" hasznos lehet.