HTML5 ermöglicht die semantisch korrekte Erstellung von Tags.
Die Art der Elemente muss aus Gründen der Barrierefreiheit klar definiert sein, damit Bildschirm-Leseprogramme den Inhalt richtig interpretieren können.
Der Quick Tag Editor ist praktisch, wenn Sie bereits erstellte Tags bereinigen möchten, mit anderen Tags experimentieren oder schnelle Anpassungen durchführen wollen.
In diesem Video lernen Sie die drei Modi des Quick Tag Editor kennen.
Zunächst wähle ich den Arbeitsbereich „Entwurf“ (Design).
Mit dem Quick Tag Editor können Sie Code in der Live-Ansicht auf drei Arten bearbeiten: Sie können den Inhalt eines Tags bearbeiten, ein Tag um ein anderes Tag legen oder ein Tag einfügen.
Um den Quick Tag Editor aufzurufen, wählen Sie ein Element in der Live-Ansicht aus, und drücken Sie Strg+T (Windows) bzw.
Befehl+T (macOS).
Der Quick Tag Editor wird im Modus „Tag bearbeiten“ (Edit tag) geöffnet.
Mit Strg+T bzw.
Befehl+T wechseln Sie in den Modus „Tag um Objekt legen“ (Wrap tag).
Drücken Sie erneut diese Tasten, um den Modus „HTML einfügen“ (Insert HTML) aufzurufen.
So greifen Sie auf Code zu bzw. bearbeiten Code für ein Element in der Live-Ansicht.
Sehen wir uns den Quick Tag Editor in Aktion an.
Als Erstes ersetze ich ein DIV-Tag durch ein HTML5-Tag für einen Abschnitt.
Dann bearbeite ich die Attribute für ein Bild.
Ich wähle das Profilbild in der Live-Ansicht aus und drücke die Nach-oben-Taste, um das DIV-Element um das Bild herum auszuwählen.
Ich öffne den Quick Tag Editor im Bearbeitungsmodus, wähle den Text „div“ aus und lösche ihn.
Wenn ich „se“ eingebe, wird mir in den Codehints das Tag „section“ angeboten.
Mit der Eingabetaste ändere ich das Tag.
Dann drücke ich die Eingabetaste erneut, um die Änderung zu bestätigen.
Die Änderung ist nun auch in der Code-Ansicht zu sehen.
Dreamweaver CC aktualisiert sogar das schließende Tag.
Mit dieser Methode ändern Sie ganz einfach Ihre Layout-Tags.
Um das Bild-Tag zu aktualisieren, wähle ich das Bild aus und öffne den Quick Tag Editor im Bearbeitungsmodus.
Ich ändere den Quellpfad in „images/feature2.png“ und drücke die Eingabetaste.
Die Live-Ansicht zeigt jetzt das neue Bild an.
Die Änderungen am Code werden in der Code-Ansicht wiedergegeben.
Nun will ich das Bild mithilfe eines Anker-Tags zu einem klickbaren Element machen.
Auch das ist mit dem Quick Tag Editor ganz einfach.
Ich wähle das Bild erneut aus und drücke zwei Mal hintereinander Strg+T bzw.
Befehl+T, um den Quick Tag Editor im Modus „Tag um Objekt legen“ (Wrap tag) zu öffnen.
Im Quick Tag Editor erscheint ein Codehint-Menü mit Tag-Optionen.
Ich wähle die erste Option, das Anker-Tag, und drücke die Leertaste.
Wenn ich „hr“ eingebe, wird automatisch „href“ vorgeschlagen.
Ich drücke die Eingabetaste und gebe die URL für den Link ein.
Wenn ich erneut die Eingabetaste drücke, sehen wir den aktualisierten Code in der Code-Ansicht.
Jetzt wird das SECTION-Tag von einem Anker-Tag umschlossen.
Das schließende Tag wurde automatisch erstellt.
Der letzte Modus im Quick Tag Editor ermöglicht das Einfügen eines neuen HTML-Elements vor einem bereits vorhandenen.
Um ein DIV-Tag über dem Bild einzufügen, rufe ich den Modus „HTML einfügen“ (Insert HTML) auf.
Ich wähle das Bild aus und öffne den Quick Tag Editor im Modus „HTML einfügen“ (Insert HTML).
Ich gebe „di“ ein und drücke die Eingabetaste, um das DIV-Tag in den Codehints auszuwählen.
Ich drücke wieder die Eingabetaste, um den Code zu übernehmen.
Die Code-Ansicht wurde aktualisiert.
Die Live-Ansicht bietet viele Werkzeuge und Shortcuts, um Code zu finden und zu erzeugen.
Der Quick Tag Editor ist ein einfaches, leistungsstarkes Feature, das die schnelle Bearbeitung von Code in der Live-Ansicht ermöglicht.
Probieren Sie die drei Modi im Quick Tag Editor aus, wenn Sie Ihre eigenen Designs in Dreamweaver CC bearbeiten.
