Home

Informationen

Layout

Dieses Template heißt 'Suisse Colour Style'.

Nicht nur für unsere schweizer Freunde. Aber so wie das Land ist auch die Flagge einzigartig, denn diese ist eigentlich quadratisch. Wir haben diese aber hier aus optischen Gründen im Verhältnis 2:3 angelegt, damit es zu den anderen Flaggen passt. Übrigens: Die schweizer Flagge ist genauso wie alle anderen in diesem Template vorkommenden Flaggen nur per CSS gestaltet, es werden also hierfür keine Grafiken verwendet. Auf den Foto oben liegt ein Schwarz-Filter per CSS-rgba, so daß die weiße Schrift auf dem Foto trotz des weißen Puderzuckers auf dem Kuchen gut zu lesen ist. Farbe und Deckungsgrad dieses Filters lassen sich ggfls. auch anders einstellen. Bei Mausberührung der Links im Hauptmenü lösen diese einen 'Wobble-Effekt' aus. Dieser Wobble-Effekt ist auch auf die Bilder im Text gelegt. Ganz am Fuss der Seite sehen Sie noch eine weitere Animation, die automatisch startet. Es ist eine Kugel als Schweizer Flagge, welche wir hin-und her rollen lassen.

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.