CSS-Starthilfen
Ob Einsteiger oder Profi, das Gestalten mit CSS ist für alle ein Thema. Cascading Style Sheets zu verstehen, bedeutet für viele immer noch eine große Hürde: Das Box-Modell, das die Berechnung der Breite und Höhe, sowie des Abstands von Elementen definiert, ist eine harte Nuss, zum Beispiel fällt es schwer einzuschätzen, wie sich CSS Parameter im Endeffekt auf das Layout auswirken. Daneben ist die Arbeit mit Style Sheets oft nervenaufreibend und verlangt ständige Wechsel zwischen Webeditor und Browser.
Neue CSS-Werkzeuge wollen jetzt Starthilfe leisten. Oft ist es bei CSS schwierig, überhaupt herauszufinden, wo man den Hebel ansetzen muss, um einen gewünschten Effekt, zum Beispiel bei der Ausrichtung eines Objekts zu erreichen. Stundenlanges Probieren nach dem Trial-and-Error-Prinzip spart der neue "Überprüfen"-Knopf in der Kopfleiste der Dreamweaver-Dokumente.
Eingeschaltet zeigt er farbig hervorgehoben das Box-Modell eines Elements, wenn sich der Mauszeiger darüber befindet. Will man herausfinden, welche Eigenschaft zum Beispiel einen unschönen Abstand verursacht, kann man jede einzelne aus- und wieder einschalten. Dreamweaver kommentiert die betreffenden Stellen im Code aus und aktiviert sie wieder.
Die Funktion ist Gold Wert, denn sie verhindert auch, dass man bei der Fehlersuche Schaden anrichtet und gleich alles durcheinander bringt. Die neue Funktion kennen Profis von der Firefox-Erweiterung Firebug, die Ähnliches zwar umsonst anbietet, aber natürlich nicht im Webeditor, sondern nur im Browser.
Einfacher soll der Einstieg auch durch vorgefertigte CSS-Layouts fallen. Verschiedene Startvorlagen mit den am häufigsten anzutreffenden Seitenaufteilungen wie etwa Kopf- und Fußzeilen, fixen und variablen Spalten für Inhalte und Navigation gab es schon bei Dreamweaver CS4.
Jetzt gibt es insgesamt 17 verschiedene Vorlagen, die überarbeitet wurden, zudem ist es jetzt möglich, genauer zu steuern, ob der CSS-Code für das Layout im Header oder externem Style Sheet landet und wo diese Datei gespeichert werden soll. Nach dem Anlegen der Datei zeigt Dreamweaver in einer neuen Leiste in der Quellcode-Ansicht verknüpfte Dateien. Die CSS-Datei ist also mit einem Klick verfügbar. In den verbesserten Vorlagen ist der CSS-Code sehr ausführlich kommentiert. Damit ist es leicht zu verstehen, was welcher Abschnitt dann im Layout bewirkt.