AI – Übung 03: Layout mit dem Boxmodell
Das Prinzip “Boxmodell”
Mit dem sogenannten Boxmodell kann das Groblayout (was ist wo auf einer Seite) einer HTML-Seite (wie dieses unten) definiert werden. Dieses Beispiel zeigt ein Layout mit fünf Boxen (Div-Containern), die jeweils Inhalt (Text, Fotos, Navigation, …) aufnehmen können.

Die DIV-Containern (Boxen) können im Stylesheet exakt gestaltet werden: ihre Größe, ihre Gestaltung (Farbe, Rahmen, …), ihre Position. Eine Box kann viele Eigenschaften (im Sinne von CSS) 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.
Übung
- Definiere in DW eine neue Site:
Site-Name: Übung 03
lokaler Site-Ordner: op_uebung03 (darin links)
Materialienordner: op_uebung03_materialien - Lege eine neue HTML-Seite an und speichere sie als index.html
Lege ein neues Stylesheet an und speichere es als style.css - Füge das Stylesheet an die HTML-Seite an.
- Füge folgenden Code ins Stylesheet ein:
div#inhalt{
position:relative;
width:980px; height:200px;
background-color:#A0A0A4;
}
- Wechsel zur index.html und binde die Box inhalt ein:
Wähle Einfügen / Layoutobjekte / Div-Tag

- Im aufpoppenden Dialogfenster wähle unter ID “box1” (box2 und box3 hast du noch nicht in der Liste) und bestätige mit OK.

- Definiere im Stylesheet box2 und box3. Gib ihnen die gleiche Breite, aber unterschiedlichen Höhen und Hintergrundfarben.
- Binde sie auf die gleiche Weise in die index.html ein.
Achte dabei, dass der Mauszeiger am rechten Rand von box1 steht und füge dann erst box2 ein; bei box3 muss der Mauszeiger am rechten Rand von box2 stehen. Das entscheidet über die Reihenfolge der Boxen von oben nach unten.
- Die drei Boxen horizontal zentrieren: Ergänze dafür im Stylesheet bei jeder Box
margin-left:auto; margin-right:auto;

margin-left/right ist der Aussenabstand links und rechts von der Box; auto ➜ steht für automatisch: verteilt den freien Platz am Bildschirm links gleichmäßig auf links und rechts, egal wie groß ein Bildschirm ist, womit die Box horizontal zentriert wird.