Skip to content

Unterseite: Projekt

Die Startseite ist nun fertig, nun geht es darum die anderen Seiten des Projekts anzulegen. Dabei ist es sinnvoll, eine Seite vollständig zu finalisieren, diese dann zu kopieren und anzupassen. So erspart man sich Arbeit, besonders im Bereich des Kopf- und Fussbereichs. Falls du plötzlich in diesen zwei Bereichen einen Fehler entdeckst, musst du es in Zukunft auf allen Seiten anpassen.

Ziel(e)

  • Ich kann eine Aufgabe nach Aufgabenstellung lösen.

  • Ich komme selbständig zu den notwendigen Informationen.

Aufgabe

Nun geht’s um die Unterseiten und die Navigation. Überlege selbst, was für dich sinnvoller ist, zuerst die Unterseiten zu erstellen oder zuerst die Navigation umzusetzen. Schlussendlich ist es wichtig, dass die Navigation von jeder Seite her funktioniert (hin und her springen!).

Unterseiten:

Erstelle die drei weiteren notwendigen Unterseiten «Geschichte» (geschichte.html), «Galerie» (galerie.html) und «Kontakt» (kontakt.html).

Kopiere hierzu die index.html dreimal. lege sie im richtigen Ordner deiner Projektstruktur ab und benenne sie richtig. Passe danach die drei neuen Dateien so an, dass alles weiterhin funktioniert (Tipp: Pfade!).
Passe die Titel an und lösche zudem in jeder Datei den Inhalt aus dem Hauptteil, da hier später je was Neues kommt.

Navigation:

In Zukunft soll von jeder Seite her auf jede andere Seite gesprungen werden können. Hierzu müssen die bestehenden Navigationspunkte verlinkt werden - auf die jeweilige korrekte Unterseite.

Die Navigationspunkte sollen nicht unterstrichen sein. Beim Hover soll der Link in der Farbe grün erscheinen. Zusätzlich soll sichtbar sein, welcher Menupunkt aktuell aktiv ist: dieser soll auch immer grün sein. Also z.B. wenn man sich auf der Seite «Kontakt» befindet, soll der Menupunkt «Kontakt» in grüner Schriftfarbe daherkommen, wenn man auf der Startseite ist, soll der Menupunkt «Home» in grüner Schriftfarbe sein. Tipp: Vergebe dem richtigen HTML-Tag dafür das Attribut «class»

Link auf Startseite

Auf der Startseite hast du den Link Kontaktformular schon mal verlinkt. Falls der Link nicht korrekt ist, passe ihn nochmals an.