Alle in einem

Dreamweaver-Simulationen und mehr

  1. Adobe Browserlab: Online-Service
  2. Dreamweaver-Simulationen und mehr

Die Grundansicht der Screenshots ist eine Einzelansicht. Per Drop-down-Menü wählt der Nutzer zwischen den verschiedenen Browsern und sieht bereits im offenen Menü, ob der Screenshot vorliegt oder nicht. Drückt der Nutzer die 2, präsentiert Browsershots eine Doppelfensteransicht für den direkten Vergleich zum Beispiel zwischen einem Referenzbrowser und den anderen Kandidaten.

Scrollt der Nutzer nun das rechte von beiden Fenstern, so wird das linke mitgezogen. Zieht er die Maus über den Bildschirm und drückt dabei die Shift-Taste, erscheint über dem anderen Screenshot ein Geistermauszeiger. Damit lässt sich trefflich die absolute Positionierung bestimmter Elemente überprüfen. Und auch die Bildschirmlupe arbeitet für beide Ansichten simultan.

Wer es ganz genau haben will, dem sei die Taste 3 angeraten. Sie öffnet den dritten Ansichtsmodus nämlich die Zwiebelschichten. Animateure kennen das: Ein Zustand wird halbtransparent über einen anderen gelegt, um die Unterschiede der beiden zu identifizieren. Ein Schieberegler im Kopf der Seite bestimmt die Deckkraft des oberen Screenshots und so erkennt der Designer selbst feinste Differenzen.

Browserlab und Dreamweaver

Nur wer mit Dreamweaver arbeitet, kann das volle Potenzial von Browserlab ausschöpfen. Denn was bei allen Screenshot-Lösungen fehlt, ist die Möglichkeit, interaktive Zustände zu testen. Lösungen, die mit Remote-Verbindungen arbeiten, erlauben das natürlich jeweils für einen alternativen Browser pro Session. Von einem gestalterischen Gesichtspunkt ist aber vor allem die Frage spannend, wie sich die Interaktion auf die unterschiedlichen Darstellungen in den Browsern auswirkt.

Laden Sie also die beiden Extensions für Dreamweaver von der Browserlab-Startseite. Sie benötigen eventuell noch ein Patch für den Adobe-Installer, doch die Extensions werden Ihnen das mitteilen, sobald Sie sie zur Installation doppelklicken.Nach der Installation starten Sie Dreamweaver und öffnen eine beliebige Webseite. Sie haben zwei Möglichkeiten, auf Browserlab zuzugreifen. Zum einen findet sich der direkte Zugang im Menü: Vorschau im Browser. Zum anderen gibt es eine neue Palette.

Nach der Installation starten Sie Dreamweaver und öffnen eine beliebige Webseite. Sie haben zwei Möglichkeiten, auf Browserlab zuzugreifen. Zum einen findet sich der direkte Zugang im Menü: Vorschau im Browser. Zum anderen gibt es eine neue Palette.

Sie finden sie unter Fenster/Erweiterungen. Aus diesem Fenster übertragen Sie direkt die aktuellen Inhalte, an denen Sie arbeiten zu Browserlab. Die einzige Bedingung, damit diese Form der Ansicht funktioniert, ist das Arbeiten mit absoluten Links für die Bilder. Sie benötigen also ein Format wie

<img src="http://www.meinserver.de/
images/bild.jpg">

statt

<img src="images/bild.jpg">

Außerdem müssen sich die Bilder schon auf Ihrem Webserver befinden.

Das neue Feature Live-Preview ermöglicht Ihnen in Dreamweaver CS4 AJAX-, CSS- und Javascript-Effekte im Browser zu simulieren. Lösen Sie beispielsweise einen Rollover-Effekt aus, indem Sie mit der Maus eine interaktive Grafik berühren.

Nun drücken Sie F6. Dadurch wird Javascript in der Liveansicht deaktiviert und der Code praktisch eingefroren. Wenn Sie jetzt Browserlab starten, wird eben dieser Code auf die Adobe-Server geladen und Sie sehen in den Screenshots das Ergebnis der Interaktion und dessen Wirkung auf die unterschiedlichen Browseransichten.

Unterm Strich lässt sich mit Browserlab trefflich und intuitiv arbeiten. Natürlich fehlen weitere Browser, Betriebssysteme und Bildschirmauflösungen. Doch wer DevicecCentral kennt, muss darum nicht fürchten. Schön wäre auch ein Dreamweaver-Upload bei dem die Bilder mitgenommen werden.

Mehr zum Thema

Symfonys neue Versionen
Evolutionär

Vor Kurzem gab es Symfony gleich in zwei neuen Versionen. Dieser Artikel zeigt die Unterschiede zwischen den beiden und die neuen Funktionen.
image.jpg
Optimierung

Wer schnell im Web etwas nachsehen möchte, hat keine Zeit auf den Browser zu warten. Sparen Sie sich deshalb vor allem unnötige Werbung.
Das ist neu in IE 9 und Firefox 4
Neue Browser-Versionen

Neue Versionen der beiden großen Browser stehen bevor: Der Artikel zeigt die wichtigsten neuen HTML und CSS-Features für die Webentwicklung.
Browserstatistik Europa
Browserstatistik

Jeder fünfte europäische Internet-Nutzer surft mit Google Chrome. So lautet das Ergebnis einer aktuellen Studie des Webanalyse-Anbieters AT Internet,…
image.jpg
Ratgeber: "Bildbearbeitung"

Der Cloud sei Dank entstehen im Netz immer mehr Werkzeuge, die komplexe Rechenprozesse in einfache Interfaces packen. Das gilt auch für die…