Vorteile von Dreamweaver und dessen Voreinstellungen

Dreamweaver wurde von der Firma Macromedia erstellt. Diese Firma wurde Ende 2006 von Adobe aufgekauft. Darum läuft das Produkt jetzt unter dem Namen Adobe Dreamweaver und ist einzeln bzw. im CS-Paket erhältlich. Der Preis für die aktuelle 8.0 Version liegt bei ca. 550,00 Euro und für das Update bei 280,00 Euro. Für Schüler und Studenten kostet diese Version ca. 100,00 Euro.

Eigentlich ist der Preis für einen HTML-Editor doch recht teuer. Hier möchte ich erklären, warum dieser Preis gerechtfertigt ist. In ca. 15-20 Workshops werde ich alle Funktionen von Dreamweaver vorstellen.

Die Vorteile von Dreamweaver in einer kleinen Übersicht:

  • Quellcode von Dreamweaver ist valide und kann durch Voreinstellungen in den Programmoptionen beeinflusst werden
  • Sehr gute CSS-Unterstützung + einfaches Anlegen neuer CSS-Stile
  • Mehrere Ziel-Browser lassen sich einrichten und es werden typische Fehler in dem jeweiligen Browser aufgeschlüsselt
  • Java-Script-Beispiele, die mit nur einem Klick eingebunden werden können
  • Datenbankanbindung sehr bequem möglich
  • Unterstützung neuester Techniken wie XML, XHTML und ASP.NET
  • Code-Vorlagen, die öfters benötigt werden, können angelegt werden
  • Durch Plugins bzw. mithilfe des Extension Managers kann das Programm beliebig erweitert werden
  • Es gibt mehrere Ansichtsoptionen (Code, Teilansicht oder nur die Entwurfsansicht)
  • Fehlerhafter Code bzw. unnötige Fragmente können durch nur einen Befehl bereinigt werden (z.B. der Code von MS Word ist absolut nicht zu gebrauchen, und diesen kann man mit Dreamweaver wieder entrümpeln)
 

Die Oberfläche

Dreamweaver bietet mehrere Dokumentansichten:

  • Für Designer gibt es die Entwurfsansicht, die keinen Code anzeigt (somit kann man Elemente wie in Word einfügen und verschieben/formatieren).
  • Für Coder gibt es die Codeansicht, die nur HTML-/PHP- usw.- Code anzeigt.
  • Teilansicht: Diese Ansicht bevorzuge ich persönlich; dort kann ich, wenn ich bestimmte Elemente einfüge, genau sehen, wie sich daraufhin der Code ändert. So kann jeder die Schreibweise des Codes schnell lernen, ohne lange nachschlagen zu müssen.

Wir empfehlen:
Dreamweaver-Video-Training

 

Die Dokumentansichten lassen durch die Symbole oben (siehe Bild) ändern. Um Platz zu sparen, ist es möglich, alle Paletten z.B. in der rechten Übersicht zu parken. Dazu reicht ein Drag&Drop – siehe Bild:


Auch ist es möglich, das komplette rechte Palettendock auszublenden, indem der kleine Pfeil in der Mitte geklickt wird.

 

Die wichtigsten Voreinstellungen in Dreamweaver

Die wichtigsten Optionen im Register Allgemein sind:

  • Startseite anzeigen (1): Wenn Dreamweaver gestartet wird, erscheint ein Startbildschirm mit den wichtigsten Parametern wie Zuletzt geöffnete Datei öffnen oder Neu erstellen; diese Option kann je nach Bedarf deaktiviert oder aktiviert werden. Ich persönlich finde es ganz gut, so brauche ich nicht viel zu klicken, um die letzte Datei zu öffnen.


  • Hyperlinks beim Verschieben von Dateien aktualisieren (2): Es kommt vor, dass eine Datei z.B. in einen anderen Ordner verschoben werden soll, man jedoch schnell vergisst, die Links im Dokument anzupassen. Wenn diese Seite in Dreamweaver ordnungsgemäß als Site eingerichtet wurde, hat man das Glück, dass das Programm einem die Arbeit für das Umschreiben der Links abnimmt. In dieser Option wird man vorher gefragt, ob die Links umgeschrieben werden sollen. Diese Option sollte auf alle Fälle aktiviert bleiben!
  • CSS anstelle von HTML-Tags verwenden (3): Wenn ein neues Dokument erstellt wird, so werden Formatierungen in CSS-Styles abgelegt. Das ist sehr sinnvoll. Sollte jedoch eine vorhandene Datei editiert werden, bei der kein CSS benutzt wird, so muss diese Option deaktiviert werden (so ist es z.B. in einigen CMS so, dass alle Styles in einer Datei abgelegt werden. So werden diese neuen Styles beim Einfügen ins CMS nicht berücksichtigt, wenn diese oben im Dokument neu eingefügt werden; z.B. wenn wir ein Tutorial schreiben, wird bei der Ausgabe nur der HTML-Code berücksichtigt, nicht jedoch die Styles!) Ansonsten sollte diese Option immer aktiviert werden, weil CSS-Styles die Zukunft sind und alles andere veraltet ist.
 

Codeformat

Im Register Codeformat gibt es 3 Dinge zu beachten.

1. Die Option Automatischer Umbruch ist nur dann anzuraten, wenn kein PHP benutzt wird, weil manche Scripte in einer Zeile stehen müssen.

2. Die Option Kein Umbruch nach TD sollte unbedingt aktiviert werden, weil einige Browser nach einem Umbruch in einer Tabellenzelle Absätze darstellen, die so nicht gewollt sind.

3. Die Center-Tags sind ziemlich veraltet und sollte nicht benutzt werden. Stand der Dinge sind die DIV-Tags!

 

Codehinweise

Im Register Codehinweise gibt es zwei Optionen, die einem bei der täglichen Arbeit als Programmierer sehr helfen.

1. Nach Eingabe von </ wird der letzte noch offene Tag automatisch geschlossen. Soll das nicht der Fall sein, muss diese Option deaktiviert werden.

2. Wird die Option > aktiviert, wird der Tag schon nach der vollständigen Eingabe des offenen Tags geschlossen.

Hinweis: Beide Optionen haben auch einen Nachteil – wenn vergessen wird, dass Dreamweaver bei einem die Tags schon geschlossen hat,und man somit zweimal den Tag schließt, ergibt sich daraus leider ein fehlerhafter Code!

 

Codeumschreibung

Formularelemente beim Einfügen umbenennen (1) sollte unbedingt deaktiviert werden, sofern eine PHP-Anwendung programmiert wird. Auch Sonderzeichen (2) sollten nicht geändert werden. Denn Dreamweaver kann nicht alles genau erfassen, wenn eine dynamische Anwendung erstellt wird. So ist es oft normal, dass bestimmte Tags nicht geschlossen werden im 1. Script usw.

 

CSS-Stile

1. CSS-Stile können in mehreren Varianten geschrieben werden. Entweder in der Normalform, die für das Verstehen am geeignetsten ist, oder aber in der Kurzschriftform.

Beispiel:

H1 {
font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; 
font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none;
 }

Als einzelne Kurzschrifteigenschaft gestaltet sich dasselbe Tag folgendermaßen:

H1 { font: bold 16pt/18pt Arial; }

Vorteil der Kurzschriftform ist die kleinere Datei. Da jedoch mittlerweile alle DSL haben, sollte auch das kein Problem mehr sein. Durch die lange Form lassen sich die Eigenschaften auch besser definieren bzw. vor allem lesen!

2. Wenn eine HTML-Datei mit einer CSS-Datei verknüpft ist, so wird diese bei aktivierter Option gleich mit gestartet.

3. Auch hier kann alles je nach Bedarf eingestellt werden.

 

Dateien vergleichen

Manchmal kommt es vor, dass eine Datei geändert wurde und sich von der Original-Datei kaum unterscheidet. Um diese Unterschiede schnell dargestellt zu bekommen, gibt es diese Option. Jedoch muss hier eine Quelle angegeben werden für ein Programm, welches einen Vergleich startet, weil diese Funktion leider nicht von Dreamweaver übernommen wird.

 

Dafür gibt es mehrere Programme; eines wäre z.B. WinDiff.

Dieses Programm einfach kostenlos herunterladen, Quelle in Dreamweaver angeben und dann im Register Dateien mit der Strg-Taste zwei Dateien auswählen und mit der rechten Maustaste auf Dateien vergleichen klicken:

 

Es lässt sich für jede erdenkliche Datei ein bestimmter Editor einrichten. Z.B. wäre für sämtliche Grafikformate Photoshop geeignet. Dazu einfach nur auf Durchsuchen klicken, die Quelle angeben und dann das Plus-Zeichen wählen. Danach kann im Datei-Register mit einem Klick der richtige Editor gewählt werden.

 

Ebenen

Die Standard-Optionen für Ebenen, in Englisch auch Layers genannt, lassen sich hier einstellen. Das sind frei positionierbare Bereiche innerhalb des Dokumentes (DIVs).

 

Eingabehilfe

Soll ein Assistent erscheinen, nachdem bestimmte Elemente eingefügt werden, kann diese Option aktiviert werden.

 

Ich persönlich benötige diese nicht, allerdings ist es z.B. bei Bildern ganz hilfreich, wenn der Assistent einen gleich Folgendes fragt:

 

Farbe für Code

Hier können für unsere Programmierarbeiten die Farben verändert werden, die einem bei bestimmten Code-Fragmenten bei der Arbeit helfen, z.B. Kommentare von normalem Code zu unterscheiden.

 

Kopieren/Einfügen

Hier kann eingestellt werden, wie sich Dreamweaver verhält, wenn Daten aus z.B. Word in Dreamweaver kopiert werden.

TIPP: Trotzdem sollte nach jedem Word-Import unbedingt der Befehl Menü>Befehle>Word-HTML-Code optimieren ausgeführt werden!

 

Layoutmodus

Hier kann eingestellt werden, ob bei leeren Tabellenzellen ein automatischer Platzhalter (transparentes Bild) gesetzt wird, damit die Tabelle auch bei leeren Zellen einen Rahmen besitzt.

 

Neues Dokument

Hier können die Standard-Dokumenttypen ausgewählt werden, die beim Erstellen neuer Dateien automatisch dem Dokument zugewiesen werden. Ich möchte jetzt nicht alle Formate genau erklären, mehr Informationen gibt es dazu im Netz wie z.B. unter de.selfhtml.org. Nur soviel: XHTML ist die Zukunft in Verbindung mit CSS. Die Standardeinstellung kann so bleiben wie im Programm vorgegeben.

 

Site

Sollte im Betrieb eine Firewall eingesetzt werden, müssen diese Daten ausgefüllt werden, damit Dreamweaver eine FTP-Verbindung zur Webseite herstellen kann und so im Programm Daten ohne Aufwand aktualisiert werden können. Auch lassen sich hier bestimmte Optionen für die FTP-Verbindung einstellen.

 

Statusleiste

Hier können diverse Auflösungen vordefiniert werden, die dann im Dokument später nachempfunden werden können, ohne dass man die Auflösung in Windows jedes Mal extra ändern muss.

 

Unsichtbare Elemente

In der Designansicht können diverse unsichtbare Elemente angezeigt werden wie z.B. Anker oder Skripte.

 

Validator

Ein Validator ist ein Werkzeug, welches die Korrektheit eines Dokumentes überprüft. Hier kann ausgewählt werden, welche Validatoren zum Einsatz kommen sollen.

 

Vorschau im Browser

Die Vorschaufunktionen in Dreamweaver sind zwar ganz gut, jedoch kann diese Funktion niemals garantieren, dass dies dann wirklich 1:1 so im z.B. Firefox angezeigt wird. Darum kann man hier alle wichtigen Browser, die installiert sind, zuweisen und dann per Knopfdruck die aktuelle Seite anzeigen lassen.

TIPP: Auf alle Fälle sollten deswegen mindestens Firefox 1.5 & 2.0, Internet Explorer, Opera und Netscape installiert sein, denn das sind die gängigsten Browser.

Sonstiges

Seit 8.0 gibt es auch Hilfslinien, so wie in Photoshop. Aktivieren kann man diese, indem man unter Ansicht die Lineale aktiviert und dann aus den Linealen heraus per Drag&Drop die Linien zieht. Für die Arbeit mit Ebenen ist diese Funktion äußerst praktisch!

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