Das Layout

Zweite Version schon anbei

Dies ist ein Flat-Design. Wir haben jedoch eine zweites Layout als Non-Flat-Version (in Blau-Tönen) für Sie anbei. Dabei kommen dann Farbverläufe, Box-und Textschatten zum Einsatz. Wie Sie diese zweite Version innerhalb weniger Sekunden aktivieren können (einfaches Ändern eines Linkverweises auf die CSS-Format-Datei) beschreiben wir Ihnen hier auf der Seite Quartus (index4.html). Es ist somit eine sehr einfache Möglichkeit das Design ohne großen Aufwand kurzfristig je nach Wohlfühlgefühl, Jahreszeit oder Mode zu wechseln. Klar können Sie auch andere Farben wählen als unsere Vorschläge.

Das Haupt-Menü

Die Pfeile im Menü sind übringes Font-Icons, welche hier mit dem Pseudoelement ":before" angelegt wurden. Vorteil: Mit nur einer Änderung in der CSS-Datei wechseln Sie bei Bedarf die Menü-Icons in allen HTML-Seiten auf einmal. Übrigens: Bei Mausberührung erfolgt ein Icon-Tausch. Das Hauptmenü (Home bis Sextus) haben wir bereits beispielhaft verlinkt.

Gallery Ipsum 01

Lightbox Info

Lightbox Picture Gallery

Auf den Seiten und Home (also direkt hier auf der Startseite) und Quartus haben wir für Sie eine Bilder-Gallerie eingebaut. Einmal mit Bildtext (Fotostrecke-Text) und eimal ohne. Die Anzahl der Bilder in der Gallery ist übrigens beliebig. Fahren Sie mit der Maus über die Links und klicken Sie ein Foto.

Lightbox auf allen Fotos

Sie könnten das Lightbox-Script auch auf alle Fotos anwenden, wenn Sie möchten. Die entsprechenden Änderungen dazu sind nur in der HTML-Datei zu tätigen, denn das Script ist ja bereits eingebaut. Mehr Infos dazu auch hier bei Quartus.

Die Technik

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. Außerdem wird beim Layout verstärkt mit Prozent-Angaben gearbeitet.

Responsive testen.

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.