Hallo!
In diesem Video lernen Sie fortgeschrittenere Coding-Techniken in Dreamweaver kennen, zum Beispiel Emmet für zeitsparende Coding-Kürzel oder den Mehrfach-Cursor für spezielle Aufgaben.
Und Sie erfahren, wie Sie mittels Linting Fehler blitzschnell beheben.
Für die folgenden Übungen müssen Sie Ihre Site definieren.
Hierfür wählen Sie „Site“ und „Neue Site“ (New Site).
Das erleichtert die Dateiverwaltung in Dreamweaver.
Die Site-Definition wird in diesem Video nicht erklärt.
Es gibt ein anderes Video, das detailliert auf dieses Thema eingeht.
Sehen Sie sich das Video an.
Jetzt zeige ich Ihnen, was „Emmet“ ist.
Emmet umfasst Kürzel, die in Dreamweaver integriert wurden.
Mithilfe dieser Emmet-Kürzel werden wir diese Seite erstellen.
So sieht die fertige Seite aus.
Und das ist die Ausgangsdatei.
Der Unterschied ist hier oben.
Im oberen Bereich dieser Seite ist nichts, während hier ein Bild zu sehen ist sowie ein Navigationsmenü.
In diesem Video geht es um Abkürzungen beim Coden.
Ich kehre zu Dreamweaver zurück.
Für dieses Tutorial verwende ich den Entwickler-Modus statt des Standard-Modus.
Wenn Sie die Übungen nachvollziehen möchten, wechseln Sie hier zu „Entwickler“ (Developer).
Links im Bedienfeld „Dateien“ (Files) öffne ich „index-start.html“.
Das ist meine Beispieldatei.
Doppelklicken Sie einfach darauf.
Wie praktisch die Kürzel sind, zeige ich Ihnen am Beispiel des Headers.
Unter diesem Kommentar, wo der Header hinkommt, drücke ich die Tabulaturtaste.
Hier möchte ich mein HEADER-Tag mithilfe eines Kürzels hinzufügen.
Anstatt die spitzen Klammern einzutippen und das öffnende und schließende Tag, gebe ich einfach nur „header“ ein.
Ich drücke aber nicht die Eingabetaste, sondern die Tabulatortaste.
Sehen Sie sich das an!
Die spitzen Klammern wurden auf beiden Seiten eingefügt, und das Tag wurde automatisch geschlossen.
Ich füge eine neue Zeile ein.
So einfach kann ich ein einzelnes Tag hinzufügen.
Jetzt möchte ich die Navigation festlegen, die mehrere Elemente umfasst.
Ich füge also „nav“ hinzu, dann „ul“ und so weiter.
Aber es gibt noch eine einfachere Möglichkeit.
Ich rufe schnell die Zieldatei auf.
Hier oben ist die Navigation.
Darin enthalten ist das UL-Element, also diese Liste hier.
Und diese Listenelemente kommen in das UL-Tag.
Alle Listenelemente müssen Hyperlinks sein, sodass sie anklickbar sind.
Das coden wir jetzt blitzschnell in Dreamweaver.
Hierfür tippe ich „nav“ ein.
Bevor ich die Tabulatortaste drücke, gebe ich eine spitze Klammer ein.
Mit dem Größer-als-Zeichen wird angegeben, dass das folgende Element ein untergeordnetes Element von NAV ist, also innerhalb des Tags steht.
Nach „nav“ füge ich „ul“ hinzu.
Innerhalb des UL-Tags soll ein Listenelement sein.
Also „li“.
Und innerhalb des LI-Tags soll ein A-Tag stehen.
Das ist mein Anker-Tag.
Ich drücke die Tabulatortaste.
Achtung ...
Voilà.
Sogar das A-Tag wurde automatisch als Hyperlink-Referenz definiert.
Die ganze erforderliche Syntax wurde eingegeben.
Alles ist sauber angeordnet.
Deshalb bin ich ein Fan von Emmet.
Allein das ist großartig.
Aber es kommt noch besser.
Ich habe hier nur einen Link.
Ich mache diesen Schritt wieder rückgängig.
Ich werde nun alles ausschreiben.
Nach dem Listenelement und vor dem Anker-Tag gebe ich die Anzahl ein, und zwar mit einem Sternchen und der Zahl 5.
Dann füge ich die A-Tags ein.
Passen Sie gut auf.
Tabulatortaste.
Toll, oder?
Und das Beste an Emmet ist, dass man sich die Syntax leicht merken kann.
Mit ein bisschen Übung können Sie Ihren Workflow deutlich beschleunigen.
Es gibt aber noch einen anderen praktischen Weg, Zeit zu sparen, nämlich die Verwendung mehrerer Cursor.
Nehmen wir an, ich möchte den Link hinzufügen.
Das ist ein Hyperlink ohne Ziel.
Anstatt die Links einzeln einzutippen, klicke ich zunächst auf den ersten und halte die Wahltaste gedrückt, bzw. die Alt-Taste auf einem PC.
Ich halte die Taste gedrückt und klicke und ziehe durch die Mitte dieser Elemente.
Jetzt wird ein langer Cursor angezeigt.
Ich fange an zu tippen und füge die URL ein.
Praktisch, nicht wahr?
Ich habe alle fünf Zeilen gleichzeitig ausgefüllt.
Ich lösche das wieder, weil ich nicht überall denselben Link verwenden will.
Diese Funktion kann aber noch mehr.
Hier unten zum Beispiel habe ich ein SPAN-Tag in diesen beiden Zeilen.
Ich möchte zu beiden Tags eine Klasse hinzufügen.
Dabei handelt es sich um dieselbe Klasse.
Ich kann hier klicken.
Das geht übrigens an jeder beliebigen Stelle, also überall auf der Seite.
Ich halte die Befehlstaste auf dem Mac gedrückt, oder die Strg-Taste auf einem PC, und klicke dann hier.
Jetzt blinken beide.
Großartig.
Ich gebe die Klasse ein.
Beide Zeilen werden ausgefüllt, die Zeile hier unten und die Zeile oben.
Und schon habe ich die Klasse hinzugefügt.
Im Moment benötige ich diese Klasse aber nicht.
Kommen wir zu weiteren Vorteilen von Emmet.
Bisher habe ich die Tags hier oben hinzugefügt, also „header“ eingegeben und die Tabulatortaste gedrückt.
Weiter unten habe ich den Mehrfach-Cursor verwendet, um eine Klasse hinzuzufügen.
Nun möchte ich das alles in einem Schritt erledigen.
Das ist mit Emmet möglich.
Unter dem HEADER-Tag hier oben will ich das Logo einfügen.
Das Logo soll anklickbar sein.
Ich gebe also ein A-Tag ein.
Ich möchte meine Klasse direkt zu diesem A-Tag hinzufügen und setze statt der spitzen Klammer einen Punkt.
Die Klasse heißt „site-logo“.
Jetzt drücke ich die Tabulatortaste.
Die Hyperlink-Referenz wurde hinzugefügt.
Aber was wird referenziert?
Ich gebe erst einmal eine Raute als Platzhalter ein.
Die Klasse wurde in einem einzigen Schritt hinzugefügt.
Das Ganze kann ich für ein Bild wiederholen.
Ich gebe „img“ und dann eine Klasse ein.
In diesem Fall nehme ich „site-logo-white“.
Dann drücke ich die Tabulatortaste.
Super.
Alle Informationen für das Bild sowie die Quelle wurden eingegeben.
Hier sind „alt“ und „class“.
Alles wurde dank Emmet eingefügt.
Das war Emmet, integriert in Dreamweaver.
Dreamweaver hat auch eine eigene Codehint-Funktion.
Die kann ich z.
B. hier für die Quelle verwenden.
Ich gebe einfach nur ein I ein.
Daraufhin wird automatisch der Bilderordner „images“ vorgeschlagen.
Den bestätige ich.
Dann schlägt Dreamweaver diese Bilder vor.
Und ich bestätige.
Diese Bilder werden angezeigt, weil ich sie in meiner Site definiert habe, als ich dieses Projekt eingerichtet habe.
Mein Bilderordner wird also aufgerufen, und ich kann alle enthaltenen Dateien sehen.
Falls nicht, klicke ich auf „Durchsuchen“ (Browse).
Mein Bild ist aber hier.
Ich kann die Liste durchscrollen oder einfach ein L eingeben, weil ich weiß: Der Name beginnt mit L.
Nun werden zwei Dateien angezeigt, die mit L beginnen: „logo-dark“ und „logo-white“.
Sehen Sie hier.
Dadurch ist die Auswahl ganz einfach.
Im Moment ist „logo-dark“ ausgewählt.
Ich möchte aber das weiße Logo verwenden.
Um eine Datei auszuwählen, wechsle ich einfach zwischen den beiden mithilfe der Pfeiltasten.
Ich will dieses Logo verwenden.
Ich rufe schnell die Browser-Vorschau auf.
Hier ist mein Bild, also das weiße Logo.
Die Navigation ist etwas missraten.
Das will ich korrigieren.
Ich werde eine Klasse zur Navigation hinzufügen.
Hier ist ein weiterer Vorteil der Codehints in Dreamweaver.
Wenn ich „class“ eintippe und Enter drücke, wird die gesamte Syntax ausgefüllt.
In diesem Fall verwende ich „site-nav“.
Ich rufe die Browser-Vorschau auf.
Hier sind die Aufzählungspunkte, aber jetzt sind sie rechts oben angeordnet.
Als Nächstes möchte ich Text hinzufügen, also Fließtext für meine Seite.
Wenn ich eine Site erstelle, wird oft während meiner Arbeit am Design der Text noch geschrieben.
Ich muss also Platzhaltertext eingeben.
Ich muss dann umständlich suchen, um „Lorem ipsum“-Text zu finden.
Jetzt nicht mehr.
Ich gebe das P-Tag ein, hier beim INTRO-Tag.
Ich füge also das P-Tag für den Text ein.
Ich tippe „p“ und drücke die Tabulatortaste.
Hier ist das Tag.
Jetzt möchte ich Platzhaltertext eingeben.
Normalerweise wird „Lorem ipsum“-Text verwendet.
Das ist einfach eine Anreihung von lateinischen Wörtern.
Anstatt Dreamweaver zu verlassen, tippe ich einfach „lorem“ ein und drücke die Tabulatortaste.
Zu schön, um wahr zu sein?
Ist aber so.
Das mache ich rückgängig.
Bevor ich die Tabulatortaste drücke, gebe ich „10“ ein.
Das heißt, ich brauche zehn Wörter.
Während ich am Design arbeite, weiß ich möglicherweise, dass die Autoren eine bestimmte Wortzahl anpeilen.
Wenn der Text 200 Wörter umfassen soll, gebe ich 200 ein.
So kann ich sicherstellen, dass das Layout passt, bevor ich den Text erhalte.
Nun werde ich diese Zeile wieder löschen und einige der Schritte kombinieren, die ich Ihnen gerade gezeigt habe.
Ich gebe ein DIV-Tag ein mit dem Klassennamen „intro-text“.
In dieses Tag setze ich ein P-Tag.
Davon hätte ich gern vier.
Innerhalb dieser P-Tags soll „Lorem ipsum“-Text stehen.
Sind Sie bereit?
Sehen Sie diesen riesigen Textblock, den ich mit einem einzigen String erstellt habe?
Sehen Sie auch, dass alle Absätze des „Lorem ipsum“-Textes anders sind?
Das hilft beim Nachahmen des echten Textes, den ich später einfügen werde.
So wie ich können Sie sich zunächst mit den Grundkürzeln vertraut machen.
Die Sprache ist so einfach, dass Sie mit der Zeit immer schneller werden beim Hinzufügen von Elementen und Klassen.
Übung macht den Meister.
Und glauben Sie mir: Mein Workflow ist viel einfacher geworden, und das wird Ihrer sicherlich auch.
Ich brauche eigentlich nur ein P-Tag.
Ich habe eben nur etwas angegeben.
Unser kleines Coding-Abenteuer führt uns nun zu einer Technik namens „Linting“.
Linting unterstützt Sie bei der Behebung von Fehlern.
In meinem Fall ist das sehr hilfreich.
Ich zeige Ihnen, was ich meine.
Während ich arbeite, behalte ich immer diese Zeilennummerierung im Blick.
Wenn ich nach unten scrolle, sehe ich hier die rote Markierung.
Wenn ich den Mauszeiger darüber bewege, erfahre ich, was das Problem ist.
Hier fehlt ein Sonderzeichen.
Ich sehe sofort, dass ich die spitze Klammer vergessen habe.
Nach der Korrektur ist der zweite rote Hinweis auch verschwunden, denn diese eine Klammer hat beide Fehler verursacht.
Das geht also, während Sie coden.
Nehmen wir an, dass Sie das Projekt abschließen und alles noch einmal überprüfen wollen.
Ich stelle den Fehler wieder her.
Nehmen wir an, bei der Bearbeitung fällt Ihnen nichts auf, und in der Vorschau scheint alles in Ordnung zu sein.
Sie wollen das Ganze nur überprüfen.
Dann öffnen Sie das Ausgabefenster.
Im Ausgabefenster wird eine Suche durchgeführt und überprüft, ob etwas schiefgegangen ist.
Ich wähle „Fenster“ (Window) und „Ergebnisse“ (Results).
Hier ist „Ausgabe“ (Output).
Sie können das Ausgabefenster geöffnet lassen.
Während Sie Code schreiben, wird das Fenster automatisch aktualisiert.
In diesem Fall wurde der Fehler von vorhin erkannt.
Mit einem Doppelklick gelange ich an die entsprechende Stelle.
Ich gebe die Klammer ein.
Es lohnt sich also, die Hinweise auf der Seite im Auge zu behalten und gleichzeitig das Ausgabefenster offen zu haben, vor allem, wenn sich das Projekt dem Ende nähert und alles reibungslos funktionieren soll.
Eine rote Zahl bedeutet: Achtung!
Die Fehlermeldung und die Warnung helfen Ihnen, das Problem schnell zu beheben.
Dann müssen Sie das Dokument speichern.
Dabei wird das Ausgabefenster aktualisiert.
Jetzt ist es leer.
Ich doppelklicke auf „Ausgabe“ (Output) und schließe das Fenster.
Kehren wir zu Emmet zurück.
Bisher haben wir Emmet im HTML-Code verwendet.
Emmet kann jedoch auch in CSS verwendet werden.
Ich rufe die Datei „styles.css“ auf und scrolle nach oben.
Hier in Zeile 17 möchte ich die Breite für das Bild festlegen.
Dafür kann ich Emmet nutzen.
Ich gebe ein W und dann die Zahl 100 ein und drücke die Tabulatortaste.
Schon wurde eine Breite von 100 Pixel festgelegt.
Wenn Sie keine Maßeinheit hinzufügen, wird der Wert in Pixel angegeben.
Das mache ich rückgängig.
Anstatt 100 Pixel möchte ich Prozent verwenden.
Ich gebe % ein und drücke die Tabulatortaste.
Jetzt wird eine Breite von 100 % angegeben.
Kommen wir zu „html“ in Zeile 6.
Ich möchte einen Rand festlegen.
Ich gebe nur den Buchstaben M und die Zahl 0 ein und drücke die Tabulatortaste.
„Margin: 0“.
Die Auffüllung soll auch 0 sein.
Ich tippe „p0“ ein und drücke die Tabulatortaste.
Großartig.
Es dauert ein wenig, alle Kürzel für die verschiedenen Properties zu lernen, aber Emmet ist so einfach, dass die Kürzel leicht zu erraten sind.
Wenn Sie eine Liste der Kürzel benötigen, finden Sie zahlreiche Ressourcen im Internet.
Für den Einstieg können Sie das Cheatsheet von Emmet.io verwenden, also E-M-M-E-T-[Punkt]-I-O.
Das Cheatsheet finden Sie im Dokumentationsbereich.
Als Nächstes will ich im BODY-Tag eine Hintergrundfarbe hinzufügen.
Das Kürzel lautet BG für „background“ und C für „color“.
Ich drücke die Tabulatortaste, und die Hintergrundfarbe wird eingefügt.
Zunächst Weiß, weil das die am häufigsten verwendete Farbe ist.
Sie können die Farbe aber ändern.
Wenn Sie Weiß nicht möchten, löschen Sie das hier.
Geben Sie die Raute ein, um die Farbauswahl zu öffnen.
Ich kann eine beliebige Farbe auswählen.
Hier ist der Farbton.
Nach der Auswahl drücke ich die Eingabetaste.
Wenn ich den Cursor darüber bewege, wird eine Vorschau der Farbe angezeigt, direkt in der Code-Ansicht in Dreamweaver.
Das ist sehr praktisch.
Ich setze meine Farbe aber wieder auf Weiß zurück, also „#fff“.
Ich bewege den Cursor darüber.
Weiß.
Ich scrolle nach unten zu 348.
Hier möchte ich ein Hintergrundbild hinzufügen.
Das Kürzel können Sie sicherlich erraten, auch wenn Sie kein Emmet-Profi sind.
B-G-I für „background-image“.
Dann Tabulatortaste.
Schon wurden Bild und URL hinzugefügt.
An dieser Stelle muss ich das Bild in Anführungszeichen angeben.
Ich gebe ein I ein.
Wie vorhin ruft Dreamweaver auch jetzt den Bilderordner auf.
Hier sind einige Bilder.
Ich tippe „ri“, um den Rechtspfeil aufzurufen.
Ich verwende „right-arrow-white.png“.
Darunter wird eine Vorschau angezeigt sowie die Größe – sehr praktisch.
Auch hier wird also Emmet wie in HTML unterstützt.
Sie können CSS-Properties mit dieser Technik hinzufügen.
Wie in HTML werden auch hier Linting und Fehlererkennung unterstützt.
Sehen wir uns das an.
Nehmen wir an, ich habe einen falschen Pfad eingegeben, oder das Bild ist nicht auffindbar.
Ich gebe ein zusätzliches R ein, um einen Fehler in den Dateinamen reinzubringen.
Jetzt werde ich darauf hingewiesen, dass das Bild nicht gefunden wurde.
Genauso wie in HTML ist hier die Zeilennummer rot markiert, als Hinweis auf einen Fehler.
Beachten Sie die zusätzliche geschwungene Klammer.
Ich kann auch wie in HTML das Ausgabefenster öffnen.
Wie Sie sehen, wurde in Zeile 359 ein Fehler erkannt.
Sie können beide Methoden verwenden.
Abschließend möchte ich Ihnen zeigen, wie Sie die Links auf Ihrer Site überprüfen, um sicherzustellen, dass alle Verweise funktionieren und keine fehlerhaften Links vorliegen.
Das ist während der Bearbeitung praktisch, aber noch besser, wenn Sie die Site testen oder an einen Kunden senden möchten und sicherstellen wollen, dass alle Links, Menüelemente oder externen Hyperlinks wirklich funktionieren und nicht beschädigt sind.
Ich wechsle zu „Quellcode“ (Source Code).
Ich will die Links im HTML-Code überprüfen.
Ich wähle „Site“, „Site-Optionen“ (Site Options) und dann „Hyperlinks auf der ganzen Site prüfen“ (Check Links Sitewide).
Standardmäßig werden fehlerhafte Links (Broken Links) angezeigt.
Also die Links, die nicht funktionieren.
Das will ich korrigieren.
Vorher aber zeige ich Ihnen die anderen Optionen.
Ich wähle „Externe Hyperlinks“ (External Links).
Diese Links funktionieren einwandfrei.
Ich sehe hier nur, welche Links auf eine andere Website verweisen.
Diese Information kann hilfreich sein.
Die andere Option heißt „Verwaiste Dateien“ (Orphaned Files).
Das sind die Dateien auf der lokalen Site, die auf der Website noch nicht verwendet wurden.
Sie befinden sich im lokalen Ordner, den Sie in der Site-Definition festgelegt haben.
Diese Dateien wurden also noch nicht verwendet.
Das heißt, sie erfüllen keinen Zweck.
Jetzt fällt Ihnen vielleicht auf, dass Sie vergessen haben, ein Bild zur Seite hinzuzufügen, weil es noch nicht verwendet wurde.
Oder Ihnen fallen Dateien auf, die Sie aus Versehen im falschen Ordner gespeichert haben.
Wenn Ihnen solche Dateien auffallen, können Sie sie an den richtigen Platz verschieben.
Wir konzentrieren uns auf die fehlerhaften Links.
Wenn Sie die Links überprüfen, sehen Sie hier oben die Schaltfläche zum Abspielen.
Sie können die Links im aktuellen Dokument prüfen, also für das derzeit geöffnete Dokument.
Sie können Links für die gesamte lokale Site prüfen.
In unserem Fall ist die Site überschaubar, also ist das kein Problem.
Wenn Ihre Site jedoch komplex ist, können Sie einzelne Dateien im Bedienfeld „Dateien“ (Files) auswählen.
Wählen Sie die gewünschten Dateien aus, und führen Sie diese Option aus.
Ich prüfe die Links im aktuellen Dokument.
Nach einem Klick wird die Site durchlaufen, und hier sind die beiden fehlerhaften Links.
Ich suche den Link zur Veranschaulichung.
Der Verweis auf „index.html“ ist normalerweise korrekt.
In unserem Fall aber habe ich den Link „index-start.html“ genannt.
Der Link verweist also auf die falsche Seite.
Ich doppelklicke darauf und ändere den Namen.
Ich klicke auf „Durchsuchen“ (Browse) und wähle den korrekten Link aus.
Möglich sind Tippfehler oder wie hier ein Link zu einer Datei, die nicht existiert.
Ich schließe die Eigenschaften.
Hier unten, wo vorher „index.html“ stand, sehen Sie jetzt den richtigen Code.
Der Link wird immer noch angezeigt.
Sie müssen ihn also noch einmal prüfen.
Dreamweaver erledigt das schnell.
Der erste Link ist verschwunden.
Dieser Link ist ebenfalls fehlerhaft.
Es ist ein externer Link.
Er verweist auf „www.adobe.com“.
Wenn ich darauf doppelklicke, sehen Sie gleich, dass „http“ falsch geschrieben ist.
Ich füge das zweite T ein.
Der Code wurde bereits aktualisiert.
Ich starte die Prüfung der Links.
Sehr schön – keine fehlerhaften Links mehr!
Diese Prüfung funktioniert auch für fehlerhafte Links in CSS.
Sie können das CSS-Dokument öffnen und prüfen.
Klicken Sie auf „Hyperlinks in aktuellem Dokument überprüfen“ (Check Links in Current Document).
Oder Sie können direkt aus dem HTML-Dokument heraus die gesamte aktuelle Site überprüfen.
Dabei werden die aktuelle Seite und auch alle anderen Dokumente geprüft, die die Site umfasst, einschließlich CSS.
Ich schließe den Hyperlink-Prüfer.
Gut gemacht, Leute.
Wir haben einige Tipps und Tricks kennengelernt, mit denen Sie schneller coden und Fehler direkt bei der Bearbeitung vermeiden können.
Wir haben uns mit Emmet und Linting befasst, mit den Codehints in Dreamweaver und der Link-Überprüfung.
Denken Sie daran: Es gibt noch viele weitere Dreamweaver-Tutorials, die sehr hilfreich sind.
Nun aber – liebe Web-Designer – wissen Sie, wie Sie schneller und mit weniger Fehlern coden, in der wunderbaren Welt von Dreamweaver.
