Abo-Header

Let it flow: der normale Fluss der Boxen

Die Elemente auf einer Webseite folgen von Natur aus dem "document flow", dem "Fluss des Dokuments". Das Prinzip und die daran orientierte relative Positionierung stellt dieses Video vor.

Spieldauer
07:04
Ihr(e) Trainer
Peter M. Müller
Ihr Browser ist leider nicht mit dem nötigen Flashplayer ausgestattet! Klicken Sie den Link um diesen kostenlos zu installieren!
Get Flash
Bookmark and Share
Weiterführendes

Das Video-Tutorial "Let it flow: der normale Fluss der Boxen" ist Teil dieses Trainings:

Little Boxes
Webseiten gestalten mit CSS
Sie möchten Webseiten erstellen? Standkonform, barrierefrei und ohne Tabellen? Dann ist "Little Boxes" genau richtig für Sie. Als Praxisleitfaden durch das Labyrinth von (X)HTML und CSS führt es Sie von den ersten Schritten bis zur professionell gestalteten Website. Unterwegs helfen Ihnen zahlreiche praktische Übungen zu allen wichtigen Themen, das Erlernte zu festigen und zu vertiefen.
EUR 39,95
Details

Dieses Video-Training enthält außerdem folgende Tutorials:

Bonusmaterial

Videos

  		•
    Das Web ist nicht aus Papier
     ca. 17 min
  • HTML – Kisten erstellen
     ca. 86 min
    • Zwei Erweiterungen für Firefox installieren
       05:21
    • So funktioniert HTML
       
      • HTML – Hypertext und Etiketten
         06:24
      • Das HTML-Grundgerüst
         10:55
    • Die wichtigsten HTML-Elemente
       
      •  06:35
      • Überschriften und Absätze
         04:42
      • Text hervorheben und Sonderzeichen
         06:23
      • Block- und Inline-Elemente
         05:33
      • Aufzählungen und Nummerierungen
         03:19
      • Verschachtelte Listen
         03:29
      • Hyperlinks: das Besondere am WWW
         04:36
      • Die Wegbeschreibung zur Grafik: "img"
         06:21
      • Die Kontaktadresse im Fußbereich
         04:44
    • Eine Navigation erstellen
       03:18
    • Skip-Links: Hyperlinks auf derselben Seite
       04:04
    • HTML überprüfen mit dem Validator
       05:13
    • Die Kontaktseite: von der Seite zur Site
       05:02
    • Zusammenfassung
       
    • Multiple Choice Test
       
  • CSS-Grundlagen – Kisten gestalten
     ca. 186 min
    •  03:57
    • Schriften und Farben gestalten
       
      • Hintergrund- und Schriftfarben gestalten
         05:46
      • Schriftart und -größe gestalten
         06:49
      • Hyperlinks gestalten, Teil 1
         03:53
      • Hyperlinks gestalten, Teil 2
         04:49
      • Skip-Link ausblenden
         03:53
      • Die Kaskade, Teil 1: Styles speichern
         05:32
    • Selektoren, Einheiten und Farben
       
      • Style: der Aufbau einer CSS-Regel
         05:23
      • Verschachtelte Selektoren
         05:37
      • Namen vergeben mit "id" und "class"
         03:56
      • Die Kaskade, Teil 2: Spezifität
         06:15
      • Einheiten in CSS: die Qual der Wahl
         05:42
      • Farben definieren und auswählen
         05:50
    • Das Box-Modell: Abstände gestalten
       
      • Das Box-Modell in der Übersicht
         06:21
      • Kalibrierung: Abstände auf null
         04:25
      • Seite zentrieren mit "width" und "margin"
         02:38
      • Eine Rahmenlinie erstellen: "border"
         02:48
      • Der Innenabstand: "padding"
         05:31
      • Box-Modell und farbliche Gestaltung
         02:29
      • Die Hintergrundgrafik "background-image"
         04:42
      • Eine Hintergrundgrafik kacheln
         03:47
    • Ordnung halten im Stylesheet
       
      • Das Stylesheet in Abschnitte unterteilen
         04:47
      • Das Stylesheet aufräumen
         05:55
      • Das Stylesheet validieren
         02:55
    • Eine horizontale Navigation erstellen
       
      • Firebug installieren
         04:41
      • Eine einfache, horizontale Navigation
         06:52
      • "Tabbed Navigation" vorbereiten
         03:06
      • "Tabbed Navigation" erstellen
         05:11
      • "Sie sind hier": aktuelle Seite hervorheben
         05:40
    • Ein Formular für die Kontaktseite
       
      • Das Kontaktformular erstellen
         06:50
      • Das Kontaktformular gestalten
         06:40
      • Den Cursor in das erste Feld setzen
         02:59
      • Das fertige Kontaktformular testen
         07:30
    • Eine Druckversion für die Webseiten
       
      • Stylesheet für die Druckversion erstellen
         04:13
      • Die Druckversion gestalten
         06:19
    • Kaskade, Vererbung und Standardwert
       
      • Der DOM-Inspector
         03:14
      • Kaskade, Vererbung und Standardwert
         08:37
    • Zusammenfassung
       
    • Multiple Choice Test
       
  • CSS-Layout – Kisten positionieren
     ca. 154 min
    • Der "Flow" und die Positionierung
       
    • "Float": schwebende Boxen
       
      • Text um Bilder fließen lassen
         06:00
      • Klassen für den Float: links und rechts
         03:38
      • Float beenden mit "clear"
         05:18
      • Floaten mit mehreren Boxen
         06:20
    • Floats umschließen
       
      • Problem mit gefloateten Elementen
         05:57
      • Lösung: Elemente umschließen
         07:55
      • Die Galerie in die Site einbauen
         07:13
      • Die Galerie verschönern
         06:44
    • Mehrspaltig – absolute Positionierung
       
      • Zweispaltiges Layout
         05:57
      • Durchgehender Kopfbereich
         05:44
      • Drei Spalten – ohne Fußbereich
         05:23
    • Mehrspaltig mit "float" und "margin"
       
      • Zweispaltiges Layout, Teil 1
         04:26
      • Zweispaltiges Layout, Teil 2
         04:25
      • Zweispaltiges Layout, Teil 3
         04:34
      • Dreispaltiges Layout
         05:54
      • Die globale Wirkung von "clear"
         04:38
    • Entgegengesetzte Floats
       
      • Zweispaltiges Layout
         05:57
      • Dreispaltiges Layout
         07:08
    • Layouts für Fortgeschrittene
       
      • Text-Zoom und Page-Zoom
         04:29
      • Flexibles zweispaltiges Layout
         05:24
      • Fertige CSS-Layouts
         07:08
    • Patches: Flicken im CSS
       
      • Browsercharts und Patches
         06:24
      • IE und Conditional Comments
         03:48
      • Conditional Comments in Aktion
         06:30
    • Zusammenfassung
       
    • Multiple Choice Test
       
Seitenanfang

TOP 5 Video-Tutorials dieser Woche