Logo HTML5

HTSTA - STATISCHE WEBSEITEN

Logo CSS3

Kapitel 07: More CSS Basics

Kursablauf:

Allgemeine Bemerkungen:
Experten-Rallye (Infos: Experten-Rallye) um die einzelnen Themen des Kapitels durchzuarbeiten.
Vorbereitung "Programmieren lernen":
keine neuen Konzepte
Zu behandelnde Seiten:
S.152-173
Lesen Hausaufgabe:
S.
Autonom erarbeiten in der Schule:
S.

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

Aufgaben:

  1. Experten-Rallye: Expertengruppen (Schüleranweisungen)
    1. Textkonfiguration (S. 152-157)
    2. CSS Box Modell, Zentrierung (S.160-163, 168-169)
    3. Breite und Höhe, Ränder (S. 158-159, 164-167)
    4. Schatten, Transparenz, Gradienten (S. 170-177)
  2. Führe die Hands-On Practices 7.1-7.9 durch.
  3. Führe die Hands-On Exercises 1-7 durch.
  4. Führe den Case Study durch.
  5. Erstelle, in einer Tabellenkalkulation, eine alphabetisch geordnete Checkliste mit allen behandelten CSS-Eigenschaften im Kurs. Sobald eine Eigenschaft in der HTML-Seite (siehe unten) eingesetzt wurde wird diese abgehakt.
    Erstelle eine HTML-Seite mit den Verständnisfragen und deren Lösungen. Diese Seite soll alle bisher behandelten CSS-Eigenschaften (Kapitel 5-7) einsetzen. Erstelle eine Bild-Navigation (Menüpunkte: Home und Pictures). Home enthält die Verständisaufgaben und Pictures mehrere Bilder im Originalformat.
    Die Datei enthält einen Auszug (ohne Navigation und nur ein Teil der Aufgaben!) der Lösungsdatei. Hier auch noch der dazu gehörende HTML-Code.
    Die Checkliste und die HTML-Datei sind dem Lehrer per Email abzugeben. (2 Kurseinheiten)
  6. Aktualisiere und formatiere deine Quickref-Dateien zu HTML und CSS, sowie die Toolbox- und Vokabulardatei. (2 Kurseinheiten)

Verständnisfragen:

  1. Review questions.
  2. Mit welchen Einheiten sollte man bei der Webseitengestaltung arbeiten (in Bezug auf Schriften)?
  3. Wieso sollte man mehrere Schriften angeben bei der Eigenschaft font-family?
  4. Wozu dient der "wrapper"?
  5. Wozu dient die Seite caniuse.com? Nenne 2 Alternativen.
  6. Wieso gibt es browserspezifische CSS-Eigenschaften? Worauf sollte man bei ihrer Benutzung achten?
  7. Wie kann man einen einzeiligen Text innerhalb eines Blockelementes vertikal zentrieren?

Test (50 Minuten):

  1. Erstelle in deinem H:-Laufwerk ein Verzeichnis namens T0IF1_Vorname_Nachname mit DEINEM Vornamen und Nachnamen.
  2. Erstelle folgende Webseite.
  3. Das gesamte Styling findet in einer externen CSS-Datei statt.
  4. Das Bild befindet sich hier.
  5. Verwende background: radial-gradient(rgb(0, 255, 0), rgb(255, 0, 255)) fixed; um den Hintergrund der gesamten Seite zu stylen.
  6. Die Mindestbreite der Seite ist 1200 Pixel.
  7. Die Überschrift hat folgendes Styling:
    • Die Schriftfarbe ist blauviolett.
    • Der Hintergrund verläuft von rot nach blau.
    • Als Zeichensatz wird Courier New verwendet. Sollte dieser nicht verfügbar sein wird ein Zeichensatz aus der monospace Familie verwendet.
    • Die Zeichengröße beträgt das Fünffache der normalen Größe.
    • Der Schriftstil ist kursiv.
    • Der Text ist zentriert.
    • Der Zwischenraum zwischen dem Rahmen und dem Text beträgt 10 Pixel.
    • Der Abstand zwischen dem oberen Rand der Überschrift und des Elternelements beträgt 0 Pixel.
    • Die Breite der Überschrift beträgt 60% der Breite der Seite.
    • Die Überschrift ist zentriert.
    • Der Rahmen ist 5 Pixel breit, hat die Farbe rot und soll genau so aussehen wie abgebildet.
    • Der Krümmungsradius beträgt 15 Pixel.
    • Der Schatten des Elementcontainers ist blau sowie 10 Pixel breit und hoch, die Unschärfe ist auf 55 Pixel eingestellt.
    • Der Schatten des Textes ist schwarz sowie 3 Pixel breit und hoch, die Unschärfe ist auf 3 Pixel eingestellt.
  8. Der Haupttext hat folgendes Styling:
    • Der Text ist zentriert.
    • Als Zeichensatz wird Jokerman verwendet. Sollte dieser nicht verfügbar sein wird ein Zeichensatz aus der fantasy Familie verwendet.
    • Die Zeichengröße beträgt das Vierzehnfache der normalen Größe.
    • Die Höhe des Elementes beträgt 500 Pixel.
    • Die Textfarbe ist schwarz mit einer Undurchsichtigkeit von 20%.
  9. HTML5 und CSS3 müssen validiert sein, es müssen jedoch keine Logos hinzugefügt werden.

Zusatzaufgaben:

  1. Erstelle eine Internetseite mit deinem kompletten Lebenslauf.