V tutu budu používat: Adoobe Photoshop CS2, Adobe ImageReady (ir),
Macromedia Dreamweaver MX (může být i jiný editor).
1 – 1.
Vytvořte si nějaký design stránek.
1 – 2.
Přepněte do ImageReady.
1 – 3.
Použitím nástroje Rozřezání. 
„Rozřezejte“ části webu. Pokud víte vo co gou tak by to nemněl
být sebemenší problém.
1 – 4.
Soubor > Uložiu optimalizovaný jako > Uložit jako typ: HTML a
obrazy, Název souboru: index_ps.html > Uložit
Kroky s ps máme za sebou, teď to těžší… :]
2 – 1.
Ve složce kde jste uložili dokumenty vytvořte nový soubor se jménem
index.html a style.css .
2 – 2.
Zapěte Dreamweaver a otevřete si soubor index.html. Do něho vypište
tyhle řádky scriptu:
<html>
<head>
<title>Titulek</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>2 – 3.
Nyní si otevřete soubor style.css.
2 – 4.
Do něj vypište tyto řádky kódu:
body { margin:0px; padding:opx; background-color: #252525; }Položku background-color můžete zamněnit např. background-image: url(‚neco.gif‘); tato vlastnost CSS udává cestu k obrázku, který se zobrazí na pozadí daného prvku
2 – 5.
Dále vypíšeme do souboru style.css toto:
.button_01 {position: absolute;
background-image: url(obrazy/index_ps_01.gif);
width: 800px; height: 220px;
top: 0px; left: 0px; }.button je jméno div tagu
position – css vlastnost určující způsob počítání polohy
daného prvku
width – šířka obrázku
height – výška obrázku
left a right – vodorovné a svislé umístění divu
Myslím si že pro popis je to dostatečné.
2 – 6.
Přepněte do html dokumentu a tam mezi body a /body vypište toto:
<div class="button_01"></div>Soubory html a css spolu navzájem „komunikují“. Navíc,
obrovská výhoda editorů je, že nemusíte odhadovat pozici div tagů po
pixelech, ale stačí v html dokumentu chytit levým myšítkem a jezdit
jakkoli po pracovní ploše. Css dokument se automaticky zmnění (což platí
i u výšky, šířky).
2 – 7.
Okno pro psaní lze udělat totožným scriptem s jednou výjimkou a
to – nemá žádný background image.
.pole {
position: absolute;
top: 282px;
left: 285px;
height: 518px;
width: 471px;
overflow: auto;
font-size:12px;
font-family:arial;
text-align:center; - center, left, right apod.
}Myslím si že script mluví za sebe.
2 – 8.
Html dokument teď může vypadat takto:
<html>
<head>
<title>INDEX</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="button_01"></div>
<div class="pole">Zde napíšete text.</div>
</body>
</html>Hodnocení tutoriálu: 2.5 (hodnotilo 50 uživatelů)