Kategorien
Boilerplates & andere Tools Inspiration Programmierung Tutorials

Dreamweaver: Ein neues Projekt

Einerseits benötigt der Programmierer einen Editor, der für die Code-Bearbeitung optimiert wurde, andererseits einen Weg, um den geschriebenen Quellcode daneben auch visuell überprüfen zu können – also so, wie er später im Browser erscheint. Dreamweaver bietet…

Einerseits benötigt der Programmierer einen Editor, der für die Code-Bearbeitung optimiert wurde, andererseits einen Weg, um den geschriebenen Quellcode daneben auch visuell überprüfen zu können – also so, wie er später im Browser erscheint. Dreamweaver bietet dazu eine kompakte Lösung an.

Beim Start von Dreamweaver erscheint ein Optionsfenster, das verschiedene Wege zu schon bestehenden oder neuen Projekten anbietet. So erhält man eine Übersicht der zuletzt geöffneten Dateien, die Möglichkeit, eine beliebige Datei zu öffnen, oder dank einer kleinen Vorauswahl eine bestimmte Art von Website neu zu erstellen, so etwa eine Site auf PHP-Basis. Daneben bietet eine Zusammenstellung von Vorlagen die Option, gängige Standardkombinationen wie etwa moderne CSS-Layouts zu generieren. »Erste Schritte«, »Neue Funktionen« und »Ressourcen« sorgen noch für Links auf weitere Informationen, wie etwa Podcasts oder Foren.

Dreamweaver-Website
Ein üblicher Workflow wäre es nun, eine neue Dreamweaver-Website, innerhalb der Software auch »Site« genannt, zu erstellen. Hiermit wird nicht nur eine einzelne Datei abgespeichert, sondern ein Website-Projekt als Ganzes, inklusive aller zugeordneten Dateien, was der Übersicht und später auch der Fehlersuche dienlich ist. Die Dreamweaver-Website kann weiter mit einem FTP-Server synchronisiert werden. Über den Startbildschirm oder über das Menü »Site« legt man auf Knopfdruck die erste Dreamweaver-Website an. Der Assistent hilft bei der Eingabe aller Werte. Der Name der »Site« wird vergeben, die URL erst einmal offen gelassen und es werden vorerst auch keine Servertechnologien verwendet. Zum Anfang konzentrieren wir uns auf das Nötige.

Man arbeitet lokal auf dem Rechner, um später die Daten als Kopie auf den Server hoch zu laden oder man greift über das Netzwerk auf einen Server zu, um die Daten direkt zu bearbeiten. Eine Verbindung zum Remote-Server ist zu Beginn jedoch unnötig, weshalb man in der Auswahl »Kein« anklickt. Die Zusammenfassung im Anschluss dient der Kontrolle, bevor mit dem Bestätigen über »Fertig« die »Site« in dem Register »Dateien« auf der rechten Seite abgelegt wird.

Neue Dateien werden leider nicht gleich der erstellten »Site« zugewiesen. Klickt man etwa auf »Neu erstellen > HTML« im Startbildschirm oder im Menü auf »Datei > Neu« könnte man eine leere Seite anwählen, den DocType festlegen und die Auswahl mit »Erstellen« generieren. Doch erst wenn die neue Seite gespeichert wurde, wird sie der aktuell geöffneten Dreamweaver-Website zugeordnet.

Screenshot
Register: Dateien

Zwei Ansichten
Die erste Seite zeigt nun den Standardaufbau einer HTML-Datei an, mit dem Head- und Body-Bereich sowie einigen weiteren Tags. Über »Einfügen« im Menü oder über die Leiste gleichen Namens können nun erste Inhalte mit Hilfe von Assistenten wie etwa Tabellen, Formulare oder Grafiken eingearbeitet werden. Um den eingefügten Content in der Entwurfsansicht zu überprüfen, reicht ein Klick auf den Button »Entwurf« aus, womit der Code verschwindet und ähnlich wie im Browser die Seite inklusive aller Grafiken dargestellt wird. Unten rechts am Dokument können noch verschiedene Aktionen in Bezug auf die Datei vorgenommen werden.

So könnte man mit der Lupe Bildausschnitte vergrößern. Übrigens kann man hierbei mit gedrückter Alt-Taste schnell wieder heraus zoomen. Die Vergrößerungsstufe wird gleich neben dem Lupensymbol angezeigt, daneben die Größe des Ausschnitts in Pixel angegeben. Gerade für das Optimieren für bestimmte Bildschirmgrößen eine interessante Information. Zuletzt wird noch gezeigt, wie schnell die Seite bei bestimmten Verbindungsgeschwindigkeiten aufgebaut wird. In den Voreinstellungen unter »Statusleiste« kann dazu die Grundlage der Verbindung vom Modem bis hin zu DSL angegeben werden.

Screenshot
Die Leiste »Einfügen« und eine Datei in der Code-Ansicht

Bedienelemente
Dreamweaver bietet an den Seiten verschiedene Bedienfelder zur Bearbeitung der Inhalte an. Das Bedienfeld »Eigenschaften« ist besonders hervorzuheben, da es je nach dem gewählten Content verschiedene Optionen in Bezug auf die Auswahl anbietet. So könnte man nach dem Markieren von Text die Schriftart oder Textgröße verändern, wurde jedoch ein Hyperlink angewählt, bieten die »Eigenschaften« eine Option an, um etwa das Ziel eines Links anzupassen.

Die Bedienelemente können jederzeit per Drag & Drop neu angeordnet werden oder jeweils auch frei als eigenes Fenster über allen Inhalten schweben. Generell kann jedes Bedienfeld über das kleine Dreieck links neben dem Namen ein- und ausgeklappt werden, um Platz zu sparen und um die Übersicht zu bewahren. Hilfreich ist dazu auch der Shortcut »F4«, über den alle Bedienfelder ausgeblendet werden können. Damit erhält man schnell eine größere Ansicht der Website.

Anders als das Bedienfeld »Eigenschaften« sind die weiteren Elemente in so genannte Bedienfeldgruppen sortiert. Die einzelnen Abschnitte bieten also noch weitere Bedienfelder an, wie etwa »Dateien«, hinter dem sich auch »Elemente« und »Codefragmente« verbirgt. Es lassen sich bei Bedarf eigene Bedienfeldgruppen anlegen oder schon bestehende ändern. Eine wichtige Schnittstelle ist das Bedienfeldmenü, das sich auf gleicher Höhe wie der Bedienfeldname über das Icon am rechten Rand aufrufen lässt. Dort könnte man eine Bedienfeldgruppe schließen, die man vielleicht nicht ganz so häufig verwendet. Das lässt sich über das Menü »Fenster« schnell wieder rückgängig machen. Verschiedene Arbeitsplatzkonfigurationen kann man über »Fenster > Arbeitsbereichlayout« öffnen oder selbst erstellte, an die eigenen Bedürfnisse angepasste Anordnungen über »Aktuelles speichern« für den späteren Einsatz sichern.

Screenshot
Bedienfeld: Eigenschaften

Codeinspektor
Genau wie in der Code-Ansicht zeigt auch der Codeinspektor den Quellcode der Seite an. Hier hat man den Vorteil, dass dieser in einem eigenen Fenster dargestellt wird. Der Code bleibt trotzdem editierbar. Änderungen werden also gleich auf die Entwurfsansicht übertragen. So kann man im Zusammenspiel mit der Vorschau effizient arbeiten, in dem man den größten Teil des Bildschirms für die Entwurfsansicht reserviert und sich im Codeinspektor nur den Quellcode anzeigen lässt, an dem man aktuell arbeitet. Aufgerufen wird der Codeinspektor über »Fenster > Codeinspektor« oder schneller über den Shortcut »F10«.

Screenshot
Der Codeinspektor

Wer die HTML- und CSS-Grundlagen beherrscht, könnte nun ein komplettes Website-Projekt von Hand kodieren, doch Dreamweaver bietet weitere Optionen inklusive die Programmierung von Ajax unterstützende Funktionalitäten an. Und auch die zahlreichen Assistenten lohnen einen Blick.

Erstveröffentlichung 30.10.2007

Von Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.