Logo HTML5

HTSTA - STATISCHE WEBSEITEN

Logo CSS3

Kapitel 08: Page Layout Basics

Kursablauf:

Allgemeine Bemerkungen:
  • Einheit 1: Normal flow, relative und absolut
  • Einheit 2: Float und overflow als Lehrerdemo, dann Übungen
  • Einheit 3&4: Two-Column Layout und Hyperlinks und Listen, Pseudo-Klassen und Caption sind als Übungsaufgaben zu sehen zu den vorher behandelten CSS-Themen.
  • Einheit 5: HTML5 Elemente
  • Einheiten 6-8 für die restlichen Übungen
  • CSS for print and mobile sind optional
Vorbereitung "Programmieren lernen":
Zu behandelnde Seiten:
S.184-205
Lesen Hausaufgabe:
S.
Autonom erarbeiten in der Schule:
S.

Denke daran die unbekannten Wörter und Ausdrücke aufzuschreiben und nachzuschlagen!

Aufgaben:

  1. Führe das Hands-On Practice 8.1 durch.
  2. Teste die Beispiele der Seite 187. Füge beim ersten Beispiel noch die Regel top: -100px; hinzu. Füge beim 2. Beispiel noch die Regel top: 10px; hinzu. Was stellst du fest? Hier kann die 3D-Darstellung des Inspect element Tools der Browser benutzt werden.
  3. Führe das Hands-On Practice 8.2 und die Beispiele der Seiten 190-193 durch.
  4. Führe die Beispiele der Seiten 194-203 und die Hands-On Practices 8.3 & 8.4 durch.
  5. Führe die Hands-On Exercises 2-5 durch.
  6. Führe die Hands-On Practices 8.5 & 8.6 durch.
  7. Führe den Case Study komplett durch.

Verständnisfragen:

  1. Review questions

Zusatzaufgaben:

  1. Analysiere den Aufbau der Vorlage PositionProblems.pdf. Erstelle eine ähnliche Seite und führe einige Tests durch. Die Kiste #Box8 befindet sich in #Box7 und ist auf der Seite fixiert. Leider kann dies im PDF nicht angezeigt werden.