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

Wir zeigen, welche Alternativen zu AdBlock Plus es gibt.
AdBlock Plus Alternative

PC Magazin stellt AdBlock Plus Alternativen für Chrome, Firefox und den Internet Explorer vor. Mit unseren Tipps blenden Sie spielend leicht Werbung…
Die Whatsapp-Alternative bietet mehr Sicherheit & Anonymität.
Sichere Whatsapp Alternative

Mit den richtigen Einstellungen ist Telegram eine sichere Whatsapp-Alternative. Wir zeigen, wie Sie die App einrichten und die Verschlüsselung…
Home Cloud mit Laptop, Smartphone, Tablet und WD Festplatte.
WD My Cloud, MyFritz & Co.

Wir zeigen, wie Sie Cloud-Server im Heimnetzwerk einrichten. Wir erklären Western Digital My Cloud, AVM MyFritz und Synology Quickconnect.
Internet Breitband-Download
WLAN-Tipps

Jeder IT-Profi braucht ein paar nützliche Werkzeuge, um sein WLAN schnell und sicher zu halten. PC Magazin zeigt nützliche Tipps und Tools.
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.