Home

Informationen

Layout

Dieses Template heißt 'We Take Care'.

Geometrische Formen: Das Menü besteht aus einem Rechteck, einem Kreis, zwei Halbkreisen und einem Dreieck. Die Links in diesem Menü sind vertikal angeordnet. Bei Mausberührung dreht sich das Menü nach rechts in die vertikale Lage. Ein weiteres Dreieck sehen Sie am Fuss der Seite, es dient der Optik, hat aber auch die Funktion, das bei Klick an den Anfang der Seite gesprungen wird. Ein Highlight ist hier die Pendel-Animation im oberen Bereich. Mit der Anweisung 'overflow:hidden' wird erreicht, das die Pendel-Bewegung nur innerhalb der Box abläuft, das Abschneiden des Textes beim Erreichen der linken und rechten Kante der Box ist also hier designtechnisch bewußt gewählt. Der Text (Slogan) bei der Pendel-Animation ist übrigens auf jeder der einzelnen Seiten ein anderer. Dies soll nur ein Beispiel für die Möglichkeiten sein, Sie können gerne auch auf jeder Seite den selben Slogan erscheinen lassen. Wir wünschen viel Spaß mit diesem Template.

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.

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.

 

Die Bilder

Die Fotos im Inhaltsbereich

Hierfür haben wir drei Beispiele angelegt. Einmal ist das Bild links platziert und der Text fließt rechts herum, ein anderes Mal ist das Bild rechts platziert und der Text fließt links herum. Als drittes ist das Bild zentriert und ohne Textfluß arrangiert (Hier gibt es als Vorschlag die Varianten: Ein Bild alleine stehend sowie zwei Bilder und drei Bilder nebeneinander stehend).

Das Foto im oberen Bereich

Das Foto beim Hauptmenü ist als CSS Hintergrundgrafik angelegt.