Herausforderung: Grundlegendes Verständnis von Layouts
Wenn Sie dieses Modul durchgearbeitet haben, dann haben Sie bereits die Grundlagen gelernt, die Sie benötigen, um heutzutage CSS-Layout zu erstellen und auch mit älterem CSS zu arbeiten. Diese Aufgabe wird einige Ihrer Kenntnisse testen, indem Sie ein einfaches Webseiten-Layout mit einer Vielzahl von Techniken entwickeln.
Ausgangspunkt
Sie können das HTML, CSS und eine Reihe von sechs Bildern hier herunterladen.
Speichern Sie das HTML-Dokument und das Stylesheet in einem Verzeichnis auf Ihrem Computer und geben Sie die Bilder in einem Ordner mit dem Namen images an. Wenn Sie die Datei index.html in einem Browser öffnen, sollte eine Seite mit grundlegender Formatierung, aber ohne Layout angezeigt werden, die ungefähr so aussieht wie das nachfolgende Bild.
Dieser Ausgangspunkt enthält den gesamten Inhalt Ihres Layouts, wie er vom Browser im normalen Fluss angezeigt wird.
Alternativ könnten Sie einen Online-Editor wie CodePen, JSFiddle oder Glitch verwenden. Wenn Sie einen Online-Editor verwenden, müssen Sie die Bilder hochladen und die Werte in den src-Attributen ändern, um auf die neuen Bildstandorte zu verweisen.
Hinweis: Wenn Sie nicht weiterkommen, können Sie sich in einem unserer Kommunikationskanäle an uns wenden.
Projektbeschreibung
Ihnen wurden einige rohe HTML-Daten, grundlegendes CSS und Bilder zur Verfügung gestellt – nun müssen Sie ein Layout für das Design erstellen.
Ihre Aufgaben
Sie müssen nun Ihr Layout umsetzen. Die Aufgaben, die Sie erreichen müssen, sind:
- Anzeigen der Navigationselemente in einer Reihe, mit gleicher Menge an Platz zwischen den Elementen.
- Die Navigationsleiste sollte mit dem Inhalt scrollen und dann oben am Anzeigefenster festkleben, wenn sie es erreicht.
- Das Bild, das sich im Artikel befindet, sollte von Text umflossen werden.
- Die
<article>- und<aside>-Elemente sollten als zweispaltiges Layout angezeigt werden. Die Spalten sollten eine flexible Größe haben, sodass sie bei Verkleinerung des Browserfensters schmaler werden. - Die Fotos sollten als zweispaltiges Raster mit einem Abstand von 1 Pixel zwischen den Bildern angezeigt werden.
Hinweise und Tipps
Sie müssen das HTML nicht bearbeiten, um dieses Layout zu erreichen, und die Techniken, die Sie verwenden sollten, sind:
- Flexbox
- Grid
- Floating
- Positionierung
Es gibt einige Möglichkeiten, wie Sie einige dieser Aufgaben erreichen könnten, und oft gibt es keinen einzigen richtigen oder falschen Weg, die Dinge zu tun. Probieren Sie ein paar verschiedene Ansätze aus und sehen Sie, welcher am besten funktioniert. Machen Sie Notizen, während Sie experimentieren.
