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.



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

Diese Responsive-Vorlage verwendet keinerlei Javascript.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.

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.



Technik

Einbau der Bilder

Bei den Fotos im Inhaltsbereich haben wir uns folgendes System entschieden, sehen Sie bitte auf den einzelnen Seiten unseren Vorschlag für die Anordnung der Bilder im Inhaltsbereich: Nämlich ein Bild alleine stehend sowie zwei Bilder und drei Bilder nebeneinander stehend sowie auch untereinanderstehend. Letzteres heisß: Es sind somit auch Kombinationen möglich wie 2x2, 2x3, 2x4 usw. genauso wie 3x3, 3x4, 3x5 usw. Dazu wurde die CSS-Technik 'display:Inline-Block' verwendet.

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.

Adresse

  • Fa. Michael, Muster & Sohn Company
  • 12345 Frankenburg
  • Am schönen Großmarkt 18

Kontakt

  • Phone: (0000) 2468246
  • Mobile : (+49) 0000-1234567
  • Fax: (0000) 7654321-4141
© 2025 | Fresh Food For You