[ Webhosting profitux.cz ]
hertpl: Undefined index: page_title(template line: 74) in templates/articles_print.html on line 39

Tradiční layouty webových stránek

Klíčová slova: Zásady správné tvorby webu, layouty webových stránek

Úvod

Mnozí uživatelé webu popisují, jak často se jim stává, že narazí na web, se kterým není něco v pořádku. Z nějakého důvodu nevědí, kam kliknout, na jaký text se dívat nebo co ten či onen prvek stránky znamená. Důvod je velice jednoduchý a chyba s velkou pravděpodobností není v nich. Byla porušena některá ze zásad tvorby přehledného webu. Jen jednou s těchto mnoha zásad je zvolení špatného rozvržení prvků na stránce, neboli layoutu.

Často slýchávám některé webdesignery říkat, že dnes všechny webové stránky vypadají téměř stejně. Podle mého názoru všichni z nich přehlíží fakt, že k většině dnešních layoutů se došlo postupnou evolucí a hlavně neopakováním omylů. Aneb jak to na jednom blogu píše Garrett Dimon: Řekli jste již někdy "Knihy, co se dnes vydávají, jsou skvělé, ale bohužel všechny vypadají jako knihy..."? Není příjemné narazit na stránku, kde je vše naplácané páte přes deváté. V takovém případě návštěvník ze stránek prchá, nedbaje jejich originality. Dnes je proto obecně přijímán koncept dvousloupcových nebo třísloupcových layoutů, a to převážně pevné šířky. Takto jsou udělány snad všechny stránky, které většina lidí zná, a které se proto mohou považovat za úspěšné. Budeme se proto v tomto povídání zabývat jimi a pokusíme se shrnout i další aspekty vhodného rozložení prvků na stránce. Zároveň se budeme - možná trochu na úkor účelnosti - věnovat pouze validním řešením a řešením nespoléhajícím na finty fungující jen v některých prohlížečích (jako staré známe width/_width...).

Společné prvky stránek

Přestože si zde popíšeme několik různých layoutů stránek, existují prvky stránky, které se vyskytují snad ve všech z nich, navíc se tyto nalézají na stejných místech stránky a jsou de facto nezávislé na tom, jestli je šířka fixní nebo ne.

Takřka každá stránka obsahuje tzv. hlavičku. Ta je vždy úplně nahoře (případně pod reklamním banerem či lištou u některých freehostingů) a slouží většinou pro umístění loga stránky, které nám říká o jakou stránku se jedná. Navíc většina uživatelů se shodne na tom, že je intuitivní, když ta část hlavičky, kde je napsán název stránek, odkazuje na hlavní stránku. Na webu je pak možno se rychle navigovat a když už se uživatel ztratí, nemá problém "najít začátek".

Pod hlavičkou stránky se často nachází horizontální menu. To zpravidla obsahuje navigační prvky společné pro všechny stránky webu, jeho obsah se tedy v závislosti na právě navštívené stránce mění jen minimálně. Někdy vídáme horizontální menu s JavaScriptem rozbalovanými podnabídkami. Tento prvek - v minulosti považovaný za moderní a elegantní - se však již dnes z webu (dle mého názoru naštěstí) vytrácí. Někdy je možné vidět variantu s dvěmi horizontáními menu, kdy to dolní se mění podle toho, na jaký prvek horního menu ukazuje kurzor (JavaScript) nebo podle aktuálně navštívené stránky.

Posledním společným prvkem, který tu zmíníme je tzv. patička stránky. Ta se - jak je zřejmé - nachází na stránce úplně dole a v ideálním připadě je co nejmenší, aby byla co nejméně dominantní. Patička neobsahuje (tedy nejspíš by neměla obsahovat) žádné ovládací prvky bezprostředně související s navigací na webu. To je ostatně logické - protože je úplně dole, většina návštěvníků se k patičce ani nedostane. Do patičky se často umisťuje informace o tom, kdo a kdy stránku vytvořil. Dále se zde mohou objevit jiné, méně důležité věci, jako je třeba dnešní datum, aktuální čas, odkaz na mapu stránek či kýčovité počítadlo přístupů.

Pružný vs. pevný layout

Další věcí, kterou si musíme uvědomit je, jakým způsobem (a zda) se má měnit šířka stránky v závislosti na šířce okna prohlížeče. Uvědomme si, že obsah stránky nám klidně může přetékat na výšku a nikomu to vadit nebude. Avšak stránky širší, než je běžně velké okno (dnes se hovoří o rozlišení 1024x768, mějme však na paměti to, že okno prohlížeče může být menší), a které tak nutí k horizontálnímu scrollování, jsou dnes považovány za nevhodně navržené.

Nejjednodušší je zvolit všechny šířky objektů napevno. V takovém případě typicky zvolíme nějakou rozumnou šířku, do které se nám stránka nejspíš vejde a ta se se změnou velikosti okna nemění. Přestože je tento typ layoutu dnes velice oblíbený a většina stránek pevnou šířku používá, má i své nedostatky. Neustále dochází ke zlepšování technologií používaných při výrobě zobrazovacích zařízení. Proto se běžně dostupné rozlišení zvětšuje. Stránky, které byly dříve navrženy tak, aby se vešly do okna při rozlišení 800x600, jsou dnes na většině monitorů příliš malé a velká část plochy tak zůstává bílá - nevyužitá. Je tedy nutné stránky v lepším případě přestylovat tak, aby byly optimalizované na větší šířku. Na druhou stranu - takovýmto přestylováním neuděláme radost těm, kteří jsou odkázáni na starší monitor s menším rozlišením (a musí tak stránku posouvat horizontálně).

O něco složitější je situace, kdy bychom chtěli, aby se layout stránky přizpůsobil (je hned na úvod třeba poznamenat, že toto přizpůsobování nikdy nemůže být absolutní) šířce okna. V takovém případě můžeme jednotlivé šířky zadat v procentech - tím docílíme toho, že se nám stránka roztáhne podle velikosti okna. I zde jsou však úskalí. Je prokázáno, že člověk upřednostňuje kratší řádky před delšími, třeba proto, že v případě krátkých řádků je pro něj jednodušší přeskočit při čtení očima na další řádku. Pružný layout může šířku textu článku na stránce roztáhnout více, než je to lidskému oku příjemné. Navíc dojde ke zkrácení článku na výšku, a proto se můžeme dostat do situace, kdy je velká část stránky dole prázdná (přestože by bylo vhodnější zkrátit délku řádků).

Nedostatky pružného i pevného layoutu se přirozeně snažíme co nejvíce minimalizovat. Můžeme tak například chtít to, aby se část stránky rozšiřovala dle okna a jiná část - například levé menu nebo obsah článku - zůstane stále stejně široká. To je mnohdy výhodné - objekty levého menu s pevnou šířkou se do sloupce vejdou i při menším rozlišení a sloupec na druhou stranu není příliš velký při velkém rozlišení. Osobně považuji takovéto layouty za nejsložitější. Je totiž těžké (v porovnání s předchozími technikami) v kaskádových stylech vyjádřit pojem "tento blok široký 200 bodů, a tento blok zbytek". Přesto to není nemožné.

Problémem, na který velká většina webdesignerů ve svých (mírně pokročilých) začátcích narazí je zajištění toho, aby v layoutu byly všechny sloupce stejně vysoké. Nejjednodušeji layout splňující tuto podmínku vytvoříme za pomocí tabulek (jejichž používání pro tvorby layoutu stránek však dnes je považováno za méně vhodné a proto se jimi nebudeme zde zabývat). Jinou možností je použití "clearovacího" divu. Tuto techniku si v následujících ukázkách předvedeme.

Jednotlivé typy layoutů si předvedeme níže.

Dvousloupcový layout

Nejjednodušším rozumným layoutem stránky, které můžeme použít, aniž bychom se museli obávat "přílišné originality" je dvousloupcový layout. Jak již název napovídá, stránku opticky rozdělíme na dva sloupce. Nejčastěji převládá názor, že levý sloupec by měl být spíše užší a měl by sloužit pro ovládací prvky menu a pravý sloupec by měl být širší a měl by v něm být samotný obsah stránky. V případě, že se jedná o větší projekt, slouží levý sloupec jako kontextové menu (jeho obsah se mění podle navštívené stránky) a hlavní rozcestník je v horizontálním menu (viz výše).

Základní HTML kód pro dvousloupcový layout, se kterým budeme zde pracovat je tento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Tradiční layouty</title>
  <style type="text/css">
    @import url("./style.css");
  </style>
  </head>
  <body>
  <div class="stranka">
    <div class="hlavicka">
      <h1>Nadpis stranky</h1>
    </div>
    <div class="levy_sloupec">
      <div class="menu">
        Menu
        <ul>
         <li>polozka menu 1</li>
          <li>polozka menu 2</li>
          <li>polozka menu 3</li>
        </ul>
      </div>
    </div>
    <div class="pravy_sloupec">
      <div class="content">
      Lorem ipsum dolor sit amet consectetuer
      nunc diam consectetuer sed sed. Aliquam
      tincidunt ut elit sed Curabitur id pellentesque
      a Aliquam tempus. Curabitur lorem quis ac
      sodales ac sed pede quis enim eros. Porta id
      Vivamus Curabitur enim enim scelerisque dui
      Donec adipiscing id. Enim id metus at euismod
      ut condimentum sociis Pellentesque pretium
      Integer. Id lacinia vitae id tortor non libero
      Quisque sagittis amet Vestibulum. Lorem ipsum
      dolor sit amet consectetuer nunc diam consectetuer
      sed sed. Aliquam tincidunt ut elit sed Curabitur id
      pellentesque a Aliquam tempus. Curabitur lorem
      quis ac sodales ac sed pede quis enim eros.
      </div>
    </div>
    <div class="paticka">
      text paticky
    </div>
  </div>
  </body>
</html>

Na tuto stránku nyní budeme postupne aplikovat různé styly.

Dvojsloupcový layout - pevný

/* style.css */
 
  body {
    text-align: center;
  }
  .stranka {
    width: 850px;
    margin: 0 auto;
    text-align: left;
    border: 1px solid Black;
  }
  .hlavicka {
    width: 100%;
    height: 100px;
    line-height: 100px;
    float: left;
    text-align: center;
    border-bottom: 1px solid Black;
  }
  .hlavicka h1 {
    padding: 0; margin: 0;
  }
  .paticka {
    width: 100%;
    height: 30px;
    line-height: 30px;
    clear: both;
    text-align: center;
    border-top: 1px solid Black;
  }
  .levy_sloupec {
    width: 199px;
    float: left;
  }
  .menu {
    width: 180px;
    margin: 10px auto;
  }
  .pravy_sloupec {
    width: 649px;
    float: right;
    border-left: 1px solid Black;
    text-align: center;
  }
  .content {
    width: 600px;
    margin: 20px auto;
    text-align: justify;
  }

Dvojsloupcový layout - pružný

body {
  text-align: center;
}
.stranka {
  width: 99%;
  margin: 0 auto;
  text-align: left;
  border: 1px solid Black;
}
.hlavicka {
  width: 100%;
  height: 100px;
  line-height: 100px;
  float: left;
  text-align: center;
  border-bottom: 1px solid Black;
}
.hlavicka h1 {
  padding: 0; margin: 0;
}
.paticka {
  width: 100%;
  height: 30px;
  line-height: 30px;
  clear: both;
  text-align: center;
  border-top: 1px solid Black;
}
.levy_sloupec {
  width: 20%;
  float: left;
}
.menu {
  width: 100%;
  margin: 10px auto;
}
.pravy_sloupec {
  width: 79%;
  float: right;
  border-left: 1px solid Black;
  text-align: center;
}
.content {
  width: 95%;
  margin: 20px auto;
  text-align: justify;
}

Dvojsloupcový layout - kombinovaný

body {
  text-align: center;
}
.stranka {
  width: 99%;
  margin: 10px auto;
  border: 1px solid Black;
  text-align: left;
}
.hlavicka {
  border-bottom: 1px solid Black;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.levy_sloupec {
  float: left;
  width: 160px;
  margin: 0;
}
.menu {
  text-align: center;
  padding-top: 20px;
}
.pravy_sloupec {
  border-left: 1px solid Black;
  margin-left: 160px;
}
.content {
  text-align: justify;
  padding: 20px;
}
.paticka {
  clear: both;
  border-top: 1px solid Black;
}

Třísloupcový layout

Některé rozsáhlejší stránky si se dvěmi sloupci nevystačí. Proto se přistupuje na třísloupcový layout. V takovém případě jsou dva tenčí sloupce na krajích a jeden široký uprostřed. Levý a prostřední sloupec plní typicky stejnou roli, jako u dvousloupcového layoutu. Pravý sloupec často obsahuje formulář pro přihlášení uživatele, informaci o novinkách, možnost odběru RSS kanálu, případně nějakou "hračku" (kalendář, předpověď počasí, anketu, ...).

Základní HTML kód, se kterým budeme zde pracovat je tento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Tradiční layouty</title>
  <style>
    @import url("./style.css");
  </style>
  </head>
  <body>
  <div class="stranka">
    <div class="hlavicka">
      <h1>Nadpis stranky</h1>
    </div>
    <div class="levy_sloupec">
      <div class="menu">
        Menu
        <ul>
          <li>polozka menu 1</li>
          <li>polozka menu 2</li>
          <li>polozka menu 3</li>
        </ul>
      </div>
    </div>
    <div class="pravy_sloupec">
      <div class="obsah_praveho_sloupce">
        Treba formular...
        <form action="" method="get">
          <input type="text" name="pole" /><br />
          <input type="submit" />
        </form>
      </div>
    </div>
    <div class="prostredni_sloupec">
      <div class="content">
      Lorem ipsum dolor sit amet consectetuer nunc
      diam consectetuer sed sed. Aliquam tincidunt
      ut elit sed Curabitur id pellentesque a Aliquam
      tempus. Curabitur lorem quis ac sodales ac sed
      pede quis enim eros. Porta id Vivamus Curabitur
      enim enim scelerisque dui Donec adipiscing id.
      Enim id metus at euismod ut condimentum sociis
      Pellentesque pretium Integer. Id lacinia vitae id
      tortor non libero Quisque sagittis amet Vestibulum.
      Lorem ipsum dolor sit amet consectetuer nunc
      diam consectetuer sed sed. Aliquam tincidunt ut
      elit sed Curabitur id pellentesque a Aliquam tempus.
      Curabitur lorem quis ac sodales ac sed pede quis
      enim eros.
      </div>
    </div>
    <div class="paticka">
      text paticky
    </div>
  </div>
  </body>
</html>

Třísloupcový layout - pevný

body {
  text-align: center;
}
.stranka {
  width: 850px;
  margin: 10px auto;
  border: 1px solid Black;
  line-height: 130%;
  text-align: left;
}
.hlavicka {
  border-bottom: 1px solid Black;
  text-align: center;
}
.levy_sloupec {
  float: left;
  width: 160px;
  margin: 0;
}
.menu {
  text-align: center;
  padding-top: 20px;
}
.pravy_sloupec {
  float: right;
  width: 160px;
}
.obsah_praveho_sloupce {
  text-align: center;
  padding-top: 20px;
}
.prostredni_sloupec {
  border-left: 1px solid Black;
  border-right: 1px solid Black;
  margin-left: 160px;
  margin-right: 160px;
}
.content {
  text-align: justify;
  padding: 20px;
}
.paticka {
  clear: both;
  border-top: 1px solid Black;
}

Třísloupcový layout - pružný

body {
  text-align: center;
}
.stranka {
  width: 99%;
  margin: 10px auto;
  border: 1px solid Black;
  line-height: 130%;
  text-align: left;
}
.hlavicka {
  border-bottom: 1px solid Black;
  text-align: center;
}
.levy_sloupec {
  float: left;
  width: 17%;
  margin: 0;
}
.menu {
  text-align: center;
  padding-top: 20px;
}
.pravy_sloupec {
  float: right;
  width: 17%;
}
.obsah_praveho_sloupce {
  text-align: left;
  width: 100%;
  padding-top: 20px;
}
.prostredni_sloupec {
  border-left: 1px solid Black;
  border-right: 1px solid Black;
  margin-left: 20%;
  margin-right: 20%;
}
.content {
  text-align: justify;
  padding: 20px;
}
.paticka {
  clear: both;
  border-top: 1px solid Black;
}

Třísloupcový layout - kombinace

body {
  text-align: center;
}
.stranka {
  width: 99%;
  margin: 10px auto;
  border: 1px solid Black;
  text-align: left;
}
.hlavicka {
  border-bottom: 1px solid Black;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.levy_sloupec {
  float: left;
  width: 160px;
  margin: 0;
}
.menu {
  text-align: center;
  padding-top: 20px;
}
.pravy_sloupec {
  float: right;
  width: 160px;
}
.obsah_praveho_sloupce {
  text-align: center;
  padding-top: 20px;
}
.prostredni_sloupec {
  border-left: 1px solid Black;
  border-right: 1px solid Black;
  margin-left: 160px;
  margin-right: 160px;
}
.content {
  text-align: justify;
  padding: 20px;
}
.paticka {
  clear: both;
  border-top: 1px solid Black;
}

Do takto připravených layoutů je pak velice jednoduché zasadit jednotlivé prvky stránky.


Komentáře čtenářů

Dominik (2011-03-14 21:43:48)

Pěkný článeček :)