Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

CSS: Responsive Flexbox-Layouts für Profis

All Together 1: Navigation, Cards und Holy Grail auf einer Seite

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die drei Demos zu Navigationen, Card-Layout und Holy-Grail-Layout sollen auf einer Seite vereint werden. Dieser Film zeigt die Ausgangssituation im Browser und im Editor.

Transkript

Sie haben in diesem Training bis jetzt drei große Demos gesehen und erstellt. Das erste war eine Navigation oder genau genommen mehrere Navigationen: Eine Single-Level-Navigation ganz einfach, eine erweiterte mit Icons, eine mit mehreren Ebenen, "das etwas andere Dropdown" hatten wir das genannt hier, weil die auch tastatur- und touchscreenbedienbar ist, eine Social-Media-Leiste und ein gemischtes Doppel, hier mit der Dropdown-Navi und der Social-Media-Leiste in einem zusammen. Das war die erste große Demo, die zweite war das Card-Layout, das hier in einem rasterähnlichen Layout arrangiert auf der Seite liegt, wenn das Browserfenster kleiner wird, wird es zweispaltig und wenn es noch kleiner wird, wird es einspaltig, das passt sich also dem zur Verfügung stehenden Platz an. Nummer 3 war hier die Flexbox-Holy-Grail-Layout-Demo mit einer Sidebar und einem Inhaltsbereich, die beide gleich hoch sind und bis zum Fußbereich runterreichen, egal, wie viel Inhalt in den beiden vorhanden ist. Man kann mit den Buttons hier oben die Sidebar platzieren oder auch ausblenden und wieder einblenden und alle diese drei Demos sollen jetzt vereint werden auf einer einzigen Seite, hier zu sehen mit dem Holy-Grail-Layout, Inhaltsbereich und Sidebar gleich hoch bis ganz unten, dann einem gemischten Doppel als Navigation hier und dem Card-Layout im Inhaltsbereich, das alles zusammen auf einer Seite und es soll natürlich nach wie vor alles funktionieren, das heißt, hier kommt die wieder zurück und die Sidebar wird ausgeblendet und auch wieder eingeblendet hier. Das ist das Ziel: "All together now", alle drei Demos auf einer Seite. Im Editor sieht die Ausgangsposition wie folgt aus: Es gibt hier die drei HTML-Dateien, "menus.html" mit dem ganz normalen HTML, so wie Sie das in dem Training erstellt haben, dann gibt es im CSS-Ordner die ganzen CSS-Modulbausteine. Die zentralen CSS-Dateien sind jeweils ergänzt worden mit dem Wort, für welches sie die Zentrale waren, also "zentrale-menus", "zentrale-holy-grail" und "zentrale-card-styles", ansonsten sind das unverändert die CSS-Bausteine aus den vorherigen Filmen und "images" die Bilder für das Card-Layout und im Ordner "js" die beiden JavaScript-Dateien für die Menü-Dropdown-Sache und für das Sidebar-Switchen. Soweit ist hier alles im Überblick vorhanden. Diese Module sollen jetzt in einer Datei zusammengeführt werden.

CSS: Responsive Flexbox-Layouts für Profis

Sehen Sie, wie sich mit Flexbox die Art und Weise der Webseitengestaltung grundlegend verändern wird und wie Sie die TEchnologie schon heute einsetzen können.

2 Std. 25 min (34 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!