Bootstraps Grid-System und ein erstes CEEC-Redesign

Das CEEC-Projekt (Codices Electronici Ecclesiae Coloniensis) möchte seinen Webauftritt http://www.ceec.uni-koeln.de gerne zeitgemäß aufbereiten und bittet uns, die folgende angestaubte Startseite durch eine Übersichtsseite über die 15 gefragtesten Digitalisate des Projektes zu ersetzen.

CEEC-Startseite

Unsere ausgebildete Graphikdesignerin unterbreitet den folgenden Gestaltungsvorschlag, der im Folgenden besprochen und umgesetzt wird:

Vorgeschlagenes CEEC-ReDesign

Aufgabe 0 – Vorbereitung

Laden Sie sich bitte das Startpaket ceec-redesign-start herunter, in dem sich die aktuelle Bootstrap-Version (Ordner css, fonts und js), die zu bearbeitende Startseite index.htm sowie Bilder der Digitalisate finden.

Aufgabe 1 – Navigationsleiste I

Ergänzen Sie die Seite index.htm um eine horizontale Navigationsleiste, die am oberen Seitenrand statisch platziert ist. Vervollständigen Sie die Navigationsleiste um den Namen des Projektes sowie um Navigationselemente, über die sich die einzelnen Digitalisate erreichen lassen:

Navigationsleiste CEEC

Aufgabe 2 – Bildausgabe im Grid

Stellen Sie alle Bilder, die sich im Ordner img/small finden, unter Verwendung von Bootstraps GridSystem auf der Startseite dar. Lassen Sie in den ersten drei Zeilen jeweils vier Bilder nebeinander angezeigen und in der letzten Zeile drei Bilder nebeneinander darstellen.

Tipp:

  • Bootstraps GridSystem ist erläutert unter http://getbootstrap.com/css/#grid. Eine gute Einführung in die Arbeit mit dem Grid findet sich unter http://www.helloerik.com/bootstrap-3-grid-introduction.
  • Statten Sie die einzelnen Bilder mit der CSS-Klasse img-responsive aus, um die Bilder dynamisch skalieren zu lassen.
  • Um die Bilder zu zentrieren, könnten die folgenden CSS-Anweisungen sinnvoll sein:
    width: 375px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #777;
    cursor: pointer;
  • Experimentieren Sie während Ihrer Umsetzung immer wieder mit der Seitenbreite, um die Skalierung der Bilder und den Zeilenumbruch zu testen.

Aufgabe 3 – Navigationsleiste II

Machen Sie’s möglich, dass sich die einzelnen Bilder über die Navigationselemente der Navigationsleiste erreichen lassen.

Aufgabe 4 – Modal / Dialogfenster

Implementieren Sie bitte die folgende Funktionalität: Wird mit der linken Mousetaste auf ein Bild geklickt, so öffnet sich ein Dialogfenster, in dem sowohl der Name des Digitalisates – zu finden in der Datei bildinformationen im Ordner img – als auch die hochaufgelöste Version des Bildes (Ordner img/big) dargestellt wird:

Modaler Dialog

Tipp: Wie sich Dialogfenster erstellen, mit Inhalt füllen und anzeigen lassen, lässt sich sehr gut über die Bootstrap-Referenz unter http://getbootstrap.com/javascript/#modals nachvollziehen.

Aufgabe 5 – Refactoring (für Profis)

Gehen Sie Ihr HTML-Dokument durch und überlegen Sie, wo und wie sich redundantes Markup reduzieren ließe. Implementieren Sie eine JavaScript-Funktion, über die sich das Markup des HTML-Dokumentes generieren lässt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.