Box-Modell und Layout mit CSSAktivitäten & Unterrichtsstrategien
Aktives Ausprobieren macht das CSS-Box-Modell greifbar, da Schülerinnen und Schüler durch visuelle Veränderungen sofort Rückmeldung erhalten. Dieses Thema eignet sich besonders für handlungsorientiertes Lernen, weil Layouts direkt im Browser getestet und angepasst werden können.
Lernziele
- 1Erklären Sie die vier Hauptkomponenten des CSS Box-Modells (Content, Padding, Border, Margin) und ihre Funktion.
- 2Konstruieren Sie ein einfaches Webseiten-Layout, das gezielt das CSS Box-Modell zur Positionierung und Abstandsgestaltung von Elementen nutzt.
- 3Analysieren Sie die Auswirkungen von Änderungen an den CSS-Eigenschaften padding und margin auf das visuelle Erscheinungsbild und die Abstände zwischen Elementen.
- 4Vergleichen Sie die Effekte von 'margin: auto' und expliziten Pixelwerten für Abstände bei der Zentrierung von Blockelementen.
- 5Demonstrieren Sie die Anwendung des Box-Modells zur Erstellung eines einfachen Navigationsmenüs oder einer Kartenansicht.
Möchten Sie einen vollständigen Unterrichtsentwurf mit diesen Lernzielen? Mission erstellen →
Paararbeit: Box aufbauen
Paare erstellen eine HTML-Seite mit einer div-Box und setzen nacheinander Content, Padding, Border und Margin per CSS. Sie dokumentieren Veränderungen mit Screenshots. Abschließend vergleichen sie Ergebnisse mit dem Partner.
Vorbereitung & Details
Erklären Sie die Komponenten des CSS Box-Modells (Content, Padding, Border, Margin).
Moderationstipp: Fordern Sie die Paare in der Paararbeit auf, ihre Box schrittweise aufzubauen und dabei Hypothesen zu formulieren, bevor sie den Code schreiben.
Setup: Gruppentische mit Arbeitsmaterialien
Materials: Problemstellung/Materialpaket, Rollenkarten (Moderation, Schriftführung, Zeitnehmer, Präsentator), Ablaufprotokoll für die Problemlösung, Bewertungsraster für die Lösung
Lernen an Stationen: Layout-Experimente
Richten Sie drei Stationen ein: Station 1 für horizontale Zentrierung mit Margin, Station 2 für vertikale Ausrichtung mit Padding, Station 3 für Box-Sizing-Vergleich. Gruppen rotieren alle 10 Minuten und notieren Beobachtungen.
Vorbereitung & Details
Konstruieren Sie ein einfaches Layout mit CSS, das das Box-Modell berücksichtigt.
Moderationstipp: Platzieren Sie an jeder Station eine klare Aufgabenkarte mit einem konkreten Ziel, z.B. 'Finden Sie heraus, wie der Margin-Wert den Abstand zwischen den Boxen verändert'.
Setup: Im Raum verteilte Tische/Stationen
Materials: Stationskarten mit Arbeitsanweisungen, Unterschiedliche Materialien je Station, Timer für die Rotation
Whole Class: Gemeinsames Layout
Die Klasse baut gemeinsam ein einfaches Layout mit mehreren Boxen auf einem geteilten Codepad. Jeder Schüler schlägt eine Margin-Änderung vor, die Klasse testet und diskutiert den Effekt live im Browser.
Vorbereitung & Details
Analysieren Sie, wie Änderungen an Padding und Margin das Erscheinungsbild beeinflussen.
Moderationstipp: Nutzen Sie die Whole-Class-Phase, um gemeinsam Lösungsansätze zu entwickeln und typische Fehler wie kollabierende Margins direkt zu thematisieren.
Setup: Gruppentische mit Arbeitsmaterialien
Materials: Problemstellung/Materialpaket, Rollenkarten (Moderation, Schriftführung, Zeitnehmer, Präsentator), Ablaufprotokoll für die Problemlösung, Bewertungsraster für die Lösung
Individual: Persönliche Anpassung
Jeder Schüler nimmt das Klassenlayout und passt Padding und Margin an, um ein eigenes Design zu schaffen. Sie präsentieren die Unterschiede und erklären ihre Entscheidungen.
Vorbereitung & Details
Erklären Sie die Komponenten des CSS Box-Modells (Content, Padding, Border, Margin).
Moderationstipp: Beobachten Sie bei der individuellen Anpassung, ob die Lernenden die Box-Eigenschaften gezielt auswählen oder noch unsicher zwischen Padding und Margin unterscheiden.
Setup: Gruppentische mit Arbeitsmaterialien
Materials: Problemstellung/Materialpaket, Rollenkarten (Moderation, Schriftführung, Zeitnehmer, Präsentator), Ablaufprotokoll für die Problemlösung, Bewertungsraster für die Lösung
Dieses Thema unterrichten
Erfahrene Lehrkräfte beginnen mit konkreten Beispielen, die sofort sichtbare Veränderungen zeigen, und vermeiden abstrakte Erklärungen ohne Praxisbezug. Sie nutzen die Browser-Tools, um die Box-Komponenten sichtbar zu machen und so Missverständnisse früh zu erkennen. Wichtig ist, dass Lernende selbst experimentieren und ihre Beobachtungen dokumentieren, statt nur vorgefertigte Lösungen zu übernehmen.
Was Sie erwartet
Am Ende der Einheit können die Lernenden die vier Box-Komponenten erklären und gezielt einsetzen, um Elemente zu zentrieren oder nebeneinander anzuordnen. Sie erkennen, wie Padding, Border und Margin das Layout beeinflussen und können einfache Fehler selbst korrigieren.
Diese Aktivitäten sind ein Ausgangspunkt. Die vollständige Mission ist das Erlebnis.
- Vollständiges Moderationsskript mit Lehrkraft-Dialogen
- Druckfertige Schülermaterialien, bereit für den Unterricht
- Differenzierungsstrategien für jeden Lerntyp
Vorsicht vor diesen Fehlvorstellungen
Häufige FehlvorstellungDuring Paararbeit: Box aufbauen, watch for...
Was Sie stattdessen lehren sollten
Fordern Sie die Paare auf, ihre erste Box mit einem sichtbaren Border zu versehen und dann gezielt Margin und Padding zu erhöhen, während sie die Veränderungen im Browser beobachten und notieren.
Häufige FehlvorstellungDuring Stationen: Layout-Experimente, watch for...
Was Sie stattdessen lehren sollten
Legen Sie an der Station mit kollabierenden Margins zwei Boxen übereinander und bitten Sie die Lernenden, die Margin-Werte schrittweise zu verändern, um das Phänomen selbst zu entdecken.
Häufige FehlvorstellungDuring Whole Class: Gemeinsames Layout, watch for...
Was Sie stattdessen lehren sollten
Wählen Sie gezielt ein Layout mit unterschiedlichen box-sizing-Einstellungen und lassen Sie die Klasse die Auswirkungen auf die Gesamtbreite der Boxen vergleichen und diskutieren.
Ideen zur Lernstandserhebung
After Paararbeit: Box aufbauen, zeigen Sie einer Kleingruppe ein HTML-Element mit CSS und bitten Sie sie, die vier Box-Komponenten zu identifizieren und zu beschriften. Fragen Sie: 'Welche Komponente beeinflusst den Abstand zwischen dieser Box und der nächsten?'
During Stationen: Layout-Experimente, geben Sie jeder Schülerin und jedem Schüler eine Karte. Sie sollen eine CSS-Regel für ein div mit blauem 2px Border und 15px Margin oben/unten schreiben. Fragen Sie zusätzlich: 'Was passiert beim Erhöhen des Padding-Werts, ohne den Margin-Wert zu ändern?'
During Whole Class: Gemeinsames Layout, zeigen Sie eine Seite mit zwei Boxen unterschiedlicher Padding-Werte. Fragen Sie: 'Wie vergrößern wir den Abstand zwischen den Boxen, ohne ihre Breite zu ändern? Welche CSS-Eigenschaft ist hierfür geeignet und warum?'
Erweiterungen & Unterstützung
- Fordern Sie die Schüler auf, ein komplexeres Layout mit drei nebeneinander liegenden Boxen zu erstellen, das auf verschiedenen Bildschirmgrößen funktioniert.
- Geben Sie Lernenden, die unsicher sind, eine vorstrukturierte CSS-Vorlage mit Kommentaren, die sie Schritt für Schritt anpassen können.
- Vertiefen Sie das Thema mit einer Aufgabe zur Berechnung der Gesamtbreite von Boxen unter Berücksichtigung von Padding, Border und Margin unter Verwendung von box-sizing: border-box.
Schlüsselvokabular
| Content | Der eigentliche Inhalt eines HTML-Elements, wie Text, Bilder oder Videos. Dies ist der innerste Bereich der Box. |
| Padding | Der Abstand zwischen dem Content-Bereich und dem Border. Es schafft einen inneren Pufferraum und beeinflusst die visuelle Größe des Inhaltsbereichs. |
| Border | Der sichtbare Rahmen um den Padding- und Content-Bereich. Er kann eine Farbe, eine Dicke und einen Stil (z.B. durchgezogen, gestrichelt) haben. |
| Margin | Der Abstand außerhalb des Borders, der das Element von anderen Elementen auf der Seite trennt. Er schafft einen äußeren Freiraum. |
| Box-Modell | Ein konzeptionelles Modell, das jedes HTML-Element als rechteckige Box darstellt, bestehend aus Content, Padding, Border und Margin. |
Vorgeschlagene Methoden
Planungsvorlagen für Digitale Welten Gestalten: Informatik
Mehr in Web-Technologien: Eigene Inhalte gestalten
Das Internet und das World Wide Web
Die Schülerinnen und Schüler unterscheiden zwischen dem Internet als Infrastruktur und dem World Wide Web als Dienst.
2 methodologies
HTML: Die Struktur des Webs
Die Schülerinnen und Schüler lernen die grundlegende Syntax von HTML und erstellen einfache Webseiten mit Text und Überschriften.
2 methodologies
Bilder und Links in HTML
Die Schülerinnen und Schüler integrieren Bilder und Hyperlinks in ihre HTML-Dokumente.
2 methodologies
Listen und Tabellen in HTML
Die Schülerinnen und Schüler strukturieren Informationen mit geordneten und ungeordneten Listen sowie einfachen Tabellen.
2 methodologies
Einführung in CSS: Styling für das Web
Die Schülerinnen und Schüler lernen die Grundlagen von CSS zur visuellen Gestaltung von HTML-Elementen kennen.
2 methodologies
Bereit, Box-Modell und Layout mit CSS zu unterrichten?
Erstellen Sie eine vollständige Mission mit allem, was Sie brauchen
Mission erstellen