Benutzerhandbuch Abbrechen

Seitenvorschau

Suchen

Zuletzt aktualisiert am 25. Februar 2022

Zeigen Sie eine Vorschau Ihrer Webseiten in Dreamweaver in Browsern an.

Die Echtzeitvorschau im ermöglicht es Ihnen, eine Vorschau der Seiten im Browser zu öffnen und beim Programmieren die Änderungen in Echtzeit im Browser 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.

Im Folgenden erfahren Sie Näheres über die verschiedenen Arten von Vorschauoptionen in Dreamweaver.

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

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

Echtzeitvorschau

Sie können die Echtzeitvorschau der Webseiten in einem Browser anzeigen.
Um eine Vorschau der Webseiten im Browser anzuzeigen, klicken Sie auf eine der verfügbaren Browseroptionen.

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.
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.
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 zwischen Echtzeitvorschau und Vorschau im Browser wechseln. Legen Sie Voreinstellungen für den Browser fest, der für die Vorschau einer Site verwendet wird, und definieren Sie einen standardmäßigen Primär- und Sekundärbrowser.

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

Wählen Sie Datei > Echtzeitvorschau > Browserliste bearbeiten.

Voreinstellung für statische Browser-Vorschau

Wenn Sie die Auswahl der Option Voreinstellung für statische Browser-Vorschau aufheben, ist die Echtzeitvorschau deaktiviert. Sie können die Tastenkombinationen für den primären und sekundären Browser verwenden, um die Vorschau im Browser zu öffnen. Alternativ können Sie das Menü „Datei“ verwenden oder auf das Symbol für die Gerätevorschau in der Statusleiste klicken.
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“.
Um einen Browser aus der Liste zu löschen, wählen Sie ihn aus und klicken dann auf die Schaltfläche mit dem Minuszeichen (–).
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“.
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.
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.)

Voreinstellung für statische Browser-Vorschau Mit dieser Option können Benutzer den Modus für die Vorschau ihrer Dateien im Browser auswählen. Wenn sie das Kontrollkästchen aktivieren, können Benutzer eine Vorschau der Dateien anzeigen, indem Sie „Im Browser öffnen“ aus Menüs auswählen oder Tastaturbefehle verwenden. Wenn diese Option deaktiviert ist, wird die Echtzeitvorschau für die Vorschau von Dateien in Browsern verwendet. Standardmäßig ist das Kontrollkästchen deaktiviert und die Echtzeitvorschau wird für die Vorschau der Dateien im Browser verwendet.

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:

Stellen Sie sicher, dass die Entwurfsansicht („Ansicht > „Entwurf“) oder die Code- und Entwurfsansicht („Ansicht“ > „Code und Entwurf“) ausgewählt ist.
Klicken Sie auf die Schaltfläche „Live-Ansicht“.
Optional: Nehmen Sie Änderungen in der Entwurfsansicht, 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 der Live-Ansicht die Optionen für Änderungen in anderen Bereichen (z. B. im Bedienfeld „CSS-Stile“ oder in der Codeansicht).

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.
Klicken Sie nach Änderungen in der Codeansicht oder in einer zugehörigen Datei in der Symbolleiste „Dokument“ auf die Schaltfläche „Aktualisieren“ bzw. drücken Sie F5, um die Live-Ansicht zu aktualisieren.
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.

Stellen Sie sicher, dass die Live-Ansicht aktiv ist.
Klicken Sie auf die Schaltfläche „Live-Code“.

Dreamweaver zeigt den Code „live“ 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.
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“ aus.
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) oder „Dreamweaver“ > „Voreinstellungen“ (Macintosh OS) und 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 Popupmenü 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.

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.
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.
Schließen Sie die Seite im Browser, wenn Sie den Test abschließen.