Adobe Creative Suite 5

Workshop: Adobe Dreamweaver CS5

Vereinfachtes Website-Setup, integrierter CSS-Debugger und Unterstützung für Wordpress, Joomla und Drupal - viele neue Funktionen für Webdesigner.

  1. Workshop: Adobe Dreamweaver CS5
  2. CSS-Eigenschaften abschalten
image.jpg

© Internet Magazin

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.

image.jpg

© Internet Magazin

In den Dreamweaver-Website-Einstellungen finden Sie die meisten Optionen jetzt unter Erweiterte Einstellungen.

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.

Mehr zum Thema

Whatsapp auf PC
Mit oder ohne Download

Mit Whatsapp Web oder der Whatsapp Desktop-App nutzen Sie den Messenger bequem am PC. Wir erklären Download, Installation und Einrichtung.
Whatsapp Alternativen
Für Android, iPhone, iPad & Co.

Es gibt keine Whatsapp-Alternative? Quatsch! Diese 10 Messenger-Apps für Android, iOS und Windows Phone sind der perfekte Ersatz.
Kalender synchronisiert auf iPad
Zeit-Management

Kalender auf dem Smartphone, PC und im Web synchronisieren - mit unseren 9 Tipps schaffen Sie genau das. Verpassen Sie keinen Termin mehr!
Cloud-Speicher
Meta-Cloud

Diese Meta-Dienste und Cloud-Tools fassen kostenlosen Cloud-Speicher von Google, Dropbox und Co. zusammen - oft besser als das Original.
Dropbox, Google Drive & Co.: Steckdose mit Logos
Verschlüsselung, Explorer-Zugriff & Co.

Wir haben Tipps für Add-ons und Apps für Google Drive und Dropbox. Damit kommen Verschlüsselung, Zugriff im Windows-Explorer und mehr.