A munka megkezdése előtt a következő paramétereket, elvárásokat állítottam fel magamnak:

• -  Sajnos az elhatározás pillanatáig és még néha ma is a CSS és leírása számomra gyakran 'PÓKHÁLÓ'-nak tünt, így a design alapjául a pókot és hálóját választottam.
• -  Mivel a honlapomnál is a tartalmat fix szélességüre(770px) állítottam be, ezért itt is ezt tettem(hogy 800x640-es felbontásnál a felhasználónak még ne kelljen gördítősávot használni).
• -  Azért, hogy könnyen áttekinhető legyen az egész , a tartalmi fájlban meglévő sorrendet, szülő-gyermek-leszármazott kapcsolatokat figyelembe véve csoportosítottam a stílus-elemeket.
• -  Utoljára, de nem utolsó sorban igyekeztem olyan megoldásokat találni, hogy az általam használt böngészők mindegyikén(IE,FF,OPERA) közel azonosan design-nel jelenjen meg.

A BODY elemen belüli szerkezet nagy vonalakban a következőképpen néz ki:

Összkép, felosztás:

     Az "intro" box háttérképeként egy olyan "CSS-fát" akartam elhelyezni, melynek lombozatát a "pageHeader" doboz szövegtartalmát is kifejező "pók-pókháló duó" fedi le és a lombozat alatt elférnek a "quickSummary" és "preamble" dobozok.
A "supportingText" és "linklist" boxokat pedig a valamilyen virág-füzér vagy virág-kehely háttér által körülölelve kézeltem el, mely egyben el is választja egymástól a boxokat és védi a "pókoktól" is.
Az alap karakter-méret beállítása után megvizsgáltam a dobozok szövegtartalmának helyigényét arra az esetre ha a "quickSummary" és "preamble" dobozokat a "CSS-fa" két oldalára, ill. a "supportingText" és "linklist" boxokat virág-füzérek közé szeretném elhelyezni(egy nem létező közös dobozban, vízszintesen egymás mellett).
Miután hosszas kisérletezés után ezzel megvoltam, meghatároztam az "intro" box fix méreteit(w770xh525px). A "supportingText" és "linklist" dobozok egymás melletti elhelyezése már nehezebb volt. Csak úgy sikerült megoldani, hogy a "supportingText" doboz vízszintes méretéből(w770/w450px) csak 450px-t használok fel, és a jobboldali fennmaradó sávra abszolut pozicionálással helyeztem el a "linklist" dobozt(w170px).

Képek, háttérképek:

     Az "intro" box teljes területét lefedő háttérképét egy fekete-fehér fa-alakzatból alkottam meg átlátszó képként(770x525px). A lombozatra telepedő, "szövegtartalommal" is rendelkező háttérképet(770x285px) a "pageHeader" doboz-ra terveztem és készítettem el, 'két-nyelvű' változatban.
A "quickSummary" és "preamble" dobozok háttereként egy-egy animált, a tartalmat kifejezni igyekvő képet készítettem. A fejezet cím-szövegét itt egy sima képpel helyettesítettem a H-elemben.
Két képrészlettel oldottam meg a virágos hátteret. A függőleges sávokat képező részt a "supportingText" dobozban helyeztem el, mely csak egy virág-magasságú és függőlegesen ismétlődő képrészlet. Az alsó összekötő részt pegig az összes dobozt magába foglaló "container" box alsó szélére.
A "supportingText" dobozban a fejezetek cím-szövegeit szintén képpel helyettesítettem, de egy kicsit másképp. A szöveghelyettesítést a témadoboz háttereként helyeztem el, felette pedig egy animált képet raktam be a 'H-elem' háttereként(a két kép fedi egymást és a fájlméret 4x190kB helyett csak 16+4x6kB lett).
A "linklist" doboznál sok varia nincs, talán csak a harmadik "lresources" doboznál. Itt a fejezet-cím helyettesítő képet nem a H-elemben helyeztem el, hogy kitöltsem függőlegesen a területet hanem magában a dobozban.
Az egész oldal szerkezete szinte px-re kiszámolt, ezért a későbbiekben folyamatosan figyelnem kellet az egyes elemek "margin" és "padding" értékeire.

Érdekességek extraDiv-el:

     Előszőr az oldal két szélén függőlegesen mászkáló pókokat készítettem el, majd a választható mini-designnek animációs képét. Ez a PhotoFiltre és a Gimp segítségével viszonylag gyorsan ment. Azonban a képeknek az oldal két szélére történő beállítása úgy, hogy a böngésző ablak méretváltoztása esetén is a helyén maradjon, már keményebb dió volt. Hosszú kisérletezés után az "extraDiv" és a gyermek "SPAN" elem is azonos tulajdonság értékekkel rendelkezik, kivéve a left-érték melyet az "extraDiv" box-nál nem adtam meg. Igy az oldallal szinkron pozicióba került 770px széles "DIV-ek" már jó alapot adtak a képeket tartalmazó "SPAN" elem precíz pozicionálásához.

Végeredmény:

Igazából mint amatőr programozó elégedett vagyok az eredménnyel és remélem, hogy sokaknak fog tetszeni. Az elkészült design megtekinthető magyar nyelvű tartalommal Zen Kert megnevezéssel és eredeti angol nyelvű tartalommal Zen Garden megnevezéssel.