Codeausschnitte

Codeausschnitte stellen bei Expression Web kleine Textbausteine dar, die, einmal definiert, in der Code-Ansicht verschiedenster Dateien (HTML, CSS, ...) eingefügt werden können. Leider lassen sich die Codeausschnitte nicht in der Design-Ansicht eines HTML-Dokumentes nutzen.

Die Codeausschnitte von Frontbox bieten da etwas mehr:

  • auch in der Design-Ansicht nutzbar
  • neben globalen (in allen Webs verfügbaren) Codeausschnitten lassen sich auch Web-spezifische definieren
  • per Platzhalter lässt sich das Verhalten steuern, so ist es z.B. möglich dynamisch den Inhalt der Zwischenablage in den Codeausschnitt einzufügen

Hinweis: »Codeausschnitte« ersetzen die »QuickTags« aus Frontbox 1, welche nun nicht mehr unterstützt werden. Eine Konvertierung von »QuickTags« nach »Codeausschnitte« ist derzeit leider nicht möglich.

Anwendung

Symbolleiste CodeausschnitteCodeausschnitte

Sofern installiert, erzeugt Frontbox eine neue Symbolleiste, die eine aufklappbare Liste mit den definierten Codeausschnitten enthält, sowie 2 weitere Schaltflächen, die den ausgewählten Codeausschnitt in die aktuelle Seite einfügen und einen Dialog aufrufen um Codeausschnitte zu verwalten.

Dialog Codeausschnitte verwalten

Im Bild als Beispiel die Codeausschnitte, die ich für meine tägliche Arbeite ständig benötige.

Einen neuen Codeausschnitt anlegen

Neuen Codeausschnitt anlegen Nach einem Klick auf »Neu« können Sie einen neuen Codeausschnitt anlegen (siehe rechts).

Über die Verfügbarkeit können Sie angeben, ob der Codeausschnitt global, d.h. in allen Webs verfügbar ist, oder nur im aktuell geöffnetem Web. Ist kein Web geöffnet können Sie nur globale Codeausschnitte anlegen.

Optional können Sie Codeausschnitte unterschiedlichen Gruppen zuordnen. Wählen Sie dazu aus der Liste eine vorhandene aus oder definieren Sie eine neue Gruppe. Wollen Sie keine Gruppe definieren lassen Sie das Feld leer.

Vergeben Sie einen sprechenden Namen, damit Sie auch später noch wissen was dieser Codeausschnitt bewirkt.

Zu guter Letzt definieren Sie den Code für Ihren Codeausschnitt - das kann HTML, CSS, JavaScript, oder was auch immer sein.

Beispiel: Hallo, Welt!

Codeausschnitt Beispiel: Hallo, Welt!Ein erstes Beispiel soll den Text »Hallo, Welt!« als Überschrift 1. Ordnung in ein geöffnetes Html-Dokument einfügen. Legen Sie einen neuen Codeausschnitt an und definieren Sie ihn wie rechts gezeigt.

Nach Klick auf OK wird dieser gespeichert und in die Liste der verfügbaren Codeausschnitte eingefügt. Wählen Sie ihn also aus der aufklappbaren Liste der Symbolleiste aus und klicken Sie auf die Schaltfläche »Einfügen« direkt daneben (ggf. vorher ein Dokument öffnen oder neu anlegen).

Hallo, |Welt!|

Sie wundern sich über die senkrechten Striche? Lesen Sie weiter.

Einfügemarken

Über einen oder zwei senkrechte Striche lässt sich die Position des Cursors bzw. der Bereich des durch die aktuelle Auswahl des Dokumentes zu ersetzenden Textes bestimmen. Ein paar Beispiele:

Wirkungsweise von einer oder zwei Einfügemarken im Vergleich
  Codeausschnitt Im Dokument selektiert Ergebnis
Eine Einfügemarke <h1>Hallo, |!<h1> (nichts) Hallo, |!
    Sie Hallo, Sie!
Zwei Einfügemarken <h1>Hallo, |Welt|!<h1> (nichts) Hallo, |Welt|!
    Sie Hallo, Sie!

Zusammenfassung: sofern im Dokument nichts selektiert wurde, ist nach dem Einfügen des Codeausschnittes der Bereich selektiert, der durch einen oder zwei senkrechte Striche angegeben wurde. Geben Sie weiteren Text ein wird diese Auswahl direkt überschrieben. War hingegen etwas selektiert, wird der Bereich durch diese Auswahl ersetzt und der Cursor wird hinter dem Codeausschnitt platziert.