Informationen

Layout

Dieses Template heißt 'Sonnenuntergang - Flat Design'.

Flat-Design steht für eine Reduktion der Gestaltung auf das Wesentliche. Hierzu wird auf jegliche Tiefe verzichtet, d.h. es gibt keine Farbverläufe, Verzierungen, Schatten, Texturen oder Rahmen. Getreu dem Motto: "Weiniger ist mehr". Es gilt also eine Dreidimensionalität zu vermeiden. Hier haben wir auch das Menü etwas reduziert. Es öffnet sich erst bei Klick auf den sog. Hamburger Button (3 Striche, quer). Dieser Button ist ja mittlerweile als Menü-Symbol überall anerkannt.

Lightbox Picture Gallery

Wir haben in diesem Template die bekannte, beliebte und bewährte 'Lightbox' Foto-Gallerie eingebaut. Klicken Sie bitte dazu auf die Fotos.

So funktioniert diese Foto-Schau: Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild X von Anzahl X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten. Zum Schließen des Fenster klickt man auf das 'X' oder irgendwo ausserhalb des Fensters.

Bereits verlinkt

Klicken Sie auf die Links im Menü (Primus bis Sextus) und Sie sehen wie die Seiten verlinkt sind und erfahren noch einige Informationen.

Technik

Einbau der Bilder

Bei den Fotos im Inhaltsbereich haben wir uns folgendes System entschieden, sehen Sie bitte auf den einzelnen Seiten unseren Vorschlag für die Anordnung der Bilder im Inhaltsbereich. Dazu wurde die CSS-Technik 'display:Inline-Block' verwendet. Nämlich ein Bild alleine stehend sowie zwei Bilder, drei Bilder und vier Bilder nebeneinander stehend sowie auch untereinanderstehend. Klar können Sie das auch erweitern, nur als Beispiel wäre auch ein Bildblock mit 20 Bildern möglich, z.B. 4 nebeneinander in 5 Reihen untereinander.

Text unterhalb der Bilder

Teilweise haben wir unter den Bildern noch Text angelegt, am Ende des Bildtextes folgt dann ein Weiter-Link. Das eignet sich inbesondere natürlich gut für eine Startseite mit wechselnden Inhalten. Somit können Sie selbst entscheiden, ob Sie dieses verwenden möchten oder nicht, denn mit Zusatztext ist es ja doch noch eine Steigerung bezüglich der normalen responsiven Anordnung von Bildern. Auf jeden Fall können Sie im Quellcode gut den Unterschied ersehen, wir haben auch entsprechende Kommentare als Hinweis in den HTML und CSS-Dateien angelegt.

Responsive Webdesign

Responsive Webdesign (RWD) ermöglicht eine Anpassung bzw. Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Dazu werden per CSS-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Somit kann man auch auf das Hoch- oder Querformat eines mobilen Gerätes reagieren. Außerdem wird beim Layout verstärkt mit Angaben in Prozent gearbeitet.

So testen Sie

Diese Responsive-Vorlage verwendet keinerlei Javascript.Hier auf der Seite index1.html (Primus) nennen wir Ihnen gute Möglichkeiten ein Responsive-Layout in verschiedenen Auflösungen zu testen, denn nicht jeder hat ja diverse Smartphones und Tablets zu Hause.