Herausforderung: Grundlegendes Layoutverständnis
Wenn Sie dieses Modul durchgearbeitet haben, haben Sie bereits die Grundlagen gelernt, die Sie benötigen, um heute CSS-Layouts zu erstellen und auch mit älteren CSS-Versionen zu arbeiten. Diese Aufgabe wird einige Ihrer Kenntnisse durch die Entwicklung eines einfachen Webseitenlayouts mit verschiedenen Techniken testen.
Ausgangspunkt
Sie können das HTML, CSS und eine Serie 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 Datei index.html
in einem Browser öffnen, sollten Sie eine Seite mit grundlegender Formatierung, aber ohne Layout sehen, die etwa wie das unten stehende Bild aussieht.
Dieser Ausgangspunkt enthält den gesamten Inhalt Ihres Layouts, wie er vom Browser in normalem 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 ersetzen, dass sie auf die neuen Bildstandorte verweisen.
Hinweis: Falls Sie nicht weiterkommen, können Sie sich in einem unserer Kommunikationskanäle an uns wenden.
Projektbeschreibung
Sie haben einige rohe HTML-, grundlegende CSS-Dateien und Bilder zur Verfügung gestellt bekommen - jetzt müssen Sie ein Layout für das Design erstellen.
Ihre Aufgaben
Sie müssen jetzt Ihr Layout umsetzen. Die Aufgaben, die Sie erreichen müssen, sind:
- Die Navigationselemente in einer Reihe anzeigen, mit einem gleichen Abstand zwischen den Elementen.
- Die Navigationsleiste sollte mit dem Inhalt scrollen und dann oben am Viewport haften bleiben, wenn sie diesen erreicht.
- Das Bild im Artikel sollte von Text umflossen sein.
- Die
<article>
- und<aside>
-Elemente sollten als zweispaltiges Layout angezeigt werden. Die Spalten sollten flexibel groß sein, sodass wenn das Browserfenster kleiner wird, die Spalten schmaler werden. - Die Fotos sollten in einem zweispaltigen 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 verschiedene Möglichkeiten, einige dieser Aufgaben zu erreichen, und oft gibt es nicht den einen richtigen oder falschen Weg, um Dinge zu tun. Probieren Sie ein paar verschiedene Ansätze aus und sehen Sie, welcher am besten funktioniert. Machen Sie sich Notizen, während Sie experimentieren.