Mozilla Splash-Seite

Um mit dieser Bewertung zu beginnen, müssen Sie das HTML und alle verfügbaren Bilder im mdn-splash-page-start Verzeichnis auf GitHub abrufen. Speichern Sie den Inhalt von index.html in einer Datei namens index.html auf Ihrem lokalen Laufwerk, in einem neuen Verzeichnis. Speichern Sie dann pattern.png im selben Verzeichnis (Klicken Sie mit der rechten Maustaste auf das Bild, um eine Option zum Speichern zu erhalten.)

Greifen Sie auf die verschiedenen Bilder im originals Verzeichnis zu und speichern Sie sie auf die gleiche Weise; Sie werden sie vorerst in einem anderen Verzeichnis speichern wollen, da Sie (einige von) ihnen mithilfe eines Grafikeditors bearbeiten müssen, bevor sie einsatzbereit sind.

Alternativ können Sie einen Online-Editor wie CodePen, JSFiddle, oder Glitch verwenden.

In dieser Bewertung präsentieren wir Ihnen eine größtenteils fertige Mozilla Splash-Seite, die darauf abzielt, etwas Nettes und Interessantes darüber zu sagen, wofür Mozilla steht, und einige Links zu weiteren Ressourcen bereitzustellen. Leider wurden noch keine Bilder oder Videos hinzugefügt — das ist Ihre Aufgabe! Sie müssen einige Medien hinzufügen, um die Seite schön aussehen zu lassen und mehr Sinn zu geben. Die folgenden Unterabschnitte beschreiben, was Sie tun müssen:

Erstellen Sie mit Ihrem bevorzugten Bildbearbeitungsprogramm eine 400px breite und eine 120px breite Version von:

• firefox_logo-only_RGB.png
• firefox-addons.jpg
• mozilla-dinosaur-head.png

Nennen Sie sie sinnvoll, z.B. firefox-logo400.png und firefox-logo120.png.

Zusammen mit mdn.svg werden diese Bilder Ihre Symbole sein, um zu weiteren Ressourcen im Bereich further-info zu verlinken. Sie werden auch das Firefox-Logo in die Kopfzeile der Website verlinken. Speichern Sie Kopien aller dieser Dateien im gleichen Verzeichnis wie index.html.

Erstellen Sie als Nächstes eine 1200px breite Landschaftsversion von red-panda.jpg und eine 600px breite Porträtversion, die den Panda in einer Nahaufnahme zeigt. Nennen Sie auch diese sinnvoll, damit Sie sie leicht identifizieren können. Speichern Sie eine Kopie von beiden im gleichen Verzeichnis wie index.html.

Fügen Sie innerhalb des <header> Elements ein <img> Element hinzu, das die kleine Version des Firefox-Logos in der Kopfzeile einbettet.

Fügen Sie direkt innerhalb des <article> Elements (direkt unter dem öffnenden Tag) das auf YouTube verfügbare Video unter https://www.youtube.com/watch?v=ojcNcvb1olg ein, indem Sie die entsprechenden YouTube-Tools verwenden, um den Code zu generieren. Das Video sollte 400px breit sein.

Innerhalb des <div> mit der Klasse further-info finden Sie vier <a> Elemente — jedes verlinkt auf eine interessante Mozilla-bezogene Seite. Um diesen Abschnitt abzuschließen, müssen Sie ein <img> Element in jedes einfügen, das geeignete src, alt, srcset und sizes Attribute enthält.

In jedem Fall (außer einem — welches ist von Natur aus responsiv?) möchten wir, dass der Browser die 120px breite Version bereitstellt, wenn die Viewport-Breite 500px oder weniger beträgt, oder die 400px breite Version ansonsten.

Stellen Sie sicher, dass Sie die richtigen Bilder mit den richtigen Links abgleichen!

Innerhalb des <div> mit der Klasse red-panda möchten wir ein <picture> Element einfügen, das das kleine Porträtbild des Pandas bereitstellt, wenn der Viewport 600px oder weniger breit ist, und das große Landschaftsbild ansonsten.

• Sie können den W3C Nu HTML Checker verwenden, um Fehler in Ihrem HTML zu finden.
• Sie müssen kein CSS kennen, um diese Bewertung zu absolvieren; Sie benötigen nur die bereitgestellte HTML-Datei. Der CSS-Teil ist bereits für Sie erledigt.
• Das bereitgestellte HTML (einschließlich der CSS-Styling) erledigt bereits den Großteil der Arbeit für Sie, sodass Sie sich nur auf das Einbetten von Medien konzentrieren können.

Die folgenden Screenshots zeigen, wie die Splash-Seite nach korrektem Markup auf einem breiten und einem schmalen Bildschirm aussehen sollte.

• Zurück
• Übersicht: Multimedia und Einbettung