Der Dreamweaver-Arbeitsbereich

Nachdem Sie Dreamweaver installiert haben und die Anwendung zum ersten Mal starten, wird ein Schnellstart-Menü mit drei Fragen auf dem Bildschirm angezeigt, durch deren Beantwortung Sie Ihren Dreamweaver-Arbeitsbereich an Ihre Anforderungen anpassen können.

Abhängig von Ihren Antworten auf diese Fragen wird Dreamweaver in einem Entwicklerarbeitsbereich (ein minimales, code-zentriertes Layout) oder einem Standardarbeitsbereich geöffnet (ein geteiltes Layout mit visuellen Werkzeugen und In-App-Vorschau beim Codieren). 

Nachdem Sie einen Arbeitsbereich ausgewählt haben, wählen Sie das gewünschte Farbthema aus. Jetzt können Sie anfangen.

Verbesserte Startseite

Über die Startseite in Dreamweaver können Sie schnell und einfach auf Ihre zuletzt verwendeten Dateien, Dateitypen und Startvorlagen zugreifen.

Abhängig von Ihrem Abonnementstatus werden auf der Startseite auch Inhalte angezeigt, die speziell auf Ihre Anforderungen zugeschnitten sind.

Dreamweaver zeigt die Startseite beim Start an und wenn keine Dokumente geöffnet sind.

Optionen auf der Dreamweaver-Startseite

Klicken Sie auf die Registerkarte „Training“, um über diesen Bildschirm auf die Dreamweaver-Tutorials zuzugreifen.

Erstellen Sie Dokumente in Dreamweaver, indem Sie auf einen der angezeigten Dateitypen klicken.

Öffnen Sie eine der in Dreamweaver enthaltenen Startvorlagen. 

Klicken Sie auf „Startseite“, um zur Startseite zurückzukehren.

Auf der Startseite werden die Dateien angezeigt, die Sie zuletzt bearbeitet haben. Wenn keine zuletzt verwendeten Dateien verfügbar sind, ist diese Registerkarte leer.

Über das Suchsymbol rechts oben im Fenster können Sie zudem auf die Suchfunktion zugreifen. Wenn Sie eine Suchabfrage eingeben, werden die zuletzt verwendeten Dateien, Creative Cloud Assets, Hilfelinks und Adobe Stock-Bilder in der Anwendung angezeigt, die der Suchabfrage entsprechen.

Sie können auf Neu erstellen klicken, um mit der Erstellung neuer Dreamweaver-Dateien zu beginnen. Wenn bereits Dateien auf Ihrem System vorhanden sind, klicken Sie auf Öffnen. Informationen zum Erstellen und Öffnen von Dokumenten in Dreamweaver finden Sie unter Öffnen und Erstellen von Dokumenten.

Überblick über den Arbeitsbereich

Im Dreamweaver-Arbeitsbereich können Sie Dokumente und Objekteigenschaften anzeigen. Im Arbeitsbereich sind viele der gängigsten Vorgänge in Symbolleisten angeordnet, damit Sie Änderungen in Dokumenten schnell durchführen können.

Überblick über Arbeitsbereichselemente

Der Arbeitsbereich enthält die folgenden Elemente:

Die Anwendungsleiste befindet sich am oberen Rand des Anwendungsfensters und enthält einen Arbeitsbereich-Umschalter, verschiedene Menüs (nur unter Windows) und weitere Anwendungssteuerelemente.

Enthält Schaltflächen mit Optionen für unterschiedliche Ansichten des Dokumentfensters (z. B. Entwurfsansicht, Live-Ansicht oder Codeansicht).

Die Standardsymbolleiste wird mit Fenster > Symbolleisten > Standard angezeigt. Sie enthält Schaltflächen für häufig verwendete Operationen der Menüs Datei und Bearbeiten: Neu, Öffnen, Speichern, Alles speichern, Code drucken, Ausschneiden, Kopieren, Einfügen, Rückgängig und Wiederholen.

Die Symbolleiste auf der linken Seite des Anwendungsfensters, enthält ansichtsspezifische Schaltflächen.

Zeigt die Dokumente an, während Sie sie erstellen und bearbeiten.

Der Eigenschafteninspektor dient zum Anzeigen und Ändern diverser Eigenschaften eines ausgewählten Seiten- oder Textobjekts. Jedes Objekt verfügt über spezifische Eigenschaften.

Der Tag-Selektor befindet sich in der Statusleiste am unteren Rand des Dokumentfensters. Er zeigt die Hierarchie der Tags an, die die aktuelle Auswahl umgeben. Um ein Tag und seinen gesamten Inhalt auszuwählen, klicken Sie in der Hierarchie auf das Tag.

Bedienfelder ermöglichen das Überprüfen Ihrer Arbeit und das Durchführen von Änderungen. Beispiele sind das Bedienfeld „Einfügen“, das Bedienfeld CSS Designer und das Bedienfeld Dateien. Sie können ein Bedienfeld erweitern, indem Sie auf den entsprechenden Registerreiter doppelklicken.

Im Bedienfeld „Extract“ können Sie Ihre PSD-Dateien zur Creative Cloud hochladen und dort anzeigen. Mithilfe dieses Bedienfelds können Sie CSS-Code, Text, Bilder, Schriften, Farben, Verläufe und Elementabstände aus Ihren PSD-Kompositionen in Ihr Dokument extrahieren.

Das Bedienfeld „Einfügen“ enthält Schaltflächen zum Einfügen verschiedener Objekttypen (z. B. Bilder, Tabellen und Medienelemente) in ein Dokument. Jedes Objekt entspricht einem HTML-Codeabschnitt, in dem Sie beim Einfügen verschiedene Attribute festlegen können. Sie können beispielsweise eine Tabelle einfügen, indem Sie im Bedienfeld „Einfügen“ auf das Symbol Tabelle klicken. Sie haben auch die Möglichkeit, Objekte stattdessen über das Menü Einfügen einzufügen.

Das Bedienfeld „Dateien“ ermöglicht die Verwaltung der Dateien und Ordner, die Bestandteil einer Dreamweaver-Site sind oder auf einem Remote-Server gespeichert werden. Über das Bedienfeld Dateien können Sie auch auf alle anderen Dateien auf Ihrer lokalen Festplatte zugreifen. Weitere Informationen hierzu finden Sie unter Dateien und Ordner verwalten.

Hier können Sie Ihre Codefragmente speichern und auf verschiedenen Webseiten, Websites und in unterschiedlichen Installationen von Dreamweaver wiederverwenden (über die Synchronisierungseinstellungen). Weitere Informationen finden Sie unter Wiederverwenden von Code mit Codefragmenten.

Das Bedienfeld „CSS Designer“ ist ein CSS-Eigenschafteninspektor, mit dem Sie auf „visuelle“ Weise CSS-Stile und -Dateien erstellen sowie Eigenschaften und Medienabfragen festlegen können.

Überblick über das Dokumentfenster

Im Dokumentfenster wird das aktuelle Dokument angezeigt. Wenn Sie die Ansicht des Dokuments ändern möchten, verwenden Sie die Optionen auf der Dokumentsymbolleiste. 

Sie können die Ansicht auch mit den Ansichtsoptionen im Menü „Ansicht“ wechseln.

Bietet eine realistischere Darstellung dessen, wie Ihr Dokument in einem Browser angezeigt wird. Sie können mit dem Dokument genauso interagieren, wie dies später im Browser geschieht. Sie können HTML-Elemente direkt in der Live-Ansicht bearbeiten und Ihre Änderungen in der gleichen Ansicht sofort in der Vorschau sehen. Weitere Informationen zur Bearbeitung in der Live-Ansicht finden Sie unter Bearbeiten von HTML-Elementen in der Live-Ansicht.

Eine Entwurfsumgebung für grafisches Seitenlayout, grafisches Bearbeiten und schnelle Anwendungsentwicklung. In dieser Ansicht kann das Dokument vollständig in Dreamweaver bearbeitet werden und wird grafisch ähnlich der Darstellung in einem Browser angezeigt.

Eine Umgebung zum manuellen Schreiben und Bearbeiten von HTML-, JavaScript- und sonstigem Code.

Eine geteilte Version der Codeansicht, in der Sie Bildläufe durchführen können, um gleichzeitig verschiedene Abschnitte eines Dokuments zu bearbeiten. 

Sie können in einem Fenster sowohl die Codeansicht als auch die Live-Ansicht eines Dokuments anzeigen.

Sie können in einem Fenster sowohl die Codeansicht als auch die Entwurfsansicht eines Dokuments anzeigen.

Stellt den tatsächlichen Code dar, den ein Browser zum Ausführen der Seite verwendet. Dieser kann sich dynamisch ändern, während Sie in der Live-Ansicht mit der Seite interagieren.

In einem maximierten Dokumentfenster (Standardeinstellung) werden im oberen Bereich Registerkarten mit den Dateinamen aller geöffneten Dokumente angezeigt. Hinter dem Dateinamen wird in Dreamweaver ein Sternchen (*) angezeigt, wenn Sie Änderungen vorgenommen und diese noch nicht gespeichert haben.

Darüber hinaus wird in Dreamweaver unterhalb der Registerkarte des Dokuments (oder unterhalb der Titelleiste des Dokuments, wenn Dokumente in separaten Fenstern angezeigt werden) die Symbolleiste Zugehörige Dateien angezeigt. Zugehörige Dateien sind Dokumente, die mit der aktuellen Datei verknüpft sind, beispielsweise CSS- oder JavaScript-Dateien. Um eine dieser zugehörigen Dateien im Dokumentfenster zu öffnen, klicken Sie auf der Symbolleiste Zugehörige Dateien auf den entsprechenden Dateinamen.

Wechseln zwischen Ansichten

Über die Dokumentsymbolleiste können Sie schnell zwischen den verschiedenen Ansichten wechseln. Weitere Informationen finden Sie unter Überblick über die Dokumentsymbolleiste.

Sie können auch mit den folgenden Optionen im Menü „Ansicht“ zwischen den Ansichten wechseln:

• Nur Codeansicht: Wählen Sie „Code“.
• Geteilte Ansicht: Wählen Sie „Teilen“ und dann eine der Teilungsoptionen.
• Ansichtsmodus: Sie können zwischen Live- und Entwurfsansicht wechseln.
• Ansicht wechseln: Hiermit wechseln Sie zwischen zwei Ansichten.

Dokumentfenster überlappend oder nebeneinander anordnen oder neu anordnen

Wenn zahlreiche Dokumente gleichzeitig angeordnet sind, können Sie diese überlappend oder nebeneinander anordnen.

Dokumentfenster überlappend anordnen: Wählen Sie „Fenster“ > „Anordnen“ > „Überlappend“.

Dokumentfenster nebeneinander anordnen: 

• (Windows) Wählen Sie „Fenster“ > „Anordnen“ > „Untereinander“ oder „Nebeneinander“.
• (Mac) Wählen Sie „Fenster“ > „Anordnen“ „Anordnen“.

Wenn Sie mehr als eine Datei öffnen, werden die Dokumentfenster als Registerkarten angezeigt. Wenn Sie die Anordnung der Dokumentfenster ändern möchten, ziehen Sie die Registerkarte eines Fensters an die gewünschte neue Position in der Gruppe.

Dokumentfenster vergrößern oder verkleinern

In der Statusleiste werden die aktuellen Abmessungen des Dokumentfensters (in Pixel) angezeigt. Sie können das Dokumentfenster auf eine der vordefinierten Größen im Popup-Menü einstellen, die vordefinierten Größen bearbeiten oder neue Größen festlegen und so sicherstellen, dass die Seite für eine bestimmte Größe geeignet ist.

Wenn Sie die Anzeigegröße einer Seite in der Entwurfsansicht oder Live-Ansicht ändern, ändern sich lediglich die Abmessungen der Anzeigegröße. Die Größe des Dokuments bleibt dagegen unverändert.

Neben vordefinierten und benutzerdefinierten Größen werden in Dreamweaver auch Größen angezeigt, die in einer Medienabfrage festgelegt sind. Wenn Sie eine Größe auswählen, die einer Medienabfrage entspricht, wird die Seite unter Verwendung der Medienabfrage angezeigt. Sie können zudem die Seitenausrichtung ändern, um die Vorschau der Seite für Mobilgeräte anzuzeigen, bei denen sich das Seitenlayout in Abhängigkeit von der Ausrichtung des Geräts ändert.

Wenn Sie die Größe des Dokumentfensters ändern möchten, wählen Sie im Popup-Menü „Fenstergröße“ am unteren Rand des Dokumentfensters eine Größe aus.

Die angezeigte Fenstergröße ist die innere Abmessung des Browserfensters ohne Rahmen. Das jeweilige Mobilgerät oder die Bildschirmgröße stehen rechts daneben.

Im Popup-Menü „Fenstergröße“ aufgeführte Werte ändern

Neue Größe zum Popup-Menü „Fenstergröße“ hinzufügen

Überblick über die Dokumentsymbolleiste

Die Dokumentsymbolleiste enthält Schaltflächen, mit denen Sie schnell zwischen verschiedenen Ansichten des Dokuments wechseln können. Außerdem befinden sich auf der Symbolleiste einige häufig verwendete Befehle und Optionen zum Anzeigen und Übertragen von Dokumenten zwischen der lokalen Site und Remote-Sites.

In der Dokumentsymbolleiste werden die folgenden Optionen angezeigt:

Zeigt ausschließlich die Codeansicht im Dokumentfenster an.

Teilt das Dokumentfenster in einen Codebereich und einen Live-/Entwurfsbereich. Die Entwurfsansicht ist für Dokumente mit fließendem Rasterlayout nicht verfügbar.

Dies ist eine interaktive Vorschau, die HTML5-Projekte präzise rendert und nach Änderungen in Echtzeit aktualisiert. Sie können HTML-Elemente auch in der Live-Ansicht bearbeiten. Über die Dropdown-Liste neben den Live-Optionen können Sie zwischen der Live- und der Entwurfsansicht wechseln. Diese Dropdown-Liste ist in Dokumenten mit fließendem Rasterlayout nicht verfügbar.

Zeigt eine Darstellung des Dokuments aus der Perspektive des Benutzers in einem Webbrowser an. 

Überblick über die Standardsymbolleiste

Die Standardsymbolleiste wird mit Fenster > Symbolleisten > Standard angezeigt. Sie enthält Schaltflächen für häufig verwendete Operationen der Menüs Datei und Bearbeiten: Neu, Öffnen, Speichern, Alles speichern, Code drucken, Ausschneiden, Kopieren, Einfügen, Rückgängig und Wiederholen.

Überblick über die Symbolleiste „Browser-Navigation“

Die Symbolleiste Browser-Navigation wird in der Live-Ansicht aktiviert (sofern Sie sie über Fenster > Symbolleisten > Standard aktiviert haben) und zeigt die Adresse der momentan im Dokumentfenster geöffneten Seite an. Die Live-Ansicht entspricht in ihrer Funktion einem Browser, d. h., auch wenn Sie eine Site außerhalb der lokalen Site aufrufen (z. B. http://www.adobe.com), wird die Seite im Dokumentfenster geladen.

Hyperlinks sind standardmäßig in der Live-Ansicht nicht aktiv. Dadurch dass Hyperlinks nicht aktiv sind, können Sie im Dokumentfenster Hyperlinktext auswählen oder darauf klicken, ohne dass eine andere Seite aufgerufen wird. Zum Testen von Hyperlinks in der Live-Ansicht können Sie einmaliges oder kontinuierliches Klicken aktivieren. Klicken Sie dazu auf „Ansicht“ > „Live-Ansicht-Optionen“ > Hyperlinks aufrufen (Strg + auf Link klicken) oder Hyperlinks fortlaufend aufrufen.

Überblick über die Symbolleiste

Die Symbolleiste wird links im Dokumentfenster vertikal angezeigt und ist in allen Ansichten sichtbar: Code-, Live- und Entwurfsansicht. Die Schaltflächen auf der Symbolleiste sind ansichtsspezifisch und werden nur angezeigt, wenn sie auf die gerade verwendete Ansicht zutreffen. Wenn Sie z. B. in der Live-Ansicht arbeiten, werden für die Codeansicht spezifische Optionen wie „Quellcode formatieren“ nicht angezeigt. 

Symbolleiste anpassen

Sie können diese Symbolleiste an Ihre Anforderungen anpassen, indem Sie Menüoptionen hinzufügen oder nicht benötigte Menüoptionen aus der Symbolleiste entfernen.

Um die Symbolleiste anzupassen, führen Sie die folgenden Schritte aus:

Wenn Sie die Standardschaltflächen für die Symbolleiste wiederherstellen möchten, klicken Sie im Dialogfeld „Symbolleiste anpassen“ auf die Option „Standard wiederherstellen“.

Überblick über die Statusleiste

Die Statusleiste am unteren Rand des Dokumentfensters enthält zusätzliche Informationen zu dem Dokument, das Sie gerade erstellen.

Tag-Selektor

Zeigt die Hierarchie der Tags an, die die aktuelle Auswahl umgeben. Um ein Tag und seinen gesamten Inhalt auszuwählen, klicken Sie in der Hierarchie auf das Tag. Wenn Sie auf <body> klicken, wird der gesamte Hauptteil des Dokuments markiert. Um die class- oder id-Attribute eines Tags im Tag-Selektor festzulegen, klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Mac) auf das Tag und wählen Sie im Kontextmenü eine Klasse oder eine ID aus.

Ausgabe-Bedienfeld

Klicken Sie auf dieses Symbol, um das Ausgabebedienfeld mit Codierungsfehlern im Dokument anzuzeigen.

Farbige Codehervorhebung

(Nur in der Codeansicht verfügbar.)

Wählen Sie eine der Codierungssprachen in diesem Popup-Menü aus, damit die Farbe des Codes entsprechend der Programmiersprache angezeigt wird.

Wechseln zwischen Einfügen und Überschreiben

(Nur in der Codeansicht verfügbar.)

Hiermit können Sie beim Arbeiten in der Codeansicht zwischen dem Einfüge- und dem Überschreibungsmodus wechseln.

Zeilen- und Spaltennummer

(Nur in der Codeansicht verfügbar.)

Zeigt die Zeilen- und Spaltennummer der Cursorposition an.

Überblick über den Eigenschafteninspektor

Im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) können Sie die gängigsten Eigenschaften des ausgewählten Seitenelements, z. B. eines eingefügten Objekts oder von Text, anzeigen und ändern.

Der Inhalt des Eigenschafteninspektors hängt vom ausgewählten Element ab. Wenn Sie beispielsweise ein Bild auf Ihrer Seite markieren, ändert sich die Anzeige des Eigenschafteninspektors, um die Eigenschaften des Bildes darzustellen (Dateipfad zum Bild, Breite, Höhe und ggf. Rand des Bildes usw.).

Der Eigenschafteninspektor befindet sich in der Standardeinstellung am unteren Rand des Arbeitsbereichs, kann aber auch abgedockt und als schwebendes Bedienfeld auf dem Arbeitsbereich positioniert werden.

Um die Hilfe zu einem bestimmten Eigenschafteninspektor anzuzeigen, klicken Sie auf die Hilfeschaltfläche rechts oben im Eigenschafteninspektor oder wählen „Hilfe“ im Menü „Optionen“ eines Eigenschafteninspektors aus.

Anzeigen und Ändern von Eigenschaften eines Seitenelements

Kontextmenüs

Kontextmenüs bieten bequem Zugriff auf die wichtigsten Befehle und Eigenschaften im Zusammenhang mit dem Objekt oder Fenster, mit dem Sie gerade arbeiten. In Kontextmenüs werden nur Befehle aufgeführt, die für die aktuelle Auswahl relevant sind.

Klicken Sie zum Öffnen eines Kontextmenüs mit der rechten Maustaste (Windows) oder klicken Sie bei gedrückter Strg-Taste (Mac) auf einen Codeabschnitt in der Codeansicht oder auf ein Objekt in der Live- oder Entwurfsansicht.

Bedienfelder in Dreamweaver anordnen

Sie können die Position und Darstellung aller Dreamweaver-Bedienfelder Ihren Anforderungen entsprechend anpassen.

Bedienfelder an- und abdocken

• Um ein Bedienfeld anzudocken, ziehen Sie dessen Registerkarte in das Dock – über, unter oder zwischen andere Bedienfelder.
• Um eine Bedienfeldgruppe anzudocken, ziehen Sie ihre Titelleiste (die deckend dargestellte, leere Leiste über den Registerkarten) in das Dock.
• Um ein Bedienfeld oder eine Bedienfeldgruppe zu entfernen, ziehen Sie die Komponente an der Registerkarte oder Titelleiste aus dem Dock. Sie können die Komponente in ein anderes Dock ziehen oder sie schwebend über dem Arbeitsbereich platzieren.

Verschieben von Bedienfeldern

Wenn Sie Bedienfelder verschieben, werden blau hervorgehobene Ablagebereiche sichtbar, die als Ziele für die Bedienfelder verwendet werden können. Sie können beispielsweise ein Bedienfeld in einem Dock nach oben oder unten verschieben, indem Sie es in den schmalen blauen Ablagebereich über oder unter einem anderen Bedienfeld ziehen. Wenn Sie in einen Bereich ziehen, der kein Ablagebereich ist, schwebt das Bedienfeld über dem Arbeitsbereich.

• Um ein Bedienfeld zu verschieben, ziehen Sie dessen Registerkarte.
• Um eine Bedienfeldgruppe zu verschieben, ziehen Sie an der Titelleiste.

Hinzufügen und Entfernen von Bedienfeldern

Wenn Sie alle Bedienfelder aus einem Dock entfernen, wird das Dock ausgeblendet. Sie können ein Dock erstellen, indem Sie Bedienfelder an die rechte Seite des Arbeitsbereichs ziehen, bis ein Ablagebereich eingeblendet wird.

• Wenn Sie ein Bedienfeld entfernen möchten, klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Mac) auf die zugehörige Registerkarte und wählen Sie dann „Schließen“. Alternativ können Sie das Bedienfeld im Menü „Fenster“ deaktivieren.
• Um ein Bedienfeld hinzuzufügen, wählen Sie es im Menü „Fenster“ aus und verankern Sie es dann an der gewünschten Position.

Bearbeiten von Bedienfeldgruppen

• Um ein Bedienfeld in eine Gruppe zu verschieben, ziehen Sie seine Registerkarte in den hervorgehobenen Ablagebereich in der Gruppe.
• Um die Bedienfelder in einer Gruppe anders anzuordnen, ziehen Sie die Registerkarte eines Bedienfelds an eine andere Stelle in der Gruppe.
• Soll das Bedienfeld aus einer Gruppe entfernt werden, damit es über dem Arbeitsbereich schwebt, ziehen Sie dessen Registerkarte aus der Gruppe.
• Um eine Gruppe zu verschieben, ziehen Sie an der Titelleiste (oberhalb der Registerkarten).

Stapeln schwebender Bedienfelder

Wenn Sie ein Bedienfeld aus einem Dock herausziehen, jedoch nicht auf einen Ablagebereich, schwebt es über dem Arbeitsbereich. Schwebende Bedienfelder können überall im Arbeitsbereich platziert werden. Sie können schwebende Bedienfelder oder Bedienfeldgruppen stapeln und anschließend gemeinsam durch Ziehen der obersten Titelleiste verschieben.

• Um schwebende Bedienfelder zu stapeln, ziehen Sie die Registerkarte des Bedienfelds auf den Ablagebereich unterhalb eines anderen Bedienfelds.
• Um die Stapelreihenfolge zu ändern, ziehen Sie die Registerkarte eines Bedienfelds nach oben oder unten.
• Um ein Bedienfeld oder eine Bedienfeldgruppe aus dem Stapel zu entfernen, damit die Komponente allein schwebt, ziehen Sie die Komponente an ihrer Registerkarte oder Titelleiste aus dem Stapel.

Verändern der Größe von Bedienfeldern

• Um ein Bedienfeld, eine Bedienfeldgruppe oder einen Bedienfeldstapel zu minimieren oder zu maximieren, doppelklicken Sie auf die Registerkarte. Sie können auch auf den Registerkartenbereich (den leeren Bereich neben den Registerkarten) doppelklicken.
• Wenn Sie die Größe eines Bedienfelds verändern möchten, ziehen Sie an einer Seite des Bedienfelds. 

Minimieren und Maximieren von Bedienfeldsymbolen

Sie können Bedienfelder zu Symbolen verkleinern, um den Arbeitsbereich übersichtlicher zu gestalten. In einigen Fällen werden Bedienfelder im Standardarbeitsbereich zu Symbolen verkleinert.

• Um alle Bedienfeldsymbole in einer Spalte zu verkleinern oder zu vergrößern, klicken Sie auf den Doppelpfeil oben im Verankerungsbereich.
• Klicken Sie auf das Symbol eines Bedienfelds, um nur dieses Bedienfeld einzublenden.
• Wenn Sie die Größe von Bedienfeldsymbolen so einstellen möchten, dass nur die Symbole (und nicht die Beschriftungen) angezeigt werden, verändern Sie die Breite des Docks, bis der Text nicht mehr zu sehen ist. Wenn Sie den Symboltext wieder einblenden möchten, verbreitern Sie das Dock.
• Soll ein Bedienfeld wieder zum Symbol verkleinert werden, klicken Sie auf seine Registerkarte, sein Symbol oder den Doppelpfeil in der Titelleiste des Bedienfelds.

Benutzerdefinierte Arbeitsbereiche erstellen

Sie können Ihren Arbeitsbereich anpassen, indem Sie Bedienfelder entsprechend Ihren Anforderungen hinzufügen oder entfernen. Sie können diese Änderungen dann im Arbeitsbereich speichern, indem Sie sie für den späteren Zugriff über den Arbeitsbereich-Umschalter in der Dokumentsymbolleiste speichern.

Wenn Sie die aktuelle Größe und Position von Bedienfeldern als benannten Arbeitsbereich speichern, können Sie den Arbeitsbereich wiederherstellen, auch nachdem ein Bedienfeld verschoben oder geschlossen wurde.

Benutzerdefinierten Arbeitsbereich speichern:

1. Wählen Sie „Fenster“ > „Arbeitsbereichlayout“ > „Neuer Arbeitsbereich“.
2. Geben Sie einen Namen für den Arbeitsbereich ein.

Der Arbeitsbereich wird gespeichert und im Arbeitsbereich-Umschalter in der Dokumentsymbolleiste angezeigt.

Benutzerdefinierten Arbeitsbereich löschen:

Wählen Sie im Arbeitsbereich-Umschalter auf der Anwendungsleiste die Option „Arbeitsbereiche verwalten“ aus, um das Dialogfeld „Arbeitsbereiche verwalten“ zu öffnen. Wählen Sie den Arbeitsbereich aus und klicken Sie dann auf „Löschen“.

Arbeitsbereiche anzeigen und zwischen Arbeitsbereichen wechseln

Wählen Sie im Arbeitsbereich-Umschalter auf der Dokumentsymbolleiste einen Arbeitsbereich aus.

Dreamweaver in Mehrbenutzersystemen anpassen

Sie können Dreamweaver so anpassen, dass es Ihre Anforderungen selbst in einem Mehrbenutzer-Betriebssystem wie Windows XP oder Mac OS X erfüllt.

Dreamweaver verhindert, dass die benutzerdefinierte Konfiguration eines Benutzers die benutzerdefinierte Konfiguration eines anderen Benutzers beeinträchtigt. Um dieses Ziel zu erreichen, erzeugt Dreamweaver bei der ersten Ausführung in einem der Mehrbenutzer-Betriebssysteme, die es erkennt, eine Kopie der verschiedensten Konfigurationsdateien. Diese benutzerspezifischen Konfigurationsdateien werden in einem persönlichen Ordner gespeichert.

Wenn Sie Dreamweaver neu installieren oder ein Upgrade dafür durchführen, legt Dreamweaver automatisch Sicherungskopien vorhandener Benutzerkonfigurationsdateien an. Wenn Sie diese Dateien also manuell angepasst haben, haben Sie weiterhin Zugriff auf die daran vorgenommenen Änderungen.

Dokumente mit Registerkarte anzeigen (nur auf dem Mac)

In Dreamweaver können Sie mehrere Dokumente in einem einzelnen Fenster anzeigen. Jedem Dokument ist dann eine eigene Registerkarte zugeordnet. Dreamweaver kann die Dokumente auch als Teil eines schwebenden Arbeitsbereichs darstellen, in dem jedes Dokument in einem eigenen Fenster angezeigt wird.

Dokumente mit Registerkarte in einem separaten Fenster anzeigen

Klicken Sie bei gedrückter Ctrl-Taste auf die Registerkarte und wählen Sie im Kontextmenü „In neues Fenster verschieben“ aus.

Standardeinstellung für Dokumente mit Registerkarten ändern

1. Wählen Sie „Dreamweaver“ > „Voreinstellungen“ und wählen Sie anschließend die Kategorie „Allgemein“ aus.
2. Aktivieren oder deaktivieren Sie die Option „Dokumente als Registerreiter öffnen“ und klicken Sie auf „OK“.

Dreamweaver zeigt derzeit geöffnete Dokumente beim Ändern der Voreinstellungen weiterhin unverändert an. Dokumente, die Sie öffnen, nachdem Sie eine neue Voreinstellung gewählt haben, werden entsprechend dieser Voreinstellung angezeigt.

Der Begrüßungsbildschirm wird angezeigt, wenn Sie Dreamweaver starten, und immer dann, wenn Sie keine Dokumente geöffnet haben. Sie können den Begrüßungsbildschirm ausblenden und später wieder einblenden. Wenn der Begrüßungsbildschirm ausgeblendet ist und keine Dokumente geöffnet sind, ist das Dokumentfenster leer.

Allgemeine Dreamweaver-Bedienfelder

Sie arbeiten in Dreamweaver mit mehreren Bedienfenstern. Einige der am häufigsten verwendeten Bedienfelder werden hier beschrieben.

Überblick über das Bedienfeld „Einfügen“

Das Bedienfeld Einfügen („Fenster“ > „Einfügen“) enthält Schaltflächen zum Erstellen und Einfügen von Objekten, z. B. von Tabellen, Bildern und Hyperlinks. Die Schaltflächen sind in mehreren Kategorien zusammengefasst. Sie können zwischen diesen Kategorien wechseln, indem Sie oben in der Dropdown-Liste die gewünschte Kategorie auswählen.

Einige Kategorien enthalten Schaltflächen mit Popup-Menüs. Wenn Sie eine Option aus einem Popup-Menü auswählen, wird diese zur Standardaktion der entsprechenden Schaltfläche. Beispiel: Wenn Sie im Popup-Menü der Schaltfläche Zeichen die Option Zeilenumbruch auswählen, fügt Dreamweaver einen Zeilenumbruch ein, wenn Sie das nächste Mal auf die Schaltfläche Zeichen klicken. Jedes Mal, wenn Sie im Popup-Menü eine neue Option auswählen, wird diese zur Standardaktion der entsprechenden Schaltfläche.

Das Bedienfeld Einfügen ist in die folgenden Kategorien unterteilt:

Ermöglicht das Erstellen und Einfügen häufig verwendeter HTML-Elemente wie div-Tags oder Objekte für Bilder und Tabellen.

Enthält Schaltflächen zum Erstellen von Formularen und zum Einfügen von Formularelementen wie „Suchen“, „Monat“ und „Kennwort“.

Ermöglicht das Speichern des Dokuments als Vorlage und das Markieren bestimmter Bereiche als bearbeitbare, optionale, wiederholende oder bearbeitbare optionale Bereiche.

Enthält Bootstrap-Komponenten, um Navigation, Container, Dropdown-Listen usw. bereitzustellen, die Sie in Responsive-Projekten verwenden können.

Enthält Schaltflächen zum Erstellen von Sites, die jQuery Mobile verwenden.

Ermöglicht das Einfügen von jQuery-UI-Elementen wie Akkordeon, Schieberegler oder Schaltflächen.

Ermöglicht das Gruppieren und Anordnen der Schaltflächen des Bedienfelds Einfügen, die von Ihnen am häufigsten verwendet werden.

Objekt einfügen

So fügen Sie ein Objekt über das Bedienfeld „Einfügen“ ein:

Voreinstellungen für das Bedienfeld „Einfügen“ bearbeiten

Objekte in der Kategorie „Favoriten“ des Bedienfelds „Einfügen“ hinzufügen, löschen oder verwalten

Überblick über das Bedienfeld „Dateien“

Mit dem Bedienfeld Dateien können Sie die Dateien Ihrer Dreamweaver-Site anzeigen und verwalten.

Sie können im Bedienfeld „Datei“ Dateien und Ordner anzeigen, überprüfen, ob sie mit einer Dreamweaver-Site verknüpft sind oder nicht, und Standardaktionen für die Dateiverwaltung ausführen, z. B. Öffnen und Verschieben von Dateien.

Im Bedienfeld „Datei“ können Sie auch Dateien auf einem Remote-Server verwalten und von dem und auf den Remote-Server übertragen. 

Weitere Informationen zu den Möglichkeiten im Bedienfeld „Datei“ finden Sie unter Dateien und Ordner verwalten.

CSS Designer

Das Bedienfeld „CSS Designer“ (Fenster > CSS Designer) stellt einen CSS-Eigenschafteninspektor dar, mit dem Sie auf visuelle Weise CSS-Stile und -Dateien erstellen sowie Eigenschaften und Medienabfragen festlegen können.

Alle im CSS Designer ausgeführten Aktionen können mit Strg/Befehl+Z rückgängig gemacht und mit Strg/Befehl+Y wiederholt werden. Die Änderungen werden automatisch in der Live-Ansicht dargestellt und die entsprechende CSS-Datei wird ebenfalls aktualisiert. Um Sie darüber zu informieren, dass die zugehörige Datei geändert wurde, wird die Registerkarte der betroffenen Datei für einige Zeit (ca. 8 Sekunden lang) hervorgehoben.

Das Bedienfeld „CSS Designer“ besteht aus folgenden Bereichen und Optionen:

Alle: Führt den gesamten CSS-Code, alle Medienabfragen und Selektoren auf, die dem aktuellen Dokument zugeordnet sind. Sie können die CSS-Regeln filtern und die entsprechenden Eigenschaften ändern. Diesen Modus können Sie auch als Ausgangspunkt beim Erstellen von Selektoren oder Medienabfragen verwenden.

In diesem Modus wird die Auswahl nicht berücksichtigt. Wenn Sie also ein Element auf der Seite auswählen, wird der entsprechende Selektor, die entsprechende Medienabfrage oder das entsprechende CSS nicht in CSS Designer markiert.

Aktuell: Führt alle berechneten Stile für alle in der Entwurfs- oder Live-Ansicht des aktuellen Dokuments ausgewählten Elemente auf. Wenn Sie diesen Modus für eine CSS-Datei in der Codeansicht verwenden, werden alle Eigenschaften für den Selektor mit dem Fokus angezeigt.

Dieser Modus ist kontextsensitiv. Verwenden Sie diese Option, um die Eigenschaften von Selektoren zu bearbeiten, die den im Dokument ausgewählten Elementen zugeordnet sind.

Quellen: Listet alle CSS-Stylesheets auf, die mit dem Dokument verknüpft sind. In diesem Bereich können Sie eine CSS-Datei an das Dokument anhängen oder die Stile innerhalb des Dokuments definieren.

@Medien: Listet alle Medienabfragen der Quelle auf, die im Bereich „Quellen“ ausgewählt ist. Wenn Sie kein CSS auswählen, werden in diesem Bereich alle Medienabfragen des Dokuments angezeigt.

Selektoren: Listet alle Selektoren der Quelle auf, die im Bereich „Quellen“ ausgewählt ist. Wenn Sie auch eine Medienabfrage auswählen, wird die Selektorenliste auf die Selektoren dieser Medienabfrage eingegrenzt. Ist kein CSS und auch keine Medienabfrage ausgewählt, werden hier alle Selektoren des Dokuments angezeigt.

Wenn Sie im Bereich „@Medien“ die Option „GLOBAL“ auswählen, werden alle Selektoren angezeigt, die nicht in einer Medienabfrage der ausgewählten Quelle enthalten sind.

Eigenschaften: Zeigt die Eigenschaften an, die Sie für den angegebenen Selektor festlegen können. Weitere Informationen finden Sie unter Festlegen von Eigenschaften.

Wenn Sie die Bereiche im CSS Designer reduzieren oder erweitern, werden die Größen der Bereiche für die Dauer einer Sitzung gespeichert. Quell- und Medienbereich behalten die benutzerdefinierten Größen bei, bis Sie die Größen wieder ändern.

Hinweis: Wenn Sie ein Seitenelement auswählen, wird im Bereich „Selektoren“ der spezifischste Selektor angezeigt. Um alle Eigenschaften eines bestimmten Selektors anzuzeigen, klicken Sie im Bereich auf den Namen des Selektors.

Um alle Selektoren anzuzeigen, können Sie im Bereich „Quellen“ den Eintrag „ALLE QUELLEN“ auswählen. Um Selektoren anzuzeigen, die zu keiner Medienabfrage in der ausgewählten Quelle gehören, klicken Sie im Bereich „@Medien“ auf „GLOBAL“.

Visuelle Hilfsmittel

Dreamweaver bietet verschiedene Hilfsmittel zur leichteren Gestaltung von Dokumenten und zur ungefähren Vorschau auf die Darstellung im Browser. Folgende Möglichkeiten stehen zur Verfügung:

• Verkleinern oder Vergrößern des Dokumentfensters auf eine bestimmte Fenstergröße, um zu sehen, wie die einzelnen Elemente auf die Seite passen.

• Verwendung eines Tracingbilds als Seitenhintergrund zum leichteren Duplizieren eines Designs, das mit einer Illustrations- oder Bildbearbeitungsanwendung wie Adobe® Photoshop® oder Adobe® Fireworks® erstellt wurde.

• Verwendung von Linealen und Hilfslinien zur Bereitstellung eines visuellen Anhaltspunkts für die genaue Positionierung und Änderung der Größe von Seitenelementen.

• Verwendung des Rasters zur genaueren Positionierung und Größenänderung von absolut positionierten Elementen (AP-Elementen).

  Auf der Seite eingeblendete Rasterlinien erleichtern das Ausrichten von AP-Elementen. Bei aktivierter Funktion „Am Raster ausrichten“ werden die AP-Elemente automatisch am nächstgelegenen Rasterschnittpunkt ausgerichtet, wenn Sie sie verschieben oder ihre Größe ändern. (Andere Objekte, wie z. B. Bilder und Absätze, werden nicht am Raster ausgerichtet.) Die Ausrichtung findet auch dann statt, wenn das Raster nicht eingeblendet ist.

Seiten vergrößern und verkleinern

In Dreamweaver können Sie die Vergrößerung im Dokumentfenster erhöhen (Zoomen), um die Pixelgenauigkeit von Grafiken zu überprüfen, kleine Elemente einfacher auszuwählen, Seiten mit kleinem Text bzw. große Seiten zu entwerfen usw.

Wählen Sie zum Vergrößern oder Verkleinern einer Seite „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Vergrößerung“ und wählen Sie eine der verfügbaren Vergrößerungsoptionen.

Sie können aus einer Vielzahl von Zoomoptionen auswählen. Außerdem haben Sie folgende Möglichkeiten:

• Auswahl anpassen: Wählen Sie ein Objekt oder Text aus und wählen Sie diese Option, um das Dokumentfenster mit der Auswahl auszufüllen.
• Alles anpassen: Das Dokumentfenster wird mit einer ganzen Seite ausgefüllt.
• Breite einpassen: Das Dokumentfenster wird mit der gesamten Breite einer Seite ausgefüllt.

Allgemeine Voreinstellungen für Dreamweaver festlegen

Voreinstellungen für Dokumentschriften in Dreamweaver festlegen

Die Kodierung eines Dokuments bestimmt, wie das Dokument im Browser angezeigt wird. Mit Hilfe der Schriftvoreinstellungen von Dreamweaver können Sie eine bestimmte Kodierung in der gewünschten Schrift und Größe anzeigen. Die Schriften, die Sie im Dialogfeld „Schrifteinstellungen“ auswählen, wirken sich nur auf die Schriftdarstellung in Dreamweaver, jedoch nicht auf die Darstellung des Dokuments im Browser von Benutzern aus. Um die Darstellung von Schriften in Browsern zu ändern, müssen Sie den Text über den Eigenschafteninspektor oder durch Anwenden einer CSS-Regel ändern.

Weitere Informationen zum Festlegen einer Standardkodierung für neue Dokumente finden Sie unter Öffnen und Erstellen von Dokumenten.

Dreamweaver-Markierungsfarben anpassen

Mit Hilfe der Voreinstellungen für die Markierung passen Sie die Farben an, mit denen Vorlagenbereiche, Bibliothekselemente, Tags von Drittanbietern, Layoutelemente und Code in Dreamweaver gekennzeichnet werden.