Benutzerhandbuch Abbrechen

Dateien öffnen und erstellen

Suchen
Dreamweaver

Dreamweaver

App öffnen
  1. Dreamweaver-Benutzerhandbuch
  2. Einführung
    1. Grundlagen von responsivem Webdesign
    2. Neue Funktionen in Dreamweaver
    3. Web-Entwicklung mit Dreamweaver – Überblick
    4. Dreamweaver/Häufige Fragen
    5. Tastaturbefehle
    6. Dreamweaver – Systemanforderungen
    7. Übersicht über die Funktionen
  3. Dreamweaver und Creative Cloud
    1. Dreamweaver-Einstellungen mit Creative Cloud synchronisieren
    2. Creative Cloud-Bibliotheken in Dreamweaver
    3. Photoshop-Dateien in Dreamweaver verwenden
    4. Mit Adobe Animate und Dreamweaver arbeiten
    5. Web-optimierte SVG-Dateien aus Bibliotheken extrahieren
  4. Arbeitsbereiche und Ansichten in Dreamweaver
    1. Der Dreamweaver-Arbeitsbereich
    2. Dreamweaver-Arbeitsbereich für die visuelle Entwicklung optimieren
    3. Dateien anhand von Dateinamen oder Inhalten suchen | Mac OS
  5. Sites einrichten
    1. Dreamweaver-Sites
    2. Lokale Version Ihrer Site einrichten
    3. Verbindung mit einem Publishing Server herstellen
    4. Testserver einrichten
    5. Site-Einstellungen importieren und exportieren
    6. Vorhandene Websites von einem Remote-Server in Ihren lokalen Site-Stammordner kopieren
    7. Barrierefreie Funktionen in Dreamweaver
    8. Erweiterte Einstellungen
    9. Site-Voreinstellungen für die Übertragung von Dateien festlegen
    10. Proxyserver-Einstellungen in Dreamweaver festlegen
    11. Dreamweaver-Einstellungen mit Creative Cloud synchronisieren
    12. Git in Dreamweaver verwenden
  6. Dateien verwalten
    1. Dateien öffnen und erstellen
    2. Dateien und Ordner verwalten
    3. Dateien vom Server abrufen/auf dem Server bereitstellen
    4. Dateien einchecken und auschecken
    5. Dateien synchronisieren
    6. Dateien auf Unterschiede vergleichen
    7. Dateien und Ordner in Ihrer Dreamweaver-Site von Operationen ausschließen (Cloaking)
    8. Design Notes für Dreamweaver-Sites aktivieren
    9. Potenzielle Gatekeeper-Angriffe verhindern
  7. Layout und Entwurf
    1. Visuelle Hilfsmittel für das Layout verwenden
    2. CSS für das Seitenlayout verwenden
    3. Responsive-Websites mit Bootstrap entwerfen
    4. Medienabfragen in Dreamweaver erstellen und verwenden
    5. Inhalte in Tabellen darstellen
    6. Farben
    7. Responsive Design mithilfe von fließenden Rasterlayouts
    8. Extract in Dreamweaver
  8. CSS
    1. Grundlegendes zu Cascading Stylesheets
    2. Gestalten von Seitenlayouts mit CSS Designer
    3. CSS-Präprozessoren in Dreamweaver verwenden
    4. Voreinstellungen für CSS-Stile in Dreamweaver festlegen
    5. CSS-Regeln in Dreamweaver verschieben
    6. Inline-CSS in Dreamweaver in eine CSS-Regel umwandeln
    7. Mit div-Tags arbeiten
    8. Verläufe auf den Hintergrund anwenden
    9. CSS3-Übergangseffekte in Dreamweaver erstellen und bearbeiten
    10. Code formatieren
  9. Seiteninhalt und Elemente
    1. Seiteneigenschaften festlegen
    2. CSS-Eigenschaften von Überschriften und Links festlegen
    3. Mit Text arbeiten
    4. Text, Tags und Attribute suchen und ersetzen
    5. DOM-Bedienfeld
    6. In der Live-Ansicht bearbeiten
    7. In Dreamweaver die Kodierung von Dokumenten festlegen
    8. Elemente im Dokumentfenster auswählen und anzeigen
    9. Texteigenschaften im Eigenschafteninspektor festlegen
    10. Rechtschreibprüfung für Web-Seiten durchführen
    11. Horizontale Linien in Dreamweaver verwenden
    12. Schriftkombinationen in Dreamweaver hinzufügen und ändern
    13. Mit Elementen arbeiten
    14. Datumsangaben in Dreamweaver einfügen und aktualisieren
    15. In Dreamweaver Favoritenelemente erstellen und verwalten
    16. Bilder in Dreamweaver einfügen und bearbeiten
    17. Medienobjekte hinzufügen
    18. Videos in Dreamweaver einfügen
    19. HTML5-Videos einfügen
    20. SWF-Dateien einfügen
    21. Audioeffekte hinzufügen
    22. In Dreamweaver HTML5-Audiodateien einfügen
    23. Mit Bibliothekselementen arbeiten
    24. Arabischen und hebräischen Text in Dreamweaver verwenden
  10. Hyperlinks und Navigation
    1. Allgemeines zu Hyperlinks und Navigation
    2. Hyperlinks erstellen
    3. Imagemaps
    4. Fehler in Hyperlinks beheben
  11. jQuery-Widgets und -Effekte
    1. jQuery UI- und Mobile-Widgets in Dreamweaver verwenden
    2. jQuery-Effekte in Dreamweaver verwenden
  12. Websites programmieren
    1. In Dreamweaver programmieren
    2. Programmierumgebung in Dreamweaver
    3. Voreinstellungen für Code festlegen
    4. Codehervorhebung anpassen
    5. Code schreiben und bearbeiten
    6. Codehinweise und Codevervollständigung
    7. Code aus- und einblenden
    8. Code mit Codefragmenten wiederverwenden
    9. Code-Linting
    10. Code optimieren
    11. Code in der Entwurfsansicht bearbeiten
    12. Mit den Head-Inhalten von Seiten arbeiten
    13. Server-Side Includes in Dreamweaver einfügen
    14. Tag-Bibliotheken in Dreamweaver verwenden
    15. Benutzerdefinierte Tags in Dreamweaver importieren
    16. JavaScript-Verhalten (allgemeine Anweisungen)
    17. Integrierte JavaScript-Verhalten anwenden
    18. XML und XSLT
    19. Server-seitige XSL-Transformationen in Dreamweaver durchführen
    20. Client-seitige XSL-Transformationen in Dreamweaver durchführen
    21. Zeichenentitäten für XSLT in Dreamweaver einfügen
    22. Code formatieren
  13. Produktübergreifende Arbeitsabläufe
    1. Erweiterungen für Dreamweaver installieren und verwenden
    2. In-App-Updates in Dreamweaver
    3. Microsoft Office-Dokumente in Dreamweaver einfügen (nur Windows)
    4. Mit Fireworks und Dreamweaver arbeiten
    5. Mithilfe von Contribute Inhalte in Dreamweaver-Sites bearbeiten
    6. Dreamweaver-Business Catalyst-Integration
    7. Personalisierte E-Mail-Kampagnen erstellen
  14. Vorlagen
    1. Dreamweaver-Vorlagen
    2. Vorlagen und vorlagenbasierte Dokumente erkennen
    3. Dreamweaver-Vorlagen erstellen
    4. Bearbeitbare Bereiche in Vorlagen erstellen
    5. Wiederholende Bereiche und Tabellen in Dreamweaver erstellen
    6. Optionale Bereiche in Vorlagen verwenden
    7. Bearbeitbare Tag-Attribute in Dreamweaver definieren
    8. Verschachtelte Vorlagen in Dreamweaver erstellen
    9. Vorlagen bearbeiten, aktualisieren und löschen
    10. XML-Inhalte in Dreamweaver exportieren und importieren
    11. Vorlage auf ein vorhandenes Dokument anwenden oder aus dem Dokument entfernen
    12. Inhalte in Dreamweaver-Vorlagen bearbeiten
    13. Syntaxregeln für Vorlagen-Tags in Dreamweaver
    14. Markierungseinstellungen für Vorlagenbereiche festlegen
    15. Vorteile von Vorlagen in Dreamweaver
  15. Mobilgeräte und Multiscreen
    1. Medienabfragen erstellen
    2. Seitenausrichtung für Mobilgeräte ändern
    3. Mit Dreamweaver Web-Anwendungen für Mobilgeräte erstellen
  16. Dynamische Websites, Seiten und Web-Formulare
    1. Grundlegendes zu Web-Anwendungen
    2. Computer für die Entwicklung von Anwendungen einrichten
    3. Fehlerbehebung bei Datenbankverbindungen
    4. Verbindungsskripts in Dreamweaver entfernen
    5. Dynamische Seiten entwerfen
    6. Quellen für dynamischen Inhalt – Überblick
    7. Quellen für dynamische Inhalte definieren
    8. Dynamische Inhalte in Seiten einfügen
    9. Dynamischen Inhalt in Dreamweaver ändern
    10. Datenbankdatensätze anzeigen
    11. Live-Daten in Dreamweaver bereitstellen und Fehlerbehebung bei der Anzeige
    12. Benutzerdefinierte Serververhalten in Dreamweaver hinzufügen
    13. Formulare mit Dreamweaver erstellen
    14. Formulare zum Sammeln von Benutzerinformationen verwenden
    15. ColdFusion-Formulare in Dreamweaver erstellen und aktivieren
    16. Web-Formulare erstellen
    17. Verbesserte HTML5-Unterstützung für Formularelemente
    18. Formularentwicklung mit Dreamweaver
  17. Visuelles Entwickeln von Anwendungen
    1. Master- und Detailseiten in Dreamweaver erstellen
    2. Such- und Ergebnisseiten erstellen
    3. Datensatz-Einfügeseiten erstellen
    4. Datensatz-Aktualisierungsseiten in Dreamweaver erstellen
    5. Datensatz-Löschseiten in Dreamweaver erstellen
    6. ASP-Befehle zum Ändern von Datenbanken in Dreamweaver verwenden
    7. Registrierungsseiten erstellen
    8. Anmeldeseiten erstellen
    9. Seiten erstellen, auf die nur autorisierte Benutzer zugreifen können
    10. Ordner in ColdFusion mit Dreamweaver schützen
    11. ColdFusion-Komponenten in Dreamweaver verwenden
  18. Websites testen, in der Vorschau anzeigen und veröffentlichen
    1. Seitenvorschau
    2. Dreamweaver-Web-Seitenvorschau auf mehreren Geräten
    3. Dreamweaver-Site testen
  19. Fehlerbehebung
    1. Behobene Probleme
    2. Bekannte Probleme

 

 

Hier erfahren Sie, wie Sie in Dreamweaver Dateien erstellen, öffnen, bearbeiten, speichern und wiederherstellen sowie Vorlagen erstellen und zugehörige Dateien öffnen.

Dreamweaver stellt eine flexible Arbeitsumgebung bereit, die die Arbeit mit einem breiten Spektrum unterschiedlicher Webdokumente ermöglicht. So können Sie neben HTML-Dokumenten verschiedene weitere textbasierte Dokumentformate wie JavaScript, PHP und Cascading Stylesheets (CSS) erstellen und öffnen.

Dreamweaver bietet mehrere Möglichkeiten zur Erstellung neuer Dokumente. Folgende Dokumente können erstellt werden:

  • Neue leere Dokumente oder Vorlagen

  • Dokumente, die auf den in Dreamweaver vordefinierten Seitendesigns – darunter über 30 CSS-Designs – basieren

  • Dokumente, die auf vorhandenen Vorlagen basieren

    Sie können auch Voreinstellungen für Dokumente festlegen. Wenn Sie z. B. größtenteils mit einem bestimmten Dokumenttyp arbeiten, können Sie ihn als Standard-Dokumenttyp für neu zu erstellende Seiten definieren.

    In der Entwurfsansicht oder der Codeansicht lassen sich auf einfache Weise Dokumenteigenschaften, z. B. Meta-Tags, Dokumenttitel und Hintergrundfarben, sowie mehrere andere Seiteneigenschaften definieren.

Dreamweaver-Dateitypen

Sie können in Dreamweaver eine Vielzahl unterschiedlicher Dateitypen verwenden. Hauptsächlich werden Sie mit HTML-Dateien arbeiten. Dateien im HTML-Format (HyperText Markup Language) enthalten die tagbasierten Sprachelemente, die zum Anzeigen von Webseiten in einem Browser verantwortlich sind. Sie können HTML-Dateien entweder mit der Erweiterung .html oder .htm speichern. Zum Speichern von HTML-Dateien wird in Dreamweaver standardmäßig die Erweiterung .html verwendet.

In Dreamweaver können Sie HTML5-basierte Webseiten erstellen und bearbeiten. Zum Erstellen neuer HTML5-Seiten stehen zudem Startlayouts zur Verfügung.

Es folgen einige der anderen häufig verwendeten Dateitypen, die bei der Arbeit in Dreamweaver möglicherweise zum Einsatz kommen:

CSS

CSS-Dateien (Cascading Style Sheet) haben die Erweiterung .css. Sie werden zum Formatieren von HTML-Inhalten und zum genauen Positionieren der verschiedenen Seitenelemente verwendet.

GIF

GIF-Dateien (Graphics Interchange Format) haben die Erweiterung .gif. Das GIF-Format ist ein beliebtes Webgrafikformat für Cartoons, Logos, Grafiken mit transparenten Bereichen und für Animationen. GIF-Dateien enthalten maximal 256 Farben.

JPEG

JPEG-Dateien (Joint Photographic Experts Group – nach der Organisation, die dieses Format entwickelt hat) haben die Erweiterung .jpg und sind in der Regel Fotos oder Bilder mit hoher Farbauflösung. Das JPEG-Format eignet sich am besten für digitale oder gescannte Fotos, Bilder mit Texturen oder Farbverlaufübergängen und alle Bilder mit mehr als 256 Farben.

XML

XML-Dateien (eXtensible Markup Language) haben die Erweiterung .xml. Sie enthalten Daten in einer Rohform, die mithilfe von XSL (eXtensible Stylesheet Language) formatiert werden können.

Dialogfeld „Neues Dokument“

Im Dialogfeld „Neues Dokument“ werden alle unterstützten Dokumentdateitypen angezeigt, einschließlich PHP, XML und SVG.

Außerdem können Sie in diesem Dialogfeld auf vordefinierte Layouts, Vorlagen und Frameworks zugreifen.

Hinweis:

Alle enthaltenen Startlayouts unterstützen Responsive-Websites und sind HTML-5-kompatibel.

HTML-Layouts mithilfe einer leeren Seite erstellen

Sie können entweder ein vordefiniertes CSS-Layout zur Erstellung Ihrer Seite verwenden oder eine leere Seite anlegen und ein eigenes Layout erstellen.

  1. Wählen Sie „Datei“ > „Neu“.

  2. Wählen Sie in der Kategorie Neues Dokument in der Spalte Dokumenttyp die Art der zu erstellenden Seite aus. Wählen sie beispielsweise „HTML“ aus, um eine einfache HTML-Seite zu erstellen.

  3. Wählen Sie im Popup-Menü Dok.typ einen Dokumenttyp aus. In den meisten Fällen können Sie die vorgegebene Auswahl verwenden, nämlich  HTML5.

  4. Wählen Sie je nach dem Typ der zu erstellenden Seite weitere Optionen aus.

    • Kein: Wählen Sie diese Option aus, wenn Sie eine einfache Website ohne ein Framework erstellen möchten.
    • Bootstrap: Bootstrap-Vorlagen sind vordefinierte Layouts, die das Bootstrap-Framework verwenden. Wählen Sie diese Option aus, wenn Sie Responsive-Webseiten mit dem Bootstrap-Framework erstellen möchten. Standardmäßig wird ein Bootstrap 4.0.0-Dokument erstellt.
    Hinweis:

    Falls Sie Responsive-Webseiten erstellen möchten, wählen Sie das Bootstrap-Framework aus.

  5. Wenn Sie kein Framework verwenden, dann:

    • Dokumenttitel: Geben Sie den Titel des Dokuments in diesem Feld ein. Dreamweaver fügt diesen Titel dann automatisch im Abschnitt <head> des Dokuments hinzu.
    • Dokumenttyp: Wählen Sie im Popup-Menü „Dok.typ“ einen Dokumenttyp aus. In den meisten Fällen können Sie die vorgegebene Auswahl verwenden, HTML5.

    Durch Auswahl einer der XHTML-Dokumenttypdefinitionen im Menü „Dokumenttyp“ stellen Sie sicher, dass Ihre Seite XHTML-kompatibel angelegt wird. Sie können beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie im Popupmenü „XHTML 1.0 Transitional“ oder „XHTML 1.0 Strict“ auswählen. Extensible Hypertext Markup Language, abgekürzt XHTML, ist eine Neuformulierung von HTML als XML-Anwendung. Im Allgemeinen können Sie mit XHTML die Vorteile von XML nutzen und dabei gleichzeitig sicherstellen, dass Ihre Webdokumente mit älteren und künftigen Browsern kompatibel sind.

    Hinweis:

    Weitere Informationen zu XHTML finden Sie auf der Website des World Wide Web Consortium (W3C). Diese Site enthält die Spezifikationen für „XHTML - Based XHTML“ (www.w3.org/TR/xhtml11/) und XHTML 1.0 (www.w3c.org/TR/xhtml1/). Einschlägige Informationen bieten auch die XHTML-Validator-Sites für webbasierte Dateien (http://validator.w3.org/) und lokale Dateien (http://validator.w3.org/file-upload.html).

    • CSS anfügen: Fügen Sie ein vorhandenes CSS-Layout an die Seite an.  Klicken Sie dazu neben dem Teilfenster „CSS-Datei anfügen“ auf das Symbol „Stylesheet anfügen“  und wählen Sie ein CSS-Stylesheet aus.
    Neue HTML-Seiten ohne ein Framework erstellen
    Neue HTML-Seiten ohne ein Framework erstellen

    Wenn Sie eine neue Seite auf Basis Ihrer Photoshop-Komposition erstellen möchten, aktivieren Sie die Option „Seite mit Extract aus Photoshop-Kompositionen erstellen“. 

    Wenn Sie diese Option auswählen, wird das Bedienfeld „Extract“ geöffnet, in dem Sie eine PSD-Datei hochladen und mit dem Erstellen der HTML-Seite beginnen können.

  6. Wenn Sie eine Responsive-Webseite mit dem Bootstrap-Framework erstellen möchten, dann:

    • Bootstrap-CSS: Sie können wahlweise ein neues Bootstrap-CSS erstellen oder eine vorhandene CSS-Datei verwenden. Wenn Sie eine vorhandene CSS-Datei verwenden, geben Sie den Pfad zu der Datei an. Stellen Sie sicher, dass sich die CSS-Datei im Stammordner der Site befindet.
    • CSS anfügen: Fügen Sie ein vorhandenes CSS-Layout an die Seite an.  Klicken Sie dazu neben dem Teilfenster „CSS-Datei anfügen“ auf das Symbol „Stylesheet anfügen“  und wählen Sie ein CSS-Stylesheet aus.
    • Vordefiniertes Layout einbinden: Wählen Sie diese Option aus, wenn Sie bereits über ein Layout verfügen. Klicken Sie auf „Anpassen“, um die Raster- und Haltepunktwerte zu bearbeiten.
    Neue HTML-Seiten mit dem Bootstrap-Framework erstellen
    Neue HTML-Seiten mit dem Bootstrap-Framework erstellen

    Wenn Sie eine neue Seite auf Basis Ihrer Photoshop-Komposition erstellen möchten, aktivieren Sie die Option „Seite mit Extract aus Photoshop-Kompositionen erstellen“. 

    Wenn Sie diese Option auswählen, wird das Bedienfeld „Extract“ geöffnet, in dem Sie eine PSD-Datei hochladen und mit dem Erstellen der HTML-Seite beginnen können.

  7. Klicken Sie auf „Voreinstellungen“, wenn Sie standardmäßige Dokumentvoreinstellungen festlegen möchten, wie z. B. den Dokumenttyp, die Kodierung oder die Dateierweiterung.

  8. Klicken Sie auf die Schaltfläche „Erstellen“.

  9. Speichern Sie das neue Dokument („Datei“ > „Speichern“).

  10. Wechseln Sie im eingeblendeten Dialogfeld zu dem Ordner, in dem die Datei gespeichert werden soll.
    Hinweis:

    Es empfiehlt sich, Ihre Datei in einer Dreamweaver-Site zu speichern.

  11. Geben Sie im Feld „Dateiname“ einen Namen für die Datei ein.

    Verwenden Sie in Datei- bzw. Ordnernamen weder Leerzeichen noch Sonderzeichen. Dateinamen sollten auch nicht mit einer Ziffer beginnen. Verwenden Sie insbesondere keine Sonderzeichen (wie ä, ß oder ¥) und Satzzeichen (wie Punkte, Doppelpunkte oder Schrägstriche) in Namen von Dateien, die auf einem Remote-Server bereitgestellt werden sollen. Viele Server wandeln diese Zeichen beim Hochladen um, sodass Hyperlinks zu diesen Dateien nicht mehr funktionieren.

Leere Vorlagen erstellen

Über das Dialogfeld „Neues Dokument“ können Sie Dreamweaver-Vorlagen erstellen. Vorlagen werden standardmäßig im Ordner „Vorlagen“ auf Ihrer Site gespeichert.

Hinweis:

Bevor Sie eine Vorlage erstellen können, müssen Sie zunächst eine Site erstellen. Informationen zu Sites und zum Erstellen einer Seite finden Sie unter Dreamweaver-Sites.

  1. Wählen Sie „Datei“ > „Neu“.

  2. Wählen Sie im Dialogfeld Neues Dokument die Kategorie Sitevorlagen aus.

  3. Wählen Sie im Popupmenü „Dok.typ“ einen Dokumenttyp aus. In den meisten Fällen können Sie die Vorgabe, nämlich „XHTML 1.0 Transitional“, übernehmen.

    Durch Auswahl einer der XHTML-Dokumenttypdefinitionen (DTD) stellen Sie sicher, dass Ihre Seite XHTML-kompatibel angelegt wird. Sie können beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie im Popupmenü „XHTML 1.0 Transitional“ oder „XHTML 1.0 Strict“ auswählen. Extensible Hypertext Markup Language, abgekürzt XHTML, ist eine Neuformulierung von HTML als XML-Anwendung. Im Allgemeinen können Sie mit XHTML die Vorteile von XML nutzen und dabei gleichzeitig sicherstellen, dass Ihre Webdokumente mit älteren und künftigen Browsern kompatibel sind.

    Hinweis:

    Weitere Informationen zu XHTML finden Sie auf der Website des World Wide Web Consortium (W3C). Diese Site enthält die Spezifikationen für „XHTML - Based XHTML“ (www.w3.org/TR/xhtml11/) und XHTML 1.0 (www.w3c.org/TR/xhtml1/). Einschlägige Informationen bieten auch die XHTML-Validator-Sites für webbasierte Dateien (http://validator.w3.org/) und lokale Dateien (http://validator.w3.org/file-upload.html).

  4. Aktivieren Sie die Option „Seite bei Vorlagenänderung aktualisieren“, um festzulegen, dass die Seite bei jeder Bearbeitung der Vorlage automatisch aktualisiert werden soll.

  5. Klicken Sie auf die Schaltfläche „Erstellen“.

  6. Speichern Sie das neue Dokument („Datei“ > „Speichern“). Wenn Sie der Vorlage noch keine bearbeitbaren Bereiche hinzugefügt haben, weist ein Dialogfeld darauf hin, dass das Dokument keine bearbeitbaren Bereiche enthält. Klicken Sie auf „OK“, um das Dialogfeld zu schließen.

  7. Wählen Sie im Dialogfeld „Speichern unter“ eine Site aus, in der die Vorlage gespeichert wird.

  8. Geben Sie im Feld „Dateiname“ einen Namen für die neue Vorlage ein. Sie brauchen dem Namen der Vorlage keine Dateierweiterung anzufügen. Wenn Sie auf „Speichern“ klicken, wird die neue Vorlage automatisch im Site-Ordner „Vorlagen“ mit der Erweiterung „.dwt“ gespeichert.

    Verwenden Sie in Datei- bzw. Ordnernamen weder Leerzeichen noch Sonderzeichen. Dateinamen sollten auch nicht mit einer Ziffer beginnen. Verwenden Sie insbesondere keine Sonderzeichen (wie ä, ß oder ¥) und Satzzeichen (wie Punkte, Doppelpunkte oder Schrägstriche) in Namen von Dateien, die auf einem Remote-Server bereitgestellt werden sollen. Viele Server wandeln diese Zeichen beim Hochladen um, sodass Hyperlinks zu diesen Dateien nicht mehr funktionieren.

Seiten basierend auf einer Vorlage erstellen

Aus einer der vorhandenen Vorlagen oder aus einer Dreamweaver-Startvorlage können Sie ein neues Dokument auswählen, als Vorschau anzeigen und erstellen. Wählen Sie im Dialogfeld „Neues Dokument“ eine Vorlage aus einer beliebigen definierten Dreamweaver-Site aus oder erstellen Sie mithilfe des Bedienfelds „Elemente“ ein neues Dokument aus einer vorhandenen Vorlage.

Auf Vorlagen basierende Dokumente erstellen

  1. Wählen Sie „Datei“ > „Neu“.

  2. Wählen Sie im Dialogfeld „Neues Dokument“ die Kategorie „Seite aus Vorlage“ aus.

  3. Wählen Sie in der Spalte „Site“ die Dreamweaver-Site aus, in der sich die gewünschte Vorlage befindet. Wählen Sie dann in der Liste rechts eine Vorlage aus.

  4. Deaktivieren Sie das Kontrollkästchen „Seite bei Vorlagenänderung aktualisieren“, wenn Sie nicht möchten, dass diese Seite bei jeder Änderung der Vorlage, auf der die Seite basiert, aktualisiert wird.

  5. Klicken Sie auf „Voreinstellungen“, wenn Sie standardmäßige Dokumentvoreinstellungen festlegen möchten, wie z. B. den Dokumenttyp, die Kodierung oder die Dateierweiterung.

  6. Klicken Sie auf „Weitere Inhalte abrufen“, wenn Sie Dreamweaver Exchange starten möchten. Von dort können Sie weitere Inhalte für das Seitendesign herunterladen.

  7. Klicken Sie auf „Erstellen“ und speichern Sie das Dokument („Datei“ > „Speichern“).

Dokumente aus Vorlagen im Bedienfeld „Elemente“ erstellen

  1. Öffnen Sie das Bedienfeld „Elemente“ („Fenster“ > „Elemente“), falls es nicht bereits geöffnet ist.

  2. Klicken Sie im Bedienfeld „Elemente“ auf das links angezeigte Vorlagensymbol , um eine Liste von Vorlagen in der aktuellen Site anzuzeigen.

    Hinweis:

    Wenn Sie die zu verwendende Vorlage gerade erst erstellt haben, müssen Sie möglicherweise auf die Schaltfläche „Aktualisieren“ klicken, um sie anzuzeigen.

  3. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf die Vorlage, die Sie anwenden möchten, und wählen Sie dann „Neu von Vorlage“.

    Das Dokument wird im Dokumentfenster geöffnet.

  4. Speichern Sie das Dokument.

Auf Dreamweaver-Startvorlagen basierende Seiten erstellen

Zum Lieferumfang von Dreamweaver gehören mehrere professionell entwickelte Startvorlagen für Anwendungen für mobile Apps. Diese Beispieldateien können Sie als Ausgangspunkt zum Entwerfen von Seiten für Ihre Sites verwenden.

Wenn Sie ein Dokument erstellen, das auf einer Startvorlage basiert, erstellt Dreamweaver eine Kopie der Datei, sodass Sie die Startvorlagen nicht überschreiben.

Sie können Beispieldateien in der Vorschau anzeigen und im Dialogfeld „Neues Dokument“ eine kurze Beschreibung der Designelemente des Dokuments lesen.

  1. Wählen Sie „Datei“ > „Neu“.

  2. Wählen Sie im Dialogfeld Neues Dokument die Kategorie „Startvorlagen“ aus.

    Startvorlagen in Dreamweaver
    Startvorlagen in Dreamweaver

    Die Details der Beispielseite und die Visualisierung werden auf der rechten Seite des Bedienfelds angezeigt, während Sie die verschiedenen Optionen auswählen.

  3. Klicken Sie auf die Schaltfläche „Erstellen“.

    Das neue Dokument und alle zugehörigen Dateien werden im Fenster Dokument geöffnet.

  4. Speichern Sie das Dokument („Datei“ > „Speichern“).

Neue Codedateien für verschiedene Programmiersprachen erstellen

In Dreamweaver können Sie Codedateien für eine Reihe von Programmiersprachen erstellen.

Weitere Informationen zur Codeunterstützung in Dreamweaver finden Sie unter Allgemeine Informationen zum Programmieren in Dreamweaver.

Erstellen Sie eine neue Codedatei in Dreamweaver anhand der folgenden Anweisungen:

  1. Wählen Sie Datei > Neues Dokument.

  2. Wählen Sie unter „Dokumenttyp“ die Codedatei aus, die Sie erstellen möchten.

  3. Wählen Sie in der Spalte Dokumenttyp die Art des zu erstellenden Dokuments aus (z. B. eine PHP-Datei).

    Neue PHP-Seiten erstellen
    Neue PHP-Seiten erstellen

  4. Je nach ausgewähltem Dateityp stehen beim Erstellen eines Dokuments weitere Optionen zur Verfügung. 

    Wenn Sie beispielsweise eine PHP-Datei erstellen, können Sie Optionen unter „Dok.typ“ sowie einige CSS-Optionen auswählen.

  5. Klicken Sie auf die Schaltfläche Erstellen. Speichern Sie dann das Dokument (Datei > Speichern).

Dokumente speichern und wiederherstellen

Sie können ein Dokument unter seinem aktuellen Namen am aktuellen Ort speichern oder eine Kopie des Dokuments mit einem anderen Namen an einem anderen Ort ablegen.

Hinweis:

Vermeiden Sie bei der Benennung von Dateien und Ordnern Leer- und Sonderzeichen. Verwenden Sie insbesondere keine Sonderzeichen (wie ä, ß oder ¥) und Satzzeichen (wie Punkte, Doppelpunkte oder Schrägstriche) in Namen von Dateien, die auf einem Remote-Server bereitgestellt werden sollen. Viele Server wandeln diese Zeichen beim Hochladen um, sodass Hyperlinks zu diesen Dateien nicht mehr funktionieren. Dateinamen sollten auch nicht mit einer Ziffer beginnen.

Dokumente speichern

  1. Führen Sie einen der folgenden Schritte aus:
    • Um die aktuelle Version auf der Festplatte zu überschreiben und vorgenommene Änderungen zu speichern, wählen Sie „Datei“ > „Speichern“.
    • Um eine Datei in einem anderen Ordner oder unter einem anderen Namen zu speichern, wählen Sie „Datei“ > „Speichern unter“.
  2. Wechseln Sie im Dialogfeld „Speichern unter“ zu dem Ordner, in dem die Datei gespeichert werden soll.

  3. Geben Sie im Textfeld „Dateiname“ einen Namen für die Datei ein.

  4. Klicken Sie auf „Speichern“, um die Datei zu speichern.

Alle geöffneten Dokumente speichern

  1. Wählen Sie „Datei“ > „Alle speichern“.

  2. Wenn nicht gespeicherte Dokumente geöffnet sind, wird das Dialogfeld „Speichern unter“ für jedes nicht gespeicherte Dokument angezeigt.

    Wechseln Sie im eingeblendeten Dialogfeld zu dem Ordner, in dem die Datei gespeichert werden soll.

  3. Geben Sie im Feld „Dateiname“ einen Namen für die Datei ein und klicken Sie auf „Speichern“.

Zuletzt gespeicherte Version eines Dokuments wiederherstellen

  1. Wählen Sie „Datei“ > „Wiederherstellen“.

    In einem Dialogfeld wird die Frage angezeigt, ob Sie die Änderungen verwerfen und die zuletzt gespeicherte Version wiederherstellen wollen.

  2. Klicken Sie auf „Ja“, um die vorherige Version wiederherzustellen, oder auf „Nein“, um die Änderungen beizubehalten.

    Hinweis:

    Wenn Sie ein Dokument speichern und anschließend Dreamweaver beenden, können Sie nach einem Neustart von Dreamweaver die vorherige Version des Dokuments nicht wiederherstellen.

Standard-Dokumenttyp- und Standardkodierungseinstellungen festlegen

Wenn Ihre Site überwiegend Seiten eines bestimmten Dateityps enthält (z. B. HTML, PHP oder JavaScript), können Sie Dokumentvoreinstellungen definieren, mit denen neue Dokumente automatisch in dem angegebenen Dateityp erstellt werden.

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

    Hinweis:

    Sie können auch im Dialogfeld „Neues Dokument“ auf die Schaltfläche „Voreinstellungen“ klicken, um neue Dokumentvoreinstellungen festzulegen.

  2. Klicken Sie in der Kategorienliste links auf „Neues Dokument“.

  3. Legen Sie die Voreinstellungen fest bzw. nehmen Sie die erforderlichen Änderungen vor und speichern Sie Ihre Einstellungen dann, indem Sie auf „OK“ klicken.

    Standarddokument

    Wählen Sie den Dokumenttyp aus, der künftig für das Erstellen neuer Seiten verwendet werden soll.

    Standarderweiterung

    Legen Sie fest, welche Dateierweiterung (.htm oder .html) für neue HTML-Seiten vorzugsweise verwendet werden soll.

    Hinweis: Für andere Dateitypen ist diese Option deaktiviert.

    Standard-Dokumenttyp (DDT)

    Wählen Sie eine der XHTML-Dokumenttypdefinitionen (DTD) aus, damit neue Seiten XHTML-kompatibel angelegt werden. Sie können beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie im Popupmenü „XHTML 1.0 Transitional“ oder „XHTML 1.0 Strict“ auswählen.

    Standardkodierung

    Legen Sie mit der Standardkodierung fest, welche Kodierung für neue Dokumente und beim Öffnen von Dokumenten verwendet werden soll, in denen keine Kodierung angegeben ist.

    Wenn Sie „Unicode (UTF-8)“ als Dokumentkodierung auswählen, sind keine Entitätskodierungen mehr erforderlich, da mit UTF-8 alle Zeichen dargestellt werden können. Wenn Sie eine andere Dokumentkodierung auswählen, ist zur Darstellung bestimmter Zeichen möglicherweise eine Entitätsreferenz erforderlich. Weitere Informationen über Zeichenentitäten finden Sie unter www.w3.org/TR/REC-html40/sgml/entities.html.

    Wenn Sie „Unicode (UTF-8)“ als Standardkodierung auswählen, können Sie eine Kennzeichnung der Byte-Reihenfolge (Byte Order Mark, BOM) in das Dokument einfügen lassen, indem Sie die Option „Unicode-Signatur (BOM) einschließen“ aktivieren.

    Eine BOM belegt 2 bis 4 Bytes am Anfang einer Textdatei und identifiziert eine Datei als Unicode-Datei und darüber hinaus die Byte-Reihenfolge der nachfolgenden Byte. Da UTF-8 keine Byte-Reihenfolge besitzt, ist für diese Kodierungsform das Hinzufügen einer UTF-8-BOM optional. Bei UTF-16 und UTF-32 jedoch ist eine BOM obligatorisch.

    Unicode-Normalisierungsformular

    Wählen Sie eine Option in dieser Liste aus, wenn Sie „Unicode (UTF-8)“ als Standardkodierung gewählt haben.

    Es gibt vier Unicode-Normalisierungsformulare. Die wichtigste ist die Normalisierungsform C, denn es ist die im Zeichenmodell für das World Wide Web am häufigsten verwendete Normalisierungsform. Adobe bietet aus Gründen der Vollständigkeit darüber hinaus drei weitere Unicode-Normalisierungsformulare.

    Dialogfeld „Neues Dokument“ mit Strg+N anzeigen

    Deaktivieren Sie diese Option („mit Befehl+N“ auf Macintosh-Systemen), wenn mit dem Tastaturbefehl nicht erst ein Dialogfeld geöffnet werden soll, sondern automatisch ein neues Dokument des Standard-Dokumenttyps erstellt werden soll.

    In Unicode gibt es Zeichen, die sich zwar visuell ähneln, im Dokument aber auf unterschiedliche Art und Weise gespeichert werden können. So kann beispielsweise das Zeichen „ë“ durch ein Einzelzeichen (e-Umlaut) oder durch zwei Zeichen (reguläres lateinisches Zeichen e + Kombinierungsumlaut) dargestellt werden. Ein Unicode-Kombinierungszeichen ist ein Zeichen, das zusammen mit dem davor stehenden Zeichen verwendet wird, damit beispielsweise der Umlaut über dem „lateinischen e“ angezeigt wird. Beide Formen führen zum gleichen visuellen Ergebnis, aber die in der Datei gespeicherten Informationen sind unterschiedlich.

    Beim Normalisieren wird sichergestellt, dass alle Zeichen, die in unterschiedlicher Weise gespeichert werden können, immer auf dieselbe Weise gespeichert werden. Dies bedeutet, dass alle „ë“-Zeichen in einem Dokument entweder als Einzelzeichen (e mit Umlaut) oder als zwei Zeichen (e + Kombinierungsumlaut) in einem Dokument gespeichert werden, aber nicht in beiden Formen.

    Weitere Informationen zur Unicode-Normalisierung und den spezifischen verwendbaren Formen finden Sie auf der Unicode-Website unter www.unicode.org/reports/tr15.

Vorhandene Dokumente öffnen und bearbeiten

Sie können vorhandene Webseiten oder reine Textdokumente öffnen, auch wenn diese nicht in Dreamweaver erstellt worden sind, und sie in der Entwurfs- oder Codeansicht bearbeiten.

Wenn es sich bei dem zu öffnenden Dokument um eine Microsoft Word-Datei handelt, die als HTML gespeichert wurde, können Sie die von Word in HTML-Dateien eingefügten überflüssigen Markup-Tags mit den Optionen „Werkzeuge“ > „Word-HTML optimieren“ entfernen.

Um HTML- oder XHTML-Code zu optimieren, der nicht von Microsoft Word erzeugt wurde, verwenden Sie „Werkzeuge“ > „HTML optimieren“. Weitere Informationen finden Sie unter Microsoft Word-HTML-Dateien optimieren.

Darüber hinaus können Sie auch andere Textdateien als HTML-Dateien, wie z. B. JavaScript-Dateien, XML-Dateien, CSS-Stylesheets oder Textdateien, öffnen, die in Textverarbeitungsprogrammen oder Texteditoren gespeichert wurden.

  1. Wählen Sie „Datei“ > „Öffnen“.

    Hinweis:

    Sie können Dateien auch mithilfe des Bedienfelds „Dateien“ öffnen.

  2. Wechseln Sie zu der gewünschten Datei und wählen Sie sie aus.
    Hinweis:

    Falls noch nicht geschehen, empfiehlt es sich, zu öffnende und zu bearbeitende Dateien in einer Dreamweaver-Site anzuordnen, anstatt sie von einer anderen Stelle aus zu öffnen. Weitere Informationen zu Dreamweaver-Sites finden Sie unter Dreamweaver-Sites.

  3. Klicken Sie auf „Öffnen“.

    Das Dokument wird im Dokumentfenster geöffnet. JavaScript-, Text- und CSS-Dateien werden standardmäßig in der Codeansicht geöffnet. Sie können das Dokument während Ihrer Arbeit in Dreamweaver aktualisieren und die Änderungen in der Datei speichern.

In Dreamweaver können Sie Dateien anzeigen, die mit dem Hauptdokument verknüpft sind, ohne dass das Hauptdokument den Eingabefokus verliert. Wenn beispielsweise CSS- und JavaScript-Dateien mit einem Hauptdokument verknüpft sind, können Sie diese zugehörigen Dateien in Dreamweaver anzeigen und bearbeiten, während das Hauptdokument gleichzeitig sichtbar bleibt.

Weitere Informationen zu dynamisch zugehörigen Dateien finden Sie unter Dynamisch zugehörige Dateien öffnen.

Hinweis:

Wen Sie beim Arbeiten mit HTML-Dateien schnell kleinere Änderungen an den zugehörigen CSS-, JavaScript- oder PHP-Dateien vornehmen möchten, ohne zu der jeweiligen Datei zu navigieren, können Sie die Schnellbearbeitung verwenden. Weitere Informationen finden Sie unter Schnellbearbeitung.

Standardmäßig werden in Dreamweaver die Namen aller Dateien, die mit einem Hauptdokument verknüpft sind, in der Symbolleiste „Zugehörige Dateien“ unterhalb des Titels des Hauptdokuments angezeigt. Die Anordnung der Schaltflächen in der Symbolleiste entspricht der Reihenfolge der Hyperlinks zu den zugehörigen Dateien im Hauptdokument.

Hinweis:

Wenn eine zugehörige Datei fehlt, wird in Dreamweaver dennoch die entsprechende Schaltfläche in der Symbolleiste „Zugehörige Dateien“ angezeigt. Wenn Sie auf die Schaltfläche klicken, wird jedoch keine Datei angezeigt.

In Dreamweaver werden die folgenden Typen zugehöriger Dateien unterstützt:

  • Client-Skriptdateien
  • Server-Side Includes
  • Externe CSS-Stylesheets (einschließlich verschachtelter Stylesheets)

Führen Sie einen der folgenden Schritte aus:

  • Klicken Sie oben im Dokument in der Symbolleiste „Zugehörige Dateien“ auf den Dateinamen der zugehörigen Datei, die Sie öffnen möchten.

  • Klicken Sie in der Symbolleiste „Zugehörige Dateien“ mit der rechten Maustaste auf den Dateinamen der zugehörigen Datei, die Sie öffnen möchten, und wählen Sie dann im Kontextmenü die Option „Als separate Datei öffnen“ aus. Wenn Sie eine zugehörige Datei auf diese Weise öffnen, bleibt das Hauptdokument nicht gleichzeitig sichtbar.

  1. Setzen Sie die Einfügemarke in eine Zeile oder in einen Bereich, von denen Sie wissen, dass sie von einer zugehörigen Datei beeinflusst werden.

  2. Warten Sie, bis der Indikator für den Code-Navigator angezeigt wird. Klicken Sie dann auf den Indikator, um den Code-Navigator zu öffnen.

  3. Bewegen Sie den Mauszeiger über die Elemente im Code-Navigator, um weitere Informationen zu diesen Elementen anzuzeigen. Wenn Sie beispielsweise eine bestimmte CSS-Farbeigenschaft ändern möchten, jedoch die entsprechende Regel nicht kennen, können Sie die Eigenschaft suchen, indem Sie den Mauszeiger über die verfügbaren Regeln im Code-Navigator bewegen.

  4. Klicken Sie auf das gewünschte Element, um die entsprechende zugehörige Datei zu öffnen.

Zurück in den Quellcode des Hauptdokuments wechseln

  1. Klicken Sie in der Symbolleiste „Zugehörige Dateien“ auf die Schaltfläche „Quellcode“.

Wenn Sie eine zugehörige Datei in der Entwurfsansicht oder in der Code- und Entwurfsansicht (geteilte Ansicht) öffnen, wird die zugehörige Datei in einer geteilten Ansicht angezeigt.

Sie können unter „Ansicht“ > „Teilen“ verschiedene Optionen für geteilte Ansichten auswählen, um die geteilte Ansicht anzupassen.

Wenn Sie die zugehörigen Dateien nur in der Codeansicht anzeigen möchten, wählen Sie am oberen Rand der Symbolleiste die Option „Code“ aus.

Hinweis:

In der Standardcodeansicht können Sie zugehörige Dokumente nicht gleichzeitig mit dem Quellcode des Hauptdokuments anzeigen.

Hinweis:

Die Codeansicht in der Anzeigeoption bezieht sich auf den Quellcode des Hauptdokuments. Wenn Sie beispielsweise „Ansicht“ > „Codeansicht oben“ auswählen, wird der Quellcode des Hauptdokuments in Dreamweaver in der oberen Hälfte des Dokumentfensters angezeigt. Wenn Sie „Ansicht“ > „Codeansicht links“ auswählen, wird der Quellcode des Hauptdokuments im linken Bereich des Dokumentfensters angezeigt.

Wenn Sie eine HTML-Datei öffnen, werden die zugehörigen Dateien in Dreamweaver standardmäßig auf einzelnen Registerkarten angezeigt. Diese Funktion können Sie über das Bedienfeld „Voreinstellungen“ deaktivieren.

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

  2. Heben Sie in der Kategorie „Allgemein“ die Auswahl von „Zugehörige Dateien aktivieren“ auf.

Die Funktion „Dynamisch zugehörige Dateien“ erweitert die Funktionalität der Funktion „Zugehörige Dateien“ dadurch, dass Sie die zugehörigen Dateien dynamischer Seiten auf der Symbolleiste Zugehörige Dateien anzeigen können. Mithilfe der Funktion „Dynamisch zugehörige Dateien“ können Sie insbesondere die zahlreichen dynamischen Includes anzeigen, die zum Erzeugen des Laufzeitcodes für gängige Open-Source-PHP-Content-Management-Systeme (CMS) wie WordPress, Drupal und Joomla! erforderlich sind.

Zur Verwendung der Funktion „Dynamisch zugehörige Dateien“ müssen Sie Zugriff auf einen lokalen oder Remote-PHP-Anwendungsserver haben, auf dem WordPress, Drupal oder Joomla! ausgeführt wird. Eine gängige Methode zum Testen von Seiten besteht darin, einen localhost-PHP-Anwendungsserver einzurichten und die Seiten lokal zu testen.

Vor dem Testen von Seiten müssen Sie die folgenden Schritte ausführen:

  • Richten Sie eine Dreamweaver-Site ein. Stellen Sie dabei sicher, dass das Textfeld „Web-URL“ im Dialogfeld „Site-Definition“ ausgefüllt ist.

  • Richten Sie einen PHP-Anwendungsserver ein.

    Hinweis: Erst wenn der Server aktiv ist, können Sie in Dreamweaver dynamisch zugehörige Dateien verwenden.

  • Installieren Sie WordPress, Drupal oder Joomla! auf dem Anwendungsserver. Weitere Informationen finden Sie unter:

  • Definieren Sie in Dreamweaver einen lokalen Ordner, in den Sie die CMS-Dateien herunterladen und in dem Sie sie bearbeiten.

  • Definieren Sie das Verzeichnis der installierten WordPress-, Drupal- oder Joomla-Dateien als Remote- und Testordner.

  • Rufen Sie die CMS-Dateien vom Remote-Ordner ab (Download).

Wenn Sie eine Seite öffnen, die mit dynamisch zugehörigen Dateien verknüpft ist, können die Dateien mit Dreamweaver automatisch gesucht werden. Alternativ können Sie die Dateien manuell suchen (dazu klicken Sie auf einen Hyperlink in der Statusleiste über der Seite). Als Standardeinstellung ist die manuelle Suche festgelegt.

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

  2. Stellen Sie sicher, dass in der Kategorie „Allgemein“ die Option „Zugehörige Dateien aktivieren“ ausgewählt ist.

  3. Wählen Sie im Popupmenü „Dynamisch zugehörige Dateien“ die Option „Manuell“ oder „Automatisch“ aus. Durch Auswählen von „Deaktiviert“ können Sie zudem die Suche insgesamt deaktivieren.

  1. Öffnen Sie eine Seite, die mit dynamisch zugehörigen Dateien verknüpft ist, z. B. die Seite „index.php“ des Stammordners einer WordPress-, Drupal- oder Joomla!-Site.

  2. Wenn für die Suche nach dynamisch zugehörigen Dateien die Option „Manuell“ (die Standardeinstellung) festgelegt ist, klicken Sie in der Statusleiste, die im Dokumentfenster über der Seite angezeigt wird, auf den Hyperlink für die Suche.

    Wenn die Suche nach dynamisch zugehörigen Dateien automatisch aktiviert ist, wird auf der Symbolleiste „Zugehörige Dateien“ eine Liste mit dynamisch zugehörigen Dateien angezeigt.

Die zugehörigen und dynamisch zugehörigen Dateien auf der Symbolleiste „Zugehörige Dateien“ sind in der folgenden Reihenfolge aufgeführt:

  • Statische zugehörige Dateien (d. h. zugehörige Dateien, die keiner dynamischen Verarbeitung bedürfen)
  • Externe zugehörige Dateien (CSS- und JS-Dateien), die Server-Include-Dateien mit dynamischen Pfaden zugeordnet sind
  • Server-Include-Dateien mit dynamischen Pfaden (PHP-, INC- und MODULE-Dateien)

Da häufig zahlreiche zugehörige und dynamisch zugehörige Dateien vorhanden sind, können Sie zugehörige Dateien in Dreamweaver filtern, um so genau die Dateien zu suchen, die Sie bearbeiten möchten.

  1. Öffnen Sie eine Seite, die mit zugehörigen Dateien verknüpft ist.

  2. Suchen Sie gegebenenfalls nach dynamisch zugehörigen Dateien.

  3. Klicken Sie auf das Symbol „Zugehörige Dateien filtern“ rechts auf der Symbolleiste „Zugehörige Dateien“.

  4. Wählen Sie die Dateitypen aus, die auf der Symbolleiste „Zugehörige Dateien“ angezeigt werden sollen. Standardmäßig werden alle zugehörigen Dateien ausgewählt.

  5. Klicken Sie zum Erstellen eines benutzerdefinierten Filters auf das Symbol „Zugehörige Dateien filtern“ und wählen Sie „Eigener Filter“ aus.

    Im Dialogfeld „Eigener Filter“ können nur exakte Dateinamen („style.css“), Dateierweiterungen („.php“) und Platzhalterausdrücke mit Sternchen („*menu*“) gefiltert werden. Sie können nach mehreren Platzhalterausdrücken filtern, indem Sie die einzelnen Ausdrücke jeweils durch ein Semikolon trennen (z. B. „style.css;*.js;*tpl.php“).

Hinweis:

Filtereinstellungen werden nach dem Schließen der Datei nicht beibehalten.

Microsoft Word-HTML-Dateien optimieren

Sie können Dokumente öffnen, die in Microsoft Word (Microsoft Word 97 oder höher) als HTML-Dateien gespeichert wurden. Anschließend können Sie über „Werkzeuge“ > „Word-HTML optimieren“ den von Word erstellten überflüssigen HTML-Code entfernen.

Der Code, der von Dreamweaver entfernt wird, dient in Word hauptsächlich zur Formatierung und Anzeige des Dokuments und ist für die Anzeige der HTML-Datei nicht erforderlich.

Sie sollten eine Sicherungskopie der ursprünglichen Word-Datei (.doc) aufbewahren, da das HTML-Dokument eventuell nicht mehr in Word geöffnet werden kann, nachdem Sie die HTML-Datei optimiert haben.

Hinweis:

Um HTML- oder XHTML-Code zu optimieren, der nicht von Microsoft Word erzeugt wurde, verwenden Sie den Befehl „Werkzeuge“ > „HTML optimieren“.

  1. Speichern Sie Ihr Microsoft Word-Dokument als HTML-Datei (Webseite).
    Hinweis:

    Auf Windows-Systemen sollten Sie nun die Datei in Word schließen, um zu verhindern, dass es zu einer Zugriffsverletzung kommt.

  2. Öffnen Sie die HTML-Datei in Dreamweaver.

    Wechseln Sie in die Codeansicht („Ansicht“ > „Code“), um den von Word erzeugten HTML-Code anzuzeigen.

  3. Wählen Sie Werkzeuge > Word-HTML optimieren.

    Hinweis:

    Wenn Dreamweaver die Word-Version, in der die Datei gespeichert worden ist, nicht bestimmen kann, wählen Sie die richtige Version aus dem Popupmenü aus.

  4. Aktivieren bzw. deaktivieren Sie die Optionen für die Optimierung. Die Voreinstellungen, die Sie hier vornehmen, werden als Standardoptimierungseinstellungen verwendet.

    Dreamweaver wendet die Optimierungseinstellungen auf das HTML-Dokument an und blendet ein Änderungsprotokoll ein (sofern diese Option nicht im Dialogfeld deaktiviert wurde).

    Optionen zum Optimieren von Microsoft Word-HTML-Dateien
    Optionen zum Optimieren von Microsoft Word-HTML-Dateien

    Alle Word-spezifischen Markierungen entfernen

    entfernt den gesamten Microsoft Word-spezifischen HTML-Code, einschließlich XML von HTML-Tags, Word-spezifischer Metadaten und Link-Tags im head-Bereich des Dokuments, Word-XML-Markup, bedingter Tags und deren Inhalt sowie leerer Absätze und Randdefinitionen aus Stilen. Auf der Registerkarte „Detailliert“ können Sie die obigen Optionen einzeln auswählen.

    CSS optimieren

    entfernt alle Word-spezifischen CSS-Elemente, einschließlich Inline-CSS-Stile, wenn zulässig (dabei hat der übergeordnete Stil die gleichen Stileigenschaften), Stilattribute, die mit „mso“ beginnen, alle Stildeklarationen, die nicht CSS entsprechen, alle CSS-Stile aus Tabellen sowie alle nicht benutzten Stildefinitionen aus dem Head-Bereich. Sie können diese Optionen auf der Registerkarte „Detailliert“ genau festlegen.

    <font>-Tags optimieren

    entfernt HTML-Tags und wandelt den Standardtextkörper in HTML-Text der Größe 2 um.

    Ungültig verschachtelte Tags korrigieren

    entfernt die Font-Tags, die Word außerhalb der Absatz- und Überschriften-Tags (Blockebene) einfügt.

    Quellcodeformatierung anwenden

    wendet die Formatierungsoptionen für den HTML-Quellcode auf das Dokument an. Diese Formatierungsoptionen legen Sie in den Voreinstellungen für das HTML-Format und in der Datei SourceFormat.txt fest.

    Protokoll nach Abschluss zeigen

    zeigt abschließend ein Meldungsfeld an, in dem die Änderungen aufgeführt werden, die bei der Optimierung am Dokument vorgenommen wurden.

  5. Klicken Sie auf „OK“ oder öffnen Sie zuerst die Registerkarte „Detailliert“, wenn die Optionen „Alle Word-spezifischen Markierungen entfernen“ und „CSS optimieren“ weiter angepasst werden sollen, und klicken Sie danach auf „OK“.

Ähnliche Themen

 Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?

Hilfreiche Links

Alle Abos anzeigen Abos verwalten
Hilfreiche Links einblenden
Hilfreiche Links ausblenden

Rechtliche Hinweise    |    Online-Datenschutzrichtlinie