Weblabor

Kap az ember egy design tervet, ami egy rajzot, egy Photoshop vagy egy Gimp fájlt jelent. Vagy esetleg nem kapja, hanem saját maga készíti el. Nagyon szép és csiribiri, de hogy lesz ebből egy weblap? Egyáltalán megvalósítható teljes pontossággal egy design terv? Hát lássuk, cikkemben a folyamat lépésein fogom végigvezetni az olvasót, bemutatva a fontosabb döntési pontokat, az egyik lehetséges utat.

A terv és a feltérképezés

Ebben az esetben a design tervet egy e-mailben kaptam egy Photoshop fájl formájában. Aki szeretné, az le is töltheti (7,2 MB).

Első lépésként térképezzük fel, hogy milyen főbb elemekből épül fel az oldal. Ez valami olyasmi, mint egy építkezésen az alaprajz. Ilyenkor ha nem mi magunk készítettük el a tervet, illetve ha nem tudjuk, hogy az oldalnak milyen funkciói vannak (vagy hogy melyik mit csinál), mindenképpen konzultálni kell a tervezővel / megrendelővel. Íme a terv, pár elem beazonosításával:

1. Legfelül van a kép ami az oldal fejléc grafikája. A designer azt mondta, hogy ez egy Flash fájl lesz és valami multimédiás varázslatot fog csinálni. Ennek az elemnek a fejléc nevet adtam. (a képen az 1-es jelöli)
   
2. Közvetlenül ez alatt van egy csík, amin mindenféle információ látható (névnapok, napkelte, stb). Ezt az elemet infópanelnek neveztem el. (a képen a 2-es jelöli)
   
3. Ezután jön a legnagyobb rész, a közép nevet adtam neki. Ezt az elemet még tovább kell bontanunk.
   
   • A bal oldali oszlopot elneveztem balsávnak, itt van a menü, a hírlevél feliratkozás, a vaisnava naptár és a friss blogok. (a képen 3/A jelöli)
     
   • A középső oszlopba kerül majd mindig a megjelenítendő tartalom. Így ezt a nevet adtam neki. (a képen 3/B)
     
   • A jobb oldali oszlopot jobbsávnak neveztem el, ez ad helyet a keresésnek, a darshan képeknek, a hirdetésnek, az apróhirdetéseknek és a recepteknek. (a képen 3/C)
     
   
   
4. Végül legalul van egy kis rész ami a lent nevet kapta. (4-es)
   

A tervrajz

Ezek alapján már megrajzolhatunk egy kis tervrajzot magunknak, ami jó segítség lesz az oldalunk felépítésében. Csupaszítsuk le az oldalunkat minden első körben felesleges sallangtól (színektől, tartalomtól), és koncentráljunk csak az oldalunk vizuális felépítésére, vázára. Valami ilyesmit kellene kapnunk:

A kódolás előtt

Mielőtt az ember nekiugrik a kódolásnak nem árt pár dolgot szemügyre venni a design tervben, van ugyanis pár érzékeny pont, amit jó ha az elején tisztázunk. Ehhez megnyitottam a Photoshop fájlt és elkezdtem írni egy listát.

1. A magam részéről nem tartom túl jó ötletnek a kék alapon fehér betűket, mert hosszabb szövegeket nehéz így olvasni. A megrendelő azt mondta, hogy nem baj, neki tetszik. Akkor oké, ez így marad, de legalább szóltam.
   
2. A fejléc Flash fájl még nem volt kész, írtam a designernek, hogy úgy dolgozzon rajta, hogy a jelenlegi magassága és szélessége ne változzon, se a Flash kiindulási állapotában, se annak bármelyik fázisában. Az oldal szélességét ehhez fogom igazítani, és ugyan megoldható lenne változó szélességgel, de egy folyamatosan táguló, szűkülő tartalmi rész valószínűleg rettentő zavaró lenne a látogatók számára.
   
3. A Flash-t a magam részéről egyébként sem kedvelem, mert még gyorsabb internet esetében is sokszor lassacskán töltődnek be. Az oldalt várhatóan modemes emberkék is nézni fogják, akiknek meg nagyon sokáig is eltarthat míg letöltődik a Flash. A megrendelő megszavazta, hogy maradjon.
   
4. Az eredeti design terv 900 px széles volt a narancs háttér nélkül. Ez 800*600-as felbontásnál azt jelenti, hogy a usernek vízszintes irányban is scrolloznia kell, hogy elérje a jobbsávot. A felhasználók kb. 10%-a 800*600 alatt nézte az oldal elődjét. A megrendelő erre rábólintott, a designer meg szívta a fogát, és átalakította 770 px szélesre.
   
5. 

   Infopanel

   Az infópanelen az adott napra vonatkozó vaisnava esemény (a pédában: Srila Prabhupada elindul az USA-ba) változó hosszúságú, illetve ha nincs az adott napon ilyen esemény akkor üres. A designer annyit mondott, hogy ha nincs akkor nincs, ha meg hosszabb akkor vágjuk le.
   
6. Betűtípusok. Ez általában érzékeny pont szokott lenni, jobb előre tisztázni. A weben ugye a sans és a sans-serif a két olvasható szabványos font család. Azt, hogy ezen a családon belül konkrétan milyen betűtípussal fogja a böngészőprogram az oldalunkat megjeleníteni csak hellyel-közzel tudjuk alakítani, mert különböző operációs rendszerek különböző betűtípusokat használnak. Ezért ha szétnézünk a neten azt fogjuk látni, hogy az Arial / Helvetica párost használják döntő többségben. Miért? - mert ez a páros nagy valószínűséggel elérhető lesz minden oprendszerben tevékenykedő látogató számára.
   
   • A vaisnava naptár, a friss blogok, a darshan és a receptek a design tervben egy DauphinPlain nevű betűtípussal szerepeltek. Ez még az én gépemen sem volt telepítve (pedig van egy rakás betűtípusom), tehát könnyen megsaccoltam, hogy a potenciális látogatók közül hánynak lehet meg a gépén. A címeket (mint pl. vaisnava naptár) megoldhattam volna képek elhelyezésével, de ezt semmiféleképpen sem akartam, mert ezen elemek tartalmát a működő oldalon egy PHP program fogja generálni, szóval ott biztos, hogy normál szöveget kell alkalmazni. A designer rábólintott az Arialra, a megrendelő meg észre se vette, hogy megváltoztattuk :)
     
   • A tartalmi rész, a lent, az apróhirdetés és a receptek a design tervben Tahoma betűtípussal szerepeltek. Ez egy alap windows font, de linux alatt biztos nincs és gyanítom, hogy Macintosh alatt sincs. A designer pár percnyi pislogás után azt javasolta, hogy ha van a usernek akkor legyen Tahoma, ha nincs akkor legyen ez is Arial. Nesze neked tipográfia.
     
   • A maradék elemek (infópanel, menü, hírlevél) eleve Ariallal készültek, így ezekkel nem volt semmi szívfájdalmam.
     
   
   
7. 

   Darshan

   A darshan képek mögött látható egy szép design elem, egy árnyék. Ezzel az volt a bajom, hogy várhatóan a thumbnail-ek nem lesznek ugyanakkorák minden esetben, ami azt jelenti, hogy vagy több méretben kell elkészíteni az árnyékot és gondoskodni arról, hogy mindig a jó méret kerüljön alkalmazásra, vagy pedig elfelejtjük az árnyékokat. A megrendelő azt mondta, hogy egyelőre felejtsük el, aztán majd később meglátjuk.
   
8. A menük szövegének nem szabad túl hosszúnak lennie, mert akkor le fognak lógni a helyükről.
   
9. A tartalmi részen a képek meletti szöveg a tervben mindig pontosan a kép alsó szélének a vonalában fejeződött be. Ez az éles oldalnál valószínűleg nem így fog történni, a tartalom felelős nagy nagy valószínűséggel néha rövidebb, néha hoszabb bevezető szövegeket fog írni. Ezek miatt az éles oldal tartalmi része nem lesz ilyen rendezett mint a tervben.
   
10. A vaisnava naptár eseményei esetlegesen jóval hosszabbak lehetnek mint a designtervben, ilyenkor ez az elem függőlegesen sokkal nagyobb helyet fog elfoglalni.
    

Miután minden észrevételemet leegyeztettem a megrendelővel és a designer megcsinálta a szükséges módosításokat nekikezdhettem az oldal felépítésének.

Doctype választás

Mivel a működő oldal egy HTML bevitelt is engedélyező CMS által generált website lesz és a site tartalmi gazdája tőlem hallott előszőr arról, hogy a weben léteznek szabványok, úgy döntöttem hogy az oldal doctype-ja transitional lesz. Bíztattam a tartalmi felelőst, hogy ismerkedjen meg az XHTML szabvánnyal és próbálja majd azt alkalmazni a feltöltött cikkekben.

Beszéljünk számítógépül

Akkor kezdhetjük az építkezést! A kis alaprajzunkat fogalmazzuk meg a számítógép nyelvén.

• A lapunk 770 px széles és a tartalomtól függően változó magasságú.
  
• Amennyiben a böngésző ablaka szélesebb a 770 px-nél akkor az egész lapot vízszintesen középre szeretnénk igazítani.
  
• A böngészőablak felső széléhez nem ér hozzá a lapunk, hanem a kettő között van egy kis rész (10 px). Alul ugyanez.
  
• Legfelül van egy fejlécünk ami egy Flash fájlt tartalmaz és szintén 770 px széles, valamint 180 px magas.
  
• Ez alatt van az infópanel ami szintén 770 px széles, és 65 px magas.
  
• A balsáv a bal oldalon van és 161 px széles.
  
• A jobbsáv a jobb oldalon van és 125 px széles.
  
• A kettő között van a tartalom és így (770-161-121) 468 px széles.
  
• Mindezek alatt van a lent, ami 770 px széles és 61 px magas
  

A balsáv és a jobbsáv szélességét úgy kaptam meg, hogy fogtam a Photoshop fájlt és lemértem, hogy a bal és a jobb oldalon milyen szélesen tart a más színű oszlop. Magyarul a bal oldalon a bal szélen lévő kékség kezdetétől a tartalmi rész kékjéig, a jobb oldalon a tartalmi rész kékjétől a jobb legszél kékjéig mértem.

Az infópanel magasságát úgy határoztam meg, hogy a fejléc aljától (vagyis ahol elkezdődik a kékség) a tartalmi rész kékségének a tetejéig mértem. Megvallom őszintén, hogy nem véletlen, hogy pont addig, de ennek megindoklását későbbre halasztom. (Megjegyzés: eredetileg ez a magasság csak 56 px magas volt, ennyi szerepelt a design terven. Menet közben derült ki, hogy ekkora helyen sehogy sem fog elférni normálisan az oda tervezett tartalom, így megnagyítottuk 65 px-re. A probléma az volt, hogy a különböző betűkészletekkel dolgozó különböző operációs rendszerű gépek nem azonos méretet foglaltak el. Az IE-n kívül mindegyik rávehető volt, hogy olvashatóan férjen el 3 sornyi adat ezen a helyen, de ez IE nem. Így végül megnöveltük 65 px-re.)

Alapozás

Feltérképeztük a főbb elemeket, megrajzoltuk az alaprajzot, összeszedtük az esetleg problémás alkotóelemeket, így hát elkezdhetünk alapozni.

Az alap HTML kód

Az alap CSS fájl

Bevezettünk egy fent nevezetű divet, ami összefogja a fejlécet és az infópanelt. Nincs rá feltétlenül szükség, de mivel a következő részeket floatolni fogjuk, jobb ha ezek ketten ott fenn egy csoportba vannak, ha már úgy is egyforma szélesek és egymás alatt vannak. Másrészről meg szerintem így a forráskód is követhetőbb, mert van egy fent, egy közép és egy lent elemünk. A 3 oszlopos kialakításra azt a módszert választottam, hogy mindhárom oszlopnak megadtam a szélességét és balra floatoltam őket. Mivel az oldal egy fix grafikára épül, a méreteket végig pixelben fogom megadni. A végeredmény:



A színeken ne tessék kibukni, az csak azért van, hogy lehessen látni amit látni kell.

Body

Betettük a háttérképet (amit az eredeti Photoshop fájlból szeltem ki úgy, hogy varratmentesen lehessen mind vízszintesen mind függőlegesen egymás mellé pakolni, ez a hatter.jpg), az alapértelmezett betűszínt fehérre állítottuk, és megadtuk, hogy Arial (sans-serif) 12 px nagy legyen. A fejléc képünk nem fog az ablak tetejéhez ragadni, mert már az előzőekben megadtuk a legkülső lap nevű divünknek a 10 px-es felső margint, valamint az oldalsó margin-ok autora állításával gondoskodtunk az egész oldal középre igazításáról. (IE alatt ez nem fog működni, erre majd később vissza kell térnünk.) Valamint szintén óvatosságból az object és form elemre 0-s margin és padding értéket állítottunk.

Fejléc

Ide egyszerűen csak betettük a Flasht, ami még nem volt készen, nem működött (a multimédiás dolga), de legalább beillesztettük, hogy lássuk mi lesz multimédia nélkül.

Lent

A lenti részbe a szövegeket helyeztük el, amikből valamikor majd linkeket fogunk csinálni. A CSS-ünkben megadtuk a lent háttérképét (amit szintén a Photoshop fájlból szeltem ki). Ez a háttérkép 61 px magas. Mivel a height érték az elem magasságát adja meg, ezt 41 px-re állítjuk, hogy a megadott 10 px-es alsó és felső paddinggal együtt kiadja a 61 pixelt.

Balsáv

A balsávban a következő elemek vannak, ezeken fogunk szépen sorban végigmenni.

• menü
  
• hírlevél
  
• vaisnava naptár
  
• friss blogok
  
• alsó grafika
  

A menü

A menünkhöz egy egyszerű unordered list-et (ul) használunk, a menüpontokhoz pedig hozzárendeljük a megfelelő linkeket. Az IE egyik bugja miatt be kell vezetnünk egy spant, mert máskülönben hiába állítottuk be li elemünk magasságát az IE-t nem nagyon érdekelte.A balsáv felső paddingját 15 px-re állítottuk, hogy a menü ne rögtön a tetején kezdődjön, hanem kicsit lentebb, valamint az ul elemnek 0-ra vettük a marginját és a paddingját, tiltva ezzel minden behúzást a listában. Aztán a balsáv teljes terjedelmében minden listaelemnél tiltottuk az elem előtt megjelenő kis gombócot, mivel erre nekünk egyiknél sem lesz szükségünk.Ezután következhet a menünk összerakása. Ehhez a menü gombjaként szolgáló képecskét szintén ki kellett szelni az eredeti Photoshop fájlból, ez lett a menugomb.jpg. Azért nem csak a kerek szélű kis csíkoskát használtam itt a képként, mert a balsáv, tartalom és jobbsáv hátterét egy csapásra akartam megoldani, de erről majd később. Szóval a menugomb.jpg egy 161*25 px nagyságú kép, amit a listaelemek háttereként használunk. Mivel nem akarjuk, hogy a menü felirata a háttérként használt kép tetejére ragadjon adunk neki egy 5 px-es felső paddingot. Be kell állítanunk bal oldali paddingot is, mert a menüelemek feliratait középre igazítjuk, de a középre igazítás tengelye a balsáv 161 px széles sávjának a közepe lesz, és ehhez képest a mi menugomb.jpg képünk ténylegesen a gombot ábrázoló része 3 px-lel beljebb kezdődik. A jó kisdobosok ezeket a padding értékeket kimérik a Photoshop fájlban, a többiek meg a próbálgatásos módszerrel belövik, hogy kb. ott jó lesz :)Ezt kapjuk menüként, és itt jár az oldalunk.

• Hírek (17)
  
• Napló (138)
  
• Galéria
  

Hírlevél

Ez egy egyszerü picike form egyetlen felirattal és egyetlen input mezővel. Annyi a különleges benne, hogy az input mezőnek be kell tennünk egy háttérképet. Jó kisdobos módjára bevezettem egy új div-et, aminek a hirlevel nevet adtam.Az ehhez tartozó CSS is pont ilyen egyszerű. Kiszeleteltem a Photoshop fájlban lévő input mezőt ábrázoló részből egy szeletkét (input-bg-nagy.jpg), és ezt használtam az input mező háttéképeként. Ez pont olyan magas mint az input boxom, és vízszintesen ismételhető, így kitölti a rendelkezésére álló helyet. Elég világos is, így látszani fog amit a user belegépel. Részemről úgy gondoltam, hogy nem ártana mellé valami gomb amire a user rá tud kattintani, ha fel akar íratkozni a hírlevélre, de a megrendelő azt mondta, hogy nem kell. Így úgy tud feliratkozni, hogy beírja a címét és üt egy entert. A lapunk itt tart. A balsáv háttere továbbra is csak a debughoz használt pink, de ezen jelen pillanatban még nem aggódunk.

Vaisnava naptár, Friss blogok

Ezzel a résszel foglalkozunk következő lépésként.

Beállítunk a két elemnek közös margin és padding értékeket. Azzal, hogy ezt együtt adjuk meg, azt érjük el, hogy nem fognak elcsúszni egymáshoz képest. A margin értékek teljesen önkényesek, mivel a designer azt mondta, hogy csak odacsapta ezeket az elemeket oldalra, nem fontos, hogy milyen távolság van közöttük. A padding értékekkel gondoskodunk arról, hogy ha majd a balsáv alá kerül a háttér, akkor a szövegek nehogy lelógjanak a nekik szánt helyről. Beállítjuk a vaisnava naptár eseményeit elválasztó vonalak típusait is (szagatott, vékony vonal). Ez a design tervben folytonos vonal volt, de a designer menet közben meggondolta magát, így szaggatott lett. Mindkét elemnél ugyanaz a háttér kép (cimhatter.jpg), amit szintén az eredeti Photoshop fájlból szeltem ki. Emlékezzünk arra, hogy megállapodtunk a designerrel, hogy a menük címsorának megjelenése annyiban fog változni, hogy a cím nem az eredetileg tervezett DauphinPlain betűtípussal lesz kiírva (mert ebben az esetben csak képként lehetne megoldani) hanem Ariallal. A cimhatter.jpg 130 px széles, vagyis jóval kisebb mint a rendelkezésre álló 161 px hely. A kettő közötti különbséget 1 px híjján lefedi a 10 px-es jobb és a 20px-es bal padding. Azt az 1 px-et meg meghagytam, hagy kezdjen vele mindegyik böngésző amit akar. A #balsav .modulmenucim többi beállítása azt a célt szolgálja, hogy a a háttérképre kerülő felirat szépen középre kerüljön mind vízszintesen mind függőlegesen.A balsávban egyetlen dolog maradt még hátra (a hátter beillesztésén kívül), az pedig az alsó emberke beillesztése. Ezt az emberkét úgy szeretnénk elhelyezni, hogy mindig a bal sáv legaljára kerüljön. Ez nem is olyan egyszerű feladat, mint első olvasásra gondolnánk, emiatt most lépjünk át a tartalmi részre, és majd alkalomadtán visszatérünk ide.

A balsáv alsó emberkéje

Ennek beillesztését későbbre halasztottam lásd lentebb, hogy miért.

Tartalom

Pakoljuk be a szükséges tartalmat a tartalmi részbe, majd adjunk meg hozzá minden CSS információt. Fogtam egy cikket és egymás után 8-szor bemásoltam a tartalmi részre, aztán minden másodiknál megváltoztattam, hogy merre igazítsa a vezérképet, mivel az éles oldalon is "egyet jobbra egyet balra" lesz az elv.

Azt hiszem itt semmi sem szorul magyarázatra, hiszen csak betűtípusokat állítgatunk meg padding és margin értékeket. Talán csak annyi, hogy minden elemet elneveztünk a HTML-ben amihez várhatóan fog valami formázási utasítás (CSS definíció) tartozni. Ha megnézzük az oldalunkat most látni is fogjuk mi a problémás a balsávban az emberke elhelyezésével. A balsáv nem lóg le a lent-ig, hanem csak addig ér ameddig tartalom van benne. Ha a jelenlegi tartalom végére betennénk az emberke képét, akkor ha a tartalmi részen több szöveg van, akkor az emberünk lebegne a levegőben. Ezt most még nem oldjuk meg, de legalább megállapítjuk, hogy ezzel még lesz dolgunk.

A közös háttér

Akkor most elérkeztünk arra a pontra, hogy bepakoljuk a hátteret oda, ahova illik. Bevallom őszintén előszőr azzal próbálkoztam, hogy mind a balsávnak, mind a jobbsávnak, mind pedig a tartalomnak külön külön háttérképet illesztek be. Ezzel az elgondolással az volt a baj, hogy a tartalmi rész tetjén van egy kis boltív. Ez kissé megbonyolította ezt a módszert. Végül úgy döntöttem, hogy egy hátteret adok meg, ami lefedi mindhárom oszlop igényét. Első nekirugaszkodásra kiollóztam az eredeti Photoshop fájlból egy csíkot ami a bal legszélső kékségtől a jobb legszélső kékségig tartott, és így persze 770 px széles lett (khatter.jpg). Előszőr beállítottam a közép div háttereként, de nem működött, mivel ebben a div-ben nincs semmi tartalom mint más div-ek. Így nem maradt más választásom, mint a lap div háttereként beállítani.Nem kell a hátteret pozícionálni, sem a repeat tulajdonságot állítgatni, mivel 770 px széles, tehát kitölti széltében az oldalt, függőlegesen lefelé meg ismételni fogja magától.Persze ahhoz, hogy lássuk a változást a fenti három CSS definíciót ki kell törölnünk. Egy kattintás éééés láss csodát mindenhova odakerült a háttér ahova kell. Ha megnézzük az előző fázis és a jelenlegi közötti különbséget akkor már azt hiszem mindenkinek világossá válik, hogy a lenti részt miért pont ott vágtuk el ahol. Ha majd feltesszük az infópanlet akkor az is egyértelmű lesz. Lényeg, hogy ott vágtam el ahonnan kezdve a tartalom rész háttere (beleértve az oldalsávokat is) egymás alá illeszthető folytonos grafika. Ezzel az ügyes kis CSS trükkel most elértük, hogy az oldalunk egyre jobban kezd hasonlítani ahhoz amit akarunk.

A tartalom rész tető grafikája

Ha jól megnézzük a tartalom részt az eredti design-tervben észre fogjuk venni, hogy a tartalom rész teteje nem a jelenlegi állapot szerint néz ki, ugyanis egy kis boltív zárja felülről. Kiszeltem a design tervből ezt a kis részt, és a tartalom-teto.jpg fájlként elmentettem. Ezt a képet kell beillesztenünk, mint a tartalom div háttérképe, letiltanunk, hogy a háttérkép ismétlődjön, és top-ra pozícionálnunk. Mivel ennek a képnek a jobb és bal felső sarka olyan színű mint a jobbsáv, illetve a balsáv szélén található vékony csík vizuálisan össze fog ezekkel olvadni. Az eredmény lelkesítő.

Jobbsáv

• keresés
  
• darshan
  
• hirdetés
  
• apró
  
• receptek
  

Keresés

Ez a hírlevélhez hasonlóan egy egyszerű kis formocska, egyetlen input mezővel, ami a keresett szó beírására szolgál, és egy kis gombocskával, ami elküldi a formot.A nyil.gif képecskét kellett elkészíteni. Ez egy átlátszó hátterű gif kép, amit az eredeti design tervből vágtam ki és azt a célt szolgálja, hogy elküldje vele a user a formot. A CSS-ünket egy kicsit azonban módosítanunk kell, mivel a jobbsávnak egyelőre nem adtunk meg padding értéket, és így minden benne lévő elem a széléhez ragadna. Nem akarunk mindennek külön-külön padding értékeket rendelni, ezért a jobbsávra meghatározunk egy 4 px-es bal oldali és egy 10 px-es jobb oldali paddingot. A jobb oldalon azért kell nagyobbat beállítani, mert a jobb szélen lévő sötétkék csíkra már nem akarjuk engedni az elemeinket rálógni. Azonban nem szabad elfeledkeznünk arról, hogy az oldalunk fix pixelszélességgel dolgozik, és a jobbsáv szélességét már beállítottuk 141 px-re, mivel ekkora hely van a jobb oldalon. Ha most adunk neki jobb és bal oldali paddingot, akkor a width értéket ezek összegével csökkentenünk kell, hogy továbbra is ugyanakkora helyet foglaljon.

Darshan

Szokásunkhoz híven ennek az elemnek is létrehozunk egy új divet, nagybetűsre állítjuk a szöveget, és a kép és szöveg közé, valamint a képek közé 20 px-es távolságot (alsó margint) állítunk be. A képekre pedig rátesszük ugyanazt a fehér keretet amit a tartalmi részen is használtunk. A design tervben nem volt semmi szó arról, hogy hogyan jelöljük a kattintható képeket. A designer azt mondta, hogy elegendő lesz, ha az egérmutató megváltozik, tehát ezzel nem kell semmit csinálnunk. Ezzel is megvolnánk.

Hirdetés

Ez volt a lehető legegyszerűbb elem, mivel itt csak egy képet kell beilleszteni, ami ugyan minden egyes oldalletöltésnél más lesz, de garantáltan mindegyik ugyanakkora méretű. Egyetlen dolgot kell a CSS-ben is csak tennünk letiltani, hogy a kép körül keret jelenjen meg. Emlékezzünk rá, hogy a jobbsávnak megadtunk némi jobb (10 px) és bal (4 px) oldali paddingot, és így a jobbsávban használható területünk szélessége (a jobbsáv width értéke) 127 px. Ha esetleg ide beteszünk egy ennél szélesebb képet, akkor az oldalunk szét fog esni, és a jobbsáv becsúszik a balsáv alá. Ugyanez fog történni akkor is, ha akár a balsávba, akár a tartalmi részre nagyobb képet illesztünk be mint amekkora hely van ott. Az ilyen megkötéseket nem árt felírnunk magunknak, nehogy érjen valami meglepetés bennünket az oldal működtetése közben.

Apró

Beállítjuk az apróhirdetésekből megjelenő szövegek színét (Photoshop pipetta szerint ez volt), valamint egy 10 px-es felső margint. Az "Apró" feliratot 10 px-el balra betoljuk, valamint megadjuk, hogy az egyes elemeknek vékony, fehér, szaggatott vonal legyen az alsó határolója (border), és hagyunk nekik némi térközt, hogy kényelmesebben olvashatóak legyenek. Ezzel még nem vagyunk készen, le kell tiltanunk az ul + li elemek automatikusan definiált behúzását, és a li elemek előtt megjelenő kis bogyókat. Mivel ezeket általánosan a jobbsáv teljes terjedelmében alkalmazni akarjuk, ezért nem az apró elemnek, hanem a jobbsávnak a CSS-ét módosítjuk. Így ha valami új elemet szeretnénk majd a jobbsávhoz adni, ott nem kell ezekről külön gondoskodni, mivel örökölni fogják ezeket a tulajdonságokat a jobbsávtól.

Receptek

A receptek elemünk egy lekerekített tetejű és aljú doboz. Ennek elkészítéséhez a designtervből ki kellett ollózni két kicsi részt, az egyiket a doboz tetejeként, a másikat a doboz aljaként fogjuk használni. Ezek a jobb-doboz-teto.jpg és a jobb-doboz-alj.jpg.

Létrehozunk egy divet a receptek kezelésére, ami a receptbox nevet kapja. Ezen belül 3 különálló div van, az elso a receptteto, a második a receptek, a harmadik pedig a receptalj. A receptteto es a receptalj box nem tartalmaz mást, mint az oda illő segédképecskét, maga a tartalom (a recept felirat, a kép és az étel neve) a receptek elemben vannak.A CSS-ben le kell tiltanunk minden esetlegesen előbb beállított, örökölt vagy alapértelmezett margint és paddingot ahhoz, hogy a dobozunk szét ne essen. A többi beállítás már csak a megfelelő színekről, betűméretekről és elhelyezkedésekről gondoskodik.

Infópanel

Még valahol az elején elhagytuk az infópanel összerakását, de most már erre is sort kell kerítenünk. Ehhez mindenekelőtt szükségünk lesz az infópanel háttérképére, ez lesz az infopanel.jpg. Ezt is úgy vágtuk ki, mint a lenti rész képét, hogy ez alatt a tartalom rész háttérképe már akadálymentesen sokszorozható legyen. Erre fogjuk majd rápakolni azt a sok-sok információt ami ezen a felső részen kell, hogy megjelenjen.



Az infópanelen négy féle dolgot azonosíthatunk be, bal szélen az adott napi vaisnava naptár szerinti esemény, melette a nap és hold kelték, nyugták, melette a nyugati naptár információi, névnapok, és végül jobb szélen a userek bejelentkezésére szolgáló form. Nagyon ügyelnünk kell ezeknek az elemeknek a függőleges kiterjedésére, mivel az eredeti design elképzelés meghatározott keretek közé szorítja az infó panel magasságát.Mind a négy fő elemet balra floatoljuk és %-osan megadjuk a szélességüket. (Ha esetleg valaki összedná a %-okat végeredményül nem 100%-ot fog kapni. Ez azért van így, mert az IE meglehetősen makacsan harcolt az ellen, hogy az infópanel működjön. Végül ezzel a kis trükkel sikerült becsapni.) A naphold div-en belüli két elemünket is balra floatoljuk. A betűméretek illetve a térközök értékeit próbálgatásos módszerrel állítottam be ezekre amik most itt láthatóak, és bevallom őszintén, hogy az egész oldal kiépítésében ez volt az egyik legidőigényesebb feladat. Meghatározott méretű helyen kellett elférni ezeknek az információknak (mivel az infopanelem a design terv szerint pontosan 770*65 px) és a különböző böngészőprogramok és különböző operációs rendszerek jelentősen eltérő eredményre vezettek.

Az alsó emberke grafika beillesztése

Most már csak egyetlen egy dolgunk maradt hátra a design megvalósításához, az pedig annak az emberkének a bal oldali oszlop (de nem a balsáv) aljára való helyezés, akit még a cikk jóval fentebbi részén elhagytunk. Emlékeztetőül az a promlémánk vele, hogy a balsáv nem fog leérni a lenti részig abban az esetben ha a tartalom rész tartalma hosszabb a balsáv tartalmánál. Mivel közös hátteret adtunk a balsávnak és a tartalomnak vizuálisan ez nem látszik, de amint megpróbáljuk beilleszteni a balsáv aljára az emberkét szembesülni fogunk a problémával.



Mit tehetünk? Némi trükkhöz kell folyamodnunk. Be kell vezetnünk kettő új divet. az egyiket közvetlenül a lap div után (lapalj), a másikat pedig a balsav div zárása elé (balsav-lapalj-seged). A kezdeti csontvázunk a következők szerint módosul.Először is szeleteljük ki a design tervből az emberkét.



A kivágott kép az eredeti Photoshop fájlból származik (minek írom ezt le mindig, hát honnan a rákból szedném?), és úgy van kivágva, hogy a bal széle kimegy egészen a bal szélen lévő kékségig. Ezt azért így csináljuk, mert amikor beillesztjük a képet a bal szélhez fogjuk ragasztani. A kép 267 px magas, és amint látható, van egy nagyobb üres hely az alján. Pontosabban szólva 61 px van az emberke lába és a kép alja között. Ezt a képet adjuk meg a lapalj div háttérképeként és balra és alulra igazítjuk. Mivel ez az új div a minden eddigi diven kívül van (kivéve a lap-ot) a lent "alá" fog kerülni, vagyis a lent erre rá fog takarni. Mivel a lent 61 px magas, ezért a kép alján hagyunk egy ugyanekkora szabad helyet, amit a lent nyugodtan betakarhat. Ha ezt nem hagynánk meg, az emberke nem látszana csak térd fölött.Az emberkével még mindig akad egy kis dolgunk, ugyanis abban az esetben ha mégsem a tartalom rész a hosszabb, hanem a balsáv, akkor az emberkénk becsúszna a balsáv alsó része (esetünkben a friss blogok) alá. Ahhoz, hogy ez ne történhessen meg gondoskodnunk kell arról, hogy itt mindig legyen akkora hely ami a kép beillesztéséhez szükséges. Ezért vezettük be a balsav-lapalj-seged div-et. Ennek adunk egy 201 px-es magasságot (ekkora a kép lényegi része). Így ha a balsáv hosszabb mint a tartalom, akkor a balsáv lapalj segéd működésbe lép és kihagy ott egy akkora helyet ahova az emberkénk befér. Ha a tartalom elem a hosszabb, akkor is kihagyja ezt a helyet, de az emberkénk nem ebbe fog belekerülni, hanem szépen lecsúszik a tartalom rész aljának a vonalába.Ezzel a design megvalósításának a végére is értünk.

Utómunkálatok

Amit ezek után még érdemes megcsinálni, az az, hogy minden lehetséges módon leteszteljük az oldalt minél több operációs rendszerben és minél több böngészőben (szöveges böngészőkkel is), és nem lepődünk meg, ha az IE ad még egy pár meglepetést. Aztán el kell készíteni egy nyomtatásra optimalizált print.css fájlt. Integrálni kell a megvalósított designunkat abba a CMS-be, amit a weblap használ, az esetleg be nem célzott linkeket (<a href="#">) pedig be kell célozni.

Itt a vége fuss el véle. Aki kíváncsi a jelenleg működő kész weblapra az nézze meg a 108.hu-t.