Materialien zum Unterricht

Bereiche

1. Seitenbreite festlegen

Damit die Seite auf allen Bildschirmen ähnlich aussieht, wird die Breite des Inhaltes erzwungen. Zur Zeit ist eine feste Breite von 900 Pixeln recht geeignet.
Aufgabe: Erzeuge einen neuen Bereich mit der ID "Seite", der die gesamte Seite umfasst.
Dazu ist nach dem <body>-Tag ein Bereich anzugeben:

  <div id="seite">

Vor dem abschließenden Tag des Body </body> muss der Bereich wieder geschlossen werden:

  </div>

In der style.css kann dieser Bereich jetzt formatiert werden. Dazu ist die ID des Bereiches mit einem vorgestellten # anzugeben.

Mit margin:auto wird der Außenrand eingestellt. auto bedeutet, dass der Bereich automatisch in die Mitte gerückt wird.

Aufgabe: Lege für den Bereich Seite eine Hintergrundfarbe und einen dünnen Rahmen fest.

2. Kopfbereich

Der Kopf der Seite ist die Überschrift Mein Computer. Damit sich diese Überschrift einzeln formatieren lässt, muss sie ebenfalls in einen Bereich gelegt werden.

In der Datei style.css kann der Kopfbereich nun ähnlich wie der Bereich Seite verändert werden.

Aufgabe: Ändere für den Kopfbereich die Hintergrundfarbe und den Rahmen.

3. Inhalt

Aufgabe: Füge den restlichen Inhalt ebenfalls in einen Bereich ein. Dieser Bereich soll inhalt heißen. Ändere für diesen Bereich Hintergrundfarbe und Rahmen.

Damit der Text nicht direkt am Rand des Bereiches klebt, wird ein Innenabstand festgelegt.

Aufgabe: Trage in der style.css bei #inhalt ein:

  padding: 5px;

Versuche andere Abstandswerte.