Workshop: Adobe Dreamweaver CS5

Dreamweaver CS5 ist Teil von Adobes Creative Suite 5, aber auch als einzelne Anwendung erhältlich. Für die Teilnahme an unserem Workshop reicht die Demo- Version, die Sie gegen Registrierung mit Ihrer E-Mail-Adresse von www.adobe.com herunterladen können. Sie steht für Windows und Mac OS X zur Verfügung und ist 480 beziehungsweise 860 Megabyte groß.Als Code-Beispiel verwenden wir im gesamten Workshop eine Website, die auf der frei verfügbaren Software Wordpress basiert. Sie finden diese Software unter de.wordpress.org. Laden Sie Wordpress herunter und packen Sie den Download aus.Sofern Sie Dreamweaver lieber mit Ihrer eigenen Website testen möchten, sollten Sie davon zuvor eine Kopie anfertigen. Es ist außerdem zweckmäßig, dass Sie eine dynamisch generierte Website verwenden (beispielsweise mit PHP und MySQL), denn nur so können Sie die vorgestellten Dreamweaver- Funktionen vollständig ausprobieren.

Vereinfachtes Site-Setup

Gegenüber CS4 hat Adobe das Einrichten einer neuen Dreamweaver-Website deutlich vereinfacht. Sie klicken im Begrüßungsbildschirm unter Neu erstellen auf Dreamweaver- Website, vergeben einen Namen und weisen Dreamweaver den Weg zum lokalen Site-Ordner, also dem Verzeichnis, in dem die Website-Dateien auf Ihrer Festplatte gespeichert sind.

Weitere Infos können Sie jetzt eingeben oder dies später nachholen. Für unseren Workshop legen wir unter Erweiterte Einstellungen/Lokale Info noch einen Standard-Bilderordner (Unterordner wp-content/themes/default/images des Wordpress-Verzeichnisses) fest. In diesem legt Dreamweaver alle Bilddateien ab, die es erzeugt.Weiter geht es mit einem Klick auf Speichern und dem Schließen des Begrüßungsbildschirms. Dreamweaver lädt die neue Website automatisch. Erkennbar ist das am entsprechend aktivierten Eintrag im Dateien-Fenster am rechten unteren Bildschirmrand.

Server einrichten

Stellen Sie sicher, dass rechts daneben Lokale Ansicht aktiviert ist, damit Dreamweaver die im wordpress-Ordner gespeicherten Dateien zeigt. Dann klicken Sie doppelt auf die Datei index.php, um sie in Dreamweaver zu laden. Gehen Sie nun auf Live-Ansicht, damit Dreamweaver die Website so anzeigt, wie sie in einem Browser erscheinen würde.Statt der Website kommt allerdings der Hinweis, dass die Vorschau (wegen PHP) einen Testserver erfordert, verbunden mit der Frage, ob Sie diesen nun konfigurieren möchten. Ein Klick auf den Ja-Knopf bringt Sie zurück in die Einstellungen für die Website, wo ein orangefarbener Asterisk neben der Rubrik Server darauf hinweist, dass hier noch Einstellungen fehlen.Eine der nützlichsten neuen Funktionen von CS5 ist die Möglichkeit, einem Projekt beliebig viele Server zuzuordnen. So können Sie beispielsweise einen lokalen Entwicklungsserver, einen Versionsverwaltungs-Server und den Live-Server gleichzeitig konfigurieren. Klicken Sie auf das +-Zeichen, um die Daten für Ihren Webserver einzugeben.

Neue CSS-Funktionen

Nun erscheint die Website in der Live-Ansicht. Diese ist dank der neuen Überprüfen- Funktion besonders nützlich, um Änderungen am Design vorzunehmen. Bisher musste man regelmäßig auf Firefox und Firebug oder den Webkit-Inspektor von Safari und Chrome zurückgreifen, wollte man sehen, welches CSS für das Aussehen eines bestimmten Seitenelementes zuständig ist. Mit der Überprüfen- Funktion ist nun eine vergleichbare Funktion direkt in CS5 zuhause, was den Rückgriff auf den Browser und das händische Übertragen dort vorgenommener Code-Änderungen erspart.