Hallo!
Falls Sie immer wieder die gleichen oder ähnliche Zeilen Code für Ihre Web-Projekte schreiben, sind die Snippets in Dreamweaver CC die perfekte Lösung für Sie.
Snippets sind vordefinierte Code-Fragmente – wiederverwendbar in jedem Web-Projekt.
Wird das Bedienfeld für Snippets nicht angezeigt, wählen Sie „Fenster > Codefragmente“ (Window > Snippets).
Hier sehen Sie die Ordner „Bootstrap_Snippets“, „CSS_Snippets“ und auch „Responsive_Design_Snippets“.
Ich verwende „HTML_Snippets“ am häufigsten.
Das sind die Namen meiner Snippets.
Manche sind so lang, dass sie abgeschnitten werden.
Wenn Sie aber die Maus darüber bewegen, sehen Sie die vollständigen Namen.
Jetzt füge ich ein paar dieser Snippets zu meiner Site hinzu.
Ich werde das Snippet „Adding a Mailto Link“ verwenden.
Dieses Snippet ist ein gutes Beispiel für Code, den man häufig benötigt.
Wenn jemand den Link anklickt, wird eine E-Mail an mich gesendet.
Ich weiß ungefähr, wie der Code lautet.
Meistens ist es „Mailto“ gefolgt von einem Doppelpunkt.
Kommt dann ein Fragezeichen?
Das kann ich mir nie merken.
Das ist ein typischer Fall, in dem diese Snippets hilfreich sind.
Hier unten im Footer zwischen den P-Tags füge ich den „Mailto“-Link hinzu.
Während der Cursor im Code blinkt, mache ich einen Doppelklick auf mein Snippet.
Und da ist es.
Sogar ein praktischer Kommentar ist dabei, der mich daran erinnert, die E-Mail-Adresse auszutauschen.
Danke!
Ich aktualisiere den Code mit meiner E-Mail-Adresse.
In der Live-Ansicht kann man sehen, dass es geklappt hat: Hier ist die Schaltfläche „Email Us“, hier die korrekte Syntax.
So fügt man ein Snippet hinzu.
Vorhandene Snippets können auch angepasst werden.
Angenommen, Sie möchten eine Seitenumleitung definieren.
Sie haben viele Seiten, die auf eine andere Website umleiten sollen oder eine andere Seite, während Sie daran arbeiten.
Dazu markiere ich nun das Snippet und klicke auf diese Option: „Codefragment bearbeiten“.
Das Snippet leitet Besucher auf die Site „http://website.com/“ um.
Das ist ein Platzhalter.
Den ändere ich in „http://adobe.com/“.
Da ich diesen Vorgang auf vielen Seiten wiederholen muss, ändere ich auch gleich den Trigger Key.
Das ist eine Art Kürzel.
Ich habe nun einen eindeutigen Trigger erstellt mit dem Namen „redirect“ (umleiten).
Ich klicke auf „OK“.
Der Trigger Key „redirect“ wurde hinzugefügt.
Damit möchte ich den HEAD-Abschnitt bearbeiten.
Bevor meine Seite geladen wird, soll sie Besucher auf eine andere Seite umleiten.
Ich drücke die Tabulatortaste.
Vorhin habe ich gezeigt, wie rasch sich Snippets hinzufügen lassen.
Noch schneller geht es, wenn Sie mit Triggern arbeiten.
Besonders bei Snippets, die Sie häufig verwenden.
Jetzt wird es Zeit, eigene Snippets zu erstellen.
Beim Programmieren von Sites gibt es Code, der immer wieder benötigt wird.
Zum Beispiel müssen für bestimmte Kunden bestimmte Farben, Schriftfamilien u.
Ä. auf allen Seiten wiederverwendet werden.
Um Zeit zu sparen, lege ich eine eigene Gruppe an.
Ich klicke auf das Symbol „Neuer Codefragment-Ordner“ und gebe einen Namen dafür ein, nämlich „My Snippet“ (Mein Snippet).
Der neue Ordner befindet sich noch im Ordner „HTML_Snippets“.
Ich klicke darauf, halte die Maustaste gedrückt und ziehe den Ordner nach unten.
Jetzt ist er auf der gleichen Ebene wie die anderen.
Ich schließe den Ordner „HTML_Snippets“.
Während der Ordner noch ausgewählt ist, klicke ich auf das Symbol „Neues Codefragment“.
Das Snippet braucht einen Namen.
Ich nehme einfach den Namen des Grüntons, der überall im CSS-Code verwendet wird.
Hier unten wird der Code eingefügt.
Ich klicke auf „OK“.
Im CSS-Code navigiere ich zu der Stelle, an der der Code eingefügt werden soll, nämlich hier für diesen Intro-Text.
Er soll die Farbe „Corporate Green“ haben.
Ich suche nach dem Selektor, der diesen Teil steuert.
Da ist er.
Nun doppelklicke ich einfach auf „Corporate Green“.
Großartig!
Die Snippet-Funktion ist besonders praktisch bei größeren Code-Fragmenten.
Mit diesem HEADER-Tag zum Beispiel fange ich fast alle meine Web-Projekte an.
Ich markiere alles, was zum Tag gehört.
Nun klicke ich auf „Neues Codefragment“.
Da ich den Code bereits ausgewählt habe, wurde er gleich ins Feld „Code einfügen“ (Insert code) übertragen.
Nun fehlen noch der Name und der Trigger Key.
„Nav“ ist kein guter Name, denn so heißt schon ein Shortcut bei Emmet.
Bei Triggern sollte man Namen von HTML-Elementen generell vermeiden.
Wählen Sie einen eindeutigen Namen.
Ich nenne das Kürzel „mynav“ und klicke auf „OK“.
Wenn ich ein neues Dokument erstelle, muss ich zu Beginn einfach im BODY-Abschnitt „mynav“ eingeben und die Tabulatortaste drücken.
Sehen Sie: Für die gesamte HTML-Struktur brauche ich nur ein paar Buchstaben und die Tabulatortaste.
Sie haben nun gesehen, wie praktisch Snippets sind.
Egal ob Sie vorhandene Snippets verwenden oder bearbeiten oder – wie im letzten Beispiel – eigene erstellen.
Achten Sie bei der Erstellung eigener Snippets darauf, dass die Synchronisation von Einstellungen aktiviert ist.
Dazu klicken Sie auf dieses kleine Symbol rechts oben.
Ihre Snippets werden dann mit der Cloud synchronisiert und sind auch dann noch verfügbar, falls Sie Dreamweaver CC neu installieren müssen oder auf einem anderen Computer verwenden.
Zum Abschluss bedanke ich mich bei den Snippets und Dreamweaver CC dafür, dass sie so großartig sind.
Und natürlich bei Ihnen – den großartigen Zuschauern.
Für Dreamweaver CC stehen viele weitere Tutorials zur Verfügung.
Schauen Sie sich alle an.
