About

About. Dies ist ein farbenfrohes, kraftvolles und frisches Template. Die Frische kommt insbesondere durch die Blau und Orange-Töne, welche natürlich Gedanken an Sommer bzw. Sonne und Meer aufkommen lassen. Dieses Template funktioniert bezgl. der 3 Fotos im oberen Bereich sowohl mit neutralen Farben, als auch mit sehr farbigen Fotos, als Beispiel in kraftvollem Orange, hier zu sehen auf Sextus (index6.html). Nachstehend Beispieltext per Lorem Ipsum, dies ist ja ein Pseudo-Latein um Beispieltext darzustellen.

Per vidit dicant ex. Dicta viderer complectitur id per, pro an unum omittam. Esse inani laboramus ad usu, quo id magna clita offendit, pro no lucilius assentior. Vide efficiendi no mel, an nominavi hendrerit pri.

Causae aliquam evertitur mel ei, eros prompta argumentum ad mei, maiorum corrumpit efficiantur ne cum. No vel purto mutat mazim, voluptua eloquentiam duo ex. At solet perfecto dissentiunt cum. Populo suscipit intellegat no nec. Assum eligendi quo at.

Informationen

Template

Dieses Template heißt ' Kyaneos Auriflorus Officina '. Die sechs 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.

Das Menü

Unser Menü ist responsive und nur per CSS erstellt. Es funktioniert ganz ohne Javascript und ist außerdem 'touch-friendly', d.h. es läuft auch auf mobilen Geräten.

Bei mobilen Auflösungen erscheint nur der sog. Hamburger Menü-Button (3 Striche, quer als Menü-Symbol). Um das Menü dort zu öffen, klicken Sie bitte auf den Hamburger Menü-Button. Die 6 Links werden bei mobilen Auflösungen sanft eingeblendet und sind sowohl horizontal als auch vertikal zentriert im Logo-Bereich angeordnet.

Die Technik

Einbau der Bilder

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

Strukturierte Abschnitte

Hier auf der Startseite sehen Sie im Inhaltsbereich mehrere Abschnitte, die farbig getrennt sind. Wie wir die Abschnitte angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, z.B. den ganzen Inhalt in nur einen einzigen Abschnitt packen können (so wie wir es auf den Unterseiten auch getan haben, erklären wir Ihnen hier auf der Seite Quartus (index4.html)

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. Sie finden die Gallery auf gleich auf dieser Seite Home (index.html) und zwar vorstehend bei #Gallery 1 und #Gallery 2

Responsive Webdesign

Weisse Wolken
Grüne Wiese
Lecker Kuchen


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 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.

Last But Not Least

Bilder im Kopfbereich

Auf jeder Seite andere Bilder im Kopfbereich. Gerne....OK...geht auch. Schauen Sie für das Beispiel auf der Seite Sextus (index6.html) vorbei.

Hintergrund Kacheln

Die Kachelmuster im Hintergrund sind alle nur per CSS angelegt. Sie funktionieren also ohne jegliche Grafik. Natürlich lassen sich stattdessen auch Hintergründe per richtiger Grafik einfügen oder auch eine einfache Farbe per HTML.

Kontakt

© 2025 | Kyaneos Auriflorus Officina