Foglaljuk gyorsan össze, hol is tartunk! Többször is átrágtuk magunkat a weboldalak réteges felépítésének koncepcióján, megértettük az egymástól elkülönülő tartalmi, megjelenési és viselkedési réteg fogalmát, továbbá megtaláltuk ezekhez a megfelelő eszközeinket, úgymint az (X)HTML-t, a CSS-t és a JavaScriptet, amelyek közül elkezdtünk ismerkedni a legelsővel. Átnéztük, hogyan épül fel egy szabályos XHTML-oldal, milyen főbb szerkezeti elemekből áll, majd kikiáltottuk kedvenc weboldalunknak a CSS Zen Gardent és annak forráskódját elemezgetve elsajátítottuk a legfontosabb (X)HTML-építőköveket. Ezt követően megtanultuk azt a hat legfontosabb formai szabályt, amelynek betartását az XHTML megköveteli tőlünk a weboldalkészítés során, végül megpróbáltunk fényt deríteni arra, miért is jó a szabványnak megfelelő, szabályos weboldalakat készíteni, ha a böngészőknek amúgyis mindegy.
Persze mindezzel még távolról sem végeztünk az XHTML elsajátításával: rengeteg tudni- és tanulnivaló vár még ránk, ám az elméleti alapokat már megszereztük ahhoz, hogy elgondolkodjunk egy saját oldal készítésén. Ez azonban korántsem olyan egyszerű, mint gondolnánk, sőt mielőtt belevágnánk a gyakorlati részébe, muszáj egy rövid kirándulást tennünk a weboldaltervezés elméleti világába, hogy megismerkedjünk az ott felmerülő problémákkal és kérdésekkel. Aztán végigjárjuk a tervezés és építés néhol egymástól eltávolodó, néhol egymást átfedő, meglehetősen sok megállóval tarkított, rögös útját: az alapötlet fogantatásától a kész oldal megszületéséig.
Az egész fejben kezdődik, papíron folytatódik, végül a számítógépben kristályosodik ki.
Tartalomtervezés
Mielőtt belevágnánk egy weboldal tervezésébe, elkészítésébe, a legelső feladat, hogy meghatározzuk annak tartalmi szerkezetét. Ez a kicsit tudományosnak ható kifejezés valójában azt takarja, hogy legyünk tisztában azzal, mit akarunk megjeleníteni a honlapon, és hogyan akarjuk azt megjeleníteni. Fontos, hogy ekkor még nem a weboldal dizájnjáról beszélünk, hanem szigorúan csak a tartalomról.
Ennek a lépésnek kettős célja van, ahhoz azonban, hogy ezt megértsük, ismerkedjünk meg a Laikus Megrendelővel, aki weboldalt szeretne magának csináltatni, amire tipikusan mindent ki szeretne tenni. Részéről ezzel a feladatleírás kész is van, a kedves kivitelező máris hozzáfoghat a munkához. A „mindennel” több baj is van. Egyrészt nem fér ki az oldalra, és ha mégis, általában nem mutat jól. A fő baj azonban az, hogy nem mond el semmit magáról az oldalról, vagy arról, hogy milyen feladatai lesznek az oldallal kapcsolatban a megrendelőnek és a kivitelezőnek. A „mindenbe” az is belefér, hogy a megrendelő ma „erre” gondoljon, holnapután pedig hupikék háttéren forgó toronyórát akarjon az oldalára, és bármit is csinálunk, nem fogunk tudni megfelelni neki. A megoldás tehát az, hogy megpróbáljuk a „mindent” valahogy kategorizálni, struktúrába önteni, rendszerezni téma, fontosság, adattípus vagy egyéb jellemzők szerint, amíg nagyjából kikristályosodik, hogy mi is lesz a weboldal tartalma. Ha még nem is konkrétan, de legalább már nagy vonalakban.
A PC World Online főoldala, valamint cikk, letöltés és videó aloldalainak felépítése: megfigyelhetők a főbb, változatlan oldalelemek és az aloldalakon szereplő tartalmak által megkövetelt változások
Tételezzük fel, hogy egy a PC World Online-hoz hasonló, informatikai portálszerűséget kell készítenünk. A kiinduló pont – a „minden” – ebben az esetben az, hogy érdekes informatikai olvasnivaló legyen rajta, ami az embereket érdekelheti. Na, ez így nem működik, kezdjük el felbontani kisebb, kezelhetőbb darabokra: lesznek szöveges, letölthető és megnézhető tartalmaink. Szöveges tartalom alatt a rövidebb-hosszabb cikkeket értjük; a letölthető egyértelmű: programok; a megnézhető pedig az aktuális divatnak megfelelően videók lesznek. Finomítsuk tovább a dolgot: lesznek híreink (rövidebb) és tesztjeink vagy más jellegű cikkeink (hosszabb), kezelhetjük őket egyben, vagy külön-külön, de biztosan kell majd hozzájuk tervezni egy olyan aloldalt, amely kényelmesen olvashatóvá teszi ezeket az írásokat. A letölthető programok aloldalán rövidebb szöveg, esetleg egy képernyőkép fog szerepelni, meg egy jól látható oldalelem, amely magát a letöltést indítja; ez adott esetben megint egy másféle aloldalkialakítást kíván. A videók egy harmadik félét. A főoldal pedig egyfajta tartalomjegyzék szerepét tölti majd be, amely „behúzza” a látogatót az aloldalakon megjelenő tényleges tartalomra. Szükség lehet arra, hogy az egyes főbb részek saját tartalomjegyzékkel is rendelkezzenek –, hogy elérhetővé tegyük a korábbi cikkeket, videókat, letöltést –, ez megint egy újabb feladat, új kialakítású aloldalt kíván, egyben felveti a navigáció kérdését is; a főoldalon kell majd egy hely, ahol ezek a főbb tartalmi csoportok valamilyen menüből elérhetők.
Most, hogy ezt így végiggondoltuk, máris látszik, hogy a megrendelőnek híreket és egyéb írásokat kell rendszeresen szállítani, letölthető programokról kell gondoskodni, és nézhető videókat kell készíteni. Nekünk meg ehhez egy jól átgondolt weboldalt kell terveznünk és készítenünk, amelyen könnyű eligazodni, navigálni, hogy a közönség megtalálja azt az információt, amely érdekli őt. Vigyázzunk azért arra is, hogy ne essünk át a ló másik oldalára! Ha az utolsó betűig mindent feláldozunk a strukturáltság oltárán, és minden tartalom az aloldalakra kerül, a főoldalon nem marad semmi, ami felkeltse az odalátogatók érdeklődését (ha csak a dizájn nem áll meg önmagában, ami elég ritka). Az „Ez az XY cég/iskola/klub/alapítvány honlapja, kérjük, válasszon a menüből” felirat a 90-es években talán még elment, manapság, ha fejvesztett menekülésre nem is, de hosszabb maradásra sem készteti az oldalunkra látogatókat.
Oldaltervezés
Most hogy már tudjuk, mit kell az oldalon megjelenítenünk, elkezdhetünk dolgozni annak kinézetén. Valószínűleg nem árulunk el nagy titkot azzal, hogy a weboldalak túlnyomó többsége papíron születik meg, úgyhogy senki ne szégyellje elővenni négyzethálós „spirálfüzetét” (ennek hiányában a nyomtatóból elcsent néhány A/4-es papír is megteszi), valamint kedvenc írószerszámát, és bátran kezdjen el firkálni. A későbbi remekmű kezdetben valószínűleg egy fekvő téglalapra fog hasonlítani, amelyben keresztbe és hosszába behúzogatott vonalak jelölik a főbb oldalrészeket: fejléc, lábléc, navigációs részek, tartalmi terület. Itt még nem okvetlenül kell elveszni a részletekben, nem kell dizájnban gondolkodni, egyszerűen a megfelelő arányok megtalálásával, az oldalrészek definiálásával kell eltöltenünk egy kis időt.
Mi kerül a fejlécbe? Nyilván valami olyasmi, ami egyértelműen azonosítja az oldalt, az a mögött álló ember(eke)t, esetleg egy céget vagy rendezvényt. Általában a logó, mint legegyszerűbb megoldás, de akár kerülhetnek ide a navigációt elősegítő oldalelemek is, vagy például egy keresési lehetőség, amely megkönnyíti a fontos információ gyors megtalálását (persze ez már komolyabb programozói háttérmunkát feltételez).
A lábléc szinte állandó lakója a copyright jelzés, amely arról szól, hogy az oldalon szereplő tartalmakat ki hozta létre, az kinek a tulajdona stb. Itt szokták elhelyezni más, kapcsolódó weboldalak hivatkozását (egy rendezvény esetében például a szponzorok logóit a megfelelő oldalakra mutató hivatkozással). Használhatjuk a láblécet dicsőségtáblának, ahol feltüntethetjük, hogy oldalunk megfelel az XHTML szabvány valamelyik változatának. Szintén itt szokták elhelyezni az RSS-szolgáltatás logóját, ha oldalunkon nyújtunk ilyesmit.
A fejléc általában hangsúlyosabb, mint a lábléc, nagyobb területet foglal el, színesebb, látványosabb, míg az utóbbi visszafogottabb, vékonyabb, a használt betűméret is kisebb. Persze ezek már alapvetően dizájnhoz kötődő kérdések, amiket majd a vázlat részletesebb kidolgozásánál konkretizálhatunk. Fontos, hogy nem kötelező nekünk mindent ugyanúgy csinálni, ahogy „az szokás”, senki nem köti meg a kezünket. Manapság egyre divatosabbak az olyan formabontó oldalak, ahol a további kiegészítő tartalmi elemeket hordozó lábléc az oldal többi részétől színvilágban, dizájnban is látványosan eltér. Éljük ki nyugodtan a fantáziánkat.
Méretre szabott terv
A legfontosabb nyilván a fejléc és a lábléc között elhelyezkedő tartalmi rész, az oldal „teste”. Ide kerül „AZ” információ, amelyet át szeretnénk adni a hozzánk látogatóknak. Valószínűleg itt kezdünk el először függőleges vonalakat húzkodni a papíron, felosztjuk a területet két vagy három részre. A bal vagy jobb szélső keskenyebbik rész tipikusan a navigációt elősegítő menüsor helye, de ugyanide kerülhetnek majd hirdetések, és olyan más elemek, amelyek jól tűrik a kis vízszintes méretet. Fontos, hogy ez a rész az oldalunkat böngésző számára egyfajta állandó kapaszkodót jelentsen: ugyanúgy jelenjen meg a főoldalon és az aloldalakon egyaránt – éppúgy, mint a fejléc és a lábléc!
A tervben szereplő oldalelemeinkhez előbb-utóbb számokat kell majd rendelnünk: meg kell határoznunk a méretüket. (Valójában ezen már akkor el kell kezdenünk gondolkodni, amikor először rajzoljuk meg a fekvő téglalapot: biztos, hogy fekvő az a téglalap? Például mi van, ha mobiltelefonra kell oldalt terveznünk? Nyilván pályafutásunk elején ez nem jellemző, de azért tudjunk róla, hogy nemcsak számítógépek és monitorok vannak a világon.) A méreteket tekintve alapvetően kétféle weboldalt készíthetünk: fix vagy változó szélességűt. Ha ezek még új fogalmak, nyissuk meg gyorsan a Firefoxban a CSS Zen Gardent a szemléletes példa kedvéért. Ha teljes képernyőre van maximalizálva böngészőablakunk, ezt kapcsoljuk ki, majd kezdjük el átméretezni az ablakot. Láthatjuk, hogy az oldal középső területe, amely a fő szöveges részeket tartalmazza, folyamatosan megy össze, a szöveg egyre kisebb helyre tördelődik be. Ez egy változó szélességű oldaldizájn, ahol a középső oldalelem szélessége az ablak méretének százalékában van megadva, ezért változik, amikor átméretezzük a böngészőablakot. Ugyanakkor a jobb szélső, pergamenszerű lista fix 150 képpont szélesre van állítva, így annak nem változik a mérete.
Akkor most töltsük be a pergamenes listán található Orchid Beauty nevű stíluslapot, majd próbáljuk megint átméretezni az ablakot. Látható, hogy ezúttal az ablak nincs hatással az oldalelemek méretére, mert azok szélessége a stíluslapon pontosan egy adott mennyiségű képpontban van meghatározva. Ezt hívjuk fix szélességű oldalnak. Kezdő weboldalépítők számára ez talán az egyszerűbb vagy kézzelfoghatóbb, mert ilyenkor minden oldalelemnek adott mérete van, így könnyebb ezeket megtervezni a vázlatban, könnyebb a stíluslapon beállítani, nem utolsósorban egyszerűbb pozicionálni őket, hogy ott jelenjenek meg, ahol mi szeretnénk.
Grid, avagy rácsok mentén tervezett oldalak
Az interneten számos olyan weboldaltervezéssel kapcsolatos cikket találni, amely az oldalakat egyfajta rácsozatra, rácsvonalakra (angolul: grid) építi fel. A kiinduló pont általában fix szélességű weboldal (bár készültek rácsalapú dizájntervek változó szélességű oldalakhoz is), ezt a szélességet vízszintesen egyenlő részekre felosztva kapjuk meg a rácsot. Az oldal tényleges részeinek kialakítása (gondoljunk a több „hasábos” oldalakra), a rácsvonalak mentén történik, ezt nemcsak sokkal egyszerűbb így megrajzolni egy grafikus alkalmazásban, de az oldal megjelenését leíró stíluslap elkészítésekor a különböző részek mérete és pozíciója is nagyon könnyen kiszámítható.
Oldalfelosztás-kombinációk a 960 képpont széles rács alapján – figyeljünk arra, hogy a hasábok között helyet is kell hagyni
Manapság a fix szélességű weboldalakat – biztos, ami biztos alapon – úgy lövik be, hogy az egy 1024×768 képpontos felbontású képernyőre is kiférjenek. Mivel a görgetősáv is akadályozza a teljes szélesség alkalmazását, olyan méretet kellett keresni, amely kisebb, mint 1024, ugyanakkor jól osztható. A 960 képpont tökéletesen megfelelt ezeknek az elvárásoknak: egyaránt osztható 3-mal, 4-gyel, 6-tal, 8-cal, 10-zel, 12-vel, sőt ha valaki nagyon el akarja aprózni, akkor akár 15-tel és 16-tal is, így kiváló lehetőséget kínál a legkülönbözőbb többhasábos elrendezésű weboldalak tervezéséhez.
Néhány érdekes cikk a témában:
– Cameron Moll: Optimal Width for 1024 resolution (Optimális oldalszélesség 1024 képpontos felbontáshoz)
– Cameron Moll: Gridding the 960 (A 960-as rács és felosztási lehetőségei)
– Khoi Vinh: Grid Computing... and Design (A rácsos tervezés egyik „alapítójának” cikke)
– Mark Boulton: Five Simple Steps to designing grid systems (Ötrészes kiváló cikksorozat)
Legközelebb építünk!
Mindezek figyelembevételével a következő leckében hozzálátunk első saját weboldalunk elkészítéséhez. Az egyszerűség kedvéért ez kezdetben fix szélességű oldal lesz, klasszikus fejléccel és lábléccel, valamint két részre osztott középső tartalmi területtel, ahol az egyik helyen a navigációhoz szükséges menüpont, a másik oldalra a szöveges tartalom kerül. Az XHTML-váz elkészítésével kezdjük, majd beletöltünk némi tartalmat, végül kinézetet varázsolunk neki – tehát belekóstolunk majd a CSS-be is! Később pedig ezt fejlesztjük majd tovább mindenféle érdekes módon, illetve egészítjük ki újabb oldalakkal.
