Alle Tipps und Tricks beim Arbeiten mit Quellcode in Dreamweaver

Besonders Programmierer werden die neuen Funktionen zu schätzen wissen, obwohl Dreamweaver bei der PHP-Programmierung nicht mal annähernd an die Möglichkeiten von speziellen PHP-Editoren herankommt. Meistens wird in der Entwurfsansicht das Grundlayout mit Tabellen und Grafiken erstellt, diverse Variablen in PHP und SQL-Abfragen jedoch werden direkt im Code programmiert. Nur so ist vollständige Kontrolle über den Quelltext gegeben.

Arbeiten im Quellcode

In dieser Abbildung siehst du die neue Symbolleiste Kodierung. Die Bezeichnung ist sicherlich etwas unglücklich übersetzt. Tatsächlich verbirgt sich dahinter ein Werkzeug zum Bearbeiten und Handhaben von Quellcode.

Wir empfehlen:
Dreamweaver-Video-Training

 

Quellcode formatieren

Nicht selten steht man vor dem Problem, völlig unformatierten Quellcode zu erhalten. Es ist extrem mühsam und fehlerträchtig, alle Umbrüche und Einrückungen von Hand anzulegen. Quellcode, der so aussieht wie in meinem Beispiel dargestellt, kann niemand lesen.

 

Automatische Formatierung

Klicke daher in der Symbolleiste Kodierung auf den kleinen Eimer und wähle jetzt Quellformatierung übernehmen. Der Code wird dann entsprechend der von dir in den Voreinstellungen festgelegten Optionen eingerückt und formatiert.

 

Codeansichtsoptionen

Um die Ansichtsoptionen für die Quellcodeansicht zu verändern, öffnest du das Menü Ansicht>Codeansichtsoptionen. Du kannst hier einige Hilfsmittel aktivieren oder deaktivieren. Ich rate dir, alle einzuschalten, da der Code somit wesentlich übersichtlicher wird.

Zeilennummern zum Beispiel ermöglichen dir, Stellen im Quellcode schnell zu finden. In PHP-Fehlermeldungen wird fast immer eine Zeilennummer mit einem Hinweis auf die Art des Fehlers ausgegeben.

 

Aktivierst du Ungültigen Code hervorheben, prüft Dreamweaver den Code bereits während der Eingabe auf Korrektheit und Browserkompatibilität. Ähnlich wie bei der Rechtschreibprüfung in Word wird fehlerhafte Syntax etc. hervorgehoben:

 

Übersicht im Code

Quellcodes können mitunter sehr lang werden. Wenn du einige Zeilen des Codes bearbeiten musst, stören alle anderen Bereiche meist erheblich, da sie die Lesbarkeit vermindern.

Mit Dreamweaver verfügst du über die verschiedensten Möglichkeiten, Code auszublenden, wobei die wichtigste sicherlich das vollständige Ausblenden von markierten Bereichen ist.

 

Danach wird der Code ausgeblendet:


Der ausgeblendete Quellcode wird durch graue Markierungen angezeigt und kann jederzeit wieder durch einen Klick auf das kleine Plus-Symbol oder das Icon in der Symbolleiste wieder eingeblendet werden. Zusammen mit den vielfältigen anderen Möglichkeiten, wie etwa, ganze Tags auszublenden, übergeordnete Tags auszuwählen usw., kannst du die Ansicht des Codes ganz nach den jeweiligen Anforderungen gestalten.

 

Code halbautomatisch erstellen

Während du direkt in der Codeansicht Tags eingibst, hilft dir Dreamweaver beim Vervollständigen aller Attribute.

Wenn du die ersten Zeichen nach der sich öffnenden Klammer eingibst, bietet dir Dreamweaver gemäß dem eingegebenen Zeichen eine Auswahl an verfügbaren Tags an. Du kannst diese durch einfaches Betätigen der Eingabetaste automatisch vervollständigen. Auch Attribute werden so vervollständigt. Bei entsprechendem Attribut wird gleich das passende Auswahlfeld mit den möglichen Werten angeboten. Im meiner Abbildung ist das eine Farbe.

 

Kommentare

Zum Zeitpunkt der Entwicklung hast du wahrscheinlich die Struktur der Website bestens im Kopf und kennst jede Variable mit Vornamen. Nach sechs Monaten Projektpause sieht das schon etwas anders aus. Undokumentiert wird der eigene Quellcode schnell zur Hieroglyphensammlung.

Quellcode dokumentieren

Füge deshalb an geeigneten Stellen Kommentare ein, die dir auch nach sechs Monaten erlauben, den Code zu verstehen.

In Dreamweaver kannst du manche Hinweise auch in so genannten Design Notes hinterlegen (siehe Workshop Siteverwaltung). So vermeidest du, dass im Internet Angaben zu finden sind, die Surfern mit unlauteren Absichten helfen, Sicherheitslücken zu finden.

Kommentare kannst du über das Menü Einfügen>Kommentar erstellen oder über die entsprechenden Icons in der Symbolleiste Kodierung.


 

Codefragmente (Snippets) einsetzen

Bibliotheken und Templates haben den Nachteil, dass diese Site-spezifisch sind. Innerhalb einer anderen Website ergeben sie kaum Sinn. Im Lauf der Arbeit werden dir immer wieder Skripte oder HTML-Elemente begegnen, die du gerne wieder verwenden möchtest. Besonders im Hinblick auf dynamische Websites ist es sehr nützlich, wenn man diese Codefragmente speichern kann. Eine gute Programmierung in PHP und anderen Sprachen zeichnet sich schließlich auch durch die Wiederverwendbarkeit des Codes aus.

Code wiederverwenden

Dreamweaver unterstützt dies, indem es dir ermöglicht, Codefragmente, auch Snippets genannt, dauerhaft zu hinterlegen. Du kannst diese in jeder Site verwenden und auch mit anderen Dreamweaver-Nutzern teilen. Voraussetzung für einen Einsatz über Sitegrenzen hinweg ist, dass du keine Pfadangaben in deinem Codefragment verwendest, die in anderen Sitestrukturen nicht funktionieren können.

Nehmen wir zum Beispiel die Meta-Angabe:


 

An Cursorposition einfügen

Du kannst deinem Codeblock optional eine Beschreibung hinzufügen. Bei der Auswahl Block einfügen wird das Codefragment, wie der Name schon sagt, in einem Block an die Stelle des Cursors im Dokument eingesetzt, wenn du dieses Fragment später verwendest.

Um ein Tag herum einfügen

Wenn du in der Dialogbox den Codefragmenttyp Umbruch für Auswahl anwählst, kannst du Codefragmente erstellen, die um einen bestehenden Tag herum eingefügt werden. Dieser Codeblock besteht aus zwei Teilen. Für den ersten Teil musst du angeben, was vor dem ausgewählten Tag eingefügt werden soll, für den zweiten das, was nach der Auswahl eingefügt wird.

Dies eignet sich zum Beispiel dafür, über Tabellen beschriebene zentrierte Darstellung für Tabellen als Fragment zu hinterlegen. Du kannst dann in einer bestehenden Website um das bisherige Layout herum einfach eine weitere Tabelle legen. Und das alles mit einem Klick!

Ab sofort kannst du dann jederzeit auf die Codeschnipsel zugreifen. Klicke im Quellcode die Stelle an, worin der Code eingefügt werden soll. Danach brauchst du nur noch die rechte Maustaste in der Codefragmente-Palette zu aktivieren und klickst dann auf Einfügen.

 
Codefragmente mit Freunden / Kollegen teilen

Die von dir erstellten Codefragmente werden in einem Ordner mit dem Namen Configuration/Snippets abgespeichert. Dieser befindet sich in den Anwendungsdaten deines Rechners bei dem angemeldeten Benutzer. Du kannst diesen Ordner an andere Anwender weiterreichen und kopieren.

Besonders interessant sind Codefragmente bei dynamischen Websites. Du kannst die unterschiedlichsten Abfragen anfertigen und immer wieder verwenden. Die Arbeit an dynamischen Websites ist mit Codefragmenten häufig einfacher und wesentlich effektiver als mit den in Dreamweaver integrierten Features. Zusätzlich hast du die vollständige Kontrolle über den Quellcode.

Wenn du Dreamweaver vollständig löschst und neu installierst, wird auch der Snippets-Ordner gelöscht. Sichere daher unbedingt vor einer Neuinstallation alle von dir erstellten Codefragmente!

Eigene Tag-Vorgaben oder -Bibliotheken

Wenn du bestimmte Schreibweisen eines Tags bevorzugst oder die Darstellung im Quellcode dauerhaft verändern möchtest, kannst du die Tag-Bibliothek editieren oder eine neue anlegen.

Wählen dazu aus dem Menü Bearbeiten>Tag-Bibliotheken. Für jeden vorhandenen Tag kannst du nun die Einstellungen verändern und die Formatierungen beeinflussen.

 

Im Zusammenspiel mit den modularen Möglichkeiten von XHTML ist die Möglichkeit, eigene Tag-Bibliotheken zu erstellen, sehr interessant. In meiner Abbildung habe ich einen neuen HTML-Tag mit der Bezeichnung ‘Farbauswahl’ angelegt.

 

Zu jedem vorhandenen Tag – auch zu den selbst angelegten – können weitere Attribute hinzugefügt werden. Der Typ des Attributes legt fest, welche Inhalte die Attributwerte haben dürfen und wie diese Attribute in der Eingabehilfe beim Code angezeigt werden.

 

Eigene Tags werden in der Codeansicht und im Tag-Inspektor behandelt wie Standardtags.

 

Quellcode bearbeiten in der Layoutansicht

Du kannst Quellcodes auch bearbeiten, ohne in die Codeansicht zu wechseln. Unten im Dokumentfenster werden dir die Tags der aktuellen Auswahl angezeigt. Markierst du einen davon, dann werden im Eigenschafteninspektor die verfügbaren Attribute aufgelistet. Auf der rechten Seite erscheint der Quick-Tag-Editor. Dahinter verbirgt sich ein Fenster mit dem Quellcode des Tags. Hier kannst du direkt in den Quellcode schreiben.


TIPP:

In umfangreichen Quellcodes ist es nicht immer einfach, ein bestimmtes Element aufzufinden. Gerade bei verschachtelten Tabellen ist die Suche nach einer konkreten Zelle oft ein halbes Raten. Einfacher geht’s, wenn du im Layoutmodus das gewünschte Element markierst und dann in die Codeansicht wechselst. Das zuvor im Layoutmodus markierte Element ist auch in der Codeansicht ausgewählt.

 

Quellcode automatisch optimieren

Dreamweaver ermöglicht dir, den Quellcode automatisch zu optimieren. Wenn du den Code vollständig in Dreamweaver erstellt hast, führt eine Optimierung meist zu keinen Veränderungen.

Äußerst sinnvoll ist diese Funktion, wenn dir HTML-Dateien aus Word oder anderen Programmen vorliegen.

Fast alle Textverarbeitungs-, Tabellenkalkulations- und Layoutprogramme bieten mittlerweile eine Option an, Dokumente als HTML zu speichern. Diese Dokumente und auch Dokumente anderer WYSIWYG-Editoren kannst du einfach automatisch optimieren lassen. Ruf dazu das Menü Befehle>XHTML-Code optimieren auf.

 

Vor allem die Funktion: Word-HTML-Code optimieren finde ich klasse, denn sehr oft bekommen wir Workshops, die vorher in Word aufbereitet wurden und dann in unseren Workshop-Editor eingefügt werden. Dementsprechend schlecht wird der Code. Dank Dreamweaver wird dann ordentlich aufgeräumt:


Bei großen HTML-Seiten dauert es jedoch ziemlich lange! Dreamweaver hat sich nicht aufgehängt, es dauert tatsächlich sehr lange!

TIPP:

Niemals dynamische Dokumente optimieren.

Zu schweren Fehlern kann eine Optimierung von dynamischen Dokumenten führen. Sehr oft werden Tags nicht korrekt geschlossen, um verschiedene Bedingungen zu ermöglichen. Dreamweaver weist dies als Fehler aus und würde das Dokument zerstören.

 

Suchen und Ersetzen

Es kommt während der Entwicklung einer Website immer wieder vor, dass einzelne Tags, Attribute von Tags oder einfach nur Texte innerhalb eines Dokuments oder der ganzen Website ersetzt werden müssen. Ein komfortables und leistungsfähiges Werkzeug zum Suchen und Ersetzen ist daher unabdingbar. Dreamweaver bietet dir alle erdenklichen Möglichkeiten, in einzelnen oder mehreren Dokumenten, Ordnern oder gleich der gesamten lokalen Site zu suchen und zu ersetzen. Du rufst das Dialogfenster über Bearbeiten>Suchen und ersetzen oder über das Tastaturkürzel Strg+F auf.


 

Suche in mehreren Dokumenten

Wähle zunächst aus, wo gesucht werden soll. Wenn du in mehreren Dokumenten suchen oder ersetzen möchtest, empfehlen ich dir, diese gezielt vorher zu öffnen. Nur so steht dir in den Dokumenten eine Undo-Funktion zur Verfügung, um eventuelle Fehler rückgängig zu machen.


Das Suchen und Ersetzen dauert in nicht geöffneten Dokumenten deutlich länger.

 

Tags und Attribute suchen

Neben der reinen Textsuche können auch bestimmte Tags gesucht und Attribute neu gesetzt werden. Mit dieser Funktion ist eine sehr gezielte Suche möglich.

 

Nach ihrer Aktion wird automatisch das Ergebnisfenster geöffnet und alle Aktionen oder Treffer werden angezeigt. Durch einen Doppelklick auf das jeweilige Dokument wird es direkt geöffnet, und du kannst die Funktion nochmals überprüfen.


TIPP:

Dokumente sichern! Achte daher genau darauf, vor dem Durchführen einer Suchen- und Ersetzen-Aktion die Dokumente – oder besser sogar die ganze Website – zu sichern. Es passiert wirklich sehr schnell, dass die gesamte Site nicht mehr zu gebrauchen ist, weil du bei den Vorgaben ein Leerzeichen vergessen hast. Eine Undo-Funktion gibt es in Dreamweaver nur für geöffnete Dokumente!

Wir empfehlen:
PHP-Workshop-DVD - Basics & Tricks

Unsere Empfehlung für dich

Grundlagen HTML, CSS und JavaScript

Grundlagen HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Wer die Grundlagen kennt, navigiert mit klarer Sicht durchs Netz und ist zudem in der Lage, ganz einfach selbst in die Programmzeilen einzugreifen.

  • 62 Lektionen in über acht Stunden Video-Training zum Einstieg in HTML, CSS und JavaScript
  • Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
  • Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Zum Training