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 Live-Ansicht ersetzt nicht den Befehl „Vorschau in Browser“, sondern bietet vielmehr eine weitere Möglichkeit, die Darstellung Ihrer Seite „live“ zu prüfen, ohne dazu den Dreamweaver-Arbeitsbereich verlassen zu müssen.

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 Spry-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.

Ein Video des Dreamweaver-Entwicklungsteams mit einem Überblick über die Verwendung der Live-Ansicht finden Sie unter www.adobe.com/go/dw10liveview_de.

Ein Video-Tutorial zum Verwenden der Live-Ansicht sowie zu zugehörigen Dateien und zum Code-Navigator finden Sie unter www.adobe.com/go/lrvid4044_dw_de.

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 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.

4. 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.

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

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.

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

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.

Neben der Option „JavaScript anhalten“ stehen im Popupmenü der Schaltfläche „Live-Ansicht“ bzw. 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.

Testserver als Dokumentenquelle verwenden

Diese Option wird hauptsächlich für dynamische Seiten (z. B. ColdFusion-Seiten) verwendet und ist für dynamische Seiten standardmäßig aktiviert. 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

Dies ist die 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.