video2brain - CSS Layouts
video2brain - CSS Layouts | 384MB
Duration: 2h 48m | Video: AVC (.mp4) 1280x720 15fps | Audio: AAC 44.1KHz stereo
Genre: eLearning | Level: Intermediate | Language: German
Duration: 2h 48m | Video: AVC (.mp4) 1280x720 15fps | Audio: AAC 44.1KHz stereo
Genre: eLearning | Level: Intermediate | Language: German
Flexible Websites einfach erstellt
Cascading Style Sheets (CSS) bestimmen modernes Webdesign. Die zentrale Frage in diesem Video-Training lautet: Wie nutze ich CSS für die Layouterstellung? In praktischen Beispielen lernen Sie die Eigenschaft float beherrschen, um flexible Zwei- und Dreispalter zu realisieren, Sie sehen die Gestaltung von Navigationsleisten oder, wie Sie Formularelemente anordnen.
Dieses Video-Training stellt keine Theorie und keine abgehobenen Tricks für Insider in den Mittelpunkt, es geht um den typischen Alltag im Leben des Webdesigners. Dazu gehören auch Probleme wie: Was mache ich, wenn die Spalten nicht gleich lang sind, oder: Wie kann ich ein Layout erstellen, das sich immer über die gesamte Höhe erstreckt? Außerdem erfahren Sie, wie Sie „position“ für raffinierte Darstellungen nutzen, eigene Stylesheets für den Ausdruck definieren – und vieles mehr bis hin zu einem Beispiel für ein Responsive Layout. Damit können Sie Layouts erstellen, die auf einem Smartphone anders aussehen als etwa auf einem normalen Desktop. All diese Dinge erleben und üben Sie anhand einfacher kleiner Beispiele, die Sie direkt in Ihren Projekten nutzen können.
Layout – Grundlagen und Variationen
Zweispalter und Dreispalter in Variation: Das erste Kapitel legt gleich los mit dem Layout per CSS und beleuchtet die wichtige Eigenschaft "float" genauer.
"Gefloatete" Bereiche umschließen
"Gefloatete" Bereiche werden nicht automatisch von einem umfassenden Element umschlossen – ein auf den ersten Blick etwas seltsames Phänomen. Glücklicherweise gibt es eine Reihe von Lösungen für dieses Problem. Sehen Sie selbst!
Variation: Bildschirmfüllende Kopf/Fußzeile
Eine Layoutvariante, die recht beliebt ist, ist die bildschirmfüllende Kopf- und Fußzeile. Dieser Film zeigt, wie's geht.
"Flüssige" Layouts erstellen
"Flüssige" Layouts haben den Vorteil, dass sie sich flexibel der Bildschirmbreite anpassen. Sie lernen außerdem, wie Sie das Layout sinnvoll über "max-width" und "min-width" begrenzen.
Helfer für alle Fälle: Firebug
Oft muss man vorhandene Layouts anpassen – insbesondere, wenn man fertige Templates für ein CMS nutzt. In solchen Fällen hilft Firebug!
Layouts und Layout-Bestandteile mit "position"
Neben "float" können Sie auch die Eigenschaft "position" heranziehen, um Layouts zu erstellen. Sehen Sie, wie …
Bildbeschriftung auf Bild
Ein raffinierter Einsatzbereich von "position": eine Bildbeschriftung mit halbtransparentem Hintergrund über ein Bild zu legen.
Gleich lange Spalten
Ein prinzipielles Problem des Layouts per CSS: nicht automatisch sind eingesetzte Spalten gleich lang! Sehen Sie, wie Hintergrundbilder das Problem beheben und wie das auch bei "flüssigem" Layout funktioniert.
Navigationen
Navigationen sind eine Schlüsselkomponente von Web-Seiten, daher lohnt es sich, ein wenig Zeit in die Erstellung möglichst attraktiver Navigationen zu investieren.
Aktuellen Punkt hervorheben
Ein Muster-Layout kann als Basis dienen, um die Unterseiten zu erstellen. Damit der Benutzer stets weiß, wo er sich gerade befindet, sollten Sie den aktuellen Menüpunkt hervorheben.
Responsive Layouts
Ein aktueller Trend heißt Responsive Webdesign. Darunter versteht man Web-Seiten, die sich flexibel an die jeweilige Bildschirmgröße anpassen und beispielsweise auch auf Smartphones funktionieren.
Das Projekt-Dateien fehlen!
Zweispalter und Dreispalter in Variation: Das erste Kapitel legt gleich los mit dem Layout per CSS und beleuchtet die wichtige Eigenschaft "float" genauer.
"Gefloatete" Bereiche umschließen
"Gefloatete" Bereiche werden nicht automatisch von einem umfassenden Element umschlossen – ein auf den ersten Blick etwas seltsames Phänomen. Glücklicherweise gibt es eine Reihe von Lösungen für dieses Problem. Sehen Sie selbst!
Variation: Bildschirmfüllende Kopf/Fußzeile
Eine Layoutvariante, die recht beliebt ist, ist die bildschirmfüllende Kopf- und Fußzeile. Dieser Film zeigt, wie's geht.
"Flüssige" Layouts erstellen
"Flüssige" Layouts haben den Vorteil, dass sie sich flexibel der Bildschirmbreite anpassen. Sie lernen außerdem, wie Sie das Layout sinnvoll über "max-width" und "min-width" begrenzen.
Helfer für alle Fälle: Firebug
Oft muss man vorhandene Layouts anpassen – insbesondere, wenn man fertige Templates für ein CMS nutzt. In solchen Fällen hilft Firebug!
Layouts und Layout-Bestandteile mit "position"
Neben "float" können Sie auch die Eigenschaft "position" heranziehen, um Layouts zu erstellen. Sehen Sie, wie …
Bildbeschriftung auf Bild
Ein raffinierter Einsatzbereich von "position": eine Bildbeschriftung mit halbtransparentem Hintergrund über ein Bild zu legen.
Gleich lange Spalten
Ein prinzipielles Problem des Layouts per CSS: nicht automatisch sind eingesetzte Spalten gleich lang! Sehen Sie, wie Hintergrundbilder das Problem beheben und wie das auch bei "flüssigem" Layout funktioniert.
Navigationen
Navigationen sind eine Schlüsselkomponente von Web-Seiten, daher lohnt es sich, ein wenig Zeit in die Erstellung möglichst attraktiver Navigationen zu investieren.
Aktuellen Punkt hervorheben
Ein Muster-Layout kann als Basis dienen, um die Unterseiten zu erstellen. Damit der Benutzer stets weiß, wo er sich gerade befindet, sollten Sie den aktuellen Menüpunkt hervorheben.
Responsive Layouts
Ein aktueller Trend heißt Responsive Webdesign. Darunter versteht man Web-Seiten, die sich flexibel an die jeweilige Bildschirmgröße anpassen und beispielsweise auch auf Smartphones funktionieren.
Das Projekt-Dateien fehlen!
video2brain - CSS Layouts
No mirrors below please.