Responsive Flexbox-Layouts für Fortgeschrittene

All Together 2: Holy Grail und Navigation einbauen

29,95
Das Holy-Grail-Layout und die Navigation werden auf einer Seite vereint, inklusive CSS und JavaScript.

Zum Vereinigen der drei Demos in eine wird zunächst einmal eine neue HTML-Datei erstellt, die soll "all-together" heißen, "all-together.html". Und die basiert auf Holy Grail. Das heißt ich gehe jetzt hier rein, markiere alles, kopiere das, und füge das in "all-together" wieder ein und speichere das. So, da wird der Titel angepasst, der Seitentitel "all-together-now", Dann kommt, etwas tiefer - das Stylesheet wird später angepasst, da soll natürlich auch noch ein anderes rein. Dann der sichtbare Seitentitel, die h1. Auch die soll heißen "all-together-now". Und speichern. So, dann gibt es ein neues Stylesheet. Neue Datei im Unterordner css: "zentrale-all-together. css", und auch die soll basieren auf den Importanweisungen aus Holy Grail. Öffnen, kopieren und einfügen. So, hier schreibe ich einfach mal hin, dass hier die verschiedenen Module geladen werden. Und die beiden Holy Grail-Dateien können wieder zu. Zentrale, jetzt muss natürlich noch der Pfad angepasst werden zum Stylesheet. Und der heißt hier "all-together", da ist er schon zu sehen. Speichern. So, wir haben hier das richtige Stylesheet eingebunden. In dem Stylesheet sind alle Module drin. Die Basisgestaltung oben, dann kommen hier bis jetzt die beiden rein. Es wird Zeit, sich das im Browser anzuschauen, "all-togehter. html", ist hier jetzt im Browser zu sehen und sollte genauso aussehen wie Holy Grail. Und das tut es auch, abgesehen vom Titel. Das ist in Ordnung. Die Sidebar sollte funktionieren und auch ein- und ausblendbar sein. Das klappt alles, rüber und weiter geht es jetzt mit der Navigation. Dazu öffne ich "menus.html" und scrolle ein bisschen runter bis "mixed menu" zu sehen ist, und hier fängt es an. Das wird markiert und kopiert. Dann rüber in "all-together" wo das alles vereint werden soll und da ist schon hier eine Stelle, wo ein Menü rein soll, da - hier kommt die Navigation hin. Bisschen Platz machen und das eben kopierte gemischte Doppel einfügen. So. Und oben auch noch ein klein bisschen ausrücken. Da ist alles drin und es funktioniert hoffentlich auch soweit. Das Menü ist drin. Jetzt müssen die Stylesheets hier noch rein. Und die kommen aus der Datei "zentrale-menus", da. So, und die holen wir jetzt alle rein und bauen die hier ein. Wir werden nicht alle brauchen, denn zum Beispiel "single-level" und "advanced", die können wieder raus. Aber diese vier brauchen wir für die Navigation. Das ist drin. In all-together wird das richtige Stylesheet eingebunden, oben, "all-together", aber unten fehlt beim JavaScript noch die Zeile für "menu-toggle" damit die dropdown-Navigation auch funktioniert. So, und jetzt müsste alles soweit stimmen. Gespeichert ist. Ich gehe rüber in den Browser und lade die Datei neu. Hier erscheint jetzt die Navigation. Ein kurzer Klick: sie funktioniert. Und auch die Sidebar ist noch völlig in Ordnung. Das sieht alles gut aus soweit. So, hier können die Dateien wieder geschlossen werden. Im Moment sind also Navigation und Holy Grail Layout bereits drin. Es fehlt hier nur noch das Card Layout im Inhaltsbereich.

Responsive Flexbox-Layouts für Fortgeschrittene

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...
 
Einzeltraining: 29,95
: ab € 19,95
Erscheinungsdatum:18.10.2016

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!