1234339

Farbe im Webdesign sinnvoll einsetzen

16.11.2011 | 10:05 Uhr |

Farbe definiert die visuelle Identität einer Webpräsenz. Unser Ratgeber gibt Tipps, wie man Farbe im Web sinnvoll einsetzt - und mit Dreamweaver bunte Ergebnisse erzielt.

Dreamweaver_Icon
Vergrößern Dreamweaver_Icon

Vorbei sind die Zeiten, als sich Webdesigner auf lediglich 216 als "websicher" eingestufte, handverlesene Farben aus einem Farbraum von maximal 256 Werten beschränken mussten.

Viele Farbräume, viele Systeme

Aktuelle Webbrowser verstehen sich längst auf die Farbsysteme RGB und HSL und seit der Einführung von CSS3 stehen Webdesignern erstmals zwei weitere Farbräume zur Verfügung, um ihre Kreativität durch den Einsatz von Farbe zum Ausdruck zu bringen: RGBa und HSLa (das "a" steht für einen zusätzlichen Alphakanal).

HTML-Elemente einfärben

Die Farbe von Elementen einer Webseite wie Text- und Layoutabschnitte, Rahmen, Hintergründe und dergleichen mehr bestimmen so genannte CSS-Regeln unter Angabe eines Farbcodes. So verdanken zum Beispiel die Überschriften der ersten bis vierten Ebene (h1, h2, h3, h4) auf der Website www.macwelt.de ihre Farbe einer CSS-Regel wie der folgenden:

h1, h2, h3, h4 {color: #B60E27;}

Vor der geschweiften Klammer stehen die so genannten Selektoren, also Kennungen, die es dem Browser ermöglichen, die betreffenden Elemente der Webseite zu identifizieren (im Beispiel die Überschriften). Die geschweiften Klammern umfassen eine Sammlung von CSS-Regeln, die auf eben diesen Elementen Anwendung finden und Eigenschaften wie Farbe, Hintergrundfarbe, Breite, die Position der Objekte und andere Attribute festlegen. Jede CSS-Regel beginnt mit der Bezeichnung der betreffenden Eigenschaft, gefolgt von einem Doppelpunkt, gefolgt von dem Wert der Eigenschaft, und endet mit einem Semikolon. Statt CSS-Eigenschaften wie Farbe direkt im Code der betreffenden Webdokumente zu bearbeiten, können Benutzer von Dreamweaver grafische CSS-Werkzeuge zu Hilfe rufen. In der Code-Ansicht von Dreamweaver kann man mit dem integrierten Farbwähler auf den grafischen Editor von CSS-Eigenschaften zugreifen. Hierzu öffnet man das Bedienfeld "CSS-Stile" und setzt die Einfügemarke in der Code-Ansicht direkt in die betreffende CSS-Farbeigenschaft hinein. So bekommt man einen schnellen Zugriff auf den Farbwähler von OS X über das Farbauswahlfeld von Dreamweaver.

Farbe in der Code-Ansicht bearbeiten

Die Professionalität einer Webseite kommt oft am besten durch den Einsatz einer geschickt gewählten Farbpalette zum Ausdruck. Hierzu benötigt man ein Werk-zeug, das nicht nur mit der höchstmöglichen Präzision arbeitet sondern die Erstellung harmonischer Farbgruppen meistert. Webdesigner behelfen sich hierzu gerne externer Tools wie den kostenlosen Dienst Kuler von Adobe oder Adobe Color Lava, einer Applikation für das iPad, und setzen lediglich die so abgestimmten Farbwerte in Dreamweaver ein.

0 Kommentare zu diesem Artikel
1234339