Schritt 2: CSS-Datei verlinken - mit float die Seite strukturieren
Voraussetzung: Sie haben bereits den Workshop HTML-Seiten im Eigenbau erstellt. Das ist von der Reihenfolge der Schritt 1 - deshalb befinden wir uns jetzt im Schritt 2.
Nun füge ich in der HTML-Datei einen weitern Link zur CSS-Datei hinzu und lade die passende CSS-Datei.
Laden Sie die 02indexFloat.zip-Datei herunter und entpacken Sie diese.
Schritt 3: Logo + Navigation oben
Die CSS-Anweisungen und den passenden HTML-Code, sowie die Bilder finden Sie in den jeweiligen Dateien. Gehen Sie mit den S schrittweise voran und zeigen Sie welche Eigenschaft in CSS welche Änderung erzwingt. Laden Sie dazu bitte die Datei 03indexNavTop.zip herunter.
Schritt 4: Navigation links
In diesem Schritt gestalte ich mit den S die Navigation der linken Seite. Ein besonderes Feature ist die Gestaltung des aktiven Menüs (sichtbar wird das am Ende des Gesamtbeispiels).
Laden Sie bitte die Datei 04 indexNavLeft.zip herunter.
Schritt 5: Erstellen eine Contents und des Footers
Zugehörige Dateien finden Sie in der zip-Datei: 05IndexContentFooter.zip. Die Gestaltung des Contents zieht eine Bearbeitung der HTML-Seite nach sich. Im letzten Schritt biete ich Ihnen eine fertige Homepage mit verschiedenen Seiten an.
Bitte laden Sie die 05IndexContentFooter.zip-Datei herunter.
Schritt 6: Im Footer eine eigene Box hinzufügen
Im Footer wird eine eigene Box mit position/top/left positioniert. Im HTML-Quellcode müssen Sie die passenden Änderungen vornehmen.
Die Lösung finden Sie in der Datei 06indexFooterBox.zip
Gesamtbeispiel zum Download
Hier können Sie das fertige Beispiel herunterladen. Der User kann von Seite zu Seite wechseln. Die aktive Seite wird mit der Eigenschaft "act" erkannt und mit CSS formatiert. Somit weiß der User immer, auf welcher Seite er sich gerade befindet. Die Inhalte habe ich angedeute und überlasse ich den Schüler zur selbständigen Gestaltung als HÜ. Name der Datei zum Download: GesamtBsplLoesung.zip
Viel Erfolg und Spaß im Unterricht!
