Tomáš Daněk

Generátory rozvržení vzhledu:

• CSS Layout Generator
• ATCK theme builder

Jednosloupcové

• výchozí vlastnost bloků

Vícesloupcové

• HTML
  • tabulka
    • 
    • rozvržení je realizovatelné i bez CSS a tudíž funkční ve všech prohlížečích
    • nevýhodná pro přenostná zařízení (horizontální posun)
    • problémy při formátování tisku (vypnutí postranních sloupců)
    • neumožňuje změnu pořadí prvků stránky bez zásahu do zdrojového kódu nebo použitím CSS tj. obsah bude většinou až za navigací
    • zobrazí se až po načtení celého obsahu tabulky (dá se vyřešit více tabulkami)
• CSS2
  • absolutní pozicování
    • 
    • vyjme blok z toku textu
    • jednoduchá změna pořadí prvků stránky tj. obsah může být před navigací
    • důležitý obsah patičky nemůže být širší než hlavní obsah, aby jej nepřekryly postranní sloupce
  • plovoucí bloky
    • 
    • využívá se funkce obtékání
    • jednoduchá změna pořadí prvků stránky tj. obsah může být před navigací
    • ukončení plovoucího boxu
      • prvkem obsahující alespoň 1 znak (např.  ) s CSS vlastnosmi (ne vždy je takový prvek k dispozici):

        • clear: both;
          font-size: 1px /* NN7+ */
          height: 1px

      • pouze pomocí CSS vlastností

        • /* http://www.positioniseverything.net/easyclearing.html */
          .clear-block:after {
            content: ".";
            display: block;
            height: 0;
            line-height: 0;
            font-size: 0;
            clear: both;
            visibility: hidden;
          }
          .clear-block {
            display: inline-block;
          }
          /* Hides from IE-mac \*/
          * html .clear-block {
            height: 1%;
          }
          .clear-block {
            display: block;
          }
          /* /Hide from IE-mac */

Poznámka: CSS vlastnosti margin se dá využít také jako "relativní pozicování"

Pevná šířka

• v současnosti zpravidla 960 px (dříve 740 px)
• jednoduchý návrh rozvržení vzhledu (layout)
• vhodné pro komplikované grafické návrhy
• u menšího rozlišením (velikosti okna) se zobrazí horizontální posuv
• u většího rozlišením (velikosti okna) není využita celá dostupná plocha okna prohlížeče
• při zvětšení písma hrozí rozpad layoutu nebo se zobrazí horizontální posuvníky

Přizpůsobivá šířka

• je udávána v jednotkách em
• přizpůsobuje velikosti textu, sož je výhoda pro uživatele s horším zrakem
• odstraňuje nevýhodu nevyužité plochy prohlížeče u velkého rozlišení (okna prohlížeče)

Pružná šířka

• je udávána v %
• komplikovanější grafický návrh
• přizpůsobuje se velikosti okna prohlížeče a využívá tak celou jeho dostupnou plochu, což ocení uživatelé s větší obrazovkou
• ve většině případů se nastavuj minimální (usnadňuje návrh layoutu) a maximální (usnadňuje čtení) hodnotou šířky.

Šablony se většinou navrhují buďto s pevnou nebo pružnou šířkou. Pružná šířka ovšem bývá kombinací přizpůsobivé a pružné varianty v kombinaci se záporným pozicováním plovoucích bloků.

Při rozvržení obsahu je vhodné dle typografie dodržovat šířku odstavce (bloků) 30-80 znaků.

Pevnou nebo minimální šířku grafického návrhu je možné odhadnout ze statistik návštěvnosti.