Das Layout

Dieses Design heisst: Tokio Geisha.

Eine japanische Geisha, fotografiert per Schnappschuß auf den Straßen der Weltstadt Tokio.
Oben links könnten Sie Ihr Logo platzieren, also unser Beispiel-Logo ersetzen. Wenn nicht, auch kein Problem, den das Layout sieht auch schick aus, wenn Sie das Beispiel-Logo so belassen oder aber es entfernen.

Die Technik

Flexible Einstellungsmöglichkeiten haben wir für Sie ausgearbeitet:

Die Ausgangsversion (index.html) ist ja eine Pixelkonstruktion (hier 870 Pixel breit), wobei dieser Pixelwert ja veränderbar ist in einen anderen Pixelwert. Einzustellen in der CSS-Datei bei #breite {width:870px}

Wer mag, wandelt das Layout in eine Prozentkonstruktion um. Und zwar wird in der CSS-Datei bei #breite statt des Pixelwertes ein Prozenwert eingetragen. Zum Beispiel: #breite {width:80%}. Spielen Sie einfach mal mit verschiedenen Prozentwerten. Solche eine Prozentkonstruktion testen Sie am besten bei verschiedenen Bildschirmauflösungen, da hier ja eine Anpassung per Prozent an die Breite des Monitors erfolgt. Und es gibt ja z.B. untersch. Monitorgrössen wie 1024x768 oder 1280x960 oder weitere. Eine Prozentkonstruktion bietet sich eher für grössere Monitore an, denn dann wird der Bildschirm mehr ausgefüllt (je nach Prozentwert, den Sie einstellen). Der Vorteil einer Pixelkonstruktion ist aber: Sie können das Design sicherer anpassen, denn das Seitenverhältniss innerhalb der Vorlage bleibt ja immmer gleich.

 !  Noch eine Anmerkung zum Kopfbereich: Sehen (klicken) Sie bitte hier eine Variation (Foto mit kräftigeren Farben sowie ohne das Logo oben links) als Beispiel für die Anwendungsmöglichkeiten.

Die Navigation

Textlinks. Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen. Das Menü oben rechts mit den 5 Buttons haben wir für Sie beispielhaft verlinkt. Klicken Sie nacheinander auf die 5 Buttons dort und Sie werden sehen, das der jeweils angewählte Link konstant in anderer Farbe sichtbar bleibt (hier der Button "home"). Bei diesem Hauptmenü haben wir den Mouseover-Button auf Schwarz gesetzt und den konstanten Button auf Rot. Die umgekehrte Farbwahl - Rot auf "Mouseover" und Schwarz auf "Konstant" sieht aber fast noch schicker aus; probieren Sie es doch vielleicht mal aus.

Die allgemeinen Links (Links im Text) sehen zur Zeit aus wie nachstehend: Um den Mouseover-Effekt anzuschauen, fahren Sie mit der Maus über den Link: Beispiel-Link

Dead Text

Beispiel Füll Text. Fusce bibendum pretium ante. Pellentesque sed enim nec odio laoreet congue. Nullam aliquam rhoncus libero. Morbi vitae sem. Sed quis lorem. Curabitur suscipit vehicula est. Donec venenatis. Durch die Einrückung lockern Listen auch jeden Text auf. Nachfolgend sehen Sie zwei Beispiele für Listen. Listen sind textliche Aufzählungen. Dies sind nur Beispiele, die Ihnen als Anregung gelten sollen, natürlich können Sie jede der zwei Listen verlinken oder auch nicht verlinken. Jede der Listen können Sie natürlich auch um weitere Listenpunkte nach unten erweitern bzw. verkürzen.

Liste mit Aufzählungszeichen "Circle", verlinkt:

• Sed
• Condimentum
• Bibendum
• Semper

Maecenas a nulla. Maecenas nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris eu massa. In semper. Morbi vitae nisl at felis placerat porttitor. Morbi molestie. Cras ligula sapien, consequat sed, scelerisque ut, pulvinar vel, sem. In vulputate gravida orci.

Liste mit eigenem Aufzählungszeichen, nicht verlinkt:

• Sed
• Condimentum
• Bibendum
• Semper

Mauris eu massa. In semper. Morbi vitae nisl at felis placerat porttitor. Morbi molestie. Cras ligula sapien, consequat sed, scelerisque ut, pulvinar vel, sem. In vulputate gravida orci.