Erfahren Sie mehr über den Dreamweaver-Arbeitsbereich, die verschiedenen verfügbaren Ansichten und Arbeitsbereiche und alle anderen Bedienfelder und Symbolleisten in Dreamweaver.

Erste Verwendung von Dreamweaver

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.

Hinweis:

Sie können diese Einstellungen für den Arbeitsbereich später jederzeit über das Dialogfeld „Bearbeiten“> „Voreinstellungen“ ändern.

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.

Die Startseite in Dreamweaver
Die Startseite in Dreamweaver

Optionen auf der Dreamweaver-Startseite

Training

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

Schnellstart:

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

Startvorlagen:

Öffnen Sie eine der in Dreamweaver enthaltenen Startvorlagen. 

Startseite

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.

Hinweis:

Die Startseite ist aktiviert und standardmäßig geöffnet. 

Wenn Sie die Startseite nicht benötigen, deaktivieren Sie im Dialogfeld „Voreinstellungen“ > „Allgemein“ die Option „Startbildschirm anzeigen“.

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.

Dreamweaver-Arbeitsbereich (CC)
Dreamweaver-Arbeitsbereich

A. Anwendungsleiste B. Dokumentsymbolleiste C. Dokumentfenster D. Arbeitsbereich-Umschalter E. Bedienfelder. F. Codeansicht. G. Statusleiste H. Tag-Selektor I. Live-Ansicht. J. Symbolleiste 

Überblick über Arbeitsbereichselemente

Der Arbeitsbereich enthält die folgenden Elemente:

Anwendungsleiste:

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

Dokumentsymbolleiste:

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

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.

Symbolleiste:

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

Dokumentfenster:

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

Eigenschafteninspektor:

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

Tag-Selektor:

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:

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.

Bedienfeld „Extract“:

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.

Bedienfeld „Einfügen“:

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.

Bedienfeld „Dateien“:

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 Verwalten von Dateien und Ordnern.

Bedienfeld „Codefragmente“:

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.

Bedienfeld „CSS Designer“:

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.

Hinweis:

Dreamweaver enthält viele weitere Bedienfelder, Inspektoren und Fenster. Die Bedienfelder, Inspektoren und Fenster werden über das Menü „Fenster“ geöffnet.

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

Live-Ansicht:

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.

Entwurfsansicht:

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.

Codeansicht:

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

Code: Code:

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

Code: Live:

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

Code: Entwurf:

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

Live-Code:

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.
Ansicht mit den Optionen im Menü „Ansicht“ wechseln
Ansicht mit den Optionen im Menü „Ansicht“ wechseln

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

Optionen zum Ändern der Dokumentgröße
Optionen zum Ändern der Dokumentgröße

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

Hinweis:

Eine weniger exakte Größenänderung lässt sich auch mit dem jeweiligen Standardverfahren Ihres Betriebssystems erzielen, beispielsweise durch Ziehen der rechten unteren Fensterecke.

Hinweis:

(Nur Windows.) Dokumente im Dokumentfenster sind standardmäßig maximiert. Die Größe maximierter Dokumente kann nicht geändert werden. Klicken Sie zum Aufheben der maximierten Darstellung auf die entsprechende Schaltfläche rechts oben im Dokument.

Im Popupmenü „Fenstergröße“ aufgeführte Werte ändern

  1. Wählen Sie im Popupmenü „Fenstergröße“ die Option „Größen bearbeiten“.

  2. Klicken Sie auf einen der Werte für Höhe und Breite in der Liste „Fenstergrößen“ und geben Sie einen neuen Wert ein. Wenn das Dokumentfenster nur auf eine bestimmte Breite (ohne Änderung der Höhe) angepasst werden soll, wählen Sie einen Wert für die Höhe aus und löschen Sie ihn.

  3. Klicken Sie in das Feld „Beschreibung“ und geben Sie einen aussagekräftigen Text für eine bestimmte Größe ein.

Neue Größe zum Popupmenü „Fenstergröße“ hinzufügen

  1. Wählen Sie im Popupmenü „Fenstergröße“ die Option „Größen bearbeiten“ aus.

    Hinzufügen von Fenstergrößen im Popup-Menü „Fenstergröße“
    Hinzufügen von Fenstergrößen im Popup-Menü „Fenstergröße“

  2. Klicken Sie in der Spalte „Breite“ auf die leere Fläche unter dem letzten Wert.

  3. Geben Sie Werte für Breite und Höhe ein.

    Wenn Sie nur die Breite oder nur die Höhe einstellen möchten, lassen Sie einfach das entsprechende andere Feld leer.

  4. Klicken Sie in das Feld „Beschreibung“ und geben Sie einen aussagekräftigen Text für die hinzugefügte Größe ein.

    Geben Sie beispielsweise „SVGA“ oder „Durchschnitts-PC“ neben dem Eintrag für einen Monitor mit 800 x 600 Pixel bzw. „17 Zoll Mac“ neben dem Eintrag für einen Monitor mit 832 x 624 Pixel ein. Die meisten Bildschirme können auf eine Vielzahl von Pixel-Auflösungen eingestellt werden.

  5. Klicken Sie auf „Anwenden“ und schließen Sie dann das Dialogfeld.

    Die neue Fenstergröße steht jetzt im Popup-Menü „Fenstergröße“ zur Verfügung.

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

Dokumentsymbolleiste (CC)
Dokumentsymbolleiste

In der Dokumentsymbolleiste werden die folgenden Optionen angezeigt:

Codeansicht:

Zeigt ausschließlich die Codeansicht im Dokumentfenster an.

Geteilte Ansicht:

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

Live-Ansicht.

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.

Entwurfsansicht:

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

Überblick über die Standardsymbolleiste

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/de), wird die Seite im Dokumentfenster geladen.

Symbolleiste „Browser-Navigation“ (CC)
Symbolleiste „Browser-Navigation“

A. Browser-Steuerelemente B. Adresszeile 

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:

  1. Klicken Sie in der Symbolleiste auf , um das Dialogfeld „Symbolleiste anpassen“ zu öffnen.

    Symbolleisten anpassen
    Symbolleisten anpassen

  2. Aktivieren Sie die Menüoptionen, die in der Symbolleiste verfügbar sein sollen, bzw. deaktivieren Sie die Menüoption, die Sie entfernen möchten, und klicken Sie auf „Fertig“, um Ihre Symbolleiste zu speichern.

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.

Statusleiste (CC)
Statusleiste

A. Tag-Selektor B. Ausgabe-Bedienfeld C. Farbige Codehervorhebung D. Wechseln zwischen Einfügen und Überschreiben E. Zeilen- und Spaltennummer 

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

Eigenschafteninspektor (CC)
Eigenschafteninspektor

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.

Hinweis:

Mit dem Tag-Inspektor können Sie alle Attribute im Zusammenhang mit den Eigenschaften eines bestimmten Tags anzeigen und bearbeiten.

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

  1. Wählen Sie das Seitenelement im Dokumentfenster .

    Sie müssen den Eigenschafteninspektor unter Umständen erweitern, um alle Eigenschaften des ausgewählten Elements anzuzeigen.

  2. Ändern Sie die gewünschten Eigenschaften im Eigenschafteninspektor.

    Hinweis:

    Wenn Sie Information zu bestimmten Eigenschaften benötigen, wählen Sie ein Element im Dokumentfenster aus und klicken Sie dann auf das Hilfesymbol in der oberen rechten Ecke des Eigenschafteninspektors.

  3. Sollten die Änderungen nicht sofort im Dokumentfenster übernommen werden, wenden Sie die Änderungen mit einem der folgenden Verfahren an:

    • Klicken Sie auf eine Stelle außerhalb der Textfelder zur Eigenschaftenbearbeitung.
    • Drücken Sie die Eingabetaste (Windows) bzw. Return (Mac).
    • Drücken Sie die Tabulatortaste, um zu einer anderen Eigenschaft zu wechseln.

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.

Anordnen von Bedienfeldern in Dreamweaver

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.

Hinweis:

Drücken Sie die Strg-Taste (Windows) bzw. Befehlstaste (Mac OS), während Sie ein Bedienfeld verschieben, um zu verhindern, dass es angedockt wird. Durch Drücken der Esc-Taste beim Verschieben des Bedienfelds können Sie den Vorgang abbrechen.

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.

Bedienfeld „Einfügen“
Bedienfeld „Einfügen“

Einige Kategorien enthalten Schaltflächen mit Popupmenüs. Wenn Sie eine Option aus einem Popupmenü 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 Popupmenü eine neue Option auswählen, wird diese zur Standardaktion der entsprechenden Schaltfläche.

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

HTML:

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

Formular:

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

Vorlagen:

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

Bootstrap-Komponenten:

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

jQuery Mobile:

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

jQuery-UI:

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

Favoriten:

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

Hinweis:

 Wenn Sie bestimmte Dateitypen wie XML, JavaScript, Java und CSS verwenden, sind das Bedienfeld „Einfügen“ und die Option „Entwurfsansicht“ abgeblendet, da Sie in diese Codedateien keine Elemente einfügen können.

Objekt einfügen

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

  1. Wählen Sie im Bedienfeld „Einfügen“ im Popup-Menü „Kategorie“ die entsprechende Kategorie aus.

  2. Führen Sie einen der folgenden Schritte aus:

    • Klicken Sie auf eine Schaltfläche oder ziehen Sie das Symbol der Schaltfläche in das Dokumentfenster (in der Entwurfs-, Live- oder Codeansicht).

    • Klicken Sie auf die Pfeilschaltfläche und wählen Sie dann im Menü eine Option aus.

      Je nach Objekt wird ein Dialogfeld zum Einfügen des Objekts angezeigt, in dem Sie aufgefordert werden, zu einer Datei zu wechseln oder Parameter für ein Objekt anzugeben. Oder Dreamweaver fügt Code in das Dokument ein oder öffnet einen Tag-Editor bzw. ein Bedienfeld, in dem Sie Informationen angeben können, bevor der Code eingefügt wird.

      Bei einigen Objekten wird beim Einfügen in der Entwurfsansicht kein Dialogfeld eingeblendet, beim Einfügen in der Codeansicht wird jedoch ein Tag-Editor angezeigt. Bei einigen wenigen Objekten führt das Einfügen in der Entwurfsansicht dazu, dass Dreamweaver vor dem Einfügen in die Codeansicht wechselt.

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

  1. Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac).

  2. Deaktivieren Sie im Dialogfeld „Voreinstellungen“ in der Kategorie „Allgemein“ die Option „Beim Einfügen von Objekten Dialogfeld anzeigen“, wenn beim Einfügen von Objekten wie z. B. Bilder, Tabellen, Skripts und Head-Elemente keine Dialogfelder angezeigt werden sollen, oder halten Sie während der Erstellung des Objekts die Strg-Taste (Windows) bzw. die Wahltaste (Mac) gedrückt.

Hinweis:

Wenn Sie ein Objekt einfügen, während diese Option deaktiviert ist, erhält das Objekt die Standardattributwerte. Sie können die Eigenschaften des Objekts nach dem Einfügen mit dem Eigenschafteninspektor ändern.

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

  1. Wählen Sie im Bedienfeld „Einfügen“ eine beliebige Kategorie aus.

  2. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Mac) in den Bereich, in dem die Schaltflächen angezeigt werden, und wählen Sie dann „Favoriten anpassen“ aus.

  3. Nehmen Sie im Dialogfeld „Favoriten anpassen“ die gewünschten Änderungen vor und klicken Sie auf „OK“.

    Wenn Sie ein Objekt hinzufügen möchten, wählen Sie im Bedienfeld „Verfügbare Objekte“ auf der linken Seite ein Objekt aus und klicken Sie dann auf den Pfeil zwischen den beiden Bedienfeldern oder doppelklicken Sie im Bedienfeld „Verfügbare Objekte“ auf das Objekt.

    Favoriten im Bedienfeld „Einfügen“ anpassen
    Favoriten im Bedienfeld „Einfügen“ anpassen

    Hinweis:

    Objekte können einzeln hinzugefügt werden. Es ist nicht möglich, einen Kategorienamen wie z. B. „Allgemein“ auszuwählen und der Favoritenliste eine gesamte Kategorie hinzuzufügen.

    • Wenn Sie ein Objekt oder ein Trennzeichen löschen möchten, wählen Sie auf der rechten Seite im Feld „Objektfavoriten“ ein Objekt aus und klicken dann oberhalb des Bedienfelds auf die Schaltfläche „Ausgewähltes Objekt aus der Liste der Objektfavoriten entfernen“.
    • Wenn Sie ein Objekt verschieben möchten, wählen Sie auf der rechten Seite im Feld „Objektfavoriten“ ein Objekt aus und klicken Sie dann oberhalb des Felds auf den Aufwärts- bzw. Abwärtspfeil.
    • Wenn Sie unterhalb eines Objekts eine Trennlinie hinzufügen möchten, wählen Sie auf der rechten Seite im Feld „Objektfavoriten“ ein Objekt aus und klicken dann unterhalb des Bedienfelds auf die Schaltfläche „Trennlinie hinzufügen“.
  4. Wenn die Kategorie „Favoriten“ des Bedienfelds „Einfügen“ nicht bereits eingeblendet ist, wählen Sie diese Kategorie aus, um die vorgenommenen Änderungen anzuzeigen.

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

Bedienfeld „Dateien“.
Bedienfeld „Dateien“.

Weitere Informationen zu den Möglichkeiten im Bedienfeld „Datei“ finden Sie unter Verwalten von Dateien und Ordnern.

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.

Bedienfeld „CSS Designer“ (CC)
Bedienfeld „CSS Designer“

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.

Hinweis:

Sie können die Ansicht auch ohne das Zoomwerkzeug vergrößern, indem Sie Strg+= (Windows) bzw. Befehl+= (Mac) drücken. Sie können die Ansicht auch ohne das Zoomwerkzeug verkleinern, indem Sie Strg+- (Windows) bzw. Befehl+- (Mac) drücken.

Allgemeine Voreinstellungen für Dreamweaver festlegen

  1. Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac).

  2. Wählen Sie eine der folgenden Optionen aus:

    Geöffnete Dokumente in Registerkarten anzeigen: Öffnet alle Dokumente in einem zentralen Fenster. Mithilfe der Registerreiter können Sie zwischen den einzelnen Dokumenten wechseln (nur Mac).

    Startbildschirm anzeigen: Zeigt den Dreamweaver-Begrüßungsbildschirm an, wenn Sie Dreamweaver starten oder wenn Sie keine Dokumente geöffnet haben.

    Dokumente beim Start erneut öffnen: Öffnet alle Dokumente, die beim Schließen von Dreamweaver geöffnet waren. Wenn diese Option nicht ausgewählt ist, zeigt Dreamweaver den Begrüßungsbildschirm oder einen leeren Bildschirm an, wenn Sie es starten (abhängig von Ihrer Einstellung „Begrüßungsbildschirm anzeigen“).

    Warnung beim Öffnen schreibgeschützter Dateien: Beim Öffnen einer schreibgeschützten (gesperrten) Datei wird eine Warnung angezeigt. Wählen Sie aus, ob Sie die Datei entsperren, auschecken bzw. schreibgeschützt anzeigen oder den Vorgang abbrechen möchten.

    Zugehörige Dateien aktivieren: Zeigt die Dateien an, die mit dem aktuellen Dokument verknüpft sind (z. B. CSS- oder JavaScript-Dateien). Für jede zugehörige Datei wird im oberen Bereich des Dokuments jeweils eine Schaltfläche angezeigt. Wenn Sie darauf klicken, wird die entsprechende Datei geöffnet.

    Dynamisch zugehörige Dateien suchen: Hier können Sie auswählen, ob dynamisch zugehörige Dateien automatisch oder nach manueller Auswahl auf der Symbolleiste „Zugehörige Dateien“ angezeigt werden. Sie können zudem festlegen, ob die Suche nach dynamisch zugehörigen Dateien deaktiviert wird.

    Hyperlinks beim Verschieben von Dateien aktualisieren: Legt fest, was passiert, wenn Sie ein Dokument Ihrer Site verschieben, umbenennen oder löschen. Sie können die Voreinstellung so wählen, dass Hyperlinks immer automatisch aktualisiert werden, nie aktualisiert werden oder Sie zum Durchführen einer Aktualisierung aufgefordert werden. (Siehe Hyperlinks automatisch aktualisieren.)

    Beim Einfügen von Objekten Dialogfeld anzeigen: Legt fest, ob Dreamweaver Sie auffordert, weitere Informationen einzugeben, wenn Sie Bilder, Tabellen, Shockwave-Filme und bestimmte andere Objekte über das Bedienfeld oder das Menü „Einfügen“ einfügen. Wenn diese Option nicht markiert ist, wird das Dialogfeld nicht angezeigt, und Sie müssen die Quelldatei für Bilder, die Anzahl von Zeilen in einer Tabelle usw. über den Eigenschafteninspektor angeben. Bei Rollover-Bildern und Fireworks-HTML wird immer ein Dialogfeld angezeigt, wenn Sie das Objekt einfügen, unabhängig von der Einstellung für diese Option. (Sie können diese Einstellung vorübergehend außer Kraft setzen, indem Sie bei gedrückter Strg-Taste (Windows) bzw. Befehlstaste (Mac) klicken, wenn Sie Objekte erstellen und einfügen.)

    Doppelbyte-Inline-Eingabe aktivieren: Ermöglicht die Eingabe von Doppelbyte-Text direkt im Dokumentfenster, wenn Sie eine Entwicklungsumgebung oder ein Language Kit mit Unterstützung für Doppelbyte-Text verwenden (z. B. für japanische Schriftzeichen). Wenn diese Option nicht markiert ist, wird ein Texteingabefenster zum Eingeben und Konvertieren von Doppelbyte-Text eingeblendet. Der Text wird nach der Übernahme im Dokumentfenster angezeigt.

    Nach Überschrift zu einfachem Absatz wechseln: Gibt an, dass durch Drücken der Eingabetaste (Windows) oder der Return-Taste (Mac) am Ende eines Überschriftabsatzes in der Entwurfs- oder Live-Ansicht ein neuer Absatz erstellt wird, der mit einem p-Tag gekennzeichnet ist. (Ein Überschriftabsatz ist ein Absatz mit einem Überschrift-Tag, z. B. „h1“ oder „h2“.) Wenn die Option deaktiviert ist, wird durch Drücken der Eingabetaste bzw. von Return am Ende eines Überschriftabsatzes ein neuer Absatz erstellt, der mit dem gleichen Überschrift-Tag versehen ist (Sie können also mehrere Überschriften in einer Zeile eingeben und die Einzelheiten erst anschließend eingeben).

    Mehrere aufeinanderfolgende Leerzeichen zulassen: Gibt an, dass die Eingabe von zwei oder mehr Leerzeichen in der Entwurfs- oder Live-Ansicht geschützte Leerzeichen erzeugt, die in einem Browser als mehrere Leerzeichen angezeigt werden. (Beispielsweise können Sie zwei Leerzeichen zwischen Sätzen eingeben.) Diese Option ist hauptsächlich für Personen vorgesehen, die häufig Textverarbeitungsprogramme verwenden. Ist diese Option deaktiviert, werden mehrere Leerzeichen hintereinander als ein einziges Leerzeichen behandelt (da Browser dies ebenfalls tun).

    Verwendung von <strong> und <em> anstelle von <b> und <i>: Gibt an, dass Dreamweaver das strong-Tag anwendet, wenn Sie eine Aktion ausführen, die normalerweise das b-Tag anwenden würde, und das em-Tag anwendet, wenn Sie eine Aktion ausführen, die normalerweise das i-Tag anwenden würde. Zu solchen Vorgängen zählt beispielsweise auch das Klicken auf die Schaltflächen „Fett“ oder „Kursiv“ im Eigenschafteninspektor für Text im HTML-Modus bzw. das Auswählen von „Formatieren“ > „Stil“ > „Fett“ oder „Formatieren“ > „Stil“ > „Kursiv“. Wenn die Tags „b“ und „i“ in Ihrem Dokument verwendet werden sollen, deaktivieren Sie diese Option.

    Hinweis: Das World Wide Web Consortium rät von der Verwendung der Tags „b“ und „i“ ab. Die Tags „strong“ und „em“ bieten umfassendere semantische Informationen als die Tags „b“ und „i“.

    Warnung beim Platzieren bearbeitbarer Bereiche in <p>- oder <h1> - <h6>-Tags: Gibt an, ob eine Warnmeldung angezeigt wird, wenn Sie eine Dreamweaver-Vorlage speichern, die einen bearbeitbaren Bereich innerhalb eines Absatz- oder Überschrift-Tags enthält. Diese Meldung teilt Ihnen mit, dass Benutzer in dem Bereich keine weiteren Absätze erstellen können. Diese Option ist in der Standardeinstellung aktiviert.

    Rückgängigmachen auf das aktive Dokument beschränken: Beschränkt die Aktionen, die rückgängig gemacht werden können, auf die momentan bearbeitete Datei. Wenn Sie beispielsweise eine CSS-Datei bearbeiten, können Sie nur die Änderungen rückgängig machen, die an der CSS-Datei vorgenommen wurden.

    Wenn dieses Kontrollkästchen jedoch deaktiviert ist, wird der Rückgängig-Verlauf von der HTML-Quelldatei und allen zugehörigen CSS-Dateien gemeinsam verwendet und Sie können Aktionen unabhängig davon rückgängig machen, ob Sie mit dem HTML-Code oder in einer zugehörigen CSS-Datei arbeiten.

    Zulässige Höchstzahl der Verlaufsschritte: Legt die Anzahl der Schritte fest, die in Dreamweaver gespeichert werden. (Der Standardwert dürfte für die Anforderungen der meisten Benutzer ausreichend sein.) Wenn Sie die angegebene Anzahl von Schritten überschreiten, werden die ältesten Schritte gelöscht.

    Rechtschreibwörterbuch: Listet die verfügbaren Wörterbücher auf. Wenn ein Wörterbuch mehrere Dialekte oder Rechtschreibkonventionen (z. B. Amerikanisches bzw. Britisches Englisch) enthält, werden die Dialekte einzeln im Popup-Menü „Rechtschreibwörterbuch“ aufgeführt.

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.

  1. Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac).

  2. Wählen Sie links in der Kategorieliste die Option „Schriften“.

  3. Wählen Sie in der Liste „Schrifteinstellungen“ einen Kodierungstyp aus (z. B. „Westeuropäisch“ oder „Japanisch“).

    Hinweis:

    Zur Anzeige von asiatischen Sprachen muss das Betriebssystem Doppelbyte-Schriften unterstützen.

  4. Wählen Sie für jede Kategorie der ausgewählten Kodierung eine Schrift und eine Schriftgröße aus.

    Hinweis:

    In den Popupmenüs mit Schriften werden nur Schriften angezeigt, die auf Ihrem Computer installiert sind. Wenn Sie also z. B. japanischen Text anzeigen möchten, muss eine japanische Schrift installiert sein.

    Proportionalschrift:

    Die Schrift, die Dreamweaver für die Anzeige von normalem Text verwendet (z. B. Text in Absätzen, Überschriften und Tabellen). Die Standardeinstellung hängt von den auf Ihrem System installierten Schriften ab. Bei den meisten westeuropäischen Systemen ist die Standardeinstellung Times New Roman 12 Punkt (mittel) unter Windows und Times 12 Punkt unter Mac OS.

    Feste Schrift:

    Die Schrift, die Dreamweaver verwendet, um Text innerhalb von pre-, code- und tt-Tags anzuzeigen. Die Standardeinstellung hängt von den auf Ihrem System installierten Schriften ab. Bei den meisten westeuropäischen Systemen ist die Standardeinstellung Courier New 10 Punkt (klein) unter Windows und Monaco 12 Punkt unter Mac OS.

    Codeansicht.

    Die Schrift, die für den Text in der Codeansicht und im Codeinspektor verwendet wird. Die Standardeinstellung hängt von den auf Ihrem System installierten Schriften ab.

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.

  1. Wählen Sie „Bearbeiten“ > „Voreinstellungen“ und wählen Sie dann die Kategorie „Markierung“ aus.

  2. Klicken Sie neben dem Objekt, für das die Markierungsfarbe geändert werden soll, auf das Farbfeld und wählen Sie in der Farbauswahl eine neue Farbe aus oder geben Sie einen Hexadezimalwert ein.

  3. Wenn Sie das Markieren für eine bestimmte Option aktivieren oder deaktivieren möchten, aktivieren bzw. deaktivieren Sie die Option „Anzeigen“.

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