<div>-Bereiche sind alles.
Vorbemerkung: Diese Seiten sind zunächst
für ein Browserfenster von 800x600 entworfen. Bestimmte
Effekte treten nur bei diesem Fenster so wie beschrieben auf.
Andererseits wird es oft sinnvoll sein, die Größe des
Browserfensters zu variieren. Ich empfehle daher Download und
Benutzung des 
Browsersizers.
Das Layout dieser ersten Seite ist sehr simpel: Die Formatierung des Seitenhintergrundes erfolgt durch eine Stylezuweisung "background: url(back.gif)" für das Element <body>; vor diesem Hintergrund "schwebt" ein mit <div> bestimmter Bereich, dem im Style genau zwei Atribute zugewiesen sind: eine Hintergrundfarbe (weiß), und eine relative Breite (80 %). Von alleine positioniert sich dieser Bereich so, daß die linke obere Ecke am "Nullpunkt" der Seite zu liegen kommt: Auf diesen Punkt beziehen sich alle später erfolgenden "absoluten" Positionierungen von Elementen.
Wer findet, daß dieser Nullpunkt ruhig etwas näher bei
Null liegen könnte, findet Näheres dazu 
hier.
Man könnte dem Bereich auch eine Höhe zuweisen, aber schon gäbe es Ärger mit der Browserkompatibilität: MSIE dehnt den weißen Hintergrund über die angegebene Höhe hinaus aus, wenn der Text zu lang wird, NN 6 zeigt zwar auch überschüssigen Text an - der weiße Hintergrund bleibt aber auf der voreingestellten Größe. Viel interessanter ist jedenfalls die Möglichkeit, die Breite (die Höhe wenn' sein muß auch) mit % relativ zur Breite des Browserfensters anzugeben - damit stellt sich der auch beim Tabellenlayout beliebte Effekt ein, daß die Länge der Textzeilen sich dem Browserfenster anpasst. Weitere Feinheiten sind auf der folgenden Seite zu besichtigen.
Es gibt für das Tutorial auch ein Inhaltsverzeichnis. Ich empfehle aber sehr, sich die einzelnen Seiten - es sind gerade einmal 15 - der Reihe nach anzusehen.