Startseite
Beispiel einer absolut farbcodierten Seite.
Nun mögen sie denken, dass die Kreativität hier seltsame Blüten getrieben hat.
Sinn dieser Seitenvolage ist aber lediglich die Demonstartion einer farblichen, mental wahrgenommenen Orientierungshilfe. Zugegeben - ein wenig auf die Spitze getrieben. Die Frage
"wo bin ich gerade"
stellt sich für den Seitenbesucher nicht mehr. Der Betrachter fühlt sich "gut geführt". Das funktioniert auch dann noch wenn sie nicht so tief in den Farbeimer greifen wie ich hier.
Der Schlüssel: Ich verwende für die Navigation links, für Seitenrand und -kopf und für die Grafik des Seitenhintergrundes Farbnuancen, die zu den Farben der Menübuttons im waagerechten Hauptmenü oben einen Bezug herleiten.
Anpassen
Sie können diese Beispiel als Zip herunterladen und anpassen. Die Grafiken habe ich selbst entwickelt und dürfen benutzt werden. Das "© Jupp Zupp" im Fuß der Seiten ist lediglich zur Demo eingebunden! Viel Spaß beim Basteln. Ein wenig Kreativität und die Seite bekommt ihren pers. Anstrich.
> optionale Menüdatei-Oben anzeigen? > originale Menüdatei-Oben anzeigen
In der optional einsetzbaren Menüdatei-Oben (titel02.htm) demonstriere ich, wie man Text über einer Hintergundgrafik positioniert. Lediglich der Farbverlauf ist eine Grafik. Der Text wird mit CSS und HTML eingetragen, lässt sich also ohne Grafikprogramm anpassen.
Extras
In diesem Beispiel sind einige Funktionen enthalten, die erst mal nicht erkennbar sind:
Die Hintergrundgrafik der Seiten ist den Farben der Menüs angepasst. Das macht notwendig, dass die Seiten der einzelnen Rubriken (die jeweils in einem eigenen Unterordner stehen) auch jedesmal eine eigene CSS-Datei haben. Denn dort sind ja die Anweisungen für die Grafik notiert. Die Hintergrundgrafik ist unten rechts fixirt und bleibt beim Scrollen an ihrer Positioin.
Werden Unterseiten nicht im Frameset angezeigt (Goggle verweist schon mal auf Unterseiten), wird hier in diesem Beispiel dem Besucher oberhalb der Seite ein Hinweis mit Link zur Indexdatei eingeblendet. Praktisch und nicht zu bevormundend finde ich. Eine automatische Umleitung zur Framesetdatei würde in den meißten Fällen nicht meht die durch die Suchmaschine gefundene Information anzeigen. Der Besucher müsste sich durch die Navigation 'wurschteln'. Von ihrer Index-Datei ist er trotzdem nir einen Klick entfernt. Schießlich gibts einen deutlichen Hinweis darauf.
testen? > musterseite.html
Und noch einer
Wenn die Seite ihrer Meinung nach zu sehr am linken Rand klebt, kann man das ändern: Eine optional einsetzbare Frameset-Datei verwendet eine zusätzliche HTML-Datei (empty.html), die links angezeigt wird. Alles ganz toll, aber was ist wenn die Bildschirmauflösung dazu keinen Platz bietet?
Die Lösung dazu wird mitgeliefert!
Die Breite des Frames für diese Füll-Datei wird durch ein JavaScript festgelegt. Abhängig von der zur Verfügung stehenden Bildschirmbreite wird die Breite für diesen Frame definiert (1|60|140). Die Breitenangaben können sie natürlich ändern.
if(screen.width <= 800) {
document.write('\<frameset cols="1,*" ... \>')
}
if(screen.width > 800 && screen.width <= 1024) {
document.write('\<frameset cols="60,*" ... \>')
}
if(screen.width > 1024) {
document.write('\<frameset cols="140,*" ... \>')
}
|