Informationen

Layout

Dieses Template heißt 'Trendsetter Company'. Um das Menü zu öffen, klicken Sie bitte auf den sog. Hamburger Button (3 Striche, quer). Dieser Button ist ja mittlerweile als Menü-Symbol überall anerkannt. Hier ist das Besondere, das sich dieser Menü-Button nicht nur auf mobile, sprich kleinere Bildschirmauflösungen bezieht, sondern auch auf alle anderen Auflösungen, z.b. Desktop-PC. Das macht es spannend und dient natürlich auch Design-Zwecken.

Strukturierte Abschnitte

Hier auf der Startseite sehen Sie im Inhaltsbereich 5 Abschnitte, die farbig getrennt sind. Wie wir diese 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, erklären wir Ihnen hier auf der Seite 'Quartus' (index4.html)

Schon eingebaut

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.

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.

Foto Gallerie

Nam decore doctus placerat in, amet melius vis ut, vim latine equidem in. Per nostrum expetendis at. Ea prompta percipitur per. Veri semper ceteros per ei, facilisi perfecto rationibus ex his.

Responsive Webdesign

CSS-Media Queries

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 kein Javascript, mit Ausnahme der Lightbox-Gallery (Jquery). 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.

Technik

Einbau der Bilder

Bei den Fotos im Inhaltsbereich haben wir uns für folgendes System entschieden: Die Anordnung der Bilder in Spalten (GRID-System) wird mit der CSS-Technik 'display:Inline-Block' getätigt. 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. Das GRID-System beschreiben wir Ihnen hier auf 'Quartus' (index4.html)

Die Transparenz

Genau genommen muss man hier von einer Teil-Transparenz sprechen. Damit Text im Kopfbereich (hier der Homepagename) sowie auch im Fussbereich (Kontakt, Adresse, Links) auch mit dahinterliegendem Foto noch gut zu lesen ist, liegt über dem jeweiligen Foto noch ein Transparenz-Filter. Per CSS-rgba. D.h. es können auch Farbe der Transparenz sowie auch der Deckungsgrad verändert werden. Dies nur zur Info, falls Sie Ihre eigenen Fotos einsetzen wollen.