dreamweaver CS5Dreamweaver CS5

Gestalten Sie Ihre Websites mit schneller Dreamweaver CS5 . Die neue Version ermöglicht es Ihnen, Webseiten schnell und leicht zu entwerfen. Sie werden auch überrascht sein von dem neuen Tool: Die Adobe BrowserLab Testen erlauben Ihre Website in allen Browsern die besten Grafikenrendern zu haben. Wir alles wissen, daβ die Standards in jedes Browser variieren können.

Dreamweaver: Neuerungen

In Dreamweaver CS5 haben wir uns darum bemüht, Workflows aus den Vorgängerversionen von Dreamweaver zu vereinfachen, um sie besser an die Arbeitsweise von Designern anzupassen. Mehrere Neuerungen betreffen die CSS-Visualisierung. Zuerst stelle ich Ihnen den CSS-Prüfmodus vor. Viele Anwender durchsuchen die Live- oder Entwurfsansicht, wenn sie Regeln oder Selektoren prüfen und anpassen wollen.

Der neue Modus ersetzt diese umständliche Methode. Ich klicke nun auf „Inspect“ (Überprüfen) und öffne die Live-Ansicht. Sie sehen eine mit WebKit gerenderte Seite. Wenn ich den Cursor über bestimmte Bereiche bewege, werden sie hervorgehoben, zum Teil auch farblich markiert. Das Box-Element, das wir uns gerade ansehen, ist blau. Lila Streifen kennzeichnen Rahmen, gelbe Streifen Auffüllungen. Sie können hier genau beobachten, wie das Box-Modell auf der Seite visualisiert und gerendert wird. So erhalten Sie eine wesentlich bessere Vorstellung von der Auswirkung des CSS auf die einzelnen Design-Komponenten. Das beschleunigt die Arbeit erheblich. Ich muss nur hier klicken und den Cursor über einen Abschnitt im Skript bewegen. Im Bedienfeld „CSS Styles“ (CSS-Stile) sehen Sie, dass die Seite in diesem Status festgehalten wird. Ich kann jetzt beliebige Änderungen daran vornehmen. Im aktivierten Prüfmodus bewege ich den Cursor über einige Seitenbereiche.

Sie sehen diese großartige Visualisierung des CSS-Box-Modells, während die CSS-Stile in Echtzeit aktualisiert werden. So lassen sich rasch Stile und Regeln ermitteln, die angepasst werden müssen. Außer der Visualisierung wurden auch die Funktionen zur Bearbeitung von Regeln erweitert. Ich werden es Ihnen anhand der Optionen für CSS-Stile demonstrieren. In der Testphase erstellen Sie oft diverse zusätzliche Stile, die sich nur leicht voneinander unterscheiden, und wechseln zwischen ihnen hin und her. Bislang mussten Sie hierzu den Code anpassen. Jetzt brauchen Sie nur noch den Cursor nach rechts in das Bedienfeld für CSS-Stile zu bewegen und die Auswahl der gewünschten Optionen rückgängig machen. Deaktivieren wir zum Beispiel die rechte Auffüllung. Änderungen erfolgen sofort. Sie sehen, dass die Auffüllung verschwunden ist und die Seite in Echtzeit aktualisiert wurde. Sie können also genau nachvollziehen, wie sich diese Stiländerungen auf den Entwurf auswirken. Wenn ich den CSS-Prüfmodus aktiviere, sehen Sie auch, dass sich das Box-Modell geändert hat. Bei erneuter Aktivierung der Auffüllung erscheint wieder der lila Rahmen. Wir sehen genau, was mit der Seite passiert, obwohl diese Rahmen und Ränder unsichtbar sind. Eine äußerst praktische Sache.

Das hier ist eine statische Homepage. Die Seite enthält aber auch einige dynamische Bereiche. Zum Testen einer dynamischen Anwendung oder Hybrid-Website wie dieser  prüfen Sie u. a. die Verknüpfungen zwischen der statischen und der dynamischen Website. Mitunter müssen Sie auch in eine dynamische Anwendung klicken. Dreamweaver bietet zu diesem Zweck jetzt einen Navigationsmodus in der Live-Ansicht. Diese lokale Audioverknüpfung rechts ist mit einem Blog-Framework verbunden. Bei gedrückter Befehlstaste kann ich Dreamweaver in einen Pseudo-Browser verwandeln. Die Blog-Seite wurde jetzt direkt vom lokalen Test-Server geladen. Ich kann prüfen, ob diese Navigations-Links funktionieren, und mit der Seite interagieren und diverse Funktionen testen. Zum Überprüfen von Verknüpfungen ist das wirklich hilfreich. Noch praktischer ist es beim Testen von Anwendungen. Ich deaktiviere die Live-Ansicht und wechsle zur Blog-Seite. Ich möchte Ihnen die Vorteile dieser Funktion bei dynamischen Anwendungen zeigen. Hier sehen Sie die Homepage von Word Press.

Sie sehen jetzt keinen Text, weil der Zugriff darauf etwas komplex ist und einen PHP-Server erfordert. Die Aktivierung der Live-Ansicht führt uns direkt zum Test-Server, der diese PHP-Ansicht erstellt und hier wie in einem echten Browser anzeigt. Der Clou besteht darin, dass ich mit dem Blog-Framework, in diesem Fall Word Press, innerhalb der Live-Ansicht von Dreamweaver interagieren kann. Den Unterschied zwischen einer Veröffentlichungsseite und einer Homepage sehe ich, wenn ich die Befehlstaste drücke, auf den Link klicke und zur untergeordneten Veröffentlichungsseite springe. So können Designer sehr effektiv jeden Aspekt einer dynamischen Anwendung unter die Lupe nehmen und optimieren. In früheren Versionen von Dreamweaver sahen Sie nur die erste Version der Seite. Jetzt können Sie sich durch verschiedene Entwurfsstadien ihrer Anwendung klicken und sie gezielt überarbeiten. Sie müssen lediglich den Prüfmodus aktivieren und können dann zu jeder Zeit Änderungen an der Seite vornehmen. Mit dieser praktischen Funktion lassen sich Anwendungen auf eine Art und Weise bearbeiten, die bisher weder in Dreamweaver noch in irgendeiner anderen Authoring-Anwendung möglich war.

Im Zusammenhang mit Dynamik möchte ich noch auf einige Funktionen von Dreamweaver CS5 hinweisen, die speziell für dynamische Anwendungen, insbesondere Blog-Frameworks, entwickelt wurden. Die wichtigste ist die jetzt dynamische Funktion für zugehörige Dateien. Hier links wird unser Blog gerendert. Ich klicke und wechsle wieder zur Homepage des Blogs. Diese Homepage besteht im Grunde aus define- und require-Anweisungen, die eine ganze Menge Code erzeugen, auf den wir nicht zugreifen können, solange er nicht auf dem Server ausgeführt wird. Wenn wir den Live-Code aktivieren, können wir ihn im Markup darstellen, den der Browser verwendet. Ich möchte aber auf die zugehörigen Dateien zugreifen, von denen es bei dieser Seite sehr viele gibt. Ich klicke auf die neue Funktion „Discover“ (Suchen), die die ebenfalls neue Funktion „Dynamic Related Files“ (Dynamische zugehörige Dateien) aktiviert.  Diese durchsucht den Code und findet alle Bezüge auf diese zugehörigen Dateien und Objekte sowie die geladenen PHP-Dateien. Sie sehen, dass die Leiste mit den zugehörigen Dateien sehr lang ist. Da müssen Sie ein ganze Weile blättern, um bis zum Ende zu gelangen.

Für Programmierer ist das praktisch, da sie jetzt Zugriff auf PHP-Dateien haben, was bisher nicht möglich war. Als Designer möchten Sie aber nicht unbedingt alle Dateien auf einmal sehen. Sie interessieren sich meist nur für ganz bestimmte, etwa die Stylesheets. Blenden Sie in dem Fall einfach die Dateien aus, die Sie nicht interessieren, z. B. die JavaScript-, PHP- und XML-Dateien. Jetzt sehen Sie nur noch diese beiden Stylesheets, die die ganze Seite ausfüllen. Falls Sie nur einen bestimmten Dateityp benötigen, können Sie einen eigenen Filter erstellen. Wenn ich zum Beispiel „*wp-*.php“ eingebe, werden nur die Word Press-Konfigurationsdateien gezeigt. Sie können also genau festlegen, welche Dateien in der Leiste der zugehörigen Dateien angezeigt werden. Ob Ihre Anwendung nun 2 oder 200 Dateien verwendet, hier erhalten Sie einen raschen Überblick über Ihre Objekte und können Ihren Blog-Framework zielgerichtet bearbeiten. Durch Kombination der beiden dynamischen Funktionen sowie der CSS-Funktionen können Sie Ihre Kenntnisse über statische Designs ebenso einfach.