Informationen

Template

Dieses Template heißt ' Into The Blue '. Auf ins Blaue. Lassen Sie die Sorgen hinter sich und machen Sie sich einen schönen Tag. Machen Sie mal Blau. Kennen Sie noch den Film "Ferris macht blau"? Hier geht es mit einem geborgten Ferrari 250 GT Spyder California auf in die weite Welt um der Sehnsucht nach Freiheit nachzugeben. Wikipedia

Die Seiten 'Home' (diese Seite) bis Sextus, sind bereits als Beispiel verlinkt. Bitte klicken Sie diese, um zusätzliche Infos zu erfahren und zu sehen wie die Unterseiten angelegt sind.

Jede Seite variert

Auf jeder Seite ist ein anderes Bild im oberen Bereich zu sehen. Das schafft Abwechslung und Struktur. Zum Beispiel hier auf Primus, Secundus oder auf Tertius.

 

 
Wir sind startklar! Hoch mit dem Drehmoment.

Lorem ipsum dolor sit amet. Assum invidunt perfecto vim et, nam errem nominavi tincidunt ei. Sit munere bonorum at, magna lorem no his. Aeque detracto consequat sit at, eu mel ornatus eloquentiam, eu eos diam putent salutandi. Est gloriatur pertinacia adolescens ad, duis nobis in mel, ex duo malorum tincidunt democritum.

Weiter

 

Icon-Font mit neuer Version 5

Font Aweseome hat im Dezember 2017 die neue Version 5 herausgebracht. Da die Icons neu überarbeitet und strukturiert wurden, gibt es auch einige Änderungen. Lesen Sie bitte hier unsere Infos dazu auf Quartus (index4.html)

Das Menü

Die Links im Hauptemenü erhalten ein Font-Icon als Vorzeichen, welches bei Mausberührung animiert ist. Das Menü schaltet bei kleinen Auflösungen zu einem Toggle-Menü (funktioniert ganz ohne Javascript) um, d.h. es gibt einen Menü-Schalter AN-AUS.

 

 

Die Technik

Lightbox

Wir haben in diesem Template die beliebte 'Lightbox' Foto-Gallerie eingebaut. Und zwar finden Sie die Gallery auf gleich auf dieser Seite (home - index.html) mit den 12 Fotos effektvoll bis fast an den Rand der Seite gezogen. Nach dem Schema könnten sie auch mehr oder weniger Fotos dafür verwenden. Auf den Unterseiten haben wir auch jeweils eine unterschiedliche Anzahl von Fotos im Inhaltsbereich eingebaut, aber hier als Variation ohne die Lightbox-Gallery sowie auch ganz anders eingerückt. Gerne können Sie natürlich die Lightbox-Gallery auch auf die Fotos der Unterseiten legen, wenn Sie möchten.

 

 
Was macht die Lightbox?

Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Sind mehrere Fotos in einer Gruppe zusammengefaßt, hat man folgendes tolle Feature: Fahren Sie mit der Maus über die rechte oder linke Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt um die ganze Bildkollektion durchzusehen.

 

Die Original-Lightbox

Hier einmal der Link zur originalen Lightbox-Gallery . Dort finden Sie bei Bedarf auch unter 'Options' noch verschiedene Möglichkeiten der Einstellung. Anhand der guten, weil einfachen Beispiele (Examples), erkennen Sie sehr schnell das Prinzip der Gallerie. Außerdem können Sie somit auch besser nachvollziehen, wie wir die Fotos bei unserer Gallerie responsive angelegt haben, denn diese responsive Anordnung ist ja nicht automatisch im genannten Script der Lightbox enthalten.

Einbau der Bilder

Bei den Fotos im Inhaltsbereich haben wir uns für die CSS-Technik mit 'display:inline-block' sowie 'display:table' entschieden. Wir beschreiben es Ihnen hier in einem Tutorial auf der Seite Quartus (index4.html)

 

Responsive Webdesign

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

Hier auf der Seite Primus (index1.html) 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.
© 2029 Homepage Into The Blue