 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 Tabellen, Absätze und anderer Bereicher ihrer Seiten in CSS-Unterklassen fest.
|
|
Hitergrundfarbe als Inline-Style
In der Praxis bedeutet das: Statt die Farbangaben für den Hintergrund 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 eine entsprechende Hintergrundfarbe festgelegt haben.
a) Statt Farbwert über das Attribut 'bgcolor'
<td bgcolor="#BFBFBF" ... >
b) Von nun an 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 ermitteln Sie mehrere Farbnuancen, passend zur Grundfarbe ihrer Webseite.  Farbabstufungen entwickeln
| 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 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-Anweisungen in die HTML-Tags einbinden
Im Dokument notieren sie an entsprechender Stelle einfach :
<div class="bgcolor2"> ...
<td class="bgcolor2"> ...
<p class="bgcolor3"> ...
<span 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'
background-color
Abhängig von den CSS-Anweisungen und der verwendeten Hintergrundgrafik erscheinen Seiten mit identischem HTML-Code in einem völlig anderem Look. Beispiele mit Demo und Musterdateien zum Download finden sie in der Rubrik 'Downloads'
simple HP-Vorlagen mit Hintergrundgrafik
Informationen zum Auslagern von CSS-Anweisungen in eine externe Datei finden sie in der Rubrik 'CSS'
externe CSS-Datei
|
Home • Tipps • Browserfenster-Größe
BEISPIEL