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 | |
| tady by mělo být menu | |
| 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>.
