Nacházíš se zde: rozcestník kroužku → 1. Úvodní lekce → 1. lekce - Teorie klient a server → 2. lekce - Úvod do vývoje webových aplikací → 3. lekce - XHTML (XHTML tahák) → 4. lekce - CSS = kaskádové styly → 5. lekce - CSS + Třídy → 6. lekce - CSS a DIVy → 7. lekce - Publikování stránek → 8. lekce - Tvorba grafiky → 9. lekce - Rozřezání a nakódová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 Vrstvy → Slouč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.
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ářů.