Layout mit dem Boxmodell
Mit DIV-Containern (Boxen) kann das Layout (die Art und Weise, wie Text und Bilder und sonstige Elemente einer Seite angeordnet sind) einer Webseite exakt definiert werden. Das sogenannte Box-Modell erlaubt, Container (Boxen) zu definieren und auf der Seite zu positionieren. Eine Box kann mehrere Eigenschaften haben:
- Breite (width)
- Höhe (height)
- Hintergrundfarbe (background-color)
- Innenabstand (padding)
- Rahmen (border)
- Aussenabstand (margin)
Die Gesamtbreite bzw. die Gesamthöhe einer Box ergibt sich aus der Addition von:
- der Breite bzw. Höhe des Elementinhalts (width)
- des Innenabstands (padding)
- der Rahmenstärke (border-width) und
- des Aussenabstands (margin).
Definieren eines div-Containers (einer Box)
Die Definition einer Box erfolgt im Stylesheet. Die Syntax ist folgende:
div#name_der_box{
Eigenschaft1: Wert;
Eigenschaft2: Wert;
...
}Beispiel:
div#inhalt {
position:relative;
width:980px; height:200px;
background-color:#A0A0A4;
}inhalt – Name der Box
position:relative – die Boxen ordnen sich so an, dass die zuerst eingefügt oben ist, die weiteren folgen darunter; zur genaueren Positionierung gibt es weitere Möglichkeiten (margin, float)
width – Breite der Box
height – Höhe der Box
background-color – die Hintergrundfarbe der Box
Einbinden einer Box in eine HTML-Seite
Eine Box muß eigens in die HTML-Seite eingebunden werden. Das Verbinden der HTML-Seite mit dem Stylesheet, in dem die Box definiert wurde, reicht nicht. Die Einbindung einer Box erfolgt so:
<div id="name_der_box">
...
</div>Beispiel:
<div id="inhalt">
...
</div>Zwischen das öffnende <div> und schließende DIV-Tag </div> kommt der Inhalt der Box (…).
In Dreamweaver können Boxen über das Menü Einfügen – Layoutobjekte – Divtag eingefügt werden.
