Herausforderung: Eine Seite mit Inhalten strukturieren
Das Strukturieren einer Seite mit Inhalten, die bereit ist, mit CSS gestaltet zu werden, ist eine sehr wichtige Fähigkeit, die Sie beherrschen sollten. In dieser Herausforderung wird Ihre Fähigkeit getestet, darüber nachzudenken, wie eine Seite aussehen könnte, und geeignete semantische Strukturen auszuwählen, auf denen ein Layout aufgebaut werden kann.
Ausgangspunkt
Um diese Herausforderung zu starten, sollten Sie sich die Zip-Datei mit allen Startressourcen herunterladen.
Die Zip-Datei enthält:
- Das HTML, dem Sie strukturelles Markup hinzufügen müssen.
- CSS, um Ihr Markup zu gestalten.
- Bilder, die auf der Seite verwendet werden.
Erstellen Sie das Beispiel auf Ihrem lokalen Computer oder verwenden Sie alternativ einen Online-Editor wie CodePen oder JSFiddle.
Hinweis: Wenn Sie nicht weiterkommen, können Sie sich in einem unserer Kommunikationskanäle an uns wenden.
Projektbeschreibung
In diesem Projekt besteht Ihre Aufgabe darin, die Inhalte für die Startseite einer Vogelbeobachtungs-Website zu nehmen und strukturelle Elemente hinzuzufügen, damit ein Seitenlayout darauf angewendet werden kann. Es muss Folgendes enthalten:
- Eine Kopfzeile, die die gesamte Breite der Website umfasst und den Haupttitel der Seite, das Logo der Website und das Navigationsmenü enthält. Der Titel und das Logo erscheinen nebeneinander, sobald die Gestaltung angewendet wird, und die Navigation erscheint unter diesen beiden Elementen.
- Ein Hauptinhaltsbereich mit zwei Spalten — einem Hauptblock für den Begrüßungstext und einer Seitenleiste für Bildminiaturen.
- Eine Fußzeile mit Copyright-Informationen und Quellenangaben.
Sie müssen einen geeigneten Wrapper hinzufügen für:
- Die Kopfzeile
- Das Navigationsmenü
- Den Hauptinhalt
- Den Begrüßungstext
- Die Bildseitenleiste
- Die Fußzeile
Sie sollten auch:
- Das bereitgestellte CSS auf die Seite anwenden, indem Sie ein weiteres
<link>-Element direkt unter dem bestehenden zu Beginn hinzufügen.
Hinweise und Tipps
- Verwenden Sie den W3C Nu HTML Checker, um unbeabsichtigte Fehler in Ihrem HTML, CSS und SVG zu finden — Fehler, die Sie möglicherweise übersehen hätten — damit Sie sie beheben können.
- Sie müssen kein CSS kennen, um diese Herausforderung zu meistern; Sie müssen lediglich das bereitgestellte CSS in ein HTML-Element einfügen.
- Das bereitgestellte CSS ist so gestaltet, dass bei Hinzufügen der korrekten Strukturelemente zum Markup diese im gerenderten Seitengrün erscheinen.
- Wenn Sie Schwierigkeiten haben und nicht sehen können, welche Elemente wo hinzugefügt werden sollen, zeichnen Sie ein einfaches Blockdiagramm des Seitenlayouts und schreiben Sie darauf, welche Elemente Ihrer Meinung nach jeden Block umschließen sollten. Dies ist äußerst hilfreich.
