program 1

 1. - Vlastní návrh je grafický náčrtek layoutu navrhované webové stránky. Je vhodné před úvodní tvorbou zdrojového kódu vytvořit ručně představu požadovaného layoutu. Tento návrh budeme realizovat pomocí CSS pozicování.

 2. - Soubor s CSS stylem  je převedý návrh do zdrojového kódu CSS pozicování v externím souboru. Navržený layout realizujeme pomocí pojmenovaných tříd elementu div s názvy záhlaví, zápatí, vlevo, vpravo a hlavní.

 3. - Html stránka pomocí vytvořeného CSS stylu  je výsledná kostra html stránky s použitými elementy div nadefinovanými v souboru s CSS stylem.

 4. - Navigace v levém sloupci a další stránky  je dalším krokem realizující postup tvorby layoutu. Musíme vytvořit v navigačním sloupci odkazy na všechny stránky naší webové aplikace. V tomto kroku rovněž vytváříme všechny stránky aplikace, neboť do tohoto kroku je jejich zdrojový kód totožný. Jakmile máme kostru stránek připravenou, plníme již informační obsah na každé stránce samostatně.

 5. - CSS layout ze šablony   ukazuje, že vhodný layout můžeme získat přímo z předem připravené šablony (v tomto případě je zdrojem třísloupcový layout ze šablony na servru cssdrive.com). Pro tvorbu našich stránek postupujeme stejně, to znamená, že musíme upravit layout pro naši potřebu a vytvořit navigační menu a kostru všech stránek.

 6. - CSS Menu ze šablony  je pokročilé předpřipravené menu rovněž ze servru cssdrive.com. Uvedené menu musíme v následujícím kroku upravit pro potřeby našich stránek.

 7. - Úprava menu a layoutu, začlenění do web stránek  je posledním krokem před samotným naplněním informačního obsahu stránek. Příklad ukazuje začlenění CSS menu pro potřeby naší aplikace.