 F05 Homepage-Vorlage Frames (Ponyhof)
Beispiel einer Homepage mit zwei links angeordnetem Menüs. Im Menüframe 2 werden weitere Untermenüs aufgerufen. Das dient der Strukturierung der Navigation und die Anzahl der darstellbaren Verweise erhöht sich ausßerdem.
|
|
Webseitenvorlage mit 4 Frames
HP-Vorlage Frames 05:
a) zusätzliches grafisches Menü
b) mehrere Untermenüs (4)
c) externe CSS-Datei für Inhaltsseiten
d) Script zum Tausch von 2 Seiten gleichzeitig
|
|
HP-Vorlage Frames 05:
Verspielt oder originell?
Die 4 Hauptrubriken der Webseite werden zusätzlich zu den Links in den Textmenüs noch einmal als grafisches Menü angeboten.
|
|
Frames
Homepage-Vorlage mit 4 Frames für Titel, grafische Navigation, Navigation und Inhalt. Hergestellt für Bildschirmauflösungen von 1024 Pixel und größer.
Oben gibt es einen seitenbreiten Frame für den Titel. In der Titeldatei ('oben.htm') habe ich 2 Grafiken eingebunden. Die Texte sind mit CSS positioniert und formatiert.
Der Bereich darunter ist in 3 Spalten aufgeteilt für die grafische Navigation (links), die Menüs (mitte) und die Inhalte (rechts). Den Navigationen werden 150 und 170 Pixel Breite zur Verfügung gestellt, der Rest wird für die Anzeige der Inhalte genutzt.
Aufteilung des Bildschirms in 4 Bereiche (Frames):
<frameset rows="110,*" ... >
<frame src="oben.htm" name="oben" ... >
<frameset cols="150,170,*" ... >
<frame src="grafisches-menue.htm" name="links" ... >
<frame src="menue00.htm" name="nav" ... >
<frame src="willkommen.htm" name="anzeige" ... >
</frameset>
</frameset>
Breiten
In der Vergangenheit war man noch sehr bemüht bei der Summe der Breite für Navigation und Inhalt 780 Pixel nicht zu überschreiten, damit die Seite auch bei 800 x 600 Pixel ohne horizontalen Scrollbar angezeigt wird. Das können sie heute anders fetlegen wenn sie davon ausgehen, dass 97% ihrer Seitenbesucher mindestens 1024 Pixel zur Verfügung stehen.
Hier habe ich nun großzügig 150 + 170 Pixel für die Navigation aber nur 600 Pixel für die Inhalte vorgesehen, was eine Mindestbreite von (150 + 170 + 600 + 20 für einen Scrollbar) 920 Pixel voraussetzt. Die Breitenangaben können sie allerdings nach ihrer Ansicht entsprechend abändern.
- Im Linken Frame wird immer das grafische Menü angezeigt.
- Im mittleren Frame werden die Textmenüs angezeigt (beim Start das Menü00).
- Im rechten Frame werden die Inhalte angezeigt.
Anzeigebereich für die Inhalte
Die Inhalte im rechten Frame werden nicht über die gesamte Breite dargestellt. Die wäre ja auch nicht immer gleich, ist sie doch abhängig davon, welche Bildschirmauflösung dem Seitenbesucher zur Verfügung steht. Deshalb:
Im rechten Frame werden die Seiteninhalte innerhalb eines <DIV>-Bereichs notiert, dessen Breite über CSS-Anweisungen auf 600 Pixel festgelegt ist. Dieser <DIV>-Bereich mit weißem Hintergrund stellt sicher, dass das Layout in allen Bildschirmauflösungen gleich aussieht.
#InhaltTab {
width:600px;
}
Navigation
Die Menüs sind mittels CSS formatiert und haben eine eingebundene CSS-Datei im Head. Die Textlinks werden als übliche Verweise eingetragen. Ein Mousover-Effekt wird durch CSS umgesetzt. Für das Text-Menü werden keine Grafiken benötigt!
Verspielt oder originell?
Die 4 Hauptrubriken der Webseite werden zusätzlich zu den Links in den Textmenüs noch einmal als grafisches Menü angeboten. Passend zum Seitenthema könnte es sich ähnlich wie hier zu den Zuchthengsten für die Gastronomie z.B. um die Bereiche Restaurant, Hotel, Lounge und Ausflugsziele handeln.
Die Einsatzbereiche sind unbegrenzt: Sport, Filialen, Verein, ...
Download
Entpacken Sie die ZIP-Datei in einem neuen Verzeichnis, ändern die Inhalte mit einem HTML- oder Texteditor, schon ist ihre erste Präsenz 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 können Sie alles modifizieren.
|
Home • Frames • Downloads • F05
Vorschau
DOWNLOAD
