8.2 Dreamweaver - Style Sheets

Ab HTML 4.0 sind Formatvorlagen (engl. Style Sheets) oder CSS (Cascading Style Sheets) die vom W3C empfohlene Methode zur Formatierung von HTML-Dokumenten. Von der Verwendung älterer Formatierungsmöglichkeiten, wie z. B. dem FONT-Tag, wird ausdrücklich abgeraten - was aber manches Entwicklungswerkzeug und auch Dreamweaver ignoriert. Umgesetzt werden CSS vom MSIE ab V3.0 (erweitert ab V4.0) und vom Navigator ab V4.0. Doch teils in unterschiedlicher Form und einige der in den CSS-Standards V1.0 und V2.0 vereinbarten Stilattribute werden z. Z. noch von keinem Browser unterstützt. Dennoch kann ihre Verwendung von großem Vorteil sein:

Sie vereinfachen die Gestaltung und können Dokumente klein im Speicherbedarf halten.
Sie fördern einen gleichförmigen Aufbau der Seiten.
Sie schaffen neue, mit dem Standard-HTML nicht zu leistende Formatierungsmöglichkeiten.
Die Gestaltung eines Dokuments das auf Formatvorlagen aufbaut kann auch außerhalb des Dokuments vorgenommen werden.

Beeinflußbar durch Style-Sheets sind (CSS1.0, IE 3.0 und Netscape 4.0):

Gruppe Code Wert (Beispiel) HTML
Schrift font-familiy: "Century Schoolbook",Times,serif; <font face=
  font-style: italic|none; <i>
  font-size: 24pt; ² <font size=
  font-weight: bold|100|200|300|...900; nur <b>
  font: (kombiniert) bold italic 12pt Arial, serif;  
Text text-decoration: underline|line-through|none; ~<u>, <s>
  color: #CC0000 <font color=
  text-align: justify|center|left|right; ~align=
  text-indent: (Einrückung) 7.5mm; ²
  line-height: 16pt; ²
  text-transform: uppercase|lowercase;
Kasten ¹ margin: (speziell: margin-top/-left/...); 1px; ² ~
  vertical-align: top|middle|bottom;
Rahmen und border-width: (speziell: border-top-width/...) 2px; ² ~border
Innenabstände ¹ border-style: (speziell: border-top-style/...) solid|double|groove|ridge|inset|outset;
  border-color: #99CCFF; ~
  padding: (speziell: padding-top/-left/...) 3mm; ² ~
Hintergrund ¹ background-color: #003366; ~bgcolor=
  background-image: url(back.gif); ~background=
  background-repeat: repeat|no-repeat;
Listen ul list-style-type:
circle|disc|square|none; <ul type=
  ol list-style-type: decimal|lower-roman|lower-alpha|upper-roman; <ol type=
speziell a:link (ebenso a:visited / a:active) {color:#FF0000; text-decoration:none}
¹ Nur auf Blockebene verwendbar - d. h. Tags wie h1, p, blockquote, center, div, table, tr, th, td, img...
² Nummerische Angabe (. statt ,) mit Einheiten wie mm, cm, px (Pixel), pt (Punkt=1/72 inch), % (zur Norm)

Definitions-/ Verwendungsformen

Es existieren zwei grundsätzliche Arten, Stile zum Einsatz zu bringen:

  1. Durch das STYLE-Attribut an 'Ort und Stelle' in den Tags eines Dokuments - i. A. eine unsinnige, weil umständliche und der CSS-Idee widersprechende Variante, die von Dreamwever auch nicht unterstützt wird. Bsp.: <h3 style="color:red">...</h3>
  2. Durch Formatdefinitionen im Head eines Dokuments oder in einer separaten, im Head verknüpften 'reinen' Textdatei (Dateitypkennzeichner: css). Diese definieren entweder als "Tag-Stil" übliche Eigenschaften eines HTML-Tags neu/um (mit Auswirkung auf alle Verwendungen dieses Tags im Dokument) oder schaffen als "Selektor-Stil" eine Bezugsmöglichkeit für ausgesuchte Tags/Bereiche im Dokument. Die Bezugnahme erfolgt dann, an Ort und Stelle, durch die Attribute CLASS="name" oder ID="name". Bsp.: <h3 class="grey">...</h3>

    Syntax. eines Definitionsbereichs im Head: <STYLE type="text/css"> ...</STYLE>
    Syntax einer Verknüpfung: <LINK rel="Stylesheet" href="xyz.css" type="text/css">

Beispiele für Tag-/Selektor-Stil Definitionen: (siehe dazu Beispielseite)
1) BODY { font-family: "comic sans ms", "times new roman", serif; }
2) H1, H2, H3 { font-family:Arial, "sans-serif"; font-style:italic; color:#FF0000; }
3) all.grey { background-color:#cccccc; }
4) TD.blue { color:#0000FF; background-color:#FFFF00; font:bold italic 12pt Schoolbook, serif; }
5) #idred1 { color:#FF0000; border-width:8px; border-style:solid; border-color:#999999; }
6) P B { color:#0000FF} /* Kommentar-Beispiel */
  1. Wirkt sich auf den BODY Tag aus und beeinflußt hier die Schrift des ganzen Dokuments.
  2. Alle Headlines der Größen 1-3 im Dokument werden umdefiniert.
  3. Definition einer ungebundenen, in jedem Tag verwendbaren Klasse ('all' kann entfallen).
  4. Definition einer Unter-Klasse, die nur in Verbindung mit einem bestimmten Tag verwendet werden soll.
  5. Definition eines Stils für ein ganz bestimmtes, einmaliges Seitenelement.
  6. Definition eines kombinierten Stils, der nur für 'fettes' in einem Paragraphen gilt.

Dreamweaver

Dreamweaver sieht eine beliebige Definition von Stilen vor (mit Ausnahme der allgemein wenig sinnvollen Inline-Definition) und unterstützt über das CSS-Stile Fenster insbesondere die Verwendung von Klassen-Stilen Das Anklicken einer der gelisteten Stile wendete diesen auf das markierte Objekt bzw. einen markierten Bereich im aktuell bearbeiteten Dokument an. (1) erlaubt die Verknüpfung einer Formatvorlagendatei. (2) die Definition eines neuen Stils, entweder im Head oder in einer Formatvorlagendatei. (3) dient dem Bearbeiten von Stildefinitionen und (4) löscht die markierte Stil-Definition.

Ein Wermutstropfen existiert allerdings in Verbindung mit HTML-Vorlagen (Templets): Da diese den Head für Bearbeitungen sperren, ist dort keine individuelle Stildefinition im Head eines Dokuments möglich. Wohl aber in der Vorlagendatei (.tmp) selbst oder in einer ggf. verknüpften Formatvorlagendatei (.css). Problematischer ist, dass Dreamweaver bis zur Version 4.0 leider nur die üblichsten Stile in der Layout-Ansicht anzeigt.


Top  Previous  Next  Beispiel