Design tervből kész oldal

tegla

Oldalépítés design tervből lépésről lépésre

Kap az ember egy design tervet, ami egy rajzot, egy photoshop vagy egy gimp filet 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!

A terv

Ebben az esetben a design tervet egy a-mailben kaptam egy photoshop file formájában. Így nézett ki. Aki szeretné az le is töltheti (7,2 MB).

Térképezzük fel a fő elemeket

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. Első körben a következő elemeket azonosítottam be:

  1. Legfelül van a kép ami az oldal fejléc grafikája. A designer azt mondta, hogy ez egy flash file 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. 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 filet é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 file 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 userek 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. Az infópenelen 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özel 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ő user 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 userek 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 semmi féleképpen sem akartam, de 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. Neszen neked tipográfia.
    • A maradék elemek (infópanel, menü, hírlevél) eleve Ariallal készültek, így ezekhez nem volt semmi szívfájdalmam.
  7. 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 egyenlő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 hozzákezdhettem 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 halott előszőr arról, hogy a weben léteznek szabványok úgy döntöttem, hogy az oldal doctype-ja transitional lesz. Biztattam 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 770px-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 filet 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 filet é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

<div id="lap">
  <div id="fent">
    <div id="fejlec">
      fejlec
    </div>
    <div id="infopanel">
      infopanel
    </div>
  </div>
  <div id="kozep">
    <div id="balsav">
      balsáv
    </div>
    <div id="tartalom">
      tartalom
    </div>
    <div id="jobbsav">
      jobbsav
    </div>
  </div>
  <div id="lent">
    lent
  </div>
</div>

Az alap css file

/*oldal felépítése*/
#lap{width:770px; 
  margin:10px auto 10px auto;}
#fent, #kozep, #lent{margin:0 0 0 0;}
#fejlec{height:180px;}
#infopanel{height:65px;}
#balsav{float:left;
  width:161px;}
#jobbsav{float:left;
  width:141px;}/*141*/
#tartalom{float:left;
  width:468px}/*468=770-141-161*/
#lent{clear:both;}
/*design elemek*/
/*debugging*/
#fejlec{background-color:red;}
#infopanel{background-color:green;}
#tartalom{background-color:yellow;}
#balsav{background-color:pink;}
#jobbsav{background-color:gray;}
#lent{background-color:red;}

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. (részletek) Mivel az oldal egy fix grafikára épül a méreteket végig pixelben fogom megadni. A végeredményt meg lehet nézni a képre kattintva.

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

Body

body{background-image:url('./img/hatter.jpg');
  color:white;
  font-family:Arial,sans-serif;
  font-size:12px;}
object, form{margin: 0 0 0 0;
  padding: 0 0 0 0;}

Betettük a háttérképet (amit az eredeti photoshop filebó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 óvatósságból az object és form elemre 0-ás margin és padding értéket állítottunk.

Fejléc

<div id="fejlec">
  <object type="application/x-shockwave-flash"
      data="./img/headbanner.swf" height="180"
      width="770">
    <param name="movie"
      value="./img/headbanner.swf" />
  </object>
</div>

Ide egyszerűen csak betettük a flash-t, 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

/*oldal felépítése*/
  #lent{clear:both;}
/*design*/
/*lent*/
  #lent{background-image:url('./img/lablec.jpg');
    text-align:center;
    font-size:10px;
    padding:10px 0 10px 0;
    font-family:Tahoma,sans-serif;
    font-size:11px;
    height:41px;}/*61-10-10*/
<div id="lent">
  Site map | Elérhetőségek | Jogi nyilatkozat
</div>

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 fileból szeltem ki lablec.jpg). 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. A lapunk most így néz ki.

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 -t, mert máskülönben hiába állítottuk be li elemünk magasságát az IE-t nem nagyon érdekelte.

/*közép-balsav*/
  #balsav{padding-top:15px;}
  #balsav ul{margin:0 0 0 0;
    padding:0 0 0 0;}
  #balsav li{list-style-type:none;}

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.

  .menu li{background-image:url('./img/menugomb.jpg');
    background-repeat:no-repeat;
    background-position:top left;
    padding:5px 0 0 3px;
    text-align:center;
    height:20px;}/*height:25-5*/
  .menu li a{text-decoration:none;}
/*IE :(*/
  .menuheight{height: 20px;
    margin: 0;
    padding: 0;}

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 filebó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*25px 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 5px-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 fileban, a többiek meg a próbálgatásos módszerrel belövik, hogy kb ott jó lesz 🙂

<ul class="menu">
  <li><span class="menuheight">
    <a href="#">Hírek (17)</a></span></li>
  <li><span class="menuheight">
    <a href="#">Napló (138)</a></span></li>
  <li><span class="menuheight">
    <a href="#">Galéria</a></span></li>
  <li><span class="menuheight">
    <a href="#">Letöltés</a></span></li>
  <li><span class="menuheight">
    <a href="#">Fórum</a></span></li>
  <li><span class="menuheight">
    <a href="#">Apróhirdetés</a></span></li>
  <li><span class="menuheight">
    <a href="#">krisna.hu</a></span></li>
</ul>

Ezt kapjuk menüként, és itt jár az oldalunk.

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.

<div id="hirlevel">
  Hírlevél feliratkozás
  <form action="hirlevel.php" method="get"
      name="levlista" id="levlista">
    <input name="email" size="11" value="E-mail címe"
      class="bginput" type="text" />
  </form>
</div>

Az ehhez tartozó css is pont ilyen egyszerű. Kiszeleteltem a photoshop fileban 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.

#hirlevel{margin:10px 0 0 20px;}
.bginput{width:90px;
  border:none;
  background-image:url('/img/input-bg-nagy.jpg');}

Vaisnava naptár, Friss blogok

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

/*vaisnava naptár*/
#vaisnavanaptar, #blog{margin:30px 0 5px 0;
  padding:0 10px 0 20px;}
#vaisnavanaptar li{border-bottom:thin dashed white;
  font-size:12px;margin-bottom:8px;}
.vnaptarhonap{font-weight:bold;}

/*blog*/
.blogcim{font-size:10px;}

/*modul menük*/
#balsav .modulmenucim{background-repeat:no-repeat;
  background-image:url('./img/cimhatter.jpg');
  background-position:top left;
  height:25px;
  padding-top:5px;
  text-align:center;}

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 filebó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.

<div id="vaisnavanaptar">
  <h4 class="modulmenucim">Vaisnava naptár</h4>
  <ul>
    <li><span class="vnaptarhonap">máj.04.:</span>
      Saptami, Jahnu Saptami</li>
    <li><span class="vnaptarhonap">máj.06.:</span>
      Navami, Srimati Sita Devi -- megjelenése</li>
    <li><span class="vnaptarhonap">máj.09.:</span>
      Vyanjuli Mahadvadasi</li>
  </ul>
</div>
<div id="blog">
  <h4 class="modulmenucim">Friss blogok</h4>
  <ul>
    <li><a href="#">Van egy buldózerem...</a>
      <span class="blogcim">(Krisna mosolya)</span></li>
    <li><a href="#">Tüntetés - videó</a>
      <span class="blogcim">(Egy krisnás szerzetes
        naplója)</span></li>
    <li><a href="#">Video - 3rd May 2006 - Kazakhstan
        Embassy Protest</a>
      <span class="blogcim">(Simple Life)</span></li>
  </ul>
</div>

Itt tartunk most az építkezésben. 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, de mivel nem az, 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

Pakloljuk be a szükséges tartalmat a tartalmi részbe, majd adjunk meg hozzá minden css információt. Fogtam egy cikket (itt van alul a html-je) é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.

<div class="cikk">
  <h1 class="cimlap">
    <a href="http://108.hu/index.php?lap=244">
      Muzulmán testvérem
    </a>
  </h1>
  <img src="./img/ids1.jpg" class="vezerkepj" alt="vezérkép">
  <p class="bevezeto">
    Minden nap, mielõtt letöltöm az e-mail-jeimet, elmében
    felkészülök arra, hogy jó, rossz és esetenként kellemetlen
    dolgokkal kell majd szembenéznem. Többszáz tanítványom és sok
    más bhakta is rendszeresen ír nekem, s mindezek miatt a
    természet törvényei arra kényszerítenek, hogy a világ
    különbözõ élethelyzeteinek széles skáláját láthassam.
    <a href="http://108.hu/index.php?lap=244" class="tovabb">
      Tovább »
    </a>
  </p>
</div>
/*tartalom*/
.cikk{padding: 5px 10px 5px 10px;}
h1.cimlap{margin:5px 0 0 0;}
h1.cimlap a{font-size:12px;
  text-decoration:none;
  text-transform:uppercase;
  font-weight:normal;}
#tartalom{padding-top:15px;
  font-family:Tahoma,sans-serif;}
.vezerkep, .vezerkepb, .vezerkepj{border:medium solid white;
  margin:8px 8px 8px 8px;}
.vezerkepb{float:left;}
.vezerkepj{float:right;}
.bevezeto{margin-top:7px;}
.tovabb{font-size:10px;}

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. Idáig jutottunk. 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 filebó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.

#lap{background-image:url('./img/khatter.jpg');}

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.

#tartalom{background-color:red;}
#balsav{background-color:pink;}
#jobbsav{background-color:gray;}

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 file-ké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ő.

#tartalom{background-image:url('./img/tartalom-teto.jpg');
  background-repeat:no-repeat;
  background-position:top left;}

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.

<div id="kereses">
  <form method="get" action="keres.php" name="k" id="k">
    Keresés
    <input name="szo" value="" class="bginput" type="text">
    <input name="imageField" src="./img/nyil.gif"
      alt="Keresés" type="image">
  </form>
</div>

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 egyenlő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 4px-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 141px-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. (Jelenlegi állapot)

#jobbsav{width:127px;}/*127=141-10-4*/
#jobbsav{padding:3px 10px 0 4px;}

Darshan

<div id="darshan">
  <h4 class="modulmenucim">Darshan</h4>
  <a href="#>
    <img src="./img/thumb_R060423.JPG" alt="darsan">
  </a>
  <a href="#">
    <img src="./img/thumb_14.JPG" alt="darsan">
  </a>
</div>
/*darshan*/
#darshan{text-align:center;
  text-transform:uppercase;
  margin-bottom:20px;}
#darshan img{border:medium solid white;
  margin-bottom:20px;}

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, és így néz ki most az oldalunk.

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 (10px) és bal (4px) oldali paddingot, és így a jobbsávban használható területünk szélessége (a jobbsáv width értéke) 127px. 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. (Itt járunk)

#hirdetes img{border:none;}
<div id="hirdetes">
  <a href="http://goloka.hu/">
    <img src="./img/banner.jpg" alt="hirdetés">
  </a>
</div>

Apró

<div id="apro">
  <h4 class="modulmenucim">
    <a href="#">Apró</a>
  </h4>
  <ul>
    <li>Van egy pár darab eladó Mrdanga és Harmónium! Mrd... 
      <a href="#" class="modulmenuszoveg">»»</a>
    </li>
    <li>Van sok-sok receptünk amit szeretnénk megosztani a...
      <a href="#">»»</a>
    </li>
  </ul>
</div>
/*apro*/
#apro{color:#114867;
  margin-top:10px;}
#apro .modulmenucim{margin-left:10px;}
#apro li{border-bottom:thin dashed white;
  margin-bottom:8px;}

Beállítjuk az apróhirdetésekből megjelenő szövegek színét (photoshop pipetta szerint ez volt), valamint egy 10px-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. (Az oldal jelenlegi állapota)

#jobbsav li{list-style-type:none;}
#jobbsav ul{padding:0 0 0 0;
  margin:0 0 0 0;}

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.

<div id="receptbox">
  <div id="receptteto">
    <img src="./img/jobb-doboz-teto.jpg" alt="boxtető">
  </div>
  <div id="receptek">
    <h4 class="modulmenucim">
      <a href="#">Receptek</a>
    </h4>
    <p class="modulmenuszoveg">
      <a href="#">
        <img src="./img/matarpaneer.jpg"
          alt="recept" height="70" width="100">
      </a>
      <a href="#">
        Matar paneer
        (Zöldborsó és házisajt paradicsom mártásban)
     </a>
    </p>
  </div>
  <div id="receptalj">
    <img src="./img/jobb-doboz-alj.jpg" alt="boxalj">
  </div>
</div>

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.

/*recept*/
#receptbox, #receptteto, #receptalj{margin:0 0 0 0;
  padding:0 0 0 0;
  width:124px;}
#receptek{background-color:#114867;
  padding:1px 2px 1px 2px;
  text-align:center;}
#receptek .modulmenucim{padding:13px 0 20px 0;
  font-size:16px;}
#receptek img{border:medium solid white;
  margin-bottom:15px;}
#receptek .modulmenuszoveg{margin-bottom:30px;}
#receptek a:link{text-decoration:none;}
#receptek a:hover{text-decoration:underline;}

Ha ezzel megvagyunk ezt kell látnunk.

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.

<div id="infopanel">
  <div id="tithi">
    Gaurabda 520 Madhusudana Masa<br>
    Sula Pusyami G<br>
   <strong>Saptami</strong>
  </div>
  <div id="naphold">
    <div style="float: left;">
      a nap kel: 05:21<br>
      nyugszik:20:00
    </div>
    <div style="float: left; margin-left: 15px;">
      a hold kel: 10:31<br>
      nyugszik:02:11
    </div>
  </div>
  <div id="naptar">
    2006. május. 04.<br>
    18. hét (123/242)<br>
    <strong>Mónika, Flórián</strong>
  </div>
  <div id="belep">
    <form action="be.php" method="post" name="userbe">
      <div id="belepadat">
        név <input name="user" type="text" /><br>
        jelszó <input name="userpass" type="password" /><br>
      </div>
      <input name="imageField" src="./img/nyil.gif" 
        alt="Bejelentkezés" class="belepnyil" align="middle"
        type="image" />
      <div id="belepegyeb">
        elfelejtett jelszó | 
        <a href="#">regisztráció</a>
      </div>
    </form>
  </div>
</div>

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. Ha alkalmazzuk a lenti változtatásokat ezt kell látnunk.

#infopanel{height:45px;}/*65-10-10*/
/*fent*/
#infopanel{background-image:url('./img/infopanel.jpg');
  color:black;
  font-size:10px;
  padding:10px 0 10px 25px;}
#infopanel strong{color:#600;
  font-weight:normal;}
#tithi{float:left;width:30%;}
#naphold{float:left;width:25%;}
#naptar{float:left;width:20%;}
#naphold{padding-top:5px;}
#naptar{padding-right:25px;}
#belep{float:left;width:20%;
  font-size:10px;}
#belepadat input, #belep submit{height:12px;
  width:100px;
  border:none;
  background-image:url('./img/input-bg.jpg');
  font-size:10px;}
.belepnyil{margin-top:8px;}
#belepadat{float:left;}
#belepegyeb{font-size:9px;}

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.

<div id="lap"><span style="color:red;"><div id="lapalj"></span>
  <div id="fent">
    <div id="fejlec">
      fejlec
    </div>
    <div id="infopanel">
      infopanel
    </div>
  </div>
  <div id="kozep">
    <div id="balsav">
      balsáv
    <span style="color:red;"><div id="balsav-lapalj-seged"></div></span>
    </div>
    <div id="tartalom">
      tartalom
    </div>
    <div id="jobbsav">
      jobbsav
    </div>
  </div>
  <div id="lent">
    lent
  </div>
</div><span style="color:red;"></div></span>

Először is szeleteljük ki a design tervből az emberkét.

A kivágott kép az eredeti photoshop filebó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.

#lapalj{background-image:url('./img/bhakta.jpg');
  background-repeat:no-repeat;
  background-position:bottom left;}

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 kihegyja 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.

#balsav-lapalj-seged{height:201px;}

Ezzel a design megvalósításának a végére is értünk, a végeredmény pedig itt tárul a szemünk elé.

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), ennél ne lepődjü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 filet. 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.

12 thoughts on “Design tervből kész oldal

  1. Pingback: WebMánia » CakePHP project építés 8. rész

  2. Üdv!
    Jana vagyok, 1,5 éve Photoshoppozom, 2-3 éve készítek honlapokat. Eddig még csak a táblázatos módszert ismertem meg, ez alapján a cikk alapján próbálom most felépíteni a holnapot. A kérdésem, hogy tudna e nekem pár kérdésre válaszolni e-mailban? Vagy esetleg MSN-en, Skype-on, vagy egyéb csevegőprogramon? Fontos lenne! Várom válaszát!

  3. Jana: írhatsz e-mailt (rrd[@]1108.cc), vagy írhatsz ide, skypeon is megpróbálhatsz de általában elég sűrű a napi progrmom nem biztos, hogy belefér, hogy azonnal tudok reagálni.

  4. Szia! (remélem köszönhetek így)
    Nagyon tetszett a leírásod a CSS-ről.
    Ki is próbáltam rögtön. Ami be is vált.
    Viszont nekem annyi kérdésem lenne, hogy nem igaz.
    1. a tartalom részére nekem egy ilyen áttetsző részre lenne szükségem,

    A keret a jobb és bal oldal maradna, de lehet a jobb oldalt kitörlöm, hiszen nincs igazán szükség rá.
    Az infó panelre sem.
    Ha a tartalom részere, nem a tartalom cimkét teszem hanem ezt a fentit működik, viszont szétesik az egész.
    A bal oldal megmarad, ha a jobbot is bent hagyom akkor az a tartalom aljára kerül stb.
    És ha a tartalomhoz illesztek be, pl. egy kéept és egyéb infót nem mindegyik marad benne.
    Hogy tudom megvalósítani ezeket a dolgokat,.
    Pl. a szétesést,
    Köszönöm válaszod.

  5. Mónika: Ez egy általános leírás, az a célja, hogy aki akarja az megértse az elvét. Ha az megvan akkor már az ember kedvére módosíthatja amit akar. De azt is inkább lépésről lépésre érdemes. Szóval rajzold le magadnak mit szeretnél és a fentiek alapján össze fogod tudni rakni. Ha elakadsz valahol segítek, de nem tudok senki helyett összerakni egy teljes oldalt.

  6. rrd, köszönöm! Eddig én is táblázatokkal vacakoltam. Leírásod nagyon jó alap, hogy elejétől végéig összerakjam a lapom új dizájnját.

    Most kezdtem ismerkedni a drupallal is. Ezért a következő mondatodhoz egy kérdésem van: “Integrálni kell a megvalósított designunkat abba a CMS-be amit a weblap használ” Ezt nem tudom még. Tudnál irányt mutatni? Köszi.

    • @belulo Erről azért nem írtam bővebben mert eősen függ az adott CMS-től. Többnyire annyit jelent, hogy mondjuk egy meglévő template fájlt kezdesz el módosítgatni úgy, hogy megfeleljen annak amit összeraktál. A legtöbb CMS rendszer külön fájlokat használ a fejléc, a lábléc az oldal sáv és a tartalom kezelésére, azaz ezeket kell módosítgatni. A módosítás során html tagokat cserélsz le pl h2-t h3-ra id-ket cserélsz, hogy megfeleljenek a te CSS definícióidnak illetve class-okat adsz hozzá, vagy módosítasz.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.