Hinweise zur Seitenstruktur
Bevor es jetzt an die Gestaltung der einzelnen Seiten geht, solltet ihr euch erst einmal überlegen, wie die Struktur eurer eigenen Website sein sollte. Dabei gehen wir davon aus, dass ihr unser Paket herunter geladen habt, was wir euch hier zur Verfügung gestellt haben.
Darin findet ihr nur die index.html, welche die Grundstruktur enthält, die wir euch in der vorherigen Lektion bereits gezeigt haben.
Statische Seiten
Sinnvoll ist es nun, bevor die einzelnen Seiten mit Inhalt gefüllt wird, erst einmal alle Seiten anzulegen, die ihr später haben wollt. Wie ihr bereits im Exkurs zum Thema Urheberrecht und Impressum erfahren habt, ist ein Impressum auf jeden Fall zu empfehlen. Um diese zu erstellen, legt ihr einfach eine neue leere Datei impressum.html an (in Brackets mit Rechtsklick -> neue Datei) und kopiert dort alles aus der index.html hinein. Die neue Datei sollte sich auf jeden Fall im gleichen Ordner wie die index.html befinden, zur Not könnt ihr sie auch im Explorer entsprechend verschieben.
Als nächstes solltet ihr noch nach dem gleichen Prinzip die ueber-mich.html anlegen, welche wir dann in der nächsten Lektion auch direkt mit Inhalten füllen werden. Wenn ihr noch weitere statische Seiten einfügen wollt, wäre jetzt die Gelegenheit dazu. Wieder nach dem gleichen Prinzip wie auch schon beim Impressum. Zum Beispiel könntet ihr eine kontakt.html anlegen.
Artikel
Die Seiten für die einzelnen Artikel werden nach einem anderen Prinzip angelegt. Ihr solltet euch erst einmal die Überschrift für den Artikel überlegen. Daraus entsteht dann der Dateiname: Alles wird klein geschrieben, Leerzeichen durch - ersetzt, Satzzeichen fallen weg. Umlaute werden ersetzt, aus Ü wird also zum Beispiel ue. Als Beispiel: Aus Unsere Reise nach Potsam wird unsere-reise-nach-potsdam.html.
Ihr könnt optional noch einen Präfix wie artikel- vor alle Artikel-Dateien hängen, damit diese bei euch in der Übersicht schneller zu finden sind.
Navigation anpassen
Der letzte Schritt, bevor ihr die Inhalte bearbeiten könnt, ist nun die Aktualisierung der Navigationsleiste. Dort sollten alle statischen Seiten verlinkt werden, die Artikel aber nicht. Anschließend muss diese aktualisierte Navigationsleiste in allen Seiten übernommen werden.
Nun müssen noch auf jeder der statischen Seiten die Links in der Navigationsleiste die Klasse active bekommen, um sie entsprechend hervorzuheben. Bei der ueber-mich.html sollte also der Link zur ueber-mich.html in der Navigationsleiste die Klasse active bekommen, damit jeder Leser weiß, dass er sich aktuell auf dieser Seite befindet.