Informationen

Layout

Dieses Template heißt 'Restaurant - Fresh Food For You'.

Der sehr dunkle Grau-Ton im Inhaltsbereich bringt die Fotos dort gut zum Leuchten. Aucht die Schrift ist entspannt zu lesen. Denn es ist eben ein weicher, warmer Kontrast im Gegensatz z.B. zu einem hartem Kontrast mit rein schwarzem Hintergrund und rein weißem Text. 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-Galerie mal auf jedem Foto 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 1 von 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.

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

Eine gute Möglichkeit ein Responsive-Layout in verschiedene Bildschirm-Auflösungen zu testen, bieten die Browser-interne Tools, denn nicht jeder hat ja diverse Smartphones und Tablets zu Hause. Hier auf der Seite index1.html (Primus) zeigen wir dieses anhand des Browsers 'Firefox'





Technik

Der Slogan

Den Slogan sehen Sie oben im Kopfbereich, dort rechts unten als Dreieck eingebaut. Wie funktioniert das? Nun, das Feld wird per CSS-position (relative/absolute) mit einer eigenen Ebene über die anderen Felder im Kopfbreich gelegt und so aus dem normalem Elementfluß herausgenommen. Übrigens: Der Slogan-Text wechselt auf jeder Seite. Klar ist dort nur wenig Platz und für viel Text ist es nicht gedacht, aber auch so bringt man wirkungsvoll und optisch interessant dem Kunden die eigene Philosophie näher.

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