Webseitenvorlage mit Frames download 06
 HomeFramesDownloads • F06 Vorschau  DOWNLOAD 

F06   Homepage-Vorlage Frames  Verein: Hunde, Angeln, Aqua, ...

Beispiel einer Homepage mit Hauptmenü (oben) und links angeordneten Untermenüs. Hier werden im linken Menüframe die unterschiedlichen Menüs zu den Hauptthemen aufgerufen. Das Hauptmenü ist erweiterbar. So haben Sie die Möglichkeit die Verweise für eine umfangreichere Web-Präsenz übersichtlich zu ordnen.
Homepage Website Vorlage Frameset Frames Menü oben links

Webseitenvorlage mit 3 Frames  Hobby- oder Vereins-Homepage

Für diese Vorlage habe ich mehrere Titelgrafiken entworfen. Da der Text im Titelbereich mit CSS-Anweisungen über die Grafik gelegt wird, können Sie meine HP-Vorlagen leicht anpassen und für unterschiedliche Hobbyseiten einsetzen.

Homepagevorlage Webseitenvorlage Frameset-Beispiel

Homepagevorlage Webseitenvorlage Frameset-Beispiel

Aufbau:

Frameset mit 3 Frames

Titel + Hauptmenü oben (120px hoch)
Untermenüs links (220 px breit)
Inhaltsseiten (*)

JavaScript-Funktion 2 Frameinhalte gleichzeitig austauschen
seiteninterne CSS-Notierung


Für den Titelbereich ist eine Seiten-Hintergrundgrafik eingebunden. Für den Betrachter erscheint vor dem grauen Balken das Hauptmenü.

Ich habe bisher 6 Grafiken für unterschiedliche Webseiten-Themen vorbereitet. Weitere Grafiken für die Titelleiste demnächst oder auf Anfrage.




  Frames

Homepage-Vorlage mit 3 Frames für Titel, Navigation und Inhalt. Diese Vorlage ist eingestellt für Bildschrimbreiten von 920 Pixel und größer. Oben wird der Webseitentitel und das Hauptmenü angezeigt. Im linken Frame wird das (im Hauptmenü) aufgerufene Untermenü eingeblendet.

Die Themenseiten werden im rechten Frame dargestellt. Für die Anzeige der Inhalte wurde ein DIV-Bereich (#alles) definiert, für den die Breite mit CSS-Angaben zur Zeit auf 700 Pixel festgelegt ist. Für den (abhängig von der Bildschrimbreite) freien Bereich rechts daneben, ist die Hintergrundgrafik transparent. Der Farbton für diesen Bereich kann frei gewählt werden und ist zur Zeit auf 'hellgrau' eingestellt. Für den Leerbereich könnte auch eine dezente Hintergrundgrafik, sichtbar für Besucher mit hoher Bildschirmauflösung, eingebunden werden.

Demo Hintergrundgrafik des Inhaltsbereich anzeigen


  Anzeigebereich: Hintergrund-Grafik und Breite

Für den Inhaltsbereich habe ich eine Hintergrundgrafik eingebunden. Der linke Bereich dieser Grafik (740 Pixel) ist Weiß, der rechte transparent. Dort 'leuchtet die festgelegte Hintergrundfarbe durch'. Sie können die verwendete Grafik durch eine andere ersetzen.

Beachten sie, das der FF die Padding-Angabe von je 20 Pixel (links und rechts) zur Breitenangabe addiert! Daher mein 700 (Breite) plus 40 (2 X Padding) = 740 Pixel breiter weißer Bereich der Grafik.

... in den Dateien 'startseitexx.htm' und 'seitexx.htm'

body{
 ...
 background:url(images/bg-inhalt.gif) #F7F7F7 repeat top left;
Beachten sie, dass die Angaben für die Hintergrundfarbe in der CSS-Codezeile oben höherrangig ist als eine eventuelle Farbangabe als Attribut des Body-Tags. Es wird also die dort notierte Farbangabe als Hintergrundfarbe (rechts neben dem Inhalt) verwendet werden.


Die Breite wird mit der ID 'alles' auf 700 Pixel festgelegt:

#alles{
 height:100%;
 width: 700px;
 padding:20px;
}
Wenn sie die Breitenangaben ändern, ist es möglicherweise notwendig die verwendete Hintergrundgrafik zu modifizieren, da sie auf genau diese Breite abgestimmt ist.

Demo Hintergrundgrafik anzeigen



  Untermenüs

Die Untermenüs sind mittels CSS formatiert. Die Textlinks werden als simple Textverweise eingetragen. Die Formatierung mit einem Mousover-Effekt durch CSS, wird über eine ID zugewiesen. Hört sich komplizierter an als in der Praxis umsetzbar. Für das Menü werden keine Grafiken benötigt!

... in den Dateien 'untermenue01.htm' bis 'untermenue04.htm'

<a target="anzeige" href="seite01.htm">Textlink</a>
<a target="anzeige" href="seite02.htm">Textlink</a>
<a target="anzeige" href="seite03.htm">Textlink</a>
...
Ein JavaScript tauscht beim Aufruf eines Untermenüs auch die HTML-Seite im Anzeigebereich. So wird passend zur Unterrubrik jedesmal auch die zugehörige Startseite zum Thema angezeigt.

Erklärungen zur Technik 2 Frameinhalte gleichzeitig ändern


  Titelgrafik

Im Frame oben habe ich eine Hintergrundgrafik eingebunden. Der Titeltext oberhalb des horizontalen Hauptmenüs kann an ihr Webseitenthema angepasst werden. Außerdem könnten sie die verwendete Grafik durch eine andere ersetzen.

Vorschau erstellter Grafiken:



Titelgrafik in der Datei 'oben.htm' austauschen und Webseite anpassen. Eine Verlaufsgrafik ohne Tierdarstellung und die Grafik 'weißer Hund' (titelgrafik03.gif) sind im Download enthalten. Weitere Grafiken (siehe unten) für die Titelleiste finden sie in meiner MINI-IMAGE-BOX im Menü Titelgrafik 120. Anregungen nehme ich gerne entgegen, demnächst werde ich weitere erstellen.

MINI-IMAGE-BOX - Titelgrafiken 120

... in der Datei 'oben.htm'

body{
 ...
 background:url(images/titelgrafik03.gif) #F6F6F6 no-repeat top left;


Titelgrafiken, Ansichten hier rechts abgeschnitten

Habe eben das Angebot der Titelgrafiken für das HP-Beispiel um eine blanko-Grafik ohne Tiersymbol erweitert. Die Grafik kann man so leichter modifizieren und dem Webseitenthema anpassen. Viel Spaß beim 'Basteln'.















Die letzte Grafik hat lediglich einen Verlauf angepasster Rottöne.

Grafiken Download:

titelgrafik00.gif (ohne Tierdarstellung im roten Bereich)
titelgrafik01.gif (Hund schwarz / weiss)
titelgrafik02.gif (Fisch)
titelgrafik03.gif (Hund)
titelgrafik04.gif (Hase / Kanninchen)
titelgrafik05.gif (Fische)
titelgrafik.gif (Rot-Verlauf)



Die Grafiken habe ich selbst erstellt und dürfen
ausschließlich für meine HP-Vorlagen genutzt werden.



  CSS

Für die Seiten sind zur Zeit seiteninterne CSS-Angaben im Head notiert. Sie können die Formatangaben in einer externen Datei unterbringen wenn sie die Anweisungen in eine CSS-Datei kopieren und darauf verweisen.

Externe CSS-Datei einbinden



  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.