Nejdříve ze všeho si tento návrh rozřežeme na jednotlivé obrázky, které použijeme při tvorbě webové stránky (celkem jsou 4). Proč zrovna tyto čtyři části?

1. obrázek je pozadí stránky (fialový přechod), který necháme horizontálně opakovat vedle sebe.
2. obrázek je pozadí těla textu (které by se dalo řešit jen pomocí CSS a dvou neutrálních divů).
3. obrázek je menu (ke kterému se vrátím v Řežbě III).
4. obrázek je hlavička stránky.

Celkem mají obrázky našeho nového webu asi 53kB, což je naprosto v pohodě (možná by se to dalo smrsknout použítím formátu GIF místo JPG).

Teď se můžeme pustit do vlastního formátování stránky. Naše nová webová stránka bude psána v XHTML Strict 1.0 a kódování UTF-8 (základ bez textu v příkladu 1). Začneme s elementem body – chceme, aby měla stránka na pozadí přechod (popř. barvu ve které přechod končí – nevíme jak vysoká bude výsledná stránka). V CSS: html, body {background: #E30947 url(images/pozadi.jpg) repeat-x;padding:0;margin:0;} Výsledek vidíme na příkladu 2. Přidáme první tag div, který bude mít nastavené pozadí jako tělo textu, bude vycentrován a zároveň bude přes celou uživatelovu obrazovku. html, body {background: #E30947 url(images/pozadi.jpg) repeat-x;padding:0;margin:0;text-align:center;height:100%} div#main {background: #FFF url(images/telo.jpg) repeat-y;padding:0;margin:0 auto;text-align:left;min-height:100%;_height:100%;width:641px} Výsledek vidíme na příkladu 3. Dnes už nám zbývá jenom dodělat hlavičku. Použijeme při tom Pixyho techniku image replacementu a hlavičkový soubor obrázku vložíme do stránky jako nadpis h1. h1 {
font-size:2em;color:#832B4F;
margin:0; padding:0;
position:relative;
width:641px; height:100px;
overflow:hidden;
} h1 span {
display:block;
position:absolute; left:0; top:0; z-index:1;
width:641px; height:100px;
margin:0; padding:0;
background:url(images/hlava.jpg) top left no-repeat;
} Výsledek vidíme na příkladu 4. Jestliže máte nainstalovanou Mozillu Firefox a plugin WebDeveloper, tak si schválně zkuste vypnout obrázky (Disable – Images) a uvidíte, že je nadpis přečtetelný a na svém místě. V příštím díle se vesele vrhneme na menu.