Von Filipe Pereira Martins, Anna Kobylinska - 16.11.2011, 10:05

Ratgeber: Webdesign

Farbe im Webdesign sinnvoll einsetzen

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.
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.
Lesen Sie auf der nächsten Seite:
Vorherige Seite
Seite 1 von 2
Kommentar verfassen:
Kommentar verfassen

Login über einen Foren Account





Gastposting

Gastbeiträge müssen erst freigeschaltet werden, bevor Sie auf der Seite erscheinen.





3x Macwelt testen!
Ja, ich teste 3x die Macwelt mit DVD für nur 11,90 € (19,- Sfr). Den 4 GB USB-Stick erhalte ich gratis dazu.
Macwelt 6/12
Anrede:
Vorname:
Nachname:
Straße/Nr:
PLZ/Ort:
Land:
E-Mail:
Bestätigen
Nur wenn ich innerhalb von 2 Wochen nach Erhalt der 3. Ausgabe nichts von mir hören lasse, möchte ich die PC-WELT mit DVD zum gleichen Preis weiterbeziehen (D: 55,80 €/Jahr, EU: 64,80 €/Jahr, CH: 103,70 Sfr/Jahr). Nach dem Testzeitraum ist der Bezug jederzeit kündbar.
Ich bin damit einverstanden, dass die IDG Tech Media GmbH und ihre Partner mich per E-Mail über interessante Vorteilsangebote informieren.
Jetzt anfordern
- Anzeige -
Angebote für Macwelt-Leser
Macwelt für iPad

Macwelt auf dem iPad lesen
Schon am Freitag vor dem Erstverkaufstag des gedruckten Magazins ist die Macwelt auf Ihrem iPad!

Macwelt mobil

Macwelt mobil
Die Nachrichten von Macwelt können Sie nun auch unterwegs jederzeit bequem lesen.

1234339
Content Management by InterRed