Pružné rozvržení stránky se často používá u obsahově bohatých webů, kde je výhodné využít maximálně dostupnou plochu prohlížeče, ale zároveň není vhodné koomplikovat život uživatelům s menšími displeji. Jednoduchý pružný návrh v tomto cvičení postavíme ze stejného „grafického návrhu“:http://www.zamostny.net/wp-content/uploads/2008/11/navrh.psd, který jsme vytvořili v „minulém cvičení“:../dojsloupcovy-layout-5-cviceni, pouze jej jinak rozřežeme a jinak nakódujeme stránku (viz připojené soubory).

Vlastní obsahovou plochu návrhu je možné členit do několika segmentů, jejichž rozložení se přizpůsobuje velikosti okna prohlížeče. Jak je toho možné dosáhnout předvádí ve zjednodušené podobě „galerie“:http://www.zamostny.net/wp-content/uploads/2008/11/cviceni6b.html.

##Připojené soubory:
- Grafický návrh
- Ukázka řešení
- Ukázka galerie

Přednáška se zabývá rolí barev grafiky a dalších prvků v grafickém návrhu webové prezentace. Jsou probrány základy teorie barev, jejich počítačová reprezentace modely RGB a HSB, pojmy odstínu, jasu a sytosti a jejich využití pro vytvoření vyvážené kompozice barev pro grafický návrh. Dále jsou probírány způsoby a role použití grafiky, především rastrové, výhody a nevýhody používaných grafických formátů, relace mezi kvalitou zobrazení a velikostí grafického souboru, způsob práce s průhledností a kompatibilita s prohlížeči. V závěru přednášky je uvedeno doplňkové informace z pomezí grafiky a typografie.

##Připojené sobory:
- Snímky k přednášce

Stránka s fixní šířkou rozdělená do dvou sloupců, z nichž jeden je věnován navigaci, zatímco druhý obsahuje skutečný obsah je asi nejtypičtějším způsobem členění stránek jednoduché webové prezentace. Vycházíme z jednoduchého jednosloupcovéh návrhu, řešeného v „předchozím cvičení“:/?p=166.

Continue reading →

Od masivního rozšíření MSIE 7, který již podporuje CSS selektory na bázi přímého potomka, přiřazeného atributu, nebo pseudoelementu společně se selektory na bázi obecného potomka může být prakticky schůdné využít těchto selektorů pro návrh CSS šablony. Přehled použití těchto typů selektorů je nápní první části přednášky.

Další část přednášky otevírá téma webdesignu a v jeho provní části se věnuje obecným cílům funkčního webdesignu, použitelnosti a přístupnosti webových prezentací.

##Připojené soubory:
- Snímky k přednášce

Toto cvičení je zaměřeno na ukázku praktické tvorby jednosloupcové stránky s fixní šířkou, která musí být kvůli použité grafice rozdělena na tři části. Ukazuje postup tvorby šablony stylů vycházející z pevně deinovaného grafického návrhu. V dalším cvičení se výsledný návrh stane východiskem pro prakticky použitelné jednoduché dvousloupcové rozložení.

Continue reading →

Tato přednáška upřesňuje možnosti použití stylů, definuje selektory tříd a identifikátorů a zabývá se základními aspekty dědičnosti. Dále je poskytnut výklad k vlastnostem seznamů a strukturovaného textu.

Continue reading →