Hallo.
In diesem Video geht es um die Vorschau einer Website, die wir mit Dreamweaver erstellt haben.
Wir verwenden dazu die neue Echtzeitvorschau im Browser von Dreamweaver.
Das hier ist die Website, an der wir arbeiten.
Wir wollen sie auf verschiedenen Geräten überprüfen.
Wozu?
Es soll eine responsive Site sein.
Das heißt, dass sie sich ändert, je nachdem, auf welchem Bildschirm sie angezeigt wird.
Die Echtzeitvorschau befindet sich hier rechts unten.
In diesem Beispiel verwende ich Google Chrome.
Das also ist die Website in Chrome.
Während ich arbeite, lasse ich das Browser-Fenster gerne auf meinem zweiten Monitor geöffnet.
So sehe ich alle Änderungen, die ich in Dreamweaver vornehme, sofort auf dem Desktop.
Die Desktop-Ansicht ist natürlich wichtig, aber die Darstellung muss auch auf anderen Geräten geprüft werden, z.
B.
Smartphone oder Tablet.
Damit das funktioniert, müssen die Geräte mit demselben WLAN verbunden sein.
All meine Geräte sind mit meinem Büronetzwerk verbunden.
Um die Vorschau auf den Geräten zu starten, haben Sie verschiedene Möglichkeiten.
Klicken Sie auf die Schaltfläche für die Echtzeitvorschau, und tippen Sie die URL ab.
Ich tue das auf dem Tablet.
So ...
Und schon wird die Website auf dem Tablet angezeigt.
Die zweite Methode ist spannender.
Dabei wird ein QR-Code verwendet, der hier angezeigt wird.
Zuerst müssen Sie einen QR-Code-Scanner auf Ihr Gerät herunterladen.
Dafür gibt es zahlreiche kostenlose Apps.
Ich öffne meine, visiere den Code unten im Bildschirm an – und fertig.
Noch einen Augenblick ...
Hier ist die Site auf dem Smartphone!
Sie sehen, dass die Website responsiv ist und ihr Aussehen je nach Gerät ändert: Text und Layout sind anders und an die unterschiedlichen Bildschirme angepasst.
Das wirklich Spannende ist aber, dass alle Änderungen sofort angezeigt werden.
Ich demonstriere das mal an dieser Fußzeile.
In Dreamweaver navigiere ich zum Code, der die Farbe für den Verlauf steuert.
Diesen Wert setze ich auf Null.
Sofort zeigen beide Geräte die Änderungen an.
Das ist sehr praktisch, wenn Sie z.
B. kleine Änderungen nur für den mobilen Browser machen wollen.
Dabei sollten Sie sich vergewissern, dass die Änderungen nicht auch auf anderen Bildschirmen angezeigt werden.
So etwas sehen Sie sofort, noch während Sie an der Website arbeiten.
Damit bin ich am Ende angelangt, und Sie wissen, wie Sie eine Vorschau Ihrer Website über die fantastische Echtzeitvorschau von Dreamweaver aufrufen.
