F09 Homepage-Vorlage Frames (Malkasten)
Bei diesem Beispiel habe ich einige kleine Features bereits 'eingebaut': Eine der Bildschimbreite angepasste, variable Anzeigenbreite und Positionierung der Hintergrundgrafik.
|
|
Webseitenvorlage Frameset-Beispiel - 3 Frames
Eigentlich soll dieses Beispiel sie inspirieren, einmal über eine Farbcodierung der Menüs und zugehörigen Unterseiten nachzudenken.
Frameset mit 3 Frames
- Titel mit Hauptmenü (oben)
- Untermenü (nav)
- Inhalte (rechts)
Ein Hauptmenü wird im Titelbereich, unterhalb einer Grafik angezeigt.
Das jeweilige Untermenü wird links eingeblendet.
|
|
Mit diesem Beispiel möchte ich demonstieren, wie man dem Besucher duch eine Farbcodierung bei den Untermenüs und Inhaltsseiten vermitteln kann, in welcher Sektion der Web-Präsenz er sich gerade befindet.
Mehr möchte ich dazu nicht sagen, sonst könnten sie die intuitive Menüführung nicht wirklich selbst austesten.
Vorschau
|
|
Sie können dieses Beispiel als Zip-Datei 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.
Anzeigenbreite der Inhalte - Standardversion
Eine Homepage-Vorlage mit 3 Frames (wahlweise 4. Frame für die Füllseite links) für Titel, Navigation und Inhalt. Hergestellt für Bildschirmauflösungen von 800 x 600 und größer. Die Breite des Navigationsframes und die Breite der Inhaltstabelle sollten addiert 780 Pixel nicht überschreiten, wenn die Seite auch bei 800 x 600 ohne horizontalen Scrollbar angezeigt werden soll.
Die Anzeige der Inhalte im rechten Frame, wird durch eine in der Breite festgelegte Tabelle begrenzt. Die Tabelle stellt sicher, dass das Layout der Seite in allen Bildschirmauflösungen gleich aussieht.
Das können sie natürlich ändern wenn sie statt für 800 Pixel, für eine Anzeigenbreite von 1024 Pixel arbeiten möchten.
Variable Anzeigenbreite - optionale Version

Falls die Seite ihrer Meinung nach zu sehr am linken Rand klebt, kann man das ändern: Eine optional einsetzbare Frameset-Datei (im Download enthalten) verwendet eine zusätzliche HTML-Datei (empty.html), die ganz links angezeigt wird. So rückt ihre Seite nach rechts. Der zusätzliche Frame links kann leer bleiben, mit einer Grafik gefüllt werde, für Nachrichten oder Werbung genutzt werden.
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,*" ... \>')
}
Nun aber zum eigentlichen Denkanstoss: Farbcodierung
Beispiel einer absolut farbcodierten Seite. 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.
Wenn sie die Vorschau öffnen, 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.
Na ja, wenn es dann wirklich eine 'Malkastenseite', eine Kinderseite oder eine Webseite für eine Grundschule werden soll, kann man die Farben sogar beibehalten.
Extras
zweite optionale Titeldatei
In der optional einsetzbaren (zusätzlichen) 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.
CSS
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 auf die Seite bezogene CSS-Angaben haben. Denn dort sind die Anweisungen für die Hintergrundgrafik notiert. Die Hintergrundgrafik ist unten rechts fixiert und bleibt beim Scrollen an ihrer Position.
Für die Inhaltsseiten der 5 Rubriken gibt es daher 5 unterschiedliche (externe) CSS-Dateien auf die im Head der Datei verwiesen wird (Link). Die 5 Menüs links und die Titeldatei oben haben eingebundene CSS-Notierungen im Head.
Seitenfüllende Hintergrundgrafiken könnten sie ebemfalls einsetzen. Images in div. Farbvarianten (Sandpapier) sind im Download enthalten. Die CSS-Anweisungen müssten dann entsprechend angepasst werden. Informationen dazu finden sie im Menü CSS unter Hintergrundgrafik.
JavaScript
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.
Ein Klick auf einen Link im Menü oben, tauscht Navigation und Startseite (2 Dateien also) aus. Das JavaScript dazu steht lokal notiert in dieser HTML-Datei (titel.html / titel02.html).
Download
Entpacken Sie die ZIP-Datei in einem neuen Verzeichnis, ändern die Inhalte mit einem HTML- oder Texteditor (WordPad) , schon ist ihre Seite fertig. Zum Download der ZIP-Datei klicken Sie auf 'DOWNLOAD' oben unter dem Titelbalken.
Klicken Sie auf 'VORSCHAU' oben unter dem Titelbalken, um einen ersten Eindruck zu erhalten.
Natürlich dürfen sie alles modifizieren, weitergeben, veschenken oder für eine Kiste Wein verkaufen. Sie dürfen dieses Beispiel nicht zum Download anbieten. Lesen sie dazu mehr im Impressum meiner Seite.
|