So verwenden Sie Zen-Codierung in Dreamweaver

So verwenden Sie Zen-Codierung in Dreamweaver
Nachdem ich meinen letzten Artikel „Zen Coding: Eine schnelle Möglichkeit, HTML/CSS-Code zu schreiben“ veröffentlicht hatte, sagten einige Internetnutzer, sie wüssten nicht, wie sie das Zen Coding-Plugin in Dreamweaver verwenden sollten. OK, heute werde ich ein ausführliches Tutorial zur Verwendung der Zen-Codierung in DW schreiben. Wenn Sie die Verwendung bereits kennen, müssen Sie diesen Artikel nicht weiterlesen.

Glücklicherweise habe ich es auf Dreamweaver CS3 getestet und festgestellt, dass sowohl Dreamweaver CS3 als auch CS4 das Zen-Codierungs-Plugin unterstützen.

Vorbereiten

Stellen Sie vor der Installation des Plug-Ins sicher, dass Sie Adobe Extension Manager installiert haben. Wenn nicht, laden Sie es bitte von der offiziellen Adobe-Website herunter und installieren Sie es:

  • DW CS3 erfordert die Installation von Extension Manager Version 1.8. Besuchen Sie die Download-Seite oder laden Sie es direkt herunter .
  • DW CS4 erfordert die Installation von Extension Manager 2.0 . Besuchen Sie die Download-Seite oder laden Sie es direkt herunter .

Herunterladen und installieren

Gehen Sie zur Homepage des Zen Coding-Projekts, um das neueste Zen Coding-Plugin für Dreamweaver herunterzuladen. In der rechten Spalte der Seite finden Sie eine Downloadliste mit der Erweiterung MXP. (Die aktuelle Version ist 0.7 und kann hier heruntergeladen werden . Es gibt eine von Qianduan gepackte Version, aber die offizielle neue Version ist 0.7. Es wird empfohlen, die offizielle Version zu verwenden.).

Doppelklicken Sie nach dem Herunterladen auf die heruntergeladene Datei Zen Coding v.0.7.mxp, um sie direkt zu installieren. Das ist ganz einfach.

Starten Sie DW nach der Installation neu. Anschließend finden Sie das Zen-Codierungsuntermenü im Befehlsmenü, wie unten gezeigt:

Dies bedeutet, dass die Installation erfolgreich war.
Anwendung
Die Verwendung von Zen-Codierung ist ebenfalls sehr einfach. Erstellen Sie eine neue Datei oder wechseln Sie in einer beliebigen HTML-Datei zur Codeansicht und schreiben Sie Code im Zencoding-Format, zum Beispiel:

Code kopieren
Der Code lautet wie folgt:

ul#nav>li*4>a

Markieren Sie anschließend diese Codezeile und drücken Sie die Tastenkombination STRG + , um den vollständigen HTML-Code zu generieren:

Code kopieren
Der Code lautet wie folgt:

<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

So einfach ist das.

Dreamweaver-Tastenkombinationen ändern

Vielleicht sind Sie es nicht gewohnt, die Standardtastenkürzel des Zen Coding-Plugins zu verwenden. In diesem Fall können Sie die Tastenkürzel ganz einfach ändern:

Wählen Sie das Untermenü „Tastenkombinationen“ im Menü „Bearbeiten“, um die Tastenkombinationen zu bearbeiten. Die Benutzeroberfläche sieht wie folgt aus:

In der Tastenkombinationszeile wird die aktuelle Tastenkombination angezeigt. Wenn Sie diese ändern möchten, bewegen Sie den Cursor in das Eingabefeld hinter der Taste und drücken Sie dann direkt die gewünschte Taste auf der Tastatur. Klicken Sie auf die Schaltfläche „Ändern“ und bestätigen Sie anschließend.

Wenn Sie die Tastenkombinationen ändern, achten Sie darauf, dass es nicht zu Konflikten mit den aktuell verwendeten Tastenkombinationen kommt.

Darüber hinaus können die Standardeinstellungen für Tastenkombinationen nicht geändert werden. Sie werden dazu aufgefordert, wenn Sie sie ändern möchten, und können gemäß den Eingabeaufforderungen eine neue Einstellung erstellen.

<<:  Reines CSS zum Ändern der Farbe des Bildes

>>:  JavaScript zum Implementieren des Slider-Verifizierungscodes

Artikel empfehlen

Zusammenfassung des Wissens zu MySQL-Sperren

Sperren in MySQL Sperren sind ein Mittel, um Ress...

Implementierung der Docker-Compose-Bereitstellung des ZK+Kafka+Storm-Clusters

Übersicht über die Clusterbereitstellung 172.22.1...

Implementierung eines einfachen Whack-a-Mole-Spiels in JavaScript

In diesem Artikel finden Sie den spezifischen Cod...

Erläuterung der MySQL-Indexoptimierung

Bei unserer täglichen Arbeit führen wir manchmal ...

Detaillierte Erläuterung der Wissenspunkte zu Linux-Dateivorgängen

Verwandte Systemaufrufe für Dateioperationen erst...

VMWare15 installiert Mac OS-System (grafisches Tutorial)

Installationsumgebung Windows 10 VMware Workstati...

Detailliertes Tutorial zur MySQL-Installation und -Konfiguration

Inhaltsverzeichnis Installationsfreie Version von...

Beschreiben Sie kurz die vier Transaktionsisolationsebenen von MySql

Isolationsstufe: Isolation ist komplizierter als ...

So fügen Sie Div-Elementen abgerundete Ränder hinzu

Wie unten dargestellt: CSS- CodeInhalt in die Zwi...

Detaillierte Erklärung des Linx awk-Einführungstutorials

Awk ist eine Anwendung zur Verarbeitung von Textd...