 F11 Homepage-Vorlage Frames (pseudo-aufklappen)
Wenn sie innerhalb eines Menüs sehr viele Verweise einbinden möchten, wird der Anzeigebereich eines Bildschirms möglicherweise nicht ausreichen, alle Links untereinander anzuordnen. Einen unschönen Scrollbar möchten sie im Menüframe vermeiden.
|
|
Webseitenvorlage für große Anzahl von Unterseiten
|
Eine Homepage-Vorlage mit 3 Frames für
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.
|
 |
Mit CSS-Anweisungen wurde eine Hintergrundgrafik am unteren rechten Rand des Fensters fixiert.
Die Navigation dieser Vorlage basiert auf mein Beispielmenü M11.
Erklärungen zum Aufbau der Menüs lesen sie dort nach.
 Erklärung des Menüs M11
|
|
das Menü
 |
Beim Anwählen eines Oberbegriffs im Menü soll das Untermenü 'aufklappen', zumindest soll das so aussehen. Das 'Aufklappen' geschieht hier nicht wirklich sondern wird durch den Austausch des Menüs umgesetzt. Für jeden Menü-Oberbegriff verwende ich eine weitere, neue Navigationsdatei. Im Download sind 7 (Version 01) bzw. 9 Version 02) Menüdateien enthalten.
Dieses Beispiel können sie herunterladen:
- 18 HTML-Dateien
- 2 CSS-Dateien (Navigation, Inhaltsseiten)
- alle Grafiken
|
Vorschau + Download
Entsprechend meinen Erklärungen auf der Seite Menü Beispiel 11 habe ich 2 Versionen erstellt, die sich in der Formatierung des Menüs geringfügig unterscheiden:
 21.01.2010 21:00 Uhr, Variante mit zentrierter Darstellung (5 Frames)
Die Version 3 ist eine Abwandlung der HP-Vorlagen F11-01 / F11-02. Diese Version hat neben dem Titelframe oben, 4 vertikale Frames unten, wovon 2 (der linke und der rechte) leer bleiben. Dadurch werden die beiden anderen (Menü- und Inhaltframe) in der Bildschirmmitte zentriert. Diese Variante habe ich auf Anfrage erstellt. Eine zeitgemäßere Lösung wäre das  CSS-Layout C11
|
|
Entpacken Sie die ZIP-Datei in einem neuen Verzeichnis, ändern die Inhalte mit einem HTML- oder Texteditor (WordPad) , schon ist ihre Seite fertig.
Natürlich dürfen sie alles modifizieren, weitergeben, veschenken, verkaufen oder für 5 Kisten Wein eintauschen. Sie dürfen dieses Beispiel nicht zum Download anbieten. Lesen sie dazu mehr im Impressum meiner Seite.
Farbliche Anpassung
Das zum Download angebotene Beispiel basiert auf Blautöne in Anlehnung der verwendeten Hintergrundgrafik für den Titelbereich. Sie können die Farbgestaltung duch die eingesetzte CSS-Formatierung leicht anpassen und dazu meine Grafiken (für die Titelzeile oben) verwenden.
Ansicht aller (bisher 20) selbst hergestellten Grafiken in Originalgröße. Die Grafiken dürfen sie für meine Webseitenvorlage gerne verwenden.
Rechtsklicken + 'Grafik speichern unter' wählen
Die Grafiken haben Dateibezeichnungen von 'bg01.gif' bis 'bg20.gif'
         
         
Enbindung der Grafik
In der Datei "oben01.htm" bzw. "oben02.htm" wird für den Hintergrund des Titelbereichs die Hintergrundgrafik festgelegt. Tragen Sie den entsprchenden dateinamen ein, um Ihr Layout anzupassen.
<table background="bg19.gif" border="0" cellspacing="0" ...
Hintergrund- und Textfarbe - Inhaltsbereich
In der CSS-Datei "seiten.css" wird für den Inhaltsbereich die Hintergrund- und Textfarbe festgelegt. Tragen Sie entsprchende Farbwerte ein, um Ihr Layout anzupassen.
#contentTab {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:normal;
text-decoration:none;
color: #000000;
background-color: #F0F4FF;
border-right:1px solid #808080;
border-left:1px solid #808080;
height:100%;
width:700px;
}
Hintergrund- und Linkfarbe - Menüebereich
In der CSS-Datei "styles-menue.css" wird für den Inhaltsbereich die Hintergrund- und Text-Linkfarbe festgelegt. Tragen Sie entsprchende Farbwerte ein, um Ihr Layout anzupassen.
body {
font-family:Verdana,Arial,Helvetica;
font-size:12px;
font-weight:normal;
text-decoration:none;
color: #000000;
background-color: #E5E9F3;
margin:0px;
padding:0px;
}
/* Textlinks */
#menue11 a{
font-family:Verdana,Arial,sans-serif;
font-size: 11px;
color: #000000;
text-align: left;
vertical-align:middle;
text-decoration:none;
padding: 0px;
margin:0px;
display: block;
}
#menue11 a:visited {
color:#000000;
}
#menue11 a:hover {
color:#FF007F;
}
|
Home • Frames • Downloads • F11
Downloads
