Der Dreamweaver-Arbeitsbereich

Erste Verwendung von Dreamweaver

Nach der Installation von Adobe Dreamweaver erscheint beim ersten Start der Anwendung ein QuickStart-Menü auf dem Bildschirm, das dir drei Fragen stellt, die dabei helfen, dein Dreamweaver-Workspace entsprechend deinen Anforderungen zu personalisieren.

Basierend auf deinen Antworten zu diesen Fragen öffnet sich Adobe Dreamweaver in einem Developer-Workspace (ein minimales, auf Code fokussiertes Layout) oder einem Standard-Workspace (ein geteiltes Layout mit visuellen Tools und einer App-internen Vorschau während du programmierst). 

Nachdem Sie einen Arbeitsbereich ausgewählt haben, wählen Sie das gewünschte Farbthema aus. Jetzt loslegen.

Verbesserte Startseite

Die Startseite in Adobe Dreamweaver bietet dir schnellen Zugriff auf deine zuletzt verwendeten Dateien, Dateitypen und Starter-Vorlagen.

Abhängig von Ihrem Abonnementstatus werden im Arbeitsbereich „Einstieg“ auch Inhalte angezeigt, die speziell auf Ihre Anforderungen zugeschnitten sind.

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

Optionen auf der Dreamweaver-Startseite

Klicke auf Lernen, um von diesem Bildschirm aus sofort auf die Adobe Dreamweaver-Anleitungen zuzugreifen.

Beginne mit der Erstellung von Dokumenten in Adobe Dreamweaver, indem du auf einen der angezeigten Dateitypen klickst.

Öffne eine der Starter-Vorlagen, die mit Adobe Dreamweaver geliefert werden. 

Klicke auf Startseite, um zum Startbildschirm zurückzukehren. 

Auf der Startseite werden die Dateien angezeigt, die Sie zuletzt bearbeitet haben. Wenn du keine aktuellen Dateien hast, ist dieser Tab leer.

Über das Suchsymbol rechts oben im Fenster können Sie zudem auf die Suchfunktion zugreifen. Wenn du eine Suchanfrage eingibst, zeigt die Anwendung deine aktuellen Dateien, Creative Cloud-Assets, Hilfe-Links und Stock-Fotos an, die zur Suchanfrage passen.

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 findest du unter Dateien erstellen und öffnen.

Ü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 Workspace umfasst die folgenden Elemente:

Befindet sich am oberen Rand des Anwendungsfensters und enthält einen Workspace-Umschalter, Menüs (nur Windows) und andere Anwendungssteuerungen.

Enthält Buttons, die Optionen für verschiedene Ansichten des Dokument-Fensters bieten (wie Design-Ansicht, Live-Ansicht und Code-Ansicht).

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

Befindet sich auf der linken Seite des Anwendungsfensters und enthält ansichtsspezifische Buttons.

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. Mit diesem Panel kannst du CSS, Text, Bilder, Schriftarten, Farben, Verläufe und Maße aus deinen PSD-Komps in dein 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 findest du 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.

ist ein CSS-Eigenschaften-Inspektor, der es dir ermöglicht, CSS-Stile, Dateien und Eigenschaften zusammen mit Medienabfragen "visuell" zu erstellen.

Überblick über das Dokumentfenster

Im Dokumentfenster wird das aktuelle Dokument angezeigt. Um zwischen den Ansichten des Dokuments zu wechseln, verwende die Ansichtsoptionen in der Dokument-Symbolleiste. 

Du kannst auch zwischen den Ansichten wechseln, indem du die Ansichtsoptionen im Menü Ansicht verwendest.

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 zum Bearbeiten in der Live-Ansicht findest du unter HTML-Elemente in der Live-Ansicht bearbeiten.

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.

ist eine Programmierumgebung zum Schreiben und Bearbeiten von HTML, JavaScript und jeder anderen Art von Code.

ist eine geteilte Version der Code-Ansicht, mit der du scrollen kannst, um gleichzeitig an verschiedenen Abschnitten des Dokuments zu arbeiten. 

ermöglicht es dir, sowohl die Code-Ansicht als auch die Live-Ansicht für dasselbe Dokument in einem einzigen Fenster zu sehen.

ermöglicht es dir, sowohl die Code-Ansicht als auch die Design-Ansicht für dasselbe Dokument in einem einzigen Fenster zu sehen.

zeigt den tatsächlichen Code an, den ein Browser zur Ausführung der Seite verwendet, und kann sich dynamisch ändern, während du mit der Seite in der Live-Ansicht interagierst.

In einem maximierten Dokumentfenster (Standardeinstellung) werden im oberen Bereich Registerkarten mit den Dateinamen aller geöffneten Dokumente angezeigt. Dreamweaver zeigt ein Sternchen nach dem Dateinamen an, wenn du Änderungen vorgenommen hast, die du noch nicht gespeichert hast.

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 findest du unter Übersicht über die Dokument-Symbolleiste.

Du kannst auch zwischen den Ansichten wechseln, indem du die folgenden Optionen im Menü Ansicht verwendest:

• Nur Code-Ansicht: Wähle Code
• Geteilte Ansicht: Wähle Teilen und wähle eine der Teilungsoptionen
• Ansichtsmodus: Zwischen Live- und Design-Ansicht wechseln
• Ansichten wechseln: Um von einer Ansicht zu einer anderen zu wechseln.

Dokumentfenster überlappend oder nebeneinander anordnen oder neu anordnen

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

Um Dokumentfenster zu staffeln: wähle Fenster > Anordnen > Staffeln.

Um Dokumentfenster zu kacheln:

• (Windows) Wähle Fenster > Anordnen > Horizontal teilen oder Vertikal teilen.
• (Macintosh) Wähle Fenster > Anordnen > Nebeneinander.

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.

Um die Größe des Dokumentfensters zu ändern, wähle eine der Größen aus dem Popup-Menü Fenstergröße unten im Dokumentfenster.

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 Popupmenü „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 Option Design-Ansicht ist für Fluid-Grid-Dokumente 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 Fluid-Grid-Dokumenten nicht verfügbar.

Zeigt eine Darstellung des Dokuments an, die zeigt, wie der Benutzer es in einem Webbrowser sieht. 

Überblick über die Standardsymbolleiste

Die Standardsymbolleiste wird mit Fenster > Symbolleisten > Standard angezeigt. Die Symbolleiste enthält Buttons für häufige Vorgänge aus den Menüs Datei und Bearbeiten: Neu, Öffnen, Speichern, Alle 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. Um Links in der Live-Ansicht zu testen, kannst du einmaliges oder kontinuierliches Klicken aktivieren, indem du Ansicht > Live-Ansicht-Optionen > Links folgen (Strg+Link klicken) oder Links kontinuierlich folgen auswählst.

Ü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 du beispielsweise in der Live-Ansicht arbeitest, sind Code-Ansicht-spezifische Optionen wie Quellcode formatieren nicht sichtbar. 

Symbolleiste anpassen

Du kannst diese Symbolleiste nach deinen Bedürfnissen anpassen, indem du Menüoptionen hinzufügst oder unerwünschte Menüoptionen aus der Symbolleiste entfernst.

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

Um die Standard-Symbolleisten-Buttons wiederherzustellen, klicke auf Standard wiederherstellen im Dialogfeld Symbolleiste anpassen.

Ü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

Klicke auf dieses Symbol, um das Ausgabe-Bedienfeld anzuzeigen, das Codierungsfehler in deinem dokument anzeigt.

Farbige Codehervorhebung

(Nur in der Code-Ansicht verfügbar)

Wähle eine der Programmiersprachen aus diesem Popup-Menü aus, um die Farbgebung des Codes entsprechend der Programmiersprache zu ändern.

Wechseln zwischen Einfügen und Überschreiben

(Nur in der Code-Ansicht verfügbar)

Ermöglicht es dir, zwischen Einfüge- und Überschreibmodus zu wechseln, während du in der Code-Ansicht arbeitest.

Zeilen- und Spaltennummer

(Nur in der Code-Ansicht verfügbar.)

Zeigt die Zeilennummer und Spaltennummer an, an der sich der Cursor befindet.

Überblick über den Eigenschafteninspektor

Der Eigenschafteninspektor (Fenster > Eigenschaften) ermöglicht es dir, die häufigsten Eigenschaften für das aktuell ausgewählte Seitenelement zu überprüfen und zu bearbeiten, wie Text oder ein eingefügtes Objekt.

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. Kontextmenüs listen nur die Befehle auf, die für die aktuelle Auswahl relevant sind.

Um ein Kontextmenü zu öffnen, klicke mit der rechten Maustaste (Windows) oder Strg+Klick (Mac) auf einen Codeabschnitt in der Code-Ansicht oder ein Objekt in der Live- oder Design-Ansicht.

Bedienfelder in Dreamweaver anordnen

Du kannst die Platzierung und das Erscheinungsbild aller Dreamweaver-Bedienfelder nach deinen Anforderungen anpassen.

Bedienfelder an- und abdocken

• Um ein Bedienfeld anzudocken, ziehen Sie es an seiner 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 es an seiner Registerkarte.
• Um eine Bedienfeldgruppe zu verschieben, ziehen Sie die 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, ziehe seine Registerkarte in den hervorgehobenen Ablagebereich in der Gruppe.
• Um die Bedienfelder in einer Gruppe anders anzuordnen, ziehe 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 es an seiner Registerkarte aus der Gruppe.
• Um eine Gruppe zu verschieben, ziehen Sie die 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 ein Bedienfeld an seiner Registerkarte auf den Ablagebereich unterhalb eines anderen Bedienfelds.
• Um die Stapelreihenfolge zu ändern, ziehen Sie ein Bedienfeld an seiner Registerkarte nach oben oder unten.
• Um ein Bedienfeld oder eine Bedienfeldgruppe aus dem Stapel zu entfernen, damit die Komponente auf dem Arbeitsbereich schwebt, ziehen Sie die Komponente an seiner 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. Du kannst diese Änderungen dann in deinem Arbeitsbereich speichern, um später über die Arbeitsbereich-Umschaltung in der dokument-Symbolleiste darauf zuzugreifen.

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.

So speicherst du einen benutzerdefinierten Arbeitsbereich:

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

Der Arbeitsbereich wird gespeichert und im Arbeitsbereichumschalter in der Dokumentsymbolleiste angezeigt.

So löschst du einen benutzerdefinierten Arbeitsbereich:

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

Anzeigen von und Wechseln zwischen Arbeitsbereichen

Wähle einen Arbeitsbereich aus der Arbeitsbereich-Umschaltung in der dokument-Symbolleiste aus.

Dreamweaver in Mehrbenutzersystemen anpassen

Du kannst Dreamweaver entsprechend deinen Bedürfnissen anpassen, auch in einem Mehrbenutzerbetriebssystem wie Windows XP oder Mac OS X.

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 du Dreamweaver neu installierst oder aktualisierst, erstellt Dreamweaver automatisch Backup-Kopien der vorhandenen Benutzerkonfigurationsdateien. Falls du diese Dateien manuell angepasst hast, hast du weiterhin Zugriff auf die Änderungen, die du vorgenommen hast.

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 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. Hier werden einige der häufig verwendeten Bedienfelder 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 Buttons sind in mehrere Kategorien unterteilt. Du kannst zwischen den Kategorien wechseln, indem du die gewünschte Kategorie aus der Dropdown-Liste oben auswählst.

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. Wenn du beispielsweise Zeilenumbruch aus dem Popup-Menü der Zeichen-Schaltfläche auswählst, fügt Dreamweaver beim nächsten Klick auf die Zeichen-Schaltfläche einen Zeilenumbruch ein.Jedes Mal, wenn Sie im Popupmenü 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 es dir, die am häufigsten verwendeten HTML-Elemente wie div-Tags und Objekte wie Bilder und Tabellen zu erstellen und einzufügen.

Enthält Buttons zum Erstellen von Formularen und zum Einfügen von Formularelementen wie Suche, Monat und Passwort.

Ermöglicht es dir, das Dokument als Vorlage zu speichern und bestimmte Regionen als bearbeitbar, optional, wiederholend oder bearbeitbar-optional zu markieren.

Enthält Bootstrap-Komponenten für Navigation, Container, Dropdowns und mehr, die du in responsiven Projekten verwenden kannst.

Enthält Buttons zum Erstellen von Websites, die jQuery Mobile verwenden.

Ermöglicht es dir, jQuery UI-Elemente wie Akkordeon, Regler und Buttons einzufügen.

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ügst du ein Objekt über das Einfügen-Bedienfeld 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“

Verwende das Dateien-Bedienfeld, um die Dateien auf deiner Dreamweaver-Site anzuzeigen und zu 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 allem, was du mit dem Dateien-Bedienfeld machen kannst, findest du unter {1}Dateien und Ordner verwalten{2}.

CSS Designer

Das CSS Designer-Bedienfeld (Windows > CSS Designer) ist ein CSS-Eigenschaften-Inspektor, mit dem du CSS-Stile und -Dateien „visuell" erstellen und Eigenschaften zusammen mit Medienabfragen festlegen kannst.

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 CSS-Designer-Bedienfeld besteht aus den 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. Du kannst diesen Modus auch verwenden, um mit der Erstellung von Selektoren oder Media-Abfragen zu beginnen.

In diesem Modus wird die Auswahl nicht berücksichtigt. Das bedeutet, wenn du ein Element auf der Seite auswählst, werden der zugehörige Selektor, die Media-Abfrage oder das CSS nicht im CSS Designer hervorgehoben.

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

Dieser Modus ist kontextsensitiv. Verwende diese Option, um die Eigenschaften von Selektoren zu bearbeiten, die mit ausgewählten Elementen im Dokument verknüpft 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 du Global im @Media-Fenster auswählst, werden alle Selektoren angezeigt, die nicht in einer Media-Abfrage der ausgewählten Quelle enthalten sind.

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

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 die Eigenschaften eines bestimmten Selektors anzuzeigen, klicke auf den Namen dieses Selektors im Fenster.

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, klicke auf Global im @Media-Bereich.

Visuelle Hilfsmittel

Dreamweaver bietet verschiedene Arten visueller Hilfslinien, um dir beim Entwerfen von Dokumenten zu helfen und ungefähr vorherzusagen, wie sie in Browsern erscheinen.Du kannst eine der folgenden Aktionen ausführen:

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

• Verwendung eines Tracing-Bilds 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.

Um in eine Seite hinein- oder herauszuzoomen, wähle Ansicht > Entwurfsansicht-Optionen > Vergrößerung und wähle eine der verfügbaren Vergrößerungsoptionen.

Sie können aus einer Vielzahl von Zoomoptionen auswählen. Du kannst auch wählen:

• Auswahl einpassen - Wähle ein Objekt oder Text aus und wähle diese Option, um das Dokumentfenster mit der Auswahl zu füllen.
• Alles einpassen - Das Dokumentfenster mit einer ganzen Seite füllen
• Breite einpassen - Das Dokumentfenster mit der gesamten Breite einer Seite füllen

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.

Informationen zum Festlegen einer Standardkodierung für neue Dokumente findest du unter Dokumente erstellen und öffnen.

Dreamweaver-Markierungsfarben anpassen

Verwende die Hervorhebungsvoreinstellungen, um die Farben anzupassen, die Vorlagenbereiche, Bibliothekselemente, Drittanbieter-Tags, Layout-Elemente und Code in Dreamweaver identifizieren.

Ähnliche Themen

• Zugehörige Dateien öffnen
• Allgemeine Informationen zum Programmieren in Dreamweaver
• Voreinstellungen für Code festlegen
• Head-Inhalte anzeigen und bearbeiten
• Visuelle Hilfsmittel für das Layout verwenden
• Seitenvorschau
• Im Bedienfeld „Dateien“ mit Dateien arbeiten