Herausforderung: Grundlegendes Verständnis von Layouts
Wenn Sie dieses Modul durchgearbeitet haben, dann haben Sie bereits die Grundlagen gelernt, die Sie benötigen, um heute mit CSS-Layouts zu arbeiten, und um auch mit älterem CSS zurechtzukommen. Diese Aufgabe wird einige Ihrer Kenntnisse testen, indem Sie ein einfaches Webseiten-Layout unter Verwendung einer Vielzahl von Techniken entwickeln.
Ausgangspunkt
Sie können das HTML, CSS und eine Reihe von sechs Bildern in unserem Learning-Area-Repo herunterladen.
Speichern Sie das HTML-Dokument und das Stylesheet in einem Verzeichnis auf Ihrem Computer und legen Sie die Bilder in einem Ordner namens images ab. Wenn Sie die index.html-Datei in einem Browser öffnen, sollte eine Seite mit grundlegender Gestaltung, aber ohne Layout zu sehen sein, die in etwa so aussieht wie das Bild unten.
Dieser Ausgangspunkt enthält den gesamten Inhalt Ihres Layouts, wie er vom Browser im Normalfluss dargestellt wird.
Alternativ können 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
Sie haben einige Roh-HTML, grundlegendes CSS und Bilder erhalten — jetzt müssen Sie ein Layout für das Design erstellen.
Ihre Aufgaben
Sie müssen jetzt Ihr Layout umsetzen. Die Aufgaben, die Sie erledigen müssen, sind:
- Die Navigationspunkte sollen in einer Reihe angezeigt werden, mit einem gleichmäßigen Abstand zwischen den Punkten.
- Die Navigationsleiste soll mit dem Inhalt scrollen und dann am oberen Rand des Viewports anhaften, sobald sie ihn erreicht.
- Das Bild innerhalb des Artikels soll von Text umflossen werden.
- Die
<article>- und<aside>-Elemente sollen als zweispaltiges Layout angezeigt werden. Die Spalten sollten eine flexible Größe haben, sodass sie bei Verkleinerung des Browserfensters schmaler werden. - Die Fotografien sollen 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 nicht nur einen richtigen oder falschen Weg, dies zu tun. Probieren Sie einige verschiedene Ansätze aus und sehen Sie, welcher am besten funktioniert. Machen Sie Notizen, während Sie experimentieren.
