Herausforderung: Grundlegendes Layout-Verständnis
Wenn Sie dieses Modul durchgearbeitet haben, dann haben Sie bereits die Grundlagen erlernt, die Sie heute benötigen, um CSS-Layouts zu erstellen und auch mit älterem CSS zu arbeiten. Diese Aufgabe wird einige Ihrer Kenntnisse testen, indem Sie ein einfaches Webseitenlayout mit verschiedenen 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 fügen Sie die Bilder in einen Ordner namens images ein. Wenn Sie die Datei index.html in einem Browser öffnen, sollte Ihnen eine Seite mit grundlegender Formatierung, aber ohne Layout angezeigt werden. Diese sollte in etwa so aussehen wie das Bild unten.
Dieser Ausgangspunkt enthält den gesamten Inhalt Ihres Layouts, wie er vom Browser im normalen Fluss angezeigt wird.
Alternativ können Sie auch einen Online-Editor wie CodePen, JSFiddle oder Glitch verwenden. Wenn Sie einen Online-Editor benutzen, müssen Sie die Bilder hochladen und die Werte in den src-Attributen ersetzen, um auf die neuen Bildstandorte zu verweisen.
Hinweis: Wenn Sie stecken bleiben, können Sie sich über einen unserer Kommunikationskanäle an uns wenden.
Projektbrief
Ihnen wurden einige rohe HTML-, grundlegende CSS- und Bilder bereitgestellt — 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:
- Die Navigationspunkte in einer Reihe anzeigen, mit einem gleichen Abstand zwischen den Elementen.
- Die Navigationsleiste sollte mit dem Inhalt scrollen und dann am oberen Rand des Viewports haften bleiben, wenn sie ihn 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 schmaler werden, wenn das Browserfenster kleiner wird. - 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önnen, und es gibt oft keinen eindeutig richtigen oder falschen Weg, Dinge zu tun. Probieren Sie einige verschiedene Ansätze aus und sehen Sie, welcher am besten funktioniert. Machen Sie sich beim Experimentieren Notizen.
