Wer bisher mit Adobes Webeditor Dreamweaver ein Projekt starten wollte, musste sich zunächst einmal durch den Dialog "Neue Site" kämpfen. Die Site-Definition ist zwar auch in CS5 der Ausgangspunkt, aber keine große Hürde mehr, denn jetzt reicht es, einen Namen für die Site einzugeben und einen lokalen Ordner für die Dateien festzulegen.

Nach Details, zum Beispiel für den Server-Upload, fragt Dreamweaver erst später. Zudem lassen sich jetzt gleich mehrere Server mit frei wählbaren Namen definieren. Das ist sinnvoll und praktisch, denn Webdesigner arbeiten oft mit einem Testserver und einem produktiven Webserver.

Bessere PHP-Unterstützung

Adobe hat nach der letzten Version die Kritik der Webdesigner gehört und vor allem in Sachen serverseitiger Entwicklung nachgelegt. Die schwache, oder kaum vorhandene PHP-Unterstützung wurde bei Dreamweaver CS4 zu Recht bemängelt, schließlich kommt heute kaum noch jemand an dieser Sprache für dynamische Webseiten vorbei.

PHP legte im Web einen beachtlichen Siegeszug hin, nicht nur weil es als Open-Source-Technologie frei und kostenlos verfügbar ist. Flickr, Digg und Facebook gehören zu den Sites, die heute durch PHP angetrieben werden.

Zudem ist PHP die Technologie hinter so populären Content-Management-Systemen wie Wordpress, Joomla und Drupal. Bisher war es nicht einfach, die Optik von dynamisch erzeugten Dokumenten zu entwerfen und zu pflegen.

Jede Seite wird aus vielen einzelnen Elementen zusammengesetzt und mit Inhalten aus einer Datenbank gefüttert. Seitenbestandteile wie Kopfzeile, Navigation et cetera musste man einzeln editieren und testen - zum Beispiel im Falle von Wordpress, über die Oberfläche des Content-Management-Systems, die im Webbrowser läuft.

Nahtlose Zusammenarbeit mit Wordpress, Joomla & Co.

Dreamweaver CS5 will die Arbeit mit Wordpress & Co jetzt zu einer nahtlosen Erfahrung machen. Öffnet man zum Beispiel "Index.php" einer dynamischen Website, erkennt und meldet Dreamweaver, dass die Seite mit weiteren Dateien verknüpft ist, kann die eingebetteten Dokumente automatisch aufspüren und dann das Layout in einer verbesserten Live-Ansicht zu einem Dokument rendern.

Die Vorschau gleicht fast exakt der Ansicht im Webbrowser - zumindest der in Safari, denn Dreamweaver benutzt ebenfalls die Webkit-Engine. In seiner Kopfleiste zeigt Dreamweaver, welche Dateien mit der aktuell geöffneten dynamisch verknüpft sind. Ein Klick auf den Dateinamen genügt, um sie zu öffnen. Die Liste lässt sich auch nach CSS-, Javascript-, XML- und PHP-Dateien filtern. So fällt es leicht herauszufinden, welche Dateien man für Änderungen überhaupt editieren muss und kann ihre Auswirkungen sofort überprüfen.

Mit der neuen Live-Vorschau ergibt sich ein praktischer Trick, um von anderen dazuzulernen: Wer will, kann in Dreamweavers Adressleiste statt seinem eigenen Projekt eine beliebige Webadresse eingeben und dann mit der Live-Ansicht sowie der automatischen Anzeige der verknüpften Dateien den Quellcode einer Website genau unter die Lupe nehmen.

Die Live-Ansicht gab es zwar bereits in Dreamweaver CS4, jetzt ist es allerdings möglich, mit gedrückter Befehlstaste Hyperlinks anzuklicken und so innerhalb der Website zu navigieren, ohne dafür immer wieder in den Browser wechseln zu müssen.

Code-Tipps vom Webeditor

Code-Hinweise sind bekannte und beliebte Helfer, die beim Programmieren viel Zeit und Mühe sparen kann. Ein in die Software eingebautes Code-Lexikon schlägt schon beim Eintippen der ersten Buchstaben und Zeichen die passende Syntax vor, der Anwender muss sich aus einem Klappmenü nur noch den gewünschten Befehl heraussuchen.

In Dreamweaver gab es bisher zwar Hinweise für ein paar PHP-Funktionen, mehr aber nicht. Die neue Version hat jetzt deutlich mehr auf dem Kasten und schlägt passende Funktionen und Objekte für PHP 5.2 vor.

Die Code-Hinweise lassen sich für jede in Dreamweaver angelegte Website separat einstellen. In dem Dialog "Site-spezifische Code-Hinweise" legt man fest mit welchem CMS man arbeitet.

Dreamweaver beherrscht Hinweise für Wordpress, Joomla und Drupal. Wer möchte, kann auch eigene Hinweise erstellen. Dazu muss man nur angeben, wo in der Ordnerstruktur der Website das Framework liegt.

Die PHP-Code-Hinweise fallen in Dreamweaver CS5 sehr ausführlich aus und schlagen nicht nur die passende Syntax vor, sondern parsen auch zwischendurch den PHP-Code. Noch während man Code eintippt, erscheinen Beschreibungen über Parameter und Rückgabewerte. Links verweisen zu den dazu passenden Stellen im Handbuch auf der php.net-Homepage.

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.

Browseranpasung im Online-Testlabor

Die Anpassung von Seitenlayouts an verschiedene Browser und Betriebssysteme ist einer der größten Zeitfresser im Webdesign. Auch hier will Adobe Abhilfe schaffen. Browserlab (browserlab.adobe.com), ein neuer Online-Service, erleichtert es, die gestalteten Webseiten in den verschiedenen Browsern zu testen.

Browserlab ist mit einer Palette zwar direkt in Dreamweaver präsent, ein Klick führt aber auf die Adobe-Website und verlangt zunächst eine Einrichtung eines CS-Live-Services-Kontos.

Nach der Anmeldung kann man in einer Zweifachansicht, oder sogar halbtransparent übereinander gelagert, die aktuelle Seite in verschiedenen Browsern und Systemen vergleichen und so Unterschiede leicht herausfinden, zum Beispiel wie sich unterschiedlich laufender Text auf das Layout auswirkt. Eine tolle Sache, schade nur, dass der Creative-Suite-Käufer nach einem kostenlosen Jahr den Service monatlich extra bezahlen soll.

HTML 5 und CSS3 nachgeliefert

HTML 5 und CSS3 sind derzeit ein heißes Thema. Viele Webdesigner waren auf die Antwort von Adobe und Dreamweaver gespannt. In CS5 war davon wenig zu sehen. Der Standard sei noch nicht fertig, hieß es bei der Vorstellung der Betaversionen und auch in der finalen Software ist zunächst bis auf die Möglichkeit, HTML5 im Doctype zu definieren, nichts in Dreamweaver vom wahrscheinlich wichtigsten Zukunftsstandard des Web zu sehen.

Stimmt zwar, aber ist es nicht wichtig für Webdesigner früh auf den wohl sicher kommenden Standard zu setzen - und für Dreamweaver die Werkzeuge dafür zu liefern? Zum Glück ist das Programm dank seiner Erweiterbarkeit flexibel. So konnte Adobe kurz nach dem Start die Extension HTML5 Pack nachliefern (Download unter http://labs.adobe.com/downloads/html5pack.html).

Nach der Installation beherrscht Dreamweaver neue Code-Hinweise für HTML 5 und CSS3. Außerdem wird mit dem Paket die Webkit-Engine aktualisiert, damit Audio- und Videoinhalte in der Live-Ansicht besser unterstützt werden und das Paket liefert neue HTML5-Startvorlagen. Besser als nichts und da es kostenlos ist, spricht sowieso nichts dagegen, es zu installieren.

Empfehlung

Wer viel mit PHP, CSS oder CMS-Systemen wie Wordpress & Co arbeitet, wird sich über die Neuerungen in Dreamweaver CS5 freuen, da er den Webeditor nur noch selten verlassen muss. Einsteigern vereinfacht er das Erlernen von CSS, Profis freuen sich über leichteres Debugging. Vieles hätten wir schon in der letzten Version erwartet. Zuletzt verwundert die nur als Erweiterung nachgeschobene Unterstützung von HTML 5 und CSS3. (Macwelt/haf)