• Skriptum
• Software
• Dreamweaver: CSS

CSS-Regeln

• erstellen von CSS-Regeln für Tags
  (Anmerkung: Eine CSS-Regel wird im Dreamweaver Stil genannt. Das Fenster zum erstellen, heißt im Dreamweaver 8 CSS und im Dreamweaver 7 (MX 2004) Design.
  • Soll die Regel in der HTML-Datei selbst stehen, dann "nur dieses Dokument" auswählen.
  • Zum Beginn verwenden wir nur HTML-Elemente als Selektoren für die CSS-Regeln. Die Regeln gelten daher für einzelne Tags und wir wählen als Selektor-Typ "Tag".
• bearbeiten von Regeln (nachträgliches ändern oder ergänzen)
• löschen von Regeln
• wie sind Regeln in der Codeansicht des Dokumentfensters dargestellt:
  • erste Zeile: Selektor und die geschwungene Klammer auf
  • jede weitere Zeile: eine Deklaration (Eigenschaft, Doppelpunkt, zugeordneter Wert und Strichpunkt als Abschluss
    diese Zeilen mit Deklarationen sind zur besseren Übersicht eingerückt dargestellt
  • letzte Zeile: geschwungene Klammer zu für das Ende der Regel. Da in dieser Zeile nur ein Zeichen steht, wirkt sie wie eine Leerzeile und trennt daher optisch die einzelnen Regeln recht gut.

Reihenfolge von Regeln oder Deklarationen ändern

Umsortieren der Reihenfolge der CSS-Regeln oder der Deklarationen innerhalb einer CSS-Regel:
Das Umsortieren erfolgt im Quellcode. Anzeigen des Quellcodes:

• Falls die CSS-Regeln in einer eigenen CSS-Datei sind, muss man die CSS-Datei öffnen. Zur Regel kann man dann in der Code-Ansicht scrollen bzw. in der Bedienfeldgruppe mit dem Namen CSS (Version 8) bzw. Stile (Version 7) auf die entsprechende Regel klicken.
• Falls die CSS-Regeln im Kopf der HTML-Dateien stehen muss diese in der Code-Ansicht geöffnet sein. Zur Regel kann man dann in der Code-Ansicht scrollen bzw. in der Bedienfeldgruppe mit dem Namen CSS (Version 8) bzw. Stile (Version 7) mit der rechten Maustaste auf die entsprechende Regel klicken und im Kontextmenü auf "Gehe zu Code" klicken.

Danach kann die Reihenfolge händisch geändern werden, mit ausschneiden (Strg+X) und einfügen (Strg+V) an der gewünschten Position. Dazu müssen ganze Zeilen inklusive Zeilenumbruch markiert werden, ansonsten kommt nach dem Einfügen der ausgeschnittenen Zeile die Zeilenumbrüche durcheinander (Leerzeilen, zwei Deklarationen hintereinander in einer Zeile). Tipps zum richtigen markieren:

• Wenn man mit der Maus ganz nach links in die Leiste mit den Zeilennummern fährt, sodass sich der Mauszeiger in einen Pfeil nach rechts oben (Standard ist nach links oben) ändert und dann klickt, wird die Zeile inklusive des passenden Zeilenumbruches markiert. Zieht man mit gedrückter Maustaste die Maus über die gewünschten Zeilen, so markiert man mehrere Zeilen.
  Danach braucht man nur die Einfügemarke an den Anfang der gewünschten Zeile zu platzieren und die ausgeschnittene Zeile(n ) einzufügen.
  Der Nachteil dieser Variante ist, dass das Zielen oft ungenau und aufwendig ist. Vom Handling einfacher ist folgende Methode:
• Zeile(n ) mit davor liegenden Zeilenumbruch ausschneiden: Am Ende der vorigen Zeile nach dem letzten Zeichen die Maustaste drücken und nach unten bis hinter das letzte Zeichen ziehen:
  Danach beim Einfügen die Einfügemarke nach den letzten Zeichen der vorherigen Regel platzieren und einfügen:
  

Reihenfolge der Regeln beim Erstellen der Regeln
Dreamweaver fügt neu erstellte Regeln scheinbar zufällig irgendwo zwischen den bestehenden Regeln ein. Dadurch kommt rasch ein ziemliches Durcheinander zusammen. Dennoch kann man in Dreamweaver 8 die Reihenfolge beeinflussen:

• Dreamweaver 8 fügt eine neu erstellte CSS-Regel nach der Regel ein, die in der CSS-Bedienfeldgruppe markiert ist.
  
  Um eine neue Regel an einer bestimmten Stelle einzufügen, muss man zuerst die Regel markieren, nach der die n eue stehen soll. Erst dann klickt man auf die Schaltfläche "Neue CSS-Regel".
• Sind die Regeln nicht in der gewünschten Reihenfolge, kann man sie auch beliebig umsortieren. Dies geschiet wie oben beschrieben direkt in der Code-Ansicht der CSS-Datei.

Zuordnung von Regeln

• Tag-Selektoren (Element-Selektoren) müssen nicht zugewiesen werden. Dies macht der Browser, wenn er die HTML-Datei interpretiert und mit den CSS-Regeln die Darstellung aufbaut.
• Kontext-Selektoren müssen ebenfalls nicht zugewiesen werden, da sich für den Browser die Zuordnung zu den einzelnen HTML-Elementen in der HTML-Datei aus dem "Kontext" ableiten lässt.
• Klassen müssen einzeln zugewiesen werden, da diese - aus "Browser-Sicht" willkürlich - nur einigen gewünschten HTML-Elementen zugeordnet sein sollen.

Zuweisen von Klassen

Empfohlene Vorgangsweise im Dreamweaver

1. zuerst Regel mit der Klasse anlegen
   Neue CSS-Regel anlegen, im Dialogfenster als Selektor-Typ "Klasse" wählen. Darunter im Kombinationsfeld "Name" das Trennzeichen . (Punkt) und ohne Leerzeichen gleich darauf den selbst gewählten Namen eintippen (Tipps zur Namenswahl siehe oben)
2. die Klasse den gewünschten Tags zuordnen
   • Tag auswählen: in die Textstelle klicken und dann in der Symbolleiste das entsprechende Tag anklicken oder mit Strg+8 solange erweitern, bis der gewünscht Tag vollständig markiert ist.
   • Klasse zuordnet: Im Fenster Eigenschaften das Feld Stil öffnen und die gewünschte Klasse anklicken oder im Kontextmenü den Eintrag CSS-Stile öffnen und dann die gewünschte Klasse auswählen

Anmerkung: Dreamweaver verwendet für Klassen an einigen Stellen den Begriff Stil.

HTML-Code: Klassen werden im HTML-Code im Anfangstag durch das Attribut class zugeordnet. Daher sehen die tags eines Absatzes, dem die Klasse mit dem Namen "wichtig" zugeordnet wird, folgendermaßen aus: <p class="wichtig"> … </p>
Beim Namen wird kein . (Punkt) verwendet, da dieser nur in Selektoren in CSS-Regel als Trennzeichen zwischen HTML-Element (oder auch Universalselektor * oder auch ohne HTML-Element) und Klassenname verwendet wird.

Zuweisen von IDs

Empfohlene Vorgangsweise im Dreamweaver

1. zuerst Regel mit der id anlegen
   Neue CSS-Regel anlegen, im Dialogfenster als Selektor-Typ "Erweitert" wählen. Darunter im Kombinationsfeld "Selektor" das Trennzeichen # (Raute, Hash) und ohne Leerzeichen gleich darauf den selbst gewählten Namen eintippen (Tipps zur Namenswahl siehe oben)
2. die id dem gewünschten Tag zuordnen
   • divs: Nur bei div-tags unterstützt Dreamweaver die Zuordnung einer id auf einfache Weise.
     • Zuweisen beim Erstellen eines divs: Im Menü Einfügen den Befehl Layoutobjekte und dann div-Tag auswählen. Im Dialogfenster kann man im Kombinationsfeld ID eine id ausgewählen.
       Anmerkung: Da ids nur einmal zugewiesen werden dürfen, werden im Kombinationsfeld nur jene ids aufgelistet, die in dieser (X)HTML-Datei noch nicht zugewiesen wurden.
     • Nachträgliches Zuweisen: Das div-tag markieren, z.B. durch anklicken des <div> in der Darstellung des Strukturzweiges in der Statusleiste. Im Fenster Eigenschaften erscheint ein Kombinationsfeld Div-ID, in dem man eine id auswählen kann.
       Anmerkung: Da ids nur einmal zugewiesen werden dürfen, werden im Kombinationsfeld nur jene ids aufgelistet, die in dieser (X)HTML-Datei noch nicht zugewiesen wurden.
   • Alle anderen (X)HTML-Elemente außer div
     • Kann man nur nachträglich zuweisen: Das gewünschte tag muss in der Darstellung des Strukturzweiges in der Statusleiste sichtbar sein. Dann klickt man mir der rechten Maustaste auf dieses tag. Im Kontextmenü erscheint der Befehl "ID festlegen", in dessen Untermenü man die gewünschte id auswählen kann.
       Anmerkung: Da ids nur einmal zugewiesen werden dürfen, werden im Kombinationsfeld nur jene ids aufgelistet, die in dieser (X)HTML-Datei noch nicht zugewiesen wurden.
     • Es kann natürlich der Code "händisch" in der Code-Ansicht eingetippt werden.

HTML-Code: Ids werden im HTML-Code im Anfangstag durch das Attribut id zugeordnet. Daher sieht das tag eines divs, dem die id mit dem Namen "kopf" zugeordnet wird, folgendermaßen aus: <div id="kopf"> … </div>
Beim Namen wird keine # (Raute, Hash) verwendet, da diese nur in Selektoren in CSS-Regel als Trennzeichen zwischen HTML-Element (oder auch Universalselektor * oder auch ohne HTML-Element) und id-name verwendet wird.