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).