9 Rozřezání a nakódování grafického návrhu


Nacházíš se zde: rozcestník kroužku1. Úvodní lekce1. lekce - Teorie klient a server2. lekce - Úvod do vývoje webových aplikací3. lekce - XHTML (XHTML tahák)4. lekce - CSS = kaskádové styly5. lekce - CSS + Třídy6. lekce - CSS a DIVy7. lekce - Publikování stránek8. lekce - Tvorba grafiky9. lekce - Rozřezání a nakódování grafického návrhu


9 Rozřezání a nakódování grafického návrhu

9.1 Opakování

9.2 Postup při řezání a kódování webu

9.2.1 Rozřezání grafického návrhu

Postup je takový, že si vždy skryjeme všechny ostatní vrstvy, než které nás zajímají (např. si tedy necháme zobrazené všechny vrstvy, které obsahují logo – tzn. hlavní nadpis, pozadí atd.). Poté provedeme sloučení těchto vrstev tak, že si vždy vybereme tu vrstvu, která je v seznamu uvedena nejvýše a v menu VrstvySloučit dolů (popř. pravým tlačítkem myši na danou nejvyšší vrstvu a zvolit volbu Sloučit dolů). Tento postup opakujeme tak dlouho, až jsou všechny vrstvy, které chceme vyříznout sloučeny v jedné.

Poté si označíme z této sloučené vrstvy to, co chceme, ořízneme (pomocí kl. zkratky Alt + O + O – písmenka O, nikoli číslice 0). Poté pomocí kl. zkratky Alt + S + J si tuto vrtsvu uložíme do nového souboru – zvolíme druh PNG. Vše vrátíme do původního stavu (opakováním CTRL + Z) a opakujeme tento postup pro každou část návrhu webu.

9.2.2 Nakódování webu

Kódování webu probíhá individuálně pro jednotlivé návrhy, princip je však takový, že pokud chceme umístit na pozadí vzorek – použijeme v CSS background: url('adresa-obrazku.png') repeat-x repeat-y;.

V případě, že chceme na pozadí uložit obrázek, který se nebude opakovat, poté použijeme ve stylech toto background: url('adresa-obrazku.png') no-repeat;, ale musíme <div>u zároveň nastavit odpovídající rozměry – tzn. pokud má obrázek např. 900×300px, pak takové rozměry nastavíme i odpovídajícímu <div>u.

Podobný postup poté aplikujeme opakovaně, vždy se snažíme, aby výsledný xHTML a CSS soubor byl validní a zároveň podobný (či shodný) s původním grafickým návrhem. Také dbáme na to, aby byl zdrojový kód čistý a dobře okomentovaný pomocí dostupných komentářů.

Máš chuť na další lekci?