Herausforderung: Grundlegendes Layoutverständnis

Ausgangspunkt

Wir möchten, dass Sie diese Herausforderung in Ihrer lokalen Entwicklungsumgebung lösen; idealerweise möchten Sie das Beispiel in einem vollständigen Browserfenster betrachten, um sicherzustellen, dass die Layout-Funktionen wie erwartet funktionieren.

1. Erstellen Sie einen neuen Ordner auf Ihrem Computer mit dem Namen layout-challenge.

2. Erstellen Sie in diesem Ordner eine Datei namens index.html und fügen Sie den folgenden Inhalt ein:

3. Erstellen Sie in dem Ordner eine Datei namens style.css und fügen Sie den folgenden Inhalt ein:

4. Erstellen Sie in dem Ordner einen Unterordner namens images und speichern Sie die folgenden Bilddateien darin:

   • square1.jpg
   • square2.jpg
   • square3.jpg
   • square4.jpg
   • square5.jpg
   • square6.jpg

5. Speichern Sie Ihre Dateien und laden Sie index.html in einem Browser, um bereit zum Testen zu sein. Der Ausgangspunkt der Seite hat ein einfaches Styling, aber kein Layout und sollte ungefähr so aussehen:

   

Projekt-Briefing

Ihnen wurden einige rohe HTML-, grundlegende CSS- und Bilder bereitgestellt – jetzt müssen Sie ein Layout für das Design erstellen.

Die Aufgaben, die Sie erreichen müssen, sind:

1. Zeigen Sie die Navigationselemente in einer Reihe an, mit einem gleichmäßigen Abstand zwischen den Elementen und einem geringeren Abstand an beiden Enden der Reihe.
2. Gestalten Sie die Navigationsleiste so, dass sie sich normal mit dem Inhalt scrollt und dann am oberen Rand des Viewports anhaftet, wenn sie diesen erreicht.
3. Veranlassen Sie das "Feature"-Bild innerhalb des Artikels, dass Text rechts und unten um das Bild herum fließt, mit einem geeigneten Abstand zwischen dem Bild und dem Text.
4. Zeigen Sie die <article>- und <aside>-Elemente als zweispaltiges Layout an, wobei ersteres dreimal so breit ist wie letzteres. Die Spalten sollten eine flexible Größe haben, sodass, wenn das Browserfenster schmaler wird, die Spalten schmaler werden. Fügen Sie einen 20-Pixel-Abstand zwischen den beiden Spalten ein.
5. Die Fotografien sollten als zweispaltiges grid mit gleich großen Spalten und einem Abstand von 5 Pixeln zwischen den Bildern angezeigt werden.

Hinweise und Tipps

• Sie müssen das HTML nicht bearbeiten, um diese Herausforderung abzuschließen.
• Es gibt einige Möglichkeiten, einige der Aufgaben im Projekt-Briefing zu erreichen, und es gibt oft nicht den einen richtigen oder falschen Weg, Dinge zu tun. Probieren Sie einige verschiedene Ansätze aus und sehen Sie, was am besten funktioniert. Machen Sie sich Notizen, während Sie experimentieren.

Beispiel

Der folgende Screenshot zeigt ein Beispiel, wie das fertige Layout für das Design aussehen sollte:

• Zurück
• Übersicht: CSS-Layout
• Weiter