Informatik · Klasse 8

Ideen für aktives Lernen

Box-Modell und Layout mit CSS

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.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Strukturieren und Modellieren
• KMK: Sekundarstufe I - Implementieren

• 25–45 Min.
• Partnerarbeit → Ganze Klasse
• 4 Aktivitäten

Aktivität 01

• Kollaboratives Problemlösen
• 30 Min. · Partnerarbeit

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.

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.

Worauf zu achten ist

Zeigen Sie den Schülerinnen und Schülern ein einfaches HTML-Element mit angewandtem CSS. Bitten Sie sie, die vier Komponenten des Box-Modells (Content, Padding, Border, Margin) auf dem Bildschirm zu identifizieren und zu beschriften. Fragen Sie: 'Welche Komponente bestimmt den Abstand zum nächsten Element?'

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Beziehungsfähigkeit
• Entscheidungsfähigkeit
• Selbststeuerung

Aktivität 02

• Lernen an Stationen
• 45 Min. · Kleingruppen

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.

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

Worauf zu achten ist

Geben Sie jeder Schülerin und jedem Schüler eine kleine Karte. Bitten Sie sie, eine CSS-Regel zu schreiben, die einem `div`-Element einen blauen Border von 2px Dicke und einen äußeren Abstand (Margin) von 15px nach oben und unten gibt. Fragen Sie zusätzlich: 'Was passiert visuell, wenn Sie den Padding-Wert erhöhen, ohne den Margin-Wert zu ändern?'

• Erinnern
• Verstehen
• Anwenden
• Analysieren
• Selbststeuerung
• Beziehungsfähigkeit

Aktivität 03

• Kollaboratives Problemlösen
• 35 Min. · Ganze Klasse

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.

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.

Worauf zu achten ist

Stellen Sie eine einfache Webseite mit zwei nebeneinander liegenden Boxen dar, die unterschiedliche Padding-Werte haben. Fragen Sie die Klasse: 'Wie können wir die Abstände zwischen den Boxen vergrößern, ohne die Breite der Boxen selbst zu verändern? Welche CSS-Eigenschaft ist hierfür am besten geeignet und warum?'

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Beziehungsfähigkeit
• Entscheidungsfähigkeit
• Selbststeuerung

Aktivität 04

• Kollaboratives Problemlösen
• 25 Min. · Einzelarbeit

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.

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.

Worauf zu achten ist

Zeigen Sie den Schülerinnen und Schülern ein einfaches HTML-Element mit angewandtem CSS. Bitten Sie sie, die vier Komponenten des Box-Modells (Content, Padding, Border, Margin) auf dem Bildschirm zu identifizieren und zu beschriften. Fragen Sie: 'Welche Komponente bestimmt den Abstand zum nächsten Element?'

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Beziehungsfähigkeit
• Entscheidungsfähigkeit
• Selbststeuerung

Einige Hinweise zum Unterrichten dieser Einheit

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.

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.

---

Vorsicht vor diesen Fehlvorstellungen

• During Paararbeit: Box aufbauen, watch for...

  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.

• During Stationen: Layout-Experimente, watch for...

  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.

• During Whole Class: Gemeinsames Layout, watch for...

  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.

---

In dieser Übersicht verwendete Methoden

• Kollaboratives Problemlösen
• Lernen an Stationen