CSS-Boxen. Hans Gell Schulungen & Dienstleistungen Übersicht der Schulungsinhalte

Transkript

1 CSS-Boxen Übersicht der Schulungsinhalte Das Web ist nicht aus Papier enttäuschte Erwartungen Autor hat keine Kontrolle Webseiten sehen immer anders aus Webseiten sind flexibel - Papierseiten sind starr Webseiten mediengerecht von Layout-Tabellen zu CSS HTML Kisten erstellen 2 Erweiterungen für Firefox installieren HTML funktioniert so HTML - Hypertext und Etiketten HTML - Grundgerüst Die wichtigsten HTML-Elemente mit "div" Seiten in Bereiche einteilen Überschriften und Absätze hervorheben des Textes und Sonderzeichen Block- und Inline-Elemente Aufzählungen und Nummerierungen Verschachtelte Listen Hyperlinks - das Besondere am www Wegbeschreibung zur Grafik - "img Kontaktadresse im Fußbereich erstellen einer Navigation Hyperlinks auf derselben Seite - Skip-Links mit dem Validator HTML überprüfen Kontaktseite von der Seite zur Site

2 CSS-Grundlagen Kisten gestalten das erste eigene Stylesheet gestalten von Schriften und Farben gestalten der Hintergrund- und Schriftfarben gestalten der Schriftart und -größe 1. Teil - Hyperlinks gestalten 2. Teil - Hyperlinks gestalten ausblenden des Skip-Link 1. Teil - die Kaskade - Styles speichern Selektoren, Einheiten und Farben Style - der Aufbau einer CSS-Regel verschachtelte Selektoren mit "id" und "class" Namen vergeben 2. Teil - die Kaskade - Spezifität Einheiten in CSS - die Qual der Wahl definieren und auswählen der Farben Das Box-Modell - Abstände gestalten Box-Modell in der Übersicht Kalibrierung - Abstände auf null mit "width" und "margin" Seite zentrieren erstellen einer Rahmenlinie - "border" Innenabstand - "padding" Box-Modell und farbliche Gestaltung Hintergrundgrafik - "background-image" kacheln einer Hintergrundgrafik Im Stylesheet Ordnung halten unterteilen des Stylesheets in Abschnitte

3 aufräumen des Stylesheets validieren des Stylesheets Erstellen einer horizontalen Navigation installieren einer Firebug einfache, horizontale Navigation vorbereiten einer "Tabbed Navigation" erstellen einer "Tabbed Navigation" hervorheben einer aktuellen Seite - "Sie sind hier": Für die Kontaktseite ein Formular erstellen des Kontaktformulars gestalten des Kontaktformulars in das erste Feld den Cursor setzen testen des fertigen Kontaktformulars Eine Druckversion für die Webseiten erstellen eines Stylesheets für die Druckversion gestalten der Druckversion Kaskade, Vererbung und Standardwert DOM-Inspector Kaskade, Vererbung und Standardwert CSS-Layout Kisten positionieren Der "Flow" und die Positionierung

4 Let it flow - der normale Fluss der Boxen absolute Positionierung im Kopfbereich Slogan positionieren "Float" - schwebende Boxen um Bilder Text fließen lassen Klassen für den Float - links und rechts mit "clear" Float beenden mit mehreren Boxen floaten Floats umschließen Problem mit gefloateten Elementen Lösung - Elemente umschließen in die Site Galerie einbauen verschönern der Galerie Mehrspaltig absolute Positionierung Layout zweispaltig Kopfbereich durchgehend 3 Spalten ohne Fußbereich Mehrspaltig mit "float" und "margin" 1. Teil - zweispaltiges Layout 2. Teil - zweispaltiges Layout 3. Teil - zweispaltiges Layout Layout - dreispaltig globale Wirkung von "clear" Entgegengesetzte Floats Layout - zweispaltig

5 Layout - dreispaltig Layouts für Fortgeschrittene Text- und Page-Zoom flexibles zweispaltiges Layout Fertige CSS-Layouts Patches - Flicken im CSS Browsercharts und Patches IE und Conditional Comments Conditional Comments in Aktion