 Schnelles Re-Design mit CSS
Erleichtern sie sich ihre zukünftige Arbeit, die ein geplanter oder spontaner Designwechsel mit sich bringt. Legen sie die Farbwerte für ihre Seiten in CSS-Unterklassen fest.
In der Praxis bedeutet das: Statt die gleiche Hintergrundfarbwerte jedesmal über das Attribut 'bgcolor' einzutragen verwenden sie das Attribut für eine CSS-Unterklasse. Damit weisen sie dem betreffenden Element eine CSS-Klasse zu für die sie vorher genau diese Hintergrundfarbe festgelegt haben.
a) Farbwert über das Attribut 'bgcolor'
<td bgcolor="#BFBFBF" ... >
b) Farbwert über das Attribut 'class'
<td class="bgcolor12" ... >
In der CSS-Notierung ist der Farbwert für diese Klasse festgelegt:
<style type="text/css">
<!--
.bgcolor12 {background-color: #BFBFBF;}
-->
</style>
Wollen sie die Farbgebung ihrer Seiten später verändern reicht es aus, die Farbangaben in der externen CSS-Datei zu ändern.
Erfahrungsgemäß verändert man das Layout und die Farbgebung einer WEB-Präsez, besonders während der Entstehungsphase. Während der Entwurfsphase und auch für das nächste Redesign können sie so ihre Arbeit erleichtern.
Bestimmen sie ihre Hintergrundfarben konsequent über CSS-angaben und legen diese Anweisungen in einer externen CSS-Datei ab.
Farbwerte festlegen
Bevor sie an die Arbeit gehen legen sie mehrere Farbnuancen, passend zur Grundfarbe ihrer Webseite fest.
| Bereich |
CSS-Anweisung |
Farbe |
Wert |
Anwendung |
| Hintergrundfarbe |
background-color |
Farbe |
#FFDDAA |
Grundfarbe |
| Unterklasse 1 |
.bgcolor1 |
Farbe |
#E06000 |
Hervorhebung |
| Unterklasse 2 |
.bgcolor2 |
Farbe |
#BB4400 |
Tabellenkopf |
| Unterklasse 3 |
.bgcolor3 |
Farbe |
#800000 |
Ränder |
|
In der Anwendung sieht das nun so aus:
Benutzen sie zum Experimentieren doch einfach meine Testdatei und legen Ihre Hintergrundfarben durch Unterklassen in der externen CSS-Datei fest.
Erklärung zur Vorgehensweise bei der Entwicklung
1. eine Grundfarbe festlegen
2. dann Abstufungen definieren
| Bsp. Seitenthema Kaffeefilter |
| Beispiel 1 : |
#800000 |
#BB4400 |
#E06000 |
#FFDDAA |
| Bsp. Seitenthema Blattformen |
| Beispiel 2 : |
#66BB22 |
#99DD44 |
#BBFF66 |
#DDFF88 |
|
3. Testen und den Bauch entscheiden lassen
Technische Abwicklung
1) CSS-Definition für Farbklassen im Head notieren:
<style type="text/css">
<!--
body {
font-family : verdana,arial,helvetica;
font-size:12px;
font-weight:normal;
color: #000000;
background-color : #FFDDAA;
}
.bgcolor1 {background-color : #FF9900;}
.bgcolor2 {background-color : #FF6600;}
.bgcolor3 {background-color : #AA0000;}
-->
</style>
2) Die Klassen-Befehle in die HTML-Tags einbinden
Im Dokument notieren sie an entsprechender Stelle einfach :
<td class="bgcolor2"> ...
<td class="bgcolor3"> ...
<td class="bgcolor1"> ...
Nachdem sie mit ihrem Ergebnis zufrieden sind können sie (falls das noch nicht geschehen ist) daran gehen, die CSS-Anweisungen in alle HTML-Seiten einzubinden. Dazu können sie:
1) den Code in den HEAD-Bereich jeder Seite einkopieren
2) den Code in eine sxterne CSS-Datei auslagern un in jeder Seite verlinken
Einen Tipp, wie sie fein abgestufte Farbnuancen rein rechnerisch entwickeln können, finden sie in der Rubrik 'Farben'
 farbabstufungen Entwickeln
Einen weiteren Beitrag zu Hintergrundfarben in eigenen CSS-Unterklassen, finden sie in der Rubrik 'CSS'
backgroundcolor
Abhängig von den CSS-Anweisungen erscheint eine Seite mit identischen Inhalten in völlig anderem Look. Beispiele mit Demo und Musterdateien zum Download finden sie in der Rubrik 'Downloads'
backgroundcolor
Informationen zum Auslagern von CSS-Anweisungen in eine externe Datei finden sie in der Rubrik 'CSS'
externe CSS-Datei
|
HOME
BEISPIEL 
ZURÜCK