Startseite > Kopfzeilen-Bilder
Kopfzeilen-Bilder oder Farbverlauf
Die Webseiten-Vorlage im Download-Paket enthält als Standard das Kopfzeilen-Bild (header-Bild) kopf-rhodos-kueste.jpg. Aber vielleicht paßt dieses Bild nicht zum Thema Ihrer Website? Für diesen Fall sind weitere 15 Kopfzeilen-Bilder verfügbar, die Sie bei Nutzung meiner Vorlage gerne verwenden können. Binden Sie die Kopfzeilen-Bilder in der Originalgröße 1280 * 180 px aus dem Verzeichnis /z-sonst ein. (Die hier auf dieser Seite gezeigten Bilder sind um die Hälfte verkleinert und dienen nur zu Ihrer Übersicht.)
Als Alternative zu einem Bild können Sie in Ihrer Kopfzeile (HTML-Element header) ganz einfach einen Farbverlauf anzeigen. Hinweise dazu gibt's in diesem Abschnitt.
Wenn Sie in der Kopfzeile (also im header) Ihrer Seiten ein Kopfzeilen-Bild (header-Bild) anzeigen wollen, stellen Sie sicher, daß auf allen PHP-Seiten dieser Quelltext aktiviert ist: <header id="kopf-bild">. Der alternative Quelltext <header id="kopf-fv"> muß dann auskommentiert sein oder kann gelöscht werden.
Nur, wenn Sie das Standard-Bild des ausgewählten Farbschemas (Designs) austauschen wollen: Tragen Sie in der Stylesheet-Datei regeln.css unter dem aktivierten Farbschema (Design) hinter dem Bezeichner --kopf-bild-datei: als url(../z-sonst/hier.jpg) den Namen des gewünschten Bildes ein. Und stellen Sie sicher, daß dieses Bild im Verzeichnis /z-sonst vorhanden ist.
1. Kopfzeilen-Bild kopf-rhodos-kueste.jpg (Standard)
Dieses Kopfzeilen-Bild (header-Bild) ist Standard im Farbschema (Design) Rhodos
.
Bei Wahl des Farbschemas Rhodos
werden die Kopfzeilen-Eigenschaften per
CSS-Variable automatisch in den Selektor header#kopf-bild h1 eingesteuert.
2. Kopfzeilen-Bild kopf-franken-wiesent2.jpg (Standard)
Dieses Kopfzeilen-Bild (header-Bild) ist Standard im Farbschema (Design) Waldeslust
.
Bei Wahl des Farbschemas Waldeslust
werden die Kopfzeilen-Eigenschaften per
CSS-Variable automatisch in den Selektor header#kopf-bild h1 eingesteuert.
3. Kopfzeilen-Bild kopf-aegypten-wueste.jpg (Standard)
Dieses Kopfzeilen-Bild (header-Bild) ist Standard im Farbschema (Design) Sahara
.
Bei Wahl des Farbschemas Sahara
werden die Kopfzeilen-Eigenschaften per
CSS-Variable automatisch in den Selektor header#kopf-bild h1 eingesteuert.
4. Kopfzeilen-Bild kopf-meer-sonnenuntergang.jpg (Standard)
Dieses Kopfzeilen-Bild (header-Bild) ist Standard im Farbschema (Design) Merlot
.
Bei Wahl des Farbschemas Merlot
werden die Kopfzeilen-Eigenschaften per
CSS-Variable automatisch in den Selektor header#kopf-bild h1 eingesteuert.
5. Kopfzeilen-Bild kopf-rhodos-faehre.jpg
Wenn Sie das Kopfzeilen-Bild verwenden wollen, empfehle ich, in der Stylesheet-
Datei regeln.css unter dem aktivierten Farbschema (Design) diese Eigenschaften
(Bezeichner: Eigenschaftswert) wie folgt abzuändern:
--kopf-bild-h1-padding: 1em 0 0 0;(Innenabstand)--kopf-bild-h1-farbe1: #0fd;(Schriftfarbe: türkis)--kopf-bild-h1-farbe2: ;(Textschatten: ohne Schatten)
6. Kopfzeilen-Bild kopf-rhodos-hafen.jpg
Wenn Sie das Kopfzeilen-Bild verwenden wollen, empfehle ich, in der Stylesheet-
Datei regeln.css unter dem aktivierten Farbschema (Design) diese Eigenschaften
(Bezeichner: Eigenschaftswert) wie folgt abzuändern:
--kopf-bild-h1-padding: 1em 0 0 0;(Innenabstand)--kopf-bild-h1-farbe1: #0fd;(Schriftfarbe: türkis)--kopf-bild-h1-farbe2: ;(Textschatten: ohne Schatten)
7. Kopfzeilen-Bild kopf-rhodos-schiffe.jpg
Wenn Sie das Kopfzeilen-Bild verwenden wollen, empfehle ich, in der Stylesheet-
Datei regeln.css unter dem aktivierten Farbschema (Design) diese Eigenschaften
(Bezeichner: Eigenschaftswert) wie folgt abzuändern:
--kopf-bild-h1-padding: .6em 0 .4em 0;(Innenabstand)--kopf-bild-h1-farbe1: navy;(Schriftfarbe: marineblau)--kopf-bild-h1-farbe2: #fff 3px 3px 6px;(Textschatten: weiß)
8. Kopfzeilen-Bild kopf-sahara-wueste.jpg
Wenn Sie das Kopfzeilen-Bild verwenden wollen, empfehle ich, in der Stylesheet-
Datei regeln.css unter dem aktivierten Farbschema (Design) diese Eigenschaften
(Bezeichner: Eigenschaftswert) wie folgt abzuändern:
--kopf-bild-h1-padding: .6em .2em .4em 0;(Innenabstand)--kopf-bild-h1-farbe1: #a00;(Schriftfarbe: braun)--kopf-bild-h1-farbe2: #FFF8DC 5px 3px 4px;(Textschatten: beige)
9. Kopfzeilen-Bild kopf-dalmatien-adria.jpg
Wenn Sie das Kopfzeilen-Bild verwenden wollen, empfehle ich, in der Stylesheet-
Datei regeln.css unter dem aktivierten Farbschema (Design) diese Eigenschaften
(Bezeichner: Eigenschaftswert) wie folgt abzuändern:
--kopf-bild-h1-padding: .6em 0 .4em 0;(Innenabstand)--kopf-bild-h1-farbe1: #0fe;(Schriftfarbe: türkis)--kopf-bild-h1-farbe2: navy 4px 3px 5px;(Textschatten: marineblau)
10. Kopfzeilen-Bild kopf-krka-wasserfall2.jpg
Wenn Sie das Kopfzeilen-Bild verwenden wollen, empfehle ich, in der Stylesheet-
Datei regeln.css unter dem aktivierten Farbschema (Design) diese Eigenschaften
(Bezeichner: Eigenschaftswert) wie folgt abzuändern:
--kopf-bild-h1-padding: .6em 0 .4em 0;(Innenabstand)--kopf-bild-h1-farbe1: #ADFF2F;(Schriftfarbe: hellgrün)--kopf-bild-h1-farbe2: #000 4px 3px 5px;(Textschatten: schwarz)
11. Kopfzeilen-Bild kopf-krka-wasserfall1.jpg
12. Kopfzeilen-Bild kopf-istrien-sonnenuntergang.jpg
13. Kopfzeilen-Bild kopf-teneriffa-blueten.jpg
14. Kopfzeilen-Bild kopf-teneriffa-meer.jpg
15. Kopfzeilen-Bild kopf-franken-rapsfeld.jpg
16. Kopfzeilen-Bild kopf-franken-wiesent1.jpg
Oder erstellen Sie Ihr eigenes Kopfzeilen-Bild
Haben Sie in meiner Sammlung kein passendes Bild für Ihre Website gefunden? Kein Problem: Erstellen Sie aus einem Ihrer eigenen Bilder ein Kopfzeilen-Bild (header-Bild) im jpg- oder webp-Format, Auflösung 1280 * 180 px. Das Bild sollte nur etwa 15 bis 40 KB groß sein, damit es schnell geladen wird, und der Seitenaufbau bei Ihren Besuchern zügig erfolgt.
Tragen Sie in der Stylesheet-Datei regeln.css unter dem aktivierten Farbschema (Design) hinter dem Bezeichner --kopf-bild-datei: als url(../z-sonst/hier.jpg) den Namen des erstellten Bildes ein. Ggf. müssen Sie hinter den Bezeichnern --kopf-bild-h1-padding: (Innenabstand), --kopf-bild-h1-farbe1: (Schriftfarbe) und --kopf-bild-h1-farbe2: (Farbe und Längenangaben des Textschattens) noch die Eigenschaftswerte für die Überschrift h1 anpassen. Und stellen Sie sicher, daß Sie dieses Bild im Verzeichnis /z-sonst gespeichert haben.
Alternative: Farbverlauf statt Kopfzeilen-Bild
Wenn Sie kein passendes Kopfzeilen-Bild für Ihre Website gefunden haben (oder keines verwenden wollen), ist ein einfacher Farbverlauf eine schöne Alternative. Früher mußte man dafür mit einem Bildbearbeitungs-Programm aufwendig eine Grafik erstellen. Heute lassen sich Farbverläufe mit der Eigenschaft background: linear-gradient ... der CSS Version 3 viel einfacher gestalten.
Wenn Sie in der Kopfzeile (also im header) Ihrer Seiten einen Farbverlauf anzeigen wollen, stellen Sie sicher, daß auf allen PHP-Seiten dieser Quelltext aktiviert ist: <header id="kopf-fv">. Der alternative Quelltext <header id="kopf-bild"> muß dann auskommentiert sein oder kann gelöscht werden.
Nur, wenn Sie den Standard-Farbverlauf des ausgewählten Farbschemas (Designs) austauschen wollen: Tragen Sie in der Stylesheet-Datei regeln.css unter dem aktivierten Farbschema (Design) hinter dem Bezeichner --kopf-fv: die gewünschten Eigenschaftswerte (Farbrichtung, Farbe1, Farbe2, Farbe3) ein. Zwei Farben können unter Umständen auch schon ausreichen. Hinweis: Die beste Lösung in diesem Fall wäre, durch Kopieren eines vorhandenen Farbschemas ein neues Farbschema zu erstellen und hier die Eigenschaftswerte zu ändern.
Die Webseiten-Vorlage enthält je Farbschema (Design) einen Kopfzeilen-Farbverlauf, der mit der Auswahl des Farbschemas in der CSS-Datei /y-code/regeln.css aktiviert wird:
- Farbschema
Rhodos
: Farbverlauf: marineblau,h1-Farbe: hellgrün - Farbschema
Waldeslust
: Farbverlauf: dunkelgrün,h1-Farbe: gelbgrün - Farbschema
Sahara
: Farbverlauf: sandfarbig,h1-Farbe: braun - Farbschema
Merlot
: Farbverlauf: weinrot,h1-Farbe: hellbeige
Hilfreiche Seiten zu Farben und Farbverläufen:
- Eine gelungene Farben-Übersicht mit Klarnamen, Hex-Code RGB und Dezimal-Code RGB finden Sie auf der Seite CSS Color Codes auf quackit.com.
- Viele schöne Farbverläufe zum Kopieren (eigentlich für Schaltflächen) gibt's auf der Seite
CSS Gradient Buttons auf colorion.co. Sie können diese Farbverläufe auch für Ihre Kopfzeilen verwenden (dann am Besten die Richtung ändern von
to rightzuto bottom). Die enthaltenenbutton-spezifischen Eigenschaften benötigen Sie gar nicht.
Beispiel für Kopfzeilen-Logo der Vorlage: logo.gif
Das sowohl in der Kopfzeilen-Bild- als auch in der Kopfzeilen-Farbverlauf-Version der Vorlage angezeigte logo.gif (mit der stilisierten Sonne) ist nur ein Beispiel-Logo. Sie werden es auf Ihrer Website durch Ihr eigenes Logo ersetzen wollen. Und Ihr Logo wird vermutlich andere Abmessungen haben als mein Beispiel-Logo.
Tragen Sie in der Stylesheet-Datei regeln.css unter dem aktivierten Farbschema (Design) hinter dem Bezeichner --kopf-logo-breite: die Breite, hinter dem Bezeichner --kopf-logo-hoehe: die Höhe und hinter dem Bezeichner --kopf-logo-margin: die passenden Außenabstände Ihres Logos ein.
Das Logo muß immer logo.gif heißen und im Verzeichnis /z-sonst liegen. Wenn Sie als Logo eine Datei im png-Format verwenden wollen, müßten Sie den Dateinamen im PHP-Include-Element /x-includes/kopf.inc ändern. Bei der Gestaltung Ihres Logos kann ich Ihnen leider nicht behilflich sein.