Herausforderung: Grundlegendes Layoutverständnis
Wenn Sie dieses Modul durchgearbeitet haben, dann haben Sie bereits die Grundlagen erlernt, die Sie benötigen, um heutiges 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 ein Set von sechs Bildern in unserem Learning-Area-Repo 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 index.html-Datei in einem Browser öffnen, sollte eine Seite mit grundlegender Gestaltung, aber ohne Layout angezeigt werden, die in etwa dem unten stehenden Bild ähnelt.
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 oder JSFiddle verwenden. Wenn Sie einen Online-Editor verwenden, müssen Sie die Bilder hochladen und die Werte in den src-Attributen so ändern, dass sie auf die neuen Bildstandorte verweisen.
Hinweis: Wenn Sie nicht weiterkommen, können Sie sich in einem unserer Kommunikationskanäle an uns wenden.
Projektauftrag
Ihnen wurden einige Roh-HTML, 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 implementieren. Die Aufgaben, die Sie erreichen müssen, sind:
- Anzeige der Navigationspunkte in einer Reihe mit einem gleichen Abstand zwischen den Punkten.
- Die Navigationsleiste sollte mit dem Inhalt scrollen und dann am oberen Rand des Viewports fixiert werden, wenn sie ihn erreicht.
- Das Bild, das sich im Artikel befindet, sollte von Text umflossen sein.
- 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 Fotografien 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 erzielen, 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 es gibt oft keinen einzigen richtigen oder falschen Weg, Dinge zu tun. Probieren Sie verschiedene Ansätze aus und sehen Sie, welcher am besten funktioniert. Machen Sie sich Notizen, während Sie experimentieren.
Beispiel
Der folgende Screenshot zeigt ein Beispiel dafür, wie das fertige Layout für das Design aussehen sollte:
