Help us test MDN's new front-end: https://discourse.mozilla.org/t/help-us-test-mdns-new-react-front-end-beta/42593

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.

Vorbereitungen: Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on Document and website structure.
Ziel:

Das Testen des eigenen Wissens über Strukturen von Internetseiten und darüber, wie Layout Designs in Markup dargestellt werden.

Startpunkt

Um diese Selbsteinschätzung zu starten, sollten Sie die ZIP-Datei mit allen Startinhalten herunterladen. Die ZIP-Datei enthält:

  • Den HTML-Code, der mit Markup strukturiert werden soll
  • CSS, um Ihr Markup zu gestalten
  • Bilder, die auf der Seite verwendet werden.

Erstellen Sie das Beispiel lokal auf Ihrem Computer oder nutzen Sie alternativ eine Seite wieJSBin oder Thimble , um den Test zu absolvieren.

Projekt: Kurzbeschreibung

Ihre Aufgabe in diesem Projekt ist es, den Inhalt einer Bird Watching-Homepage als Grundlage zu verwenden und ihm Struktur zu geben, sodass ein Page Layout darauf angewendet werden kann. Dazu werden benötigt:

  • A header spanning the full width of the site containing the main title for the page, the site logo, and the navigation menu. The title and logo appear side by side once styling is applied, and the navigation appears below those two items.
  • A main content area containing two columns — a main block to contain the welcome text, and a sidebar to contain image thumbnails.
  • Ein Footer, der Copyright-Informationen und Credits enthält.

Sie müssen einen passenden Wrapper hinzufügen für:

  • Den Header
  • Das Navigationsmenü
  • Den Main Content
  • Den Begrüßungstext
  • Die Bilder-Sidebar
  • Den Footer

Sie sollten außerdem:

  • das vorgegebene CSS auf die Seite anwenden, indem Sie ein anderes <link>-Element direkt unter dem bereits existierenden Element am Anfang ergänzen.

Hinweise und Tipps

  • Use the W3C Nu HTML Checker to catch unintended mistakes in your HTML, CSS, and SVG — mistakes you might have otherwise missed — so that you can fix them.
  • You don't need to know any CSS to do this assessment; you just need to put the provided CSS inside an HTML element.
  • The provided CSS is designed so that when the correct structural elements are added to the markup, they will appear green in the rendered page.
  • If you are getting stuck and can't envisage what elements to put where, it often helps to draw out a simple block diagram of the page layout, and write on the elements you think should wrap each block.

Beispiel

Der nachfolgende Screenshot zeigt beispielhaft, wie die Homepage nach der Auszeichnung mittels HTML aussehen könnte.

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

Einschätzung

Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können. Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im Disskussionsthread zu dieser Übung nachfragen oder im #mdn IRC Channel auf Mozilla IRC. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!

In this module

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: DiscW0rld
Zuletzt aktualisiert von: DiscW0rld,