 Webseitenvorlage CSS 10 Titelgrafik
Hier berschreibe ich, wie sie bei der CSS-basierte Webseitenvorlage mit recht wenig Aufwand eine Titelgrafik 'einbauen' können. Dazu müssen sie in der CSS-Datei lediglich einen Eintrag für die Grafik notieren.
|
|
Titelgrafik für die CSS-Webseitenvorlage
Anpassung der Basisvorlage
In der Homepage-Vorlage habe ich (bis auf die Gummibärchen-Bilder zur Demo) keine Grafiken eingesetzt. Weder das von mir geliebte transparente Pixel zur Abstandskontrolle noch irgendwelche Hintergrund- oder Titelgrafiken.
Sie können für den Titelbereich ohne großen Aufwand eine Hintergrundgrafik 'einbauen'.
|
|
|
1 Grafik statt Farbe
Wenn sie in der CSS-Datei eine Anweisung für die Hintergrundgrafik notieren, erhält ihre Seite einen völlig anderen Look. Hier einmal eine Titelgrafik mit einem simplen Farbverlauf (Grafiken zum Download weiter unten).
Dort, wo in der CSS-Datei der Basisversion für den Titelbereich der Farbwert #A5C921 notiert ist, tregen sie den notwendige Anweisung ein. Lediglich ein einziger Arbeitsschritt ist notwendig. Unten habe ich den CSS-Anweisungsblock einmal aufgezeigt.
/* statt Hintergrundfarbe Titelbereich */
#header {
clear: both;
margin: 0 0 0 0;
padding: 0;
height: 90px;
background-color:#A5C921;
}
/* nun Hintergrundgrafik Titelbereich */
#header {
clear: both;
margin: 0 0 0 0;
padding: 0;
height: 90px;
background: #FFFFFF url(images/bg01.gif) top left repeat-x;
}
Danach bleibt ihnen frei gestellt, weitere farbliche Anpassungen vorzunehmen, damit die Fraben der Seite mit der Titelgrafik harmonieren. Lesen sie dazu die Beispielseite
 Vorlage 10-2 Farbvarianten
2 Demos mit Titelgrafik
Hier zur Demo 2 Beispiele. Beim ersten verwende ich einen simplen Farbverlauf der horizontal gekachelt wird, Abmessungen 40 x 90 Pixel. Im zweiten Beispiel verwende ich eine Grafik über die gesamte Titelbreite, Abmessungen 900 x 120 Pixel. Die Beispiele können sie als ZIP-Archiv herunterladen. Experimentieren sie doch ein wenig.
Passende oder gekachelte Grafik
a Einsatz der Titelgrafiken 40 x 90 Pixel erzeugt diese Darstellung (rechts abgeschnitten):
"CSS Webseitenvorlage 10 - 2 Spalten" ist normaler Text
Hier die selbst hergestellten Grafiken in Originalgröße. Die Grafiken dürfen sie frei und kostenlos verwenden. Rechtsklicken + 'Grafik speichern unter' wählen.
Die Grafiken haben Dateibezeichnungen von 'bg01.gif', 'bg02.gif', ...
           
           
Die Notierung in der CSS-Datei für die Grafik images/bg01.gif sähe dann so aus:
/* nun Hintergrundgrafik Titelbereich */
#header {
clear: both;
margin: 0 0 0 0;
padding: 0;
height: 90px;
background: #FFFFFF url(images/bg01.gif) top left repeat-x;
}
Die Hintergrundgrafik ist kleiner als die Abmessungen des Titelbereichs, wird aber durch CSS-Anweisungen horizontal (in der X-Achse) wiederholt.
/* nun Hintergrundgrafik Titelbereich */
#header {
clear: both;
margin: 0 0 0 0;
padding: 0;
height: 90px;
background: #FFFFFF url(images/bg01.gif) top left repeat-x;
}
b Einsatz einer Titelgrafik 900 x 120 Pixel erzeugt diese Darstellung (rechts abgeschnitten):
Wie im Beispiel HP-Vorlage 7
"CSS Webseitenvorlage 10 - 2 Spalten" ist normaler Text
Wie im Beispiel HP-Vorlage 8
"CSS Webseitenvorlage 10 - 2 Spalten" ist normaler Text
c Übersicht aller Varianten - Downloads
Insgesamt können Sie 8 Varianten meiner HP-Vorlage C10 als ZIP-Archiv herunterladen. Sie finden die Downloadseite im Menü links.
|
Home • Downloads • Titelgrafik einbinden
Demo
Alle Downloads - Übersicht 
