Kto sa vyzná v tvorbe webových stránok, vie, že sa zväčša nezačína s HTML štruktúrou. Namiesto toho sa použije grafický program a vytvorí sa v ňom rozloženie stránky. (V agentúre dostane zvyčajne rozloženie od grafika alebo zákazníka). Úlohou je potom postaviť stránku podľa tohto rozloženia. O tom to teraz bude.
V súvislosti s reprodukciou rozloženia budú naďalej vychádzať dva termíny Slicing a Dicing. V skutočnosti to znamená, že sa vezme vzor alebo dizajn, rozreže v grafickom programe a potom sa opäť zostaví pomocou HTML.
Správny grafický program
Každý má svoje preferencie, čo sa týka softvéru, ktorý najradšej používa. Samozrejme, aj v prípade grafických programov. V súvislosti s profesionálnym webovým dizajnom je to však trochu iné. Tam sa takmer výlučne pracuje s programom Photoshop. Skutočne väčšina dizajnov je v súbore PSD. A tento formát PSD nie je možné otvoriť alebo upraviť vo všetkých programoch.
Kto nemá Photoshop, nie je úplne bezradný. Možnou alternatívou je program GIMP. Program môžete zadarmo stiahnuť zo stránky http://www.gimp.org/. Ukážem vám základné kroky pre vytvorenie rozloženia pomocou GIMP. To by malo fungovať podobne aj v programe Photoshop.
Vytvorenie vlastného rozloženia
Najprv si premyslite základné dizajnové aspekty:
• Aká široká má byť štruktúra?
• Koľko stĺpcov má obsahovať?
Potom vytvorte pracovnú plochu cez Súbor>Nová a nastavte veľkosť. Aj keď moje vytvorené rozloženie bude "stránkovejší", skutočný obsah má šírku len 1000 pixelov. Ako výšku rozloženia nastavujem 887 pixelov. (Pričom výška webovej stránky sa nakoniec orientuje podľa obsahu).
S údajmi potvrďte kliknutím na OK. Tak máte pred sebou pracovnú plochu a môžete ju naplniť obsahom. (Pre prehľadnosť pracujem v návrhu s našedlým pozadím. Na webovej stránke toto neskôr nebude viditeľné).
Typickým prvkom, ktorý patrí na webovú stránku, je logo, ktoré sa zvyčajne nachádza vo forme grafiky. Aby sa vložilo do rozloženia, otvorte Súbor>Otvoriť a vyberte svoje logo vo formátoch PNG, GIF alebo JPEG. Potvrďte výber kliknutím na Otvoriť. Teraz stlačte Ctrl+C, aby sa logo skopírovalo do schránky. Potom prejdite do samotného webového dizajnu a stlačte tam Ctrl+V. Vložené logo sa teraz ešte nenachádza na želanom mieste. Pomocou nástroja na Presúvanie sa však dá jednoducho presunúť na správnu pozíciu.
Ak sa obrázok nedá presuvať, musíte najprv aktivovať vrstvu. Príslušné nastavenia nájdete pod Okno>Dokovateľné dialógy>Vrstvy.
Pre lepšie rozdelenie by ste mali zobraziť Sprievodné čiary. Na to kliknite na Pravítko a pri stlačení ľavej myši ho presuňte na požadované miesto.
Ľubovoľne môžete nakresliť viac sprievodných čiar, podľa ktorých môžete zarovnať prvky webovej stránky.
Vytvorte ďalšiu vrstvu. Táto vrstva by mala obsahovať horné menu.
Ako názov môžete zadať Horné menu. Vrstvu vytvorte kliknutím na OK. Kliknite na Obdĺžnikový výber a nakreslite plochu, do ktorej sa má vložiť navigácia.
V aktuálnom príklade predpokladám, že pozadie horného menu bude mať farbový prechod. Preto kliknite na Farba: Výber s prechodom farieb (vyplniť).
Farbový prechod má ísť od sivej po čiernu. Príslušné farby môžete nastaviť cez Farby. Ako typ prechodu farieb nastavte VP doZ, teda od Čel- k Odbočke farby. Držte teraz stlačenú klávesu Ctrl a ťahajte v zvolenej oblasti čiaru zdola nahor. Po tom, ako uvoľníte ľavé tlačidlo myši, má oblasť požadovaný farebný prechod.
Zásadne máte teraz dve možnosti:
• Môžete ponechať oblasť pre navigáciu tak, ako je.
• Môžete vložiť jednotlivé položky menu, aby ste už v návrhu presnejšie videli, aké písma atď. použijete.
Ktorú z týchto dvoch variantov si vyberiete, je nakoniec len na vás. Ak však napríklad chcete svojmu zákazníkovi predstaviť dizajn, v každom prípade by som vám odporučil integrovať položky menu. Skúsenosti ukazujú, že mnohým zákazníkom tu chýba predstavivosť.
Najprv si vyberte Písmo. V GIMP nájdete príslušné nastavenia pod Okno>Dokovateľné dialógy>Písma.
V priebehu tejto série sme sa už venovali problému s písmom v súvislosti s CSS a HTML. Teoreticky môžete ako webový dizajnér zadať akékoľvek písmo. To, či je však skutočne na počítači návštevníka stránky prítomné a teda zobrazené, neviete. Preto nie je možné dosiahnuté výsledky – najmä ak používate veľmi exotické písma – ľahko kontrolovať. Ale na tento aspekt sa ešte vrátim, keď sa budem venovať písmam príkladovej webovej stránky. Pre aktuálne rozloženie som sa však rozhodol pre nasledujúce nastavenia:
• Verdana bold
• 20 pixelov
• Biela farba písma
Týmto spôsobom môžete vložiť jednotlivé položky menu. Najlepšie je skopírovať úroveň, v ktorej je obsiahnutá prvá položka menu, a vložiť ju ako novú úroveň. Text úrovne môžete potom prispôsobiť. Vytvorte tak horné menu.
Horné menu by malo získať efekt pri najazdení myšou. Keď takým spôsobom prejdete myšou nad jednotlivými položkami menu, zmení sa ich pozadie. Tento aspekt by sa samozrejme mal tiež vizualizovať v návrhu. Na tento účel nastavte požadovanú farbu pre najazdenie a skopírujte si jednu z existujúcich úrovní menu. Túto úroveň potom priradíte farbu. V aktuálnom príklade predpokladám modrý farebný prechod. Následne sa vloží text položky menu. Takto sa už aspoň dozviete, ako bude menu nakoniec vyzerať.
