CSS lépésről-lépésre: a design tervtől a kész oldalig
![CSS lépésről-lépésre: a design tervtől a kész oldalig](http://weblabor.hu/misc/fs/designtervtolakeszoldalig.jpg)
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.
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:
![Elemek](http://weblabor.hu/misc/fs/designtolkeszoldalig_elemek.jpg)
![Tervrajz](http://weblabor.hu/misc/fs/designtolkeszoldalig_tervrajz.jpg)
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.
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.)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:
![1. fázis](http://weblabor.hu/misc/fs/designtolkeszoldalig_fazis1.jpg)
A színeken ne tessék kibukni, az csak azért van, hogy lehessen látni amit látni kell.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.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.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.
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.
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.
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.![Probléma az emberkével](http://weblabor.hu/misc/fs/designtolkeszoldalig_emberke_problema.jpg)
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.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 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.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.
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. ![13. fázis](http://weblabor.hu/misc/fs/designtolkeszoldalig_fazis13.jpg)
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.
![Infopanel minta](http://weblabor.hu/misc/fs/designtolkeszoldalig_infopanel_minta.jpg)
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.
![Probléma az emberkével](http://weblabor.hu/misc/fs/designtolkeszoldalig_emberke_problema.jpg)
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.
![Emberke](http://weblabor.hu/misc/fs/designtolkeszoldalig_emberke.jpg)
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.
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.
■ A sorozatban megjelent
- CSS lépésről-lépésre: képválasztás listapanel segítségével
- CSS lépésről-lépésre: dobozolás
- CSS lépésről-lépésre: nyomtatás
- CSS lépésről-lépésre: táblázatnélküli oldalfelépítés
- CSS lépésről-lépésre: a design tervtől a kész oldalig
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:
![Elemek](http://weblabor.hu/misc/fs/designtolkeszoldalig_elemek.jpg)
Elemek
- 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)
- 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)
- 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)
- 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)
- 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:![Tervrajz](http://weblabor.hu/misc/fs/designtolkeszoldalig_tervrajz.jpg)
Tervrajz
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.- 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.
- 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.
- 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.
- 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.
- 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.
Infopanel
- 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.
- 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 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.
Darshan
- A menük szövegének nem szabad túl hosszúnak lennie, mert akkor le fognak lógni a helyükről.
- 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.
- 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 bal sáv](http://weblabor.hu/misc/fs/designtolkeszoldalig_balsav.jpg)
A bal sáv
![Infopanel méret](http://weblabor.hu/misc/fs/designtolkeszoldalig_infopanel_meret.jpg)
Infopanel méret
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 fájl
/*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;}
![1. fázis](http://weblabor.hu/misc/fs/designtolkeszoldalig_fazis1.jpg)
1. fázis
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;}
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>
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>
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./*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;}
.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;}
<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>
- 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.<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>
#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.![5. fázis](http://weblabor.hu/misc/fs/designtolkeszoldalig_fazis5.jpg)
5. fázis
/*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;}
<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>
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.<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;}
![Probléma az emberkével](http://weblabor.hu/misc/fs/designtolkeszoldalig_emberke_problema.jpg)
Probléma az emberkével
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.#lap{background-image:url('./img/khatter.jpg');}
#tartalom{background-color:red;}
#balsav{background-color:pink;}
#jobbsav{background-color:gray;}
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ő.#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>
#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;}
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.#hirdetes img{border:none;}
<div id="hirdetes">
<a href="http://goloka.hu/">
<img src="./img/banner.jpg" alt="hirdetés">
</a>
</div>
Apró
![12. fázis](http://weblabor.hu/misc/fs/designtolkeszoldalig_fazis12.jpg)
12. fázis
<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;}
#jobbsav li{list-style-type:none;}
#jobbsav ul{padding:0 0 0 0;
margin:0 0 0 0;}
Receptek
![13. fázis](http://weblabor.hu/misc/fs/designtolkeszoldalig_fazis13.jpg)
13. fázis
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>
/*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;}
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.![Infopanel minta](http://weblabor.hu/misc/fs/designtolkeszoldalig_infopanel_minta.jpg)
Infopanel minta
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>
#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.![Probléma az emberkével](http://weblabor.hu/misc/fs/designtolkeszoldalig_emberke_problema.jpg)
Probléma az emberkével
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"><div id="lapalj">
<div id="fent">
<div id="fejlec">
fejlec
</div>
<div id="infopanel">
infopanel
</div>
</div>
<div id="kozep">
<div id="balsav">
balsáv
<div id="balsav-lapalj-seged"></div>
</div>
<div id="tartalom">
tartalom
</div>
<div id="jobbsav">
jobbsav
</div>
</div>
<div id="lent">
lent
</div>
</div></div>
![Emberke](http://weblabor.hu/misc/fs/designtolkeszoldalig_emberke.jpg)
Emberke
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.
#lapalj{background-image:url('./img/bhakta.jpg');
background-repeat:no-repeat;
background-position:bottom left;}
#balsav-lapalj-seged{height:201px;}
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áltprint.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.
![rrd arcképe](/misc/userfaces/4037.jpg)
rrd
rrd 1998 óta foglalkozik webes fejlesztéssel. A HTML-től indulva először a PHP majd a JavaScript felé fordult. A mobil tech előrelépésével belekóstolt az Android fejlesztés világába is.Nagy rajongója a CakePHP, a jQuery, a Prototype, és a Scriptaculous keretrendszereknek, az open sourcenak, és a pizzának. Mindezek folyamatosan jelen vannak a webes munkáiban.
Nagyon jó
Köszönöm. :)
amazon turk irány
Köszönjük
Szorosan hozzá kapcsolódva: http://doransky.hu/?p=245
/r.
poén
thx
Ráfordított idő
időigény
Ha arra vagy kíváncsi, hogy mennyi idő alatt lehet egy grafikai tervből egy (CMS-be még nem integrált) kész html oldalt összerakni, az sok mindentől függ. De valami ilyesmire elég egy délután.
Szép anyag
máshogy?
A magam részéről azért kíváncsi lennék a tiédre!
elnevezes
ugyanis en peldaul ha egy harom hasabos oldalt keszitek akkor nem feltetlenul
bal,kozep,jobb sorrendben irom azt a tartalomban. altalaban a kozep(ami nalam a tartalom, vagy content nevet viseli) az elso.
ez akkor valtozik ha valami az oldal navigalasahoz elengedhetetlenul szukseges cucc van valamelyik masik hasabban. ilyenkor az eleje kerul. hacsak nem tul hosszu vagy nem tartalmaz sok folosleget.
szoval, nem epp kovetkezetes valamifel teljesen relativ, szubjektiv dolog szerint elnevezni a dobozokat, sokkal erthetobb es hasznosabb ha olyan elnevezesuk van ami tukrozi a tartalmukat.
pl: fejlec, infopan ok, de lent > lablec
Css elnevezések
Másfelől minden elismerésem az írónak, bizti nem 1 délután volt a cikk megírása:)
XML deklaráció
köszönjük
hibák az átemelésnél
itt járunk
egy sima link kéne csak
nyugi
fix hosszú bevezető? :)
Miért ne lehetne? Csinálsz egy scriptet, ami ha hosszú a bevezető, levágja (persze nem figyelve a HTML tagokra), ha pedig rövid, akkor feltölti "lorem ipsum"-mal a megfelelő karakterszámig!!! :))
Így tuti megfelelő hosszú lesz!
megfelelő hossz
Első futam
Egyrészt nem mondtad meg a cikkben (ill. nem utaltál rá) hogy mi is ez a bug, másrészt felesleges a menuheight class bevezetése, mert így nincs igazán funkciója a dolognak. Egy feltételes "utasítással" az IE számára betölthetnéd egy külön fájlban (pl. IEhacks.css) a külön az IE számára létrehozott kódot anélkül, hogy a hackelés "áldozatául esne" a template-ed.
Olvasom tovább :) ...
ie bug
A feltételes belinkeléssel igazad van, de a magam részéről sosem használom a feltételes css deklarációkat, inkább addig gyűröm, amíg többé-kevésbé nem kapom ugyanazt az eredményt a nagyobb böngészőkben.
felteteles linkeles
eloszoris. nem foglalkozunk az IEvel mig kesz nincs az oldal. semmi ertelme orakat szarakodni olyasmikkel amik lehet kesobb maskent megoldodnak.
masodszor: egy kulon css file attekinthetove teszi az IE szamara keszult kodot, raadasul biztos lehetsz benne hogy ervenyes lesz, stb.
harmadszor. a felteteles kommentek biztosithatjak hogy tenyleg csak az ieben es annak is csak a megfelelo verzioiban mukodik az a specifikus kod.
szoval minden szempontbol jobb mint osszevissza * html stilusu hackeket beszurkalni
Hackelés
Szvsz erre sokszor azért nem figyelünk oda, mert Mo-n a sávszélességért nem fizetünk (csak a felhasználó esetleg), külföldön azonban éppen ez az, amit meg kell fizetni - ebből kifolyólag a fejlesztők ott igyekeznek a fájlok méretét minimalizálni a sok kicsi sokra megy elv alapján. Occam borotvája, tableless oldal és ilyenek :)
menü
width = "720px" ???
width
valid
tud esetleg valaki jobb (és szintén valid xhtml) módszert flash beillesztésére??
Validra
http://www.alistapart.com/articles/byebyeembed
A cikk tényleg jó, de a thumbnailes rész árnyékát 3 divből össze is lehet hozni. Mondjuk egy jókora árnyékrész aminek egyedül az alja és jobb oldala "hiányzik". Ez backgroundban, ebben egy másik div amiben a jobb also sarok kerül szintén backgroundban csak jobb alura igazítva (margin-left és top pl 10px a lekerekítésekhez és eltartáshoz balról, hogy ne takarjon rá az alatta lévőre). Végül ebben az képnek a divje aminek meg margin-right meg bottom 10px a jobb és alsó eltartáshoz hogy ott ne takarjon rá az árnyékra.
Én általában az ilyenek nagyobbra csinálom, hogy akár máshoz is fel tudjam használni pl szövegdobozként vagy kiemelésként.
Cikk
Szélesség
Egyébként tényleg jó a cikk és az is látszik, hogy fél év alatt mennyit lehet fejlődni ebben a témában. (http://weblabor.hu/cikkek/csstablazatnelkuli).
jobb oszlop???
Sokaknak hasznos
Köszönet a szerzőnek, hogy vette a fáradtságot és megírta!
elismerés
Valid
Nagyon csúnya, hogy a tartalmi részben nincs margó, aztán vonaltól mindjárt szöveg van.
Az, hogy van egy ilyen cikk tényleg jó dolog lehet annak, aki még most ütközik ezekbe a problémákba és esetleg angolul sem tud.
A transitional helyett javaslom a strictet.
Strict vs Transitional
Érdemes lenne
És valóban nagyon jó a cikk, sokat tanultam belőle, köszönöm. :)
Érdemes lenne
http://www.w3schools.com
Kérdés
attól függ
Tehát úgy gondolom, erről nem lehet általánosságban írni.
CMS-be integrálás
Hasznos lenne
Ennek az oldalnak az integrálási példája érdekes lenne. Ha már ennyit írtál a dizájn készítéséről, akármennyire is specifikus az a rendszer amit ehhez használtok, jó lenne látni hogyan jártatok el. :)
S.
CSS-ben megadott magasság
Feldobom a kérdést, mivel úgy is témába vág!
Szeretnék az oldalmra egy 100% magasságú div-es réteget, CSS-ben megadtam a tag magasságát (width:100%), müködik is, de csak akkor ha nem deklarálom az oldal Doctype-ját.
Ha bármilyen html, vagy xhtml formutumra deklarálom, figyelmen kivül hagyja a a css-ben megadott magasság értéket.
Valakinek valami ötlete, hogy hogy lehetne megoldani, hogy deklarált Doctype mellet is müködjön a 100%-os magasság ?
Szeretnék mindenképp valid kodú oldalt...
Előre is köszönöm!
off, wtf
2: height-ra gondolsz? amúgy a height: 100%-kal nem sokra mész. a w3c szerint egy (teljes) weblap függőleges irányban nem méretezendő.
Szülő
100% magasság
OFF!
LJ
De a cikk az hasznos és nagyon jó, thx.
design terv
photoshop tutorial
Ezek a leírások viszont sajnos nem helyettesítik a gyakorlatot és a fantáziát. Ez a keserű tapasztalatom ;)
"Nesze neked tipográfia."
betunoveles ff alatt
a cikk nagyon jo, sok ilyen kene. jo latni, h dolgoznak masok.
(flashben van egyaltalan vmi animacio?)
szétesik
A flash meg folyamatban (elvileg...)
css tutorial
Drakula
Üde színfoltjai a gyakorlati kiegészítések (megrendelő-designer VS. Te párviadalai), amelyek MINDEN megrendelt munkánál így (és jobban) jelentkeznek!
Jó kis cikk, de valami hiányzik?
Viszont azt hiszem valamit kifelejtettél belőle amit bele terveztél. És pedig: még a cikk elején írtad "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.)".
Ugyan evvel a problémával találkoztam én is hogy IE alatt nem tudom középre igazítani az egyik fő DIV-et. Ha a CENTER-t vagy egy DIV ALIGN="center"-t használom akkor ez megoldja a problémát, viszont később egy DIV-en (melyet balra float-olok) belüli TABLE-ket az Opera nem tud balra igazitani. (Automatikusan középre teszi és legfeljebb csak jobbra lehet igazitani.)
középre igazítás IE-ben
Egy kis segítséget kérnék!
Köszi szépen, nagyon hasznos ez a tutorial és az a jó benne hogy pl: én most kezdtem el foglalkozni a CSS-es és csak annyit csináltam hogy utánaolvastan 1-2 kifejezésnek de az egész érthető.
Viszont akadt benne 2 problémám amit nem tudok megoldani:
1) IE-ben nem megy a középreigazítás. Ha valaki tudna benne segíteni annak nagyon hálás lennék.
2) Egy olyan oldalt csináltam én is aminek a középső része 3 divből áll, viszont azt nem tudom hogy milyen parancsal lehet megadni hogy mind a 3 div egyforma hosszú legyen még akkor is hogy ha csak a tartalmi rész "huzza le".
Valaki segítsen ezeket a problémáakt megoldani légszi.
Előre is köszi a segítséget
Xrissz
segítség
2) a dived csak olyan hosszú lesz amennyi a tartalom benne. Nem lehet lehúzni. A vizuális összeolvasztás elve segítségével tudod megoldani, hogy úgy nézzen ki mintha lentebb menne.
nem mindig
Nagyobb gondot okoznak viszont a bonyolultabb, nem könnyen struktúrálható oldalak.
Éppen most készítem a saját oldalam új kinézetét, szintén hasonló elven, mint amit rrd leírt, csakhogy nem annyira egyszerű.
A fő gondot nálam az okozza, hogy hogyan tudok két divet függőleges magasságban egymáshoz igazítani (azaz: ha az egyik div magasabb, akkor a másik nyúlik hozzá, ha a másik, akkor meg fordítva)
Létezik egyáltalán ilyen megoldás CSS-ben?
vizuális összemosás elve
első oldalam
Ez lesz az első oldalam amit csinálni szeretnék css és php segítségével, viszont elkelne egy kis segítség, mert ott elakadtam hogy beszámozzam az oldalt....elkezdtem végigcsináln lépésről lépésre a leírs szerint de nem sikerül! A segítséged szeretném kérni esetleg priviben vagy akár itt is a forumon!
email: zsoolzso##kukac##gmail.com
Az oldal:
Olvass!
jó lenne ha más témába beleszemetelés előtt elolvasnád a fórumról szóló írást: http://weblabor.hu/weblabor/segitseg#forumok és utána nyitnál egy témát a konkrét problémáidnak. Azaz írd le pontosan mi a bajod, nem úgy hogy valaki rágja a számba a dolgot.
A másik, hogy amíg még a HTML-CSS-sel sem vagy tisztában nem igazán ajánlott PHP-re menni, mert szépen összekavarodnak majd a fogalmak.
J
OK.
Banner a két oldalra
Összeraktam egy oldalt a cikk alapján.
Abban szeretném a nálam tapasztaltabb szakik segítségét kérni, hogy miképp lehet a két oldalra 120*240-es bannereket tenni.
Én akárhogyan próbáltam nem ment, így a lehető legegyszerűbb példát írjátok.
Előre is köszi.
banner
psd
Köszönöm
Javítva