Merklisten
Merkliste(n) anzeigen

CSS-Seite im Eigenbau

Dieser Workshop ist die Fortsetzung vom WS HTML-Seiten im Eigenbau. Zuerst werde ich die Orientierung der Bereiche mit float festlegen.
Danach
- Kopfzeile mit dem Logo und der oberen Navigation (nav_top)
- die Navigation links (nav_left)
- Footer
- Content
- restliche Seiten
mit CSS gestalten.

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!

Fußzeiel Bundesministerium für Bildung Gegestandsportale Education Group

Schnellübersicht

Fächer:

Informatik / IKT, Informations- und Officemanagement, Wirtschaftsinformatik

Erstellt von:

Ronnie Luft

Zeitdauer:

2 UE

 

Schulstufe(n)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

Kompetenzen

4.8 Ich kann CSS-Code lesen und manuell erstellen

Lernziele

  • Die S können CSS-Attribute anwenden
  • Die S können mit float den Dokumentfluss beeinflussen
  • Die S können mit display die Navigation gestalten
  • Die S können mit background Hintergrundbilder einfügen
  • Die S können mit position Bereich beliebig verschieben.

Anmerkungen

Die Schüler müssen bereits Grundkenntnisse in HTML besitzen. Dieses Beispiel arbeite ich mit meinen Schüler durch, bevor ich die erste Arbeit mit Ihnen schreiben (Test, BA, Schularbeit).

Ronnie Luft am 22.12.2013
letzte Änderung am: 09.03.2014