Zeigen Sie eine Vorschau Ihrer Webseiten in Dreamweaver, in Browsern und auf mobilen Geräten an.

Die Echtzeitvorschau ermöglicht es Ihnen, eine Vorschau der Seiten im Browser und auf Mobilgeräten zu öffnen und beim Programmieren die Änderungen in Echtzeit im Browser oder auf dem Gerät anzuzeigen.

Die Live-Ansicht stellt Ihre Seite annähernd so dar, wie sie im Web aussehen wird. Sie können die Elemente in der Codeansicht bearbeiten.

Auch die Entwurfsansicht stellt Ihre Seite annähernd so dar, wie sie im Web aussehen wird. Sie wird jedoch nicht genau so gerendert wie in einem Webbrowser.

Mit der Funktion „Im Browser öffnen“ können Sie prüfen, wie Ihre Seiten in Browsern dargestellt werden. Dies ist die beste Methode, um mit Seiten zu arbeiten, die dynamische Daten aus Datenbanken verwenden, da dies nicht in Echtzeit umsetzbar ist.

Lesen Sie weiter, um mehr über die verschiedenen Arten von Vorschauoptionen in Dreamweaver zu erfahren.

Echtzeitvorschau im Browser

Sie können eine Vorschau der Webseiten in Echtzeit anzeigen, während Sie sie in Dreamweaver programmieren oder entwerfen. Dies ermöglicht es Ihnen, die Webseiten zu programmieren und ihre Vorschau in mehreren Browsern gleichzeitig anzuzeigen. 

Echtzeitvorschau von Änderungen im Browser
Echtzeitvorschau von Änderungen im Browser

Hinweis:

Sie können während des Programmierens die Seite auch auf Mobilgeräten in Echtzeit anzeigen. Weitere Informationen finden Sie unter Dreamweaver-Webseitenvorschau auf mehreren Geräten.

  1. Klicken Sie auf der Dreamweaver-Statusleiste auf „Echtzeitvorschau“.

    Echtzeitvorschau
    Echtzeitvorschau

    Sie können die Echtzeitvorschau der Webseiten in einem Browser oder auf einem Gerät anzuzeigen.

    Informationen zum Anzeigen der Webseitenvorschau auf einem Gerät finden Sie unter Webseitenvorschau in Dreamweaver auf mehreren Geräten.

  2. Um eine Vorschau der Webseiten im Browser anzuzeigen, klicken Sie auf eine der verfügbaren Browseroptionen.

    Hinweis:

    Sie können die Browser bearbeiten, die in dieser Liste aufgeführt sind. Informationen zum Hinzufügen oder Entfernen eines Browsers in dieser Liste finden Sie unter Browservoreinstellungen festlegen.

    Wenn Sie einen Testserver verwenden, stellen Sie sicher, dass Sie beim Einrichten des Testservers „Dateien automatisch auf Testserver übertragen“ aktivieren. 

    Für die Echtzeitvorschau werden die Dateien auf dem Testserver verwendet. Durch Aktivieren der automatischen Übertragung auf den Testserver stellen Sie sicher, dass die Änderungen in Echtzeit angezeigt werden. 

    Automatische Übertragung auf den Testserver aktivieren
    Automatische Übertragung auf den Testserver aktivieren

  3. Speichern Sie die Webseite und die zugehörigen Dokumente, wenn Sie dazu aufgefordert werden.

    Ein Browser wird geöffnet, in dem die Webseite angezeigt wird.

  4. Programmieren Sie die Seite und beobachten Sie während des Programmierens die Änderungen im Browser.

Voreinstellungen für die Vorschau im Browser festlegen

Sie können Voreinstellungen für den Browser festlegen, der für die Vorschau einer Site verwendet wird, sowie einen standardmäßigen Primär- und Sekundärbrowser definieren.

Diese Browsereinstellungen werden unabhängig davon verwendet, ob Sie Ihre Site live in der Echtzeitvorschau oder die Seite einfach im Browser öffnen.

  1. Wählen Sie „Datei“ > „Echtzeitvorschau“ > „Browserliste bearbeiten“.

  2. Um der Liste einen Browser hinzuzufügen, klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), geben im Dialogfeld „Browser hinzufügen“ die erforderlichen Details ein und klicken dann auf „OK“.
  3. Um einen Browser aus der Liste zu löschen, wählen Sie ihn aus und klicken dann auf die Schaltfläche mit dem Minuszeichen (–).
  4. Um die Einstellungen für einen ausgewählten Browser zu ändern, klicken Sie auf die Schaltfläche „Bearbeiten“, führen die Änderungen im Dialogfeld „Browser bearbeiten“ durch und klicken dann auf „OK“.
  5. Mit den Optionen „Primärbrowser“ und „Sekundärbrowser“ können Sie angeben, ob es sich beim gewählten Browser um den primären oder den sekundären Browser handelt.

    Mit F12 (Windows) bzw. Wahl+F12 (Mac) wird der Primärbrowser geöffnet und mit Strg+F12 (Windows) bzw. Befehl+F12 (Mac) der Sekundärbrowser.

  6. Aktivieren Sie die Option „Vorschau mit temporärer Datei“, um für Vorschau und Serverdebuggen eine temporäre Kopie zu erstellen. (Deaktivieren Sie die Option, wenn Sie das Dokument direkt aktualisieren möchten.)

Seitenvorschau in der Live-Ansicht

Die Live-Ansicht unterscheidet sich von der herkömmlichen Dreamweaver-Entwurfsansicht dadurch, dass sie eine nicht bearbeitbare, realistischere Darstellung Ihrer Seite in einem Browser bietet, die gleichzeitig bearbeitbar ist. 

Wenn Sie sich in der Entwurfsansicht befinden, können Sie jederzeit zur Live-Ansicht wechseln. Der Wechsel zur Live-Ansicht ist jedoch nicht mit dem Wechsel zwischen den anderen herkömmlichen Dreamweaver-Ansichten (Codeansicht/Geteilte Ansicht/Entwurfsansicht) vergleichbar. Beim Wechseln aus der Entwurfsansicht zur Live-Ansicht wird die Entwurfsansicht lediglich zwischen den beiden Zuständen „bearbeitbar“ und „live“ umgeschaltet.

Nach dem Wechsel zur Live-Ansicht ist die Entwurfsansicht zwar fixiert, die Codeansicht bleibt jedoch bearbeitbar. Sie können also Codeänderungen vornehmen und dann die Live-Ansicht aktualisieren, um die Änderungen zu übernehmen. In der Live-Ansicht besteht die zusätzliche Möglichkeit, zur Live-Codeansicht zu wechseln. Die Live-Codeansicht entspricht insofern der Live-Ansicht, dass eine Version des Codes angezeigt wird, den der Browser zum Darstellen der Seite ausführt. Wie die Live-Ansicht ist auch die Live-Codeansicht nicht bearbeitbar.

Ein zusätzlicher Vorteil der Live-Ansicht ist die Möglichkeit, JavaScript anzuhalten. Sie können beispielsweise zur Live-Ansicht wechseln und den Mauszeiger über jQuery-basierte Tabellenzeilen führen, deren Farbe sich in Abhängigkeit von der Benutzerinteraktion ändert. Wenn Sie dann JavaScript anhalten, wird die Seite in der Live-Ansicht in ihrem aktuellen Zustand fixiert. Sie können nun den CSS- bzw. JavaScript-Code bearbeiten und die Seite aktualisieren, um die Änderungen zu überprüfen. Das Anhalten von JavaScript in der Live-Ansicht ist hilfreich, wenn Sie Eigenschaften für die verschiedenen Zustände von Popupmenüs oder anderen interaktiven Elementen prüfen und ändern möchten, die in der herkömmlichen Entwurfsansicht nicht dargestellt werden.

So zeigen Sie eine Vorschau der Seiten in der Live-Ansicht an:

  1. Stellen Sie sicher, dass die Entwurfsansicht („Ansicht > „Entwurf“) oder die Code- und Entwurfsansicht („Ansicht“ > „Code und Entwurf“) ausgewählt ist.

  2. Klicken Sie auf die Schaltfläche „Live-Ansicht“.

  3. Optional: Nehmen Sie Änderungen in der Codeansicht, im Bedienfeld „CSS-Stile“, in einem externen CSS-Stylesheet oder in einer anderen zugehörigen Datei vor.

    Obwohl Codeänderungen in der Live-Ansicht nicht möglich sind, ändern sich beim Klicken in die Live-Ansicht die Optionen für Änderungen in anderen Bereichen (z. B. im Bedienfeld „CSS-Stile“ oder in der Codeansicht).

    Hinweis:

    Sie können zugehörige Dateien (wie CSS-Stylesheets) bearbeiten, während der Fokus in der Live-Ansicht bleibt, indem Sie die zugehörige Datei mithilfe der Symbolleiste „Zugehörige Dateien“ am oberen Rand des Dokuments öffnen.

  4. Nachdem Sie Änderungen in der Codeansicht oder in einer zugehörigen Datei vorgenommen haben, können Sie die Live-Ansicht aktualisieren. Dazu klicken Sie in der Symbolleiste „Dokument“ auf die Schaltfläche „Aktualisieren“ oder Sie drücken F5.

  5. Klicken Sie erneut auf die Schaltfläche „Live-Ansicht“, um zur bearbeitbaren Entwurfsansicht zurückzukehren.

Vorschau von Live-Code

Der in der Live-Codeansicht angezeigte Code entspricht der Darstellung des Seitenquelltexts in einem Browser. Während Browser-Seitenquelltext statisch ist und nur den zum jeweiligen Zeitpunkt vom Browser zur Darstellung verwendeten Code enthält, ist die Live-Codeansicht dynamisch und wird bei Interaktionen mit der Seite in der Live-Ansicht kontinuierlich aktualisiert.

  1. Stellen Sie sicher, dass die Live-Ansicht aktiv ist.

  2. Klicken Sie auf die Schaltfläche „Live-Code“.

    Dreamweaver zeigt „live“ den Code an, der vom Browser zum Ausführen der Seite verwendet wird. Der Code ist gelb markiert und kann nicht bearbeitet werden.

    Beim Interagieren mit interaktiven Elementen auf der Seite werden die dynamischen Änderungen im Code hervorgehoben.

  3. Wenn Sie die Hervorhebung der Änderungen in der Live-Codeansicht deaktivieren möchten, wählen Sie „Ansicht“ > „Live-Ansicht-Optionen“ > „Änderungen in Live-Code hervorheben“.

  4. Klicken Sie erneut auf die Schaltfläche „Live-Code“, um zur bearbeitbaren Codeansicht zurückzukehren.

Wenn Sie die Voreinstellungen für den Live-Code ändern möchten, wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac OS) und wählen dann die Kategorie „Farbe für Code“ aus.

JavaScript anhalten

Führen Sie einen der folgenden Schritte aus:

  • Drücken Sie F6.

  • Wählen Sie aus dem Popup-Menü der Schaltfläche „Live-Ansicht“ die Option „JavaScript anhalten“ aus.

Eine Statusleiste am oberen Rand des Dokuments informiert darüber, dass JavaScript angehalten ist. Klicken Sie zum Schließen der Statusleiste auf die entsprechende Verknüpfung.

Live-Ansicht-Optionen

Neben der Option „JavaScript anhalten“ stehen im Popupmenü der Schaltfläche „Live-Ansicht“ oder im Menü „Ansicht“ > „Live-Ansicht-Optionen“ noch einige andere Optionen zur Auswahl.

JavaScript anhalten Von JavaScript beeinflusste Elemente werden in ihrem aktuellen Zustand fixiert.

JavaScript deaktivieren JavaScript wird deaktiviert und die Seite erneut so dargestellt, als wäre JavaScript im Browser nicht aktiviert.

Plug-Ins deaktivieren Plug-Ins werden deaktiviert und die Seite erneut so dargestellt, als wären Plug-Ins im Browser nicht aktiviert.

Änderungen in Live-Code hervorheben Die Hervorhebung von Änderungen im Live-Code wird deaktiviert oder aktiviert..

Live-Ansicht-Seite auf einer neuen Registerkarte bearbeiten Sie können neue Registerkarten für Site-Dokumente öffnen, die Sie mithilfe der Symbolleiste „Browser-Navigation“ oder der Funktion „Hyperlink(s) aufrufen“ aufrufen. Dazu müssen Sie zunächst zum entsprechenden Dokument wechseln und dann „Live-Ansicht-Seite auf einer neuen Registerkarte bearbeiten“ auswählen, um eine neue Registerkarte für das Dokument zu erstellen.

Hyperlink aufrufen Der nächste Hyperlink, auf den Sie klicken, wird in der Live-Ansicht aktiv. Alternativ dazu können Sie bei gedrückter Strg-Taste bzw. Befehlstaste in der Live-Ansicht auf einen Hyperlink klicken, damit er aktiv wird.

Hyperlinks fortlaufend aufrufen Hyperlinks sind in der Live-Ansicht permanent aktiv, bis Sie sie wieder deaktivieren oder die Seite schließen.

Remote-Dateien automatisch synchronisieren Die lokale und die Remote-Datei werden automatisch synchronisiert, wenn Sie auf das Symbol „Aktualisieren“ auf der Symbolleiste „Browser-Navigation“ klicken. Die Datei wird vor dem Aktualisieren auf dem Server bereitgestellt, sodass beide Dateien synchronisiert sind.

Testserver als Dokumentenquelle verwenden wird hauptsächlich für dynamische Seiten (z. B. ColdFusion-Seiten) verwendet und ist für dynamische Seiten standardmäßig aktiviert ist. Wenn diese Option aktiviert ist, verwendet Dreamweaver die Dateiversion auf dem Testserver der Site als Quelle für die Anzeige in der Live-Ansicht.

Lokale Dateien für _Dokumentverknüpfungen verwenden Standardeinstellung für nicht dynamische Sites. Wenn diese Option für dynamische Sites auf einem Testserver aktiviert wird, verwendet Dreamweaver die lokalen Versionen der mit dem Dokument verknüpften Dateien (z. B. CSS- und JavaScript-Dateien) und nicht die Dateien auf dem Testserver. Sie können dann lokal Änderungen an den zugehörigen Dateien vornehmen und die Ergebnisse überprüfen, bevor Sie sie auf dem Testserver ablegen. Wenn diese Option deaktiviert ist, verwendet Dreamweaver die Versionen der zugehörigen Dateien auf dem Testserver.

Einstellungen für HTTP-Anforderungen Es wird ein Dialogfeld mit erweiterten Einstellungen angezeigt, in dem Sie Werte zum Anzeigen von Live-Daten eingeben können. Weitere Informationen erhalten Sie auch, wenn Sie im Dialogfeld auf die Hilfeschaltfläche klicken.

Im Browser öffnen

Sie können eine Seite jederzeit in einem Browser öffnen, ohne dass die Seite dafür eigens auf einen Webserver hochgeladen werden muss. Bei der Vorschau von Seiten sollten alle Browserfunktionen funktionieren, z. B. JavaScript-Verhalten, dokumentbezogene und absolute Hyperlinks, ActiveX®-Steuerelemente und Browser-Plug-Ins. Dazu müssen die erforderlichen Plug-Ins oder ActiveX-Steuerelemente jedoch in den verwendeten Browsern installiert sein.

Bevor Sie ein Dokument im Browser öffnen, müssen Sie es zunächst speichern. Andernfalls wird es im Browser ohne die letzten Änderungen dargestellt.

  1. Klicken Sie mit der rechten Maustaste auf den Dateinamen auf der Dokumentsymbolleiste und dann auf „Im Browser öffnen“.

    Hinweis:

    Wenn keine Browser aufgeführt sind, wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac). Wählen Sie anschließend die Kategorie „Vorschau im Browser“ auf der linken Seite, um einen Browser auszuwählen. Weitere Informationen finden Sie unter Voreinstellungen für die Vorschau im Browser festlegen.

  2. Klicken Sie auf die Hyperlinks und testen Sie den Inhalt Ihrer Seite.

    Hinweis:

    In der Vorschau eines Dokuments in einem lokalen Browser wird Inhalt, der mit einem zum Site-Stammordner relativen Pfad verknüpft ist, nur angezeigt, wenn Sie entweder einen Testserver angeben oder unter „Bearbeiten“ > „Voreinstellungen“ > „Vorschau in Browser“ die Option „Vorschau mit temporärer Datei“ auswählen. Der Grund hierfür ist, dass Browser im Gegensatz zu Servern Site-Stammordner nicht erkennen können.

    Hinweis:

    Wenn Sie eine Vorschau des Inhalts anzeigen möchten, der durch zum Stamm relative Pfade verknüpft ist, übertragen Sie die Datei auf einen Remote-Server und wählen Sie dann „Datei“ > „Vorschau in Browser“, um sie anzuzeigen.

  3. Schließen Sie die Seite im Browser, wenn Sie den Test abschließen.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie