Bei der Erstellung von Webseiten wird durch die Style Guides das Webdesign festgelegt. Die festgelegten Regeln werden dann mit HTL und Cascading Style Sheets ( CSS ) umgesetzt. An verschiedenen Stellen muss eine Definition von Farben angegeben werden, wie zum Beispiel bei der Hintergrundfarbe einer Webseite.
Webseite mit definierter Hintergrundfarbe in HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hintergrundfarbe einstellen mit HTML</title>
</head>
<body background="#ccccff">
Der Berufene hat kein eigenes Herz.
Er macht das Herz der Leute zu seinem Herzen.
Zu den Guten bin ich gut,
zu den Nichtguten bin ich auch gut;
denn das Leben ist die Güte.
Zu den Treuen bin ich treu,
zu den Untreuen bin ich auch treu;
denn das Leben ist die Treue.
Der Berufene lebt in der Welt ganz still
und macht sein Herz für die Welt weit.
Die Leute alle blicken und horchen nach ihm.
Und der Berufene nimmt sie alle an als seine Kinder.
Laotse
</body>
</html>
Mit dem Attribut background wird die Farbe eingestellt. Bei Webseiten wird die additive Farbmischung angewendet. Daher werden die Farben der Webseite aus den Grundfarben Rot, Grün und Blau zusammengesetzt und RGB Farbmischung genannt.
Da Computer Digital funktionieren gibt es keine stufenlose Farbmischung, sondern pro Grundfarbe 256 Farbstufen. Somit stehen bei drei Grundfarben ca. 16,7 Mio. Farben zur Verfügung.
Wenn alle drei Grundfarbe den Wert 0 haben, dann hat die Webseite einen schwarzen Hintergrund. Rot, Grün und Blau haben die volle Farbintensität bei 255. Somit wird bei dieser Einstellung der drei Grundfarben ein weisser Hintergrund angezeigt.
Farbwahl mit dem Hexadezimalsystem
Computer können nicht gut mit unserem Dezimalsystem arbeiten. Daher wird das Hexadezimalsystem verwendet.
Dezimal |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
Hexadezimal |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
A |
B |
C |
D |
E |
F |
Wir benutzen im Hexadezimalsystem 2 Stellen um die 256 Stufen pro Grundfarbe einstellen zu können.
Farbe |
Rot |
Grün |
Blau |
Attribut "background" |
69 |
ff |
69 |
#69ff69 |
|
00 |
00 |
cc |
#0000cc |
|
ff |
66 |
66 |
#ff6666 |
Hier ein Beispiel mit dem kompletten Tag <body background=”#ff6666″>…</body>
Der Farbauswahl wird immer das Nummernzeichen # vorangestellt. Damit wird die hexadezimale Angabe der Farbwerte gekennzeichnet.
Webseite mit definierter Hintergrundfarbe in HTML und CSS
Heute werden Cascading Style Sheets ( CSS ) zur Trennung von Inhalt und Design genutzt. Dann sieht der Quellcode folgendermassen aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hintergrundfarbe einstellen mit HTML und CSS</title>
<!-- Farbeinstellung mit CSS -->
<style type="text/css">
body { background-color:#ccccff; }
</style>
</head>
<body>
Der Sinn erzeugt.
Das Leben nährt.
Die Umgebung gestaltet.
Die Einflüsse vollenden.
Darum ehren alle Wesen den Sinn
und schätzen das Leben.
Der Sinn wird geehrt,
das Leben wird geschätzt
ohne äußere Ernennung, ganz von selbst.
Also: der Sinn erzeugt, das Leben nährt,
läßt wachsen, pflegt,
vollendet, hält,
bedeckt und schirmt.
Laotse
</body>
</html>
Dies ist eine von drei Möglichkeiten, die CSS bietet.
Reine Webfarben
Wenn Gif Grafiken auf farbige Hintergründe gesetzt werden, dann gibt es je nach Browser Version einen Farbsaum wenn die gleiche Farbe in der Grafik verwendet wird. Dann sieht das Design unprofessionell aus!
Dies kann durch die Nutzung von sogenannten reinen Webfarben vermieden werden. Reine Webfarben sind alle Farben deren Hexadezimal Wert pro Stelle durch 3 teilbar ist. Bei beidenDiese Zahlen haben in der Tabelle oben einen hellblauen Hintergrund. Zudem muss bei beiden Stellen des Farbwerts die gleiche Zahl stehen.
Beispiel:
- Grundfarbe Rot
- Auswahl von “3″ aus der Tabelle.
- Ergänzung auf zwei Stellen = “33″
- Grundfarbe Grün
- Auswahl von “c” aus der Tabelle
- Ergänzung auf zwei Stellen = “cc”
- Grundfarbe Blau
- Auswahl von “f” aus der Tabelle
- Ergänzung auf zwei Stellen = “ff”
- Zusammensetzen der Farbe R+G+B = “#33ccff”
Die Ursache für dieses Phänomen ist die Tatsache, dass jedes Betriebssystem 40 Farben für eigene Zwecke nutzt. Somit bleiben 216 Farben bei 8 Bit Grafiken übrig. Teilt man nach dem obigen Schema die Hexadezimal Zahlen dann werden 216 Farben ausgewählt.
Farbtabelle der 216 reinen Webfarben
| #000000 | #000033 | #000066 | #000099 | #0000cc | #0000ff |
| #003300 | #003333 | #003366 | #003399 | #0033cc | #0033ff |
| #006600 | #006633 | #006666 | #006699 | #0066cc | #0066ff |
| #009900 | #009933 | #009966 | #009999 | #0099cc | #0099ff |
| #00cc00 | #00cc33 | #00cc66 | #00cc99 | #00cccc | #00ccff |
| #00ff00 | #00ff33 | #00ff66 | #00ff99 | #00ffcc | #00ffff |
| #330000 | #330033 | #330066 | #330099 | #3300cc | #3300ff |
| #333300 | #333333 | #333366 | #333399 | #3333cc | #3333ff |
| #336600 | #336633 | #336666 | #336699 | #3366cc | #3366ff |
| #339900 | #339933 | #339966 | #339999 | #3399cc | #3399ff |
| #33cc00 | #33cc33 | #33cc66 | #33cc99 | #33cccc | #33ccff |
| #33ff00 | #33ff33 | #33ff66 | #33ff99 | #33ffcc | #33ffff |
| #660000 | #660033 | #660066 | #660099 | #6600cc | #6600ff |
| #663300 | #663333 | #663366 | #663399 | #6633cc | #6633ff |
| #666600 | #666633 | #666666 | #666699 | #6666cc | #6666ff |
| #669900 | #669933 | #669966 | #669999 | #6699cc | #6699ff |
| #66cc00 | #66cc33 | #66cc66 | #66cc99 | #66cccc | #66ccff |
| #66ff00 | #66ff33 | #66ff66 | #66ff99 | #66ffcc | #66ffff |
| #990000 | #990033 | #990066 | #990099 | #9900cc | #9900ff |
| #993300 | #993333 | #993366 | #993399 | #9933cc | #9933ff |
| #996600 | #996633 | #996666 | #996699 | #9966cc | #9966ff |
| #999900 | #999933 | #999966 | #999999 | #9999cc | #9999ff |
| #99cc00 | #99cc33 | #99cc66 | #99cc99 | #99cccc | #99ccff |
| #99ff00 | #99ff33 | #99ff66 | #99ff99 | #99ffcc | #99ffff |
| #cc0000 | #cc0033 | #cc0066 | #cc0099 | #cc00cc | #cc00ff |
| #cc3300 | #cc3333 | #cc3366 | #cc3399 | #cc33cc | #cc33ff |
| #cc6600 | #cc6633 | #cc6666 | #cc6699 | #cc66cc | #cc66ff |
| #cc9900 | #cc9933 | #cc9966 | #cc9999 | #cc99cc | #cc99ff |
| #cccc00 | #cccc33 | #cccc66 | #cccc99 | #cccccc | #ccccff |
| #ccff00 | #ccff33 | #ccff66 | #ccff99 | #ccffcc | #ccffff |
| #ff0000 | #ff0033 | #ff0066 | #ff0099 | #ff00cc | #ff00ff |
| #ff3300 | #ff3333 | #ff3366 | #ff3399 | #ff33cc | #ff33ff |
| #ff6600 | #ff6633 | #ff6666 | #ff6699 | #ff66cc | #ff66ff |
| #ff9900 | #ff9933 | #ff9966 | #ff9999 | #ff99cc | #ff99ff |
| #ffcc00 | #ffcc33 | #ffcc66 | #ffcc99 | #ffcccc | #ffccff |
| #ffff00 | #ffff33 | #ffff66 | #ffff99 | #ffffcc | #ffffff |
- Grundfarbe Grün
- Auswahl von “c” aus der Tabelle
- Ergänzung auf zwei Stellen = “cc”
| Kategorie: | Einsteiger |
Eine Versalie ist ein größer dargestellter Anfangsbuchstabe in einem Absatz. Mit diesem Cascading Style Sheets Snippet lässt sich dies einfach umsetzen.
Eintrag im Cascading Style Sheet Bereich:
p:first-letter {
color:white;
background-color:black;
font-size: 4 em;
line-height: 0.8 em;
}
Ausschnitt aus dem Quellcode:
<p>Dieser Text hat eine Vesalie …</p>
Darstellung:
Dieser Text hat eine Versalie …
Ein praktisches Snippet, dass sich schnell einsetzen lässt. Es funktioniert auf allen aktuellen Browsern.
| Kategorie: | Einsteiger |
Beim Einfügen von Bildern in die Webseite stellen wir fest, dass nur eine Zeile Text seitlich des Bildes dargestellt wird. Dies wollen wir mit diesem Snippet ändern.
CSS Snippet einfügen, wie in Webdesign mit Cascading Style Sheets (CSS) beschrieben:
.textlinks { float: left;} /* Text fliesst links vorbei */
.textrechts { float: right;} /* Text fliesst rechts vorbei */
Hier die Ansicht einer Beispiel Webseite:
Hier der Quellcode der Webseite:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mehrere Zeilen Text seitlich am Bild</title> <!-- Die nachfolgende Cascading Stylesheet Definiton in den head Ihrer Webseite kopieren --> <style type="text/css"> .textlinks { float: left; margin-right:10px;} .textrechts { float: right; margin-left:10px;} </style> <!-- Ende des Style sheets --> </head> <body> <b>Beispiel mit Bild <span>ohne</span> das Snippet:</b> <br /><br /> <img src="images/css.jpg" />Der Text wird mit einer Zeile seitlich des Bildes dargestellt. Meist ist dies unerwünscht, da der Artikel das Bild umfliessen soll. <p> </p> <b>Beispiel mit Bild <span>mit</span> dem Snippet: </b> <br /><br /> <img src="images/css.jpg" class="textlinks" />Der Text wird mehrzeilig seitlich des Bildes dargestellt. So soll es sein, da der Artikel das Bild seitlich umfliessen soll. <p> </p> </body> </html>
| Kategorie: | Einsteiger |
Für das Webdesign können externe Style Sheet Dateien verwendet werden. Diese werden mit den Webseiten verbunden.
Durch Strukturierung des CSS Style Sheet Dokuments können Stilregeln, auch Style Guides genannt, leichter umgesetzt werden.
Vorschlag einer Grundstruktur für externe CSS Dokumente:
/* Farben und Schriften */ CSS Code /* Allgemeine Struktur der Webseite */ CSS Code /* Kopfbereich */ CSS Code /* Grafiken */ CSS Code /* Seitenbereich oder Menue */ CSS Code /* Fussbereich */ CSS Code
Durch die Aufteilung fällt es später leichter, die Style Guides ins Style Sheet zu transformieren. Außerdem lassen sich später die Elemente in den verschiedenen Bereichen leichter wiederzufinden. Dies funktioniert bei kleinen bis mittleren Websites.
Bei großen Websites kommt es häufig vor, dass die Webseiten auf verschiedenen Server liegen. Oder die verschiedenen Websites gehören verschiedenen Abteilungen und werden durch unterschiedliche Webdesigner gepflegt. Hier kann durch Standardisierung mit Hilfe der Style Guides und einer funktionierenden Kommunikation ein einheitliches Design der Websites erreicht werden.
Cascading Style Sheets (CSS) wurden entwickelt, um Inhalte vom Design einer Webseite zu trennen und die Design-Möglichkeiten auf Webseiten zu erweitern. Zusätzlich bietet CSS ähnlich wie in Bildbearbeitungsprogramme Layer zur Positionierung von Inhalten an.
Basierend auf diesem Posting werde ich in Abständen kurze CSS Code Schnipsel, auch Snippets genannt, veröffentlichen. Heute wird die Einbindung von CSS in HTML Webseiten beschrieben.
CSS lässt sich in drei Varianten in Webseiten einfügen.
- CSS Beschreibung innerhalb eines HTML Befehls
- Style Sheets im Kopf einer HTML Seite einfügen
- In einer CSS Datei, die durch die Webseite aufgerufen wird
CSS Beschreibung innerhalb eines HTML Befehls
Eine häufig von Webeditoren verwendete Möglichkeit Cascading Style Sheets zu nutzen, ist die Einbindung innerhalb eines HTML Tags. Als Tag wird ein Befehl der Seitenbeschreibungssprache HTML bezeichnet.
Beispiel eines HTML Tags zur Definition einer Überschrift.
<h1>Überschrift</h1>
Die Überschrift wird linksbündig dargestellt. Mit CSS lässt sich die Überschrift horizontal mittig darstellen.
<h1 style="text-align:center;">Zentrierte Überschrift</h1>
Durch den Zusatz style=”CSS-Beschreibung“ wird der CSS Befehl zu dem HTML Tag hinzugefügt. Der CSS Befehl “text-align:center;” wird mit einem Semikolon abgeschlossen. Optional können weitere CSS Befehle angefügt werden.
Style Sheets im Kopf einer HTML Seite einfügen
Wenn die Formatierung in der Webseite immer wieder benötigt wird, dann ist es praktischer die Style Sheet Definition im Kopfbereich der Webseite einzufügen.
Beispiel:
<html> <head> <!-- Beginn des Cascading Style Sheets --> <style type="text/css"><!-- <!-- Überschrift der Größe 1 in Rot und Zentriert --> h1 {color:#ff0000; text-align:center;} //--></style> <!-- Ende des Cascading Style Sheets --> <title>CSS im Header</title> </head> <body> <h1>Die rote, zentrierte Überschrift</h1> </body> </html>
Eine CSS Datei, die durch die Webseite aufgerufen wird
Die am meisten verbreitete Variante zum Einbinden von CSS ist die Erstellung einer CSS Datei. Diese Datei wird in den Webseiten als Referenz angegeben. Dies hat den Vorteil, das mit einer Änderung der zentralen CSS Datei alle Webseiten geändert werden!
Beispiel:
CSS Datei: stylesheet.css
______________________________________________________________
h1 {
text-align: center;
color: silver;
}
HTML Datei: index.htm
______________________________________________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- Externe Stylesheet Datei einbinden -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Webseite mit externer HTML Datei</title>
</head>
<body>
<h1>Die silberne, zentrierte Überschrift</h1>
</body>
</html>
Die Nutzung von CSS fällt leicht, wenn Sie die HTML Befehle kennen. Cascading Style Sheets bieten viele Design Möglichkeiten. Im neuen Bereich für Snippets werde ich Beispiele zur CSS Gestaltung posten.