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

1. Definiere in DW eine neue Site:
   Site-Name: Übung 03
   lokaler Site-Ordner: op_uebung03 (darin links)
   Materialienordner: op_uebung03_materialien
2. Lege eine neue HTML-Seite an und speichere sie als index.html
   Lege ein neues Stylesheet an und speichere es als style.css
3. Füge das Stylesheet an die HTML-Seite an.
4. Füge folgenden Code ins Stylesheet ein:

div#inhalt{   
     position:relative;   
     width:980px; height:200px;   
     background-color:#A0A0A4;
}

5. Wechsel zur index.html und binde die Box inhalt ein:
   Wähle Einfügen / Layoutobjekte / Div-Tag

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

7. Definiere im Stylesheet box2 und box3. Gib ihnen die gleiche Breite, aber unterschiedlichen Höhen und Hintergrundfarben.
8. 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.

9. 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.