Unser Spezialist für Medienintegration, Marc Thiele, führt Sie durch die neue Benutzeroberfläche und die neuen Arbeitsbereichslayouts von Dreamweaver CS4. Er zeigt Ihnen, wie Smart Objects für die nahtlos-effektive Photoshop-Integration sorgen, erklärt Ihnen stilvoll die neuen CSS-Funktionen, inspiziert den Eigenschafteninspektor, leitet Sie durch die Geheimnisse des Code-Navigators, liefert Informationen über das Spry-Quickinfo-Widget und zeigt Ihnen Live-Ansicht und -Code. Nebenbei geht es darum, JavaScript optimal auszulagern. Thiele sprudelt die Infos über Spry mit seinen Optionsschaltergruppen nur so heraus und erklärt, wie Sie HTML-Datensätze damit nutzen.

 

Aus dem Inhalt

Mit der neuen Version hat Dreamweaver ein entscheidendes Facelifting bekommen. Neben dem neuen Aussehen überzeugt vor allem die Funktionalität: Die neue Oberfläche OWL erlaubt dem Benutzer, sich eine frei wählbare Arbeitsumgebung innerhalb von Dreamweaver zu schaffen.

Definieren Sie die komfortabel eingerichtete Arbeitsumgebung als Arbeitsbereichlayout! Zusammen mit diesem Arbeitsbereichlayout speichert Dreamweaver neue Ansichtsoptionen, wie die geteilte Code-Ansicht oder die Positionswahl der Entwurfsansicht bei der geteilten Ansicht. Die integrierte Anzeige der zugehörigen Dateien ermöglicht dabei schnellen Zugriff auf externe Dateien der geöffneten Web-Seite.

Seit Dreamweaver CS3 kann das Programm Photoshop-Daten nutzen. In CS4 können Sie diese Dateien sogar direkt platzieren. Doch damit nicht genug: Die Datei - als Smart Object platziert - "erinnert" sich an den vollständigen Dateipfad und den letzten aktuellen Status: Wann immer die Photoshop-Quelldatei verändert wurde, erkennen Sie das am Indikator und können das eingebettete Bild sofort aktualisieren.

 

In Praxis-Workshops erklärt Marc Thiele den erweiterten Eigenschafteninspektor für das Erstellen und Bearbeiten von CSS-Regeln, den neuen Code-Navigator, mit dem Sie im Handumdrehen die CSS-Regeln erreichen, die auf ein ausgewähltes Element angewendet werden und zeigt, wie Sie diese editieren.

Eine der neuen Funktionen des Adobe-Ajax-Frameworks Spry nennt sich Spry-Quickinfo. Sehen Sie live, wie Sie damit schnell und einfach ansprechende und informative Tooltips erstellen.

Die integrierte Live-Ansicht zeigt nun auch JavaScript-Aktionen beziehungsweise den JavaScript-Code in vollem Umfang. Damit prüfen Sie etwa die über das Spry-Framework eingefügten JavaScript-Funktionen oder auch CSS-Formatierungen zur Laufzeit.

Um Struktur und Gestaltung der Web-Seiten-Entwürfe richtig zu trennen, sollten Sie gegebenenfalls JavaScript-Code in externe Dateien auslagern. Dafür hat Dreamweaver jetzt eine eigene Funktion! In diesem Beispiel wandert der JavaScript-Codeblock für einen Bildaustausch vom Seiten-Header in eine externe Datei.

Das Spry-Framework erleichtert das Überprüfen der platzierten Formularelemente. Die neue Dreamweaver-Version enthält nun auch einen Menüeintrag für Optionsschaltergruppen.

Über das Spry-Bedienfeld erreichen Sie schnell die Funktionen, mit denen Sie Formularelemente einfügen und Überprüfungsfunktionen einbauen. Als Beispiel zeigt Ihnen hier Marc Thiele eine neue Spry-Funktion für Passwortkontrolle.

Jetzt ebenfalls möglich: HTML-Datensätze mit dem Spry-Framework einbinden. Der Vorteil ist, dass Sie damit mehrfach genutzte Daten zentral verwalten und jede Änderung sofort im gesamten Projekt aktualisiert ist.

 

Voraussetzungen:

• DSL-Internet-Verbindung
• aktueller Browser mit Flash-Plugin
• Bildschirmauflösung mind. 1024x768
• Soundkarte, Lautsprecher bzw. Kopfhörer
• Pentium 4 ab 2,6 GHz bzw. G5
• 512 MB RAM