Webseiten bestehen aus rechteckigen Kästchen, lauter „little boxes“, die im Browserfenster übereinander-, nebeneinander- und ineinander gestapelt werden. HTML erstellt diese Kästchen und CSS gestaltet sie. Mit diesem Prinzip erklärt Peter Müller in seinem Video-Training, wie Webseiten entstehen – von Anfang an. Aus dem Inhalt:
Die Einleitung
In der Einleitung erfahren Sie einiges über das Wesen von Webseiten und Sie sehen in einem Schnelldurchlauf, wie HTML und CSS zusammenarbeiten.
HTML-Crashkurs – Kästchen erstellen
First things first. HTML ist einfach, aber wichtig, denn HTML erstellt die rechteckigen Kästchen, die später mit CSS gestaltet werden. In diesem Kapitel erfahren Sie, wie HTML funktioniert und wie man die wichtigsten Elemente korrekt einsetzt.
CSS-Grundlagen – Kästchen gestalten
CSS dient zum Gestalten der mit HTML-Elementen erstellten Boxen. Am Ende dieses Abschnitts haben Sie eine einfache mediengerechte Website mit horizontaler Tab-Navigation und funktionierendem Kontaktformular. Außerdem werden Konzepte wie Spezifität, Box-Modell und Kaskade erklärt.
CSS-Positionierung
Um mehrspaltige Layouts erstellen zu können, müssen die Kisten auf der Seite hin- und hergeschoben werden. In diesem Abschnitt lernen Sie verschiedene Methoden zur Positionierung von HTML-Elementen wie position und float kennen.
Mehrspaltige Layouts mit CSS
In diesem Abschnitt lernen Sie, wie man floatbasierte, mehrspaltige Layouts erstellt.
CSS – Vertiefung
In diesem Abschnitt teilen Sie ein großes Stylesheet in mehrere kleine auf („Zentralisierung“). Sie lernen das Box-Modell für Inline-Elemente kennen und ersetzen zahllose Grafiken durch moderne CSS3-Eigenschaften.
Navigationen gestalten
In diesem Abschnitt werden diverse Navigationstechniken vorgestellt: horizontal per float mit und ohne Tabs und horizontal als Drop-down-Menü.
Inhalte gestalten
Dieser Teil widmet sich der Gestaltung der Inhalte. Es geht um Fließtext, Webfonts, Zitate, Bildbeschriftungen und Formulare für Fortgeschrittene und wie alles gut lesbar wird.
Das CSS-Framework „YAML“
Dieser Teil widmet sich dem CSS-Framework „YAML“. Vorgestellt werden die HTML- und CSS-Struktur sowie der „YAML Builder“, der die visuelle Erstellung von normalen mehrspaltigen und auch gridbasierten Layouts ermöglicht.
