Aki ért a weboldalak fejlesztéséhez, tudja, hogy általában nem az HTML-struktúrával kezdi. Ehelyett egy grafikai programot használ, és ott építi fel az oldal elrendezését. (Az ügynökségben dolgozók a tervezőtől vagy ügyféltől kapják az elrendezést). Ezután az a feladat, hogy ebből az elrendezésből elkészítse az oldalt. Pontosan erről fog most szólni.
Az oldalak másolása közben gyakran találkoztok majd a Slicing és Dicing kifejezésekkel. Tulajdonképpen ez nem más, mint amikor a terve/témát szeletekre vágjátok a grafikai programban, majd azt HTML segítségével ismét összeállítjátok.
A megfelelő grafikai program
Bizonyára mindenkinek vannak preferenciái, hogy milyen szoftvert használ leginkább. A grafikai programok esetében ez természetesen ugyanígy van. Profi webdesign esetén azonban a Photoshop az egyik leggyakrabban használt program. Valójában a legtöbb tervezési vázlat PSD formátumban van. És ezt a PSD formátumot nem lehet minden programmal megnyitni vagy szerkeszteni.
Aki nem rendelkezik Photoshop-pal, az nem teljesen elveszett. Egy lehetséges alternatíva lehet a GIMP. A programot ingyenesen letölthetitek a http://www.gimp.org/ honlapról. Az alapvető elrendezés létrehozásának lépéseit én a GIMP segítségével fogom bemutatni nektek. Bár hasonlóan működik a Photoshopban is.
Egyéni elrendezés létrehozása
Először is átgondoljátok a lényeges design-aspektusokat:
• Milyen széles legyen az elrendezés?
• Hány oszlopot tartalmazzon?
Ezután hozz létre egy munkaterületet a Fájl>Új menüpont segítségével és add meg a méreteket. Bár az általam létrehozott elrendezés "oldaltöltő" lesz, a tényleges tartalom csak 1000 pixel széles lesz. A layout magasságát 887 pixelre állítom. (A weboldal magassága később amúgy is a tartalomhoz igazodik).
A OK gombbal erősítsd meg az adatokat. Ezzel rendelkezésre áll a munkaterület, és azt tartalommal lehet megtölteni. (A tervezés során a jobb átláthatóság érdekében szürke háttérrel dolgozom. Ezt a weboldalon később nem fogod látni).
Egy tipikus elem, ami az oldalon szerepel, a logó, amely általában grafikaként található meg. Hogy beilleszd a layoutba, kattints a Fájl>Megnyitás menüre, majd válaszd ki a logód, amely PNG, GIF vagy JPEG formátumban áll rendelkezésre. Erősítsd meg a kiválasztást a Megnyitás lehetőséggel. Most nyomj Ctrl+C kombinációt a logó vágólapra másolásához. Utána váltunk a tényleges webdesign felületre és nyomj Ctrl+V kombinációt. A beillesztett logó még nem lesz a kívánt helyen. Az Áthelyezés eszköz segítségével könnyen a megfelelő pozícióba helyezheted.
Ha nem lehet elmozdítani a képet, először aktiválni kell a réteget. A megfelelő beállításokat a Ablak>Lenyitható párbeszédpanelek>Rétegek menüben találod.
Jobb felosztás érdekében érdemes megjeleníteni a Segédvonalakat. Ehhez kattints az egér jobb gombbal a Mérő eszközre és húzd az egér bal gombjával a kívánt pozícióra.
Ezek alapján több segédvonalat húzhattok, amelyek segítségével az oldal elemeit igazíthatjátok.
Hozz létre egy újabb réteget, ami a felső menüt tartalmazza.
A név lehet Felső Menü. Hozd létre a réteget OK gombbal. Válaszd ki a Kiválasztás Téglalapot, és húzd ki a területet, ahová a navigációt be kell szúrni. A jelenlegi példában feltételezem, hogy a felső menü háttérszíne átmenetet kap. Ehhez kattints az Színátmenet: Tölt elrendezéssel színátmenettel lehetőségre.
A színátmenet szürkétől feketéig haladjon. Az egyes színeket a Színmezőkből állíthatod be. Színátmenettípusnak válassz TM után HM-t, ami a Támadó- és Háttérszín között változik. Tartsd lenyomva a Ctrl billentyűt és húzz egy vonalat a kijelölt területen fentről lefelé. Miután elengedted az egér bal gombját, a terület rendelkezni fog a kívánt átmenettel.
Alapvetően két lehetőségetek van most:
• Hagyjátok a navigációs területet úgy, ahogy van.
• Illesszétek be az egyes menüpontokat, hogy már a vázlattal pontosabban lássátok, milyen betűtípust stb. használtok.
Melyiket választjátok ezek közül, az végül természetesen rajtatok múlik. Ha azonban például meg szeretnétek mutatni az elrendezést az ügyfeleknek, mindenképpen ajánlom, hogy illesszétek be a menüpontokat. Tapasztalatom szerint sok ügyfélnek hiányzik az elképzelőképessége ezen a téren.
Első lépésként válasszatok egy Betűtípust. A GIMP-ben ezeket a beállításokat a Ablak>Lenyitható párbeszédpanelek>Betűtípusok menüben találjátok.
Ennek a sorozatnak a során már foglalkoztunk az együttműködő rand során felmerülő betűtípusproblémákkal. Elméletileg a webdesignerek bármely betűtípust megadhatnak, azonban azt, hogy a látogatók számítógépén ténylegesen ott lesz-e az adott betűtípus és így megjeleníthető lesz-e, nem tudjátok. Ezért az eredményeket – különösen akkor, ha nagyon exotikus betűtípusokat használtok – nehezen lehet kontrollálni. Az egyes példa weboldal betűtípusairól ezen a sorozatban még egyszer kitérek. A jelenlegi elrendezés esetében mindenesetre az alábbi beállítások mellett döntöttem:
• Verdana félkövér
• 20 pixel
• Fehér betűszín
Most már beillesztheted az egyes menüpontokat ezen a módon. A legjobb, ha másolod a szintet, ahol az első menüpont található, és beilleszted új szintként. Az emelet szövegét aztán testre szabhatod. Így hozz létre a felső menüt.
A felső menünek legyen egy hover effektje. Amikor az egérrel az egyes menüpontokra mutatsz, megváltozik a hátterük színe. Ezt az aspektust természetesen a tervezés során is vizualizálni kell. Ehhez beállítod a kívánt hover színt, majd másolsz egy már meglévő menü-szintet. Ennek a szintnek adsz színt. A jelenlegi példában egy kék színátmenetet használok. Ezután beilleszted a menüpont szövegét. Így már egy elképzelésed lehet arról, hogy hogyan fog kinézni a menü végül.
