Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

4.7 Die Kontaktseite: von der Seite zur Site

Bevor es im nächsten Kapitel mit CSS losgeht, benötigen Sie noch eine zweite Webseite. Die Kontaktseite kontakt.html erstellen Sie am besten als Kopie der Startseite index.html, die Sie anschließend ein wenig bearbeiten.

ToDo: Erstellen Sie die Kontaktseite (auf Grundlage der Startseite)
  1. Öffnen Sie die Startseite index.html im Editor.
  2. Erstellen Sie mit dem Befehl DATEI/SPEICHERN UNTER… im Übungsordner eine Kopie der Startseite unter dem Namen kontakt.html.
  3. Ändern Sie den Titel der Seite wie folgt:
    <title>Kontaktseite - Little Boxes (Webseiten gestalten mit HTML und CSS)</title>
  4. Ändern Sie die ID von body:
    <body id="kontaktseite">
  5. Ändern Sie die h2-Überschrift im Textbereich:
    <h2>Kontaktseite</h2>
  6. Entfernen Sie den Fließtext (Absätze und Listen) aus dem Textbereich. Hier kommt später ein Kontaktformular hin. Der Fußbereich soll unverändert bleiben.
  7. Speichern Sie die Seite und betrachten Sie sie in einem Browser.

Fertig. Und so ungefähr sollte die Kontaktseite im Browser aussehen:

Abbildung 4.11: Die Kontaktseite, auch mit W3C Core Style Traditional
Abbildung 4.11: Die Kontaktseite, auch mit W3C Core Style Traditional

Schon haben Sie eine aus zwei Webseiten bestehende Minisite und können mit der kleinen, aber feinen Navigation zwischen beiden Seiten hin- und herspringen. Diese beiden Seiten werden Sie in den folgenden Kapiteln auf unterschiedliche Art und Weise gestalten.