Kdo se vyzná ve vývoji webových stránek, ví, že obvykle nezačíná s HTML strukturou. Místo toho si vezme grafický program a navrhne v něm layout stránky. (Ti, kdo pracují v agentuře, obdrží layout od grafika nebo zákazníka). Poté je úkolem postavit stránku z tohoto layoutu. O tom se teď bude jednat.
V souvislosti s replikací layoutů se budete stále setkávat s oběma termíny Slice a Dice. Tím se vlastně myslí to, že vezmete předlohu nebo design, rozřežete ho ve vašem grafickém programu a pak ho znovu sestavíte pomocí HTML.
Správný grafický program
Každý má své preference ohledně toho, který software nejraději používá. Stejně tak uživatelé mají své preference ohledně grafických programů. V souvislosti s profesionálním webdesignem je to však trochu jiné. Tam se téměř výhradně pracuje s Photoshopem. Skutečně většina návrhů designu je uložena jako soubor PSD. A právě s tímto formátem PSD se není možné otevřít nebo ho dokonce editovat ve všech programech.
Kdo nemá Photoshop, není zcela ztracen. Jako možnou alternativu můžete zvážit GIMP. Tento program si můžete zdarma stáhnout z webu http://www.gimp.org/. Zde vám ukážu základní kroky pro tvorbu layoutu pomocí GIMP. Funguje to podobně také v programu Photoshop.
Vlastní vytvoření layoutu
Nejprve si promyslete základní designové aspekty:
• Jak široký by měl být layout?
• Kolik sloupců by měl obsahovat?
Poté vytvoříte pracovní plochu přes možnost Soubor>Nova a nastavíte velikost. I když layout, který jsem vytvořil, bude „zabírat celou stránku“, skutečný obsah bude mít šířku pouze 1000 pixelů. Jako výšku layoutu nastavuji 887 pixelů. (Přičemž výška webové stránky se později stejně bude orientovat podle obsahu).
S tlačítkem OK potvrdíte zadané údaje. Pracovní plocha je připravena a může být naplněna obsahem. (Pro přehlednost pracuji v návrhu s šedým pozadím. Na webových stránkách později toto nebude vidět).
Velmi typickým prvkem, který patří na webovou stránku, je logo, které obvykle existuje jako grafika. Chcete-li jej vložit do layoutu, otevřete možnost Soubor>Otevřít a vyberte vaše logo ve formátu PNG, GIF nebo JPEG. Potvrďte výběr pomocí tlačítka Otevřít. Nyní stiskněte Ctrl+C, abyste logo zkopírovali do schránky. Poté přejděte do samotného webdesignu a stiskněte zde Ctrl+V. Vložené logo se zatím nenachází na požadovaném místě. Pomocí nástroje Přesunutí ho však můžete bez problémů přemístit na správnou pozici.
Pokud nelze obrázek přesunout, nejdříve musíte aktivovat vrstvu. Příslušné nastavení najdete pod Okno>Dokovatelné panely>Vrstvy.
Pro lepší rozdělení byste měli zobrazit Pomocné linie. K tomu klepněte na Ovládací prvek a při stisknutí levého tlačítka myši jej přetáhněte na požadované místo.
Takovýmto způsobem můžete vytáhnout libovolné množství pomocných linií, podle kterých můžete zarovnávat prvky webové stránky.
Vytvořte si nyní další vrstvu. Tato vrstva by měla obsahovat horní nabídku.
Jako název můžete uvést Horní nabídka. Vytvořte vrstvu pomocí OK. Zvolte nástroj Obdélníkový výběr a nakreslete oblast, do které bude vložena navigace.
V tomto případě předpokládám, že pozadí horní nabídky bude mít barevný přechod. Klikněte na Přechod barvy: Výběr barvami (vyplnit).
Přechod barvy by měl být od šedé k černé. Příslušné barvy můžete nastavit v Barevných polích. Jako typ přechodu zvolím VG na HG, takže přechází od Přední- k Pozadí barvy. Držte nyní stisknutou klávesu Ctrl a vytáhněte v vybrané oblasti čáru shora dolů. Jakmile uvolníte levé tlačítko myši, bude oblast obsahovat požadovaný barevný přechod.
Základně teď máte dvě možnosti:
• Nechte oblast pro navigaci tak, jak je.
• Vložte jednotlivé položky menu tak, abyste již v návrhu přesně viděli, které písma atd. používáte.
Kterou z těchto dvou variant zvolíte, je nakonec samozřejmě na vás. Pokud však například chcete zákazníkovi představit layout, v každém případě bych vám doporučil začlenit menu. Zkušenosti naznačují, že mnoho zákazníků zde má problémy s představivostí.
Nejprve si zvolte Písmo. V GIMPu najdete příslušná nastavení pod Okno>Dokovatelné panely>Schránky.
V průběhu této série byla již řeč o problému se šablonami písem v souvislosti s CSS a HTML. Teoreticky můžete jako webdesigner nastavit jakékoli písmo. Nevíte však, zda je tato písmo skutečně k dispozici na počítači návštěvníkůch a tudíž se zobrazí. Výsledky tak lze obtížně kontrolovat – zejména pokud používáte velmi exotická písma. Věnuji se tomuto aspektu později, když budu hovořit o písmech na příkladové webové stránce. Pro aktuální layout jsem se však rozhodl pro následující nastavení:
• Verdana bold
• 20 pixelů
• Bílá barva písma
Nyní můžete vložit jednotlivé položky nabídky tímto způsobem. Nejlépe je zkopírovat úroveň, ve které je obsažena první položka nabídky, a vložit ji jako novou úroveň. Text úrovně pak můžete upravit. Vytvořte tak horní nabídku.
Horní nabídka by měla získat efekt při najetí myší. Pokud tedy přejedete kurzorem myši přes jednotlivé položky nabídky, změní se pozadí. Tento aspekt by měl být samozřejmě vizualizován také v návrhu. K tomu zvolíte požadovanou barvu pro najetí myší a zkopírujete si jednu z existujících úrovní nabídky. Této úrovni přiřadíte barvu. V aktuálním příkladu předpokládám modrý barevný přechod. Poté vložíte text položky nabídky. Takže už budete mít alespoň představu o tom, jak bude nakonec nabídka vypadat.
