Operation Manual
Nach oben
Hinweis:
2. Wählen Sie im Bedienfeld „Einfügen“ die entsprechende Kategorie aus.
3. Klicken Sie im Bedienfeld „Einfügen“ auf eine Schaltfläche oder wählen Sie in einem
Popupmenü des Bedienfelds eine Option aus.
Wenn Sie auf ein Symbol klicken, wird der Code entweder sofort auf der Seite angezeigt
oder Sie werden in einem Dialogfeld dazu aufgefordert, weitere Informationen
einzugeben, damit der Code vervollständigt werden kann.
Um die Funktion der verschiedenen Schaltflächen zu ermitteln, platzieren Sie den
Mauszeiger auf einer Schaltfläche, bis die zugehörige QuickInfo angezeigt wird. Die
Anzahl und Art der im Bedienfeld „Einfügen“ verfügbaren Schaltflächen hängt vom
aktuellen Dokumenttyp ab. Darüber hinaus spielt es eine Rolle, ob Sie in der
Codeansicht oder der Entwurfsansicht arbeiten.
Obwohl das Bedienfeld „Einfügen“ eine Sammlung häufig verwendeter Tags bietet,
enthält diese Sammlung nicht alle verfügbaren Tags. Eine umfangreichere Tag-
Sammlung können Sie über die Tag-Auswahl aufrufen.
Code mit Emmet einfügen
Emmet ist ein Plug-in zum schnellen Schreiben von Code und Generieren von HTML- und CSS-Code. Sie
können jetzt in Dreamweaver in der Codeansicht oder im Codeinspektor Emmet-Abkürzungen verwenden
und die Tabulatortaste drücken, um diese Abkürzungen als vollständiges HTML-Markup oder vollständigen
CSS-Code anzuzeigen. Für HTML-Abkürzungen wird der vollständige Code auf HTML- und PHP-Seiten
angezeigt. Für CSS-Abkürzungen wird der vollständige Code auf CSS-, LESS-, Sass- und SCSS-Seiten oder
im style-Tag auf einer HTML-Seite angezeigt.
Die folgenden Beispiele veranschaulichen die Verwendung von Emmet-Abkürzungen in der Codeansicht.
Ausführliche Informationen und eine Referenz finden Sie in der Emmet-Dokumentation.
Dreamweaver unterstützt zurzeit nur Emmet 1.0-Abkürzungen.
Beispiel 1: Einfügen von HTML-Code mit Emmet
Um schnell HTML-Code für eine ungeordnete Liste mit drei Elementen hinzuzufügen, öffnen Sie die HTML-
Datei und geben Sie in der Codeansicht die folgende Emmet-Abkürzung in <body></body> ein:
Stellen Sie jetzt sicher, dass sich der Cursor direkt hinter der Emmet-Abkürzung befindet, und drücken Sie
die Tabulatortaste, um die Abkürzung zu erweitern. Alternativ können Sie die gesamte Abkürzung auswählen
und dann die Eingabetaste drücken.
Statt der Abkürzung wird der folgende Code angezeigt:
1 div>(ul>li*3>{Lorem Ipsum})+p*4>lorem
1
2
3
4
5
6
7
8
9
10
11
<div>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe,
voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio
molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora
temporibus vel.</p>
<p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo
ex possimus eligendi amet nesciunt provident inventore rerum facere ea
veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto
esse.</p>
<p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae,
reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel
487