Layout neboli rozvržení stránky

Možností je víc, od jednodušších po složitější. Pokud jste se drželi doporučení ohledně hierarchie, máme např. tyto možnosti:

Layout s pružnou šířkou bez sloupců

logo, banner
A tady obsah každé stránky…

Dvousloupcový layout s pevnou šířkou 770 px

logo, banner
tady
by mělo
být menu
A tady obsah každé stránky…

Možností je samozřejmě spoustu. Různé layouty, které mají vychytanou pružnou šířkou, dvou i třísloupcové, najdete např. na css.interval.cz.

Doplnění XHTML

V každém případě vidíte, že budeme mít tři základní logické i grafické části stránky. Banner, menu a obsah. Takže si i kód naší první stránky rozdělíme na tyhle bloky (stále se opakující části vynechávám); banner by byl třeba jen grafický, já jsem ale do něj přidala text:

<?xml version="1.0" encoding="windows-1250"?>
…
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  <head>
    …
  </head>
  <body>
    <div id="banner">
    Můj webový projekt
    </div>
    <div id="menu">
      <ul>
        <li>
        <a href="index.html" title="úvodní strana webu">úvod</a></li>
        …
      </ul>
    </div>
    <div id="obsah">
      <h1>Moje kočky</h1>
      …
    </div>
  </body>
</html>

Přidání tagů <div> se na stránce zatím nijak neprojeví. Ale my už můžeme mnohem líp formátovat.

Než se do toho pustíme, podívejte se ještě na to, jak se externí styl ke stránce naváže - je to jeden řádek přidaný do části <head>.


Mozilla Firefox: Lepší prohlížení webu
píše -dis- bb(zavináč)choltice.eu