Galerie: Projekt

Die Seite «Galerie» soll erstellt werden. Hinzu kommt ein neues Gestaltungselement, eine Bildergalerie, wobei zwar das ganze Wissen dafür schon vorhanden ist.

Ziel(e)

• Ich kann eine Aufgabe nach Aufgabenstellung lösen.

• Ich komme selbständig zu den notwendigen Informationen.

Aufgabe

Passe die Seite «Galerie» so an, dass Sie wie auf dem Screenshot daherkommt: Titel, Untertitel und Texte anpassen / schreiben.

Verlinke das Wort «Facebook» auf Facebook, wobei sich der Link in einem neuen Tab öffnen soll.

Suche anschliessend im Internet vier Bilder, die zum Thema «Gemeinde» passen. Beachte dabei das Gelernte betreffend rechtliche Aspekte, Benennung, Grösse, Format. Speichere die Bilder am korrekten Ort im Projektordner ab.

Füge nach dem Titel «Bilder der Gemeinde» die Bildergalerie ein – aussehen gemäss Screenshot. Skizziere zuerst von Hand wie du die Bildergalerie aufbauen willst. Tipp: Arbeite mit verschiedenen DIVs!

Folgende Anforderungen gibt es zusätzlich:

• Die Bildergalerie soll sich über die ganze Seite erstrecken.

• Platziere Bild & Beschreibung in einer «Box». Die Box soll eine Breite von 24% haben und rundherum einen Abstand von 5px,

• Die Bilder sollen alle gleich gross sein und nicht über die «Box» hinausragen.

• Beim Klick auf ein Bild (und nur Bild!), soll das Bild in Originalgrösse in einem eigenen Tab geöffnet werden!

• Die Beschreibung soll zentriert sein, und rundherum einen Abstand von 15px.

Nach dieser Aufgabe ist das Projekt «Gemeinde XY» aus der Entwicklungs-Sicht abgeschlossen und deine kleine erste eigene Website steht. Gratuliere! Später schauen wir dann noch an, wie man die Website testet und veröffentlicht.

Musterlösung