Name der Homepage
 

Das Layout    

Die bunten Farben und insbesondere das bekannte Spiel-Motiv eignet sich für viele Zwecke, z.B. Kindergarten, Psychologie, Vereine, Seminare, Politik, Familien, Umwelt, Sport-Events , Forschungen Studien, Astrologie (die vier Elemente), Kultur-Veranstaltungen usw.

Man denkt unbewusst sofort an Begriffe wie Spiel, Spaß, Gewinnen, Glück, Taktik, "locker bleiben", "etwas zusammen unternehmen" "der Beste sein", "es gibt Wichtigeres" oder "sich durchsetzen", aber auch an Schicksal oder Vertrautheit und freudige, unbeschwerte Kindheit. Ist das Leben auch ein (Glücks)-Spiel?

Dieses Design heisst: "Life".Oben rechts wäre Platz für Ihr Logo. Darunter könnten Sie auch bei Bedarf das Foto mit der "Spiel-Figur" durch Ihr Foto ersetzen.


Die Technik    

Ganz unten sowie auch bei den Listen und Überschriften sehen Sie 4 kleine Kugel-Grafiken. Jede ist für sich geschnitten, so daß Sie Reihenfolge, Abstände, Farbreihe mit nur einer Farbe usw. ändern könnten und/oder auch die Kugeln an anderer Stelle innerhalb der Vorlage platzieren könnten.

Flexibles Layout:

Die Ausgangsversion (index.html) ist ja eine Pixelkonstruktion (hier 870 Pixel), 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:82%}. 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.

Seite ohne Frames. Anlegen von Links bzw. HTML-Seiten wie folgt: Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern.


Die Navigation    

Textlinks. Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen. Alle drei Menüs sind um einige Links erweiterbar. 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 miteigenem Aufzählungszeichen, verlinkt:
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
Mike Muster GmbH & Co. KG  •  Spezialstrasse 55  •  55234 Sampletown