Produktvorstellung
Dreamweaver Vers: 3.0
Da ich auf der Suche nach einem HTML - Gestaltungswerkzeug war und ich
nicht auf die Frontpage - Extentions angewiesen sein wollte, habe ich mich für
das in diversen EDV - Zeitschriften "viel gelobte" Programm Dreamweaver
entschieden, wo ich die aktuelle Version 3.0 hier kurz vorstellen möchte:
Da ich das Programm vorher selbst nirgends wo in Betrieb gesehen habe
und ich mich nur nach diversen Pressemitteilungen orientieren konnte, möchte
ich auch mit diesen beginnen:
"Für professionelle Web-Designer dürfte es derzeit kaum
eine bessere Software geben" (Internet Magazin 9/99)
Wer vom Desktop Publishing her WYSIWYG
(What-You-See-Is-What-You-Get) kennt, kann auf dieselbe Art mit Dreamweaver
Web-Seiten gestalten, mit den neuesten HTML-Design-Features wie absolutes
Positionieren, Cascading Style Sheets, JavaScripting. Layouten Sie Web-Seiten
mit Tabellen, Frames und dynamischen HTML-Effekten wie Trickfilmgrafik,
Bewegung, animierten Buttons usw. Sind die Seiten fertig gestaltet, generiert
Dreamweaver optimierten HTML-Code.
Mit Dreamweaver erstellen Sie optisch
hochwertige, browserunabhängige Websites. Produktivität bringen vor allem
erweiterte Tabellenbearbeitung, Tools zur Site-Verwaltung, "Dream
Templates" und die neuen Erweiterungsmöglichkeiten.
Das Programm bietet Ihnen folgende Vorteile:
- Arbeiten
mit WYSIWYG wie im DTP-Bereich; kann jeder bedienen - bietet aber auch
einen HTML-Editor für Profis
- Unterstützt
die neuesten Features fürs Internet wie Dynamic HTML auf allen
Plattformen. Nutzen Sie die Vorteile von Cascading Style Sheets, absolutem
Positionieren und JavaScript-basierten Animationen.
- "Dreamweaver
3 bietet dem Web-Designer praktisch alles, was er für die tägliche Arbeit,
wie anspruchsvoll sie auch immer sein mag, braucht."
Ideenreichs Dr. Web, März 2000 - "Kurzzusammenfassung:
Dreamweaver ist derzeit einer der besten HTML-Editoren auf dem
Markt." Wertung: Note 1
Internet World 2/99
Die überwiegend positiven Pressemeldungen veranlassten mich mit diesem
Programm auseinander zusetzen. Nach erfolgter Installation [1]
(ohne wenn und aber, es wird nur nach dem Installationsverzeichnis gefragt),
startet das Programm mit folgender Arbeitsoberfläche:
Der Dreamweaver - Arbeitsbereich setzt sich, wie oben ersichtlich, zusammen
aus:
- Der Launcher enthält Schaltflächen,
mit denen die am häufigsten verwendeten Inspectors und Paletten geöffnet
und geschlossen werden können. Die Schaltflächen im Launcher sind auch im
Mini-Launcher unten im Dokumentfenster[2]
zu finden, damit Sie auch dann schnell und einfach darauf zugreifen
können, wenn der Launcher geschlossen ist.
- Die Objektpalette enthält
Schaltflächen, mit denen Sie verschiedene Objekttypen erstellen können,
wie beispielsweise Bilder, Tabellen, Ebenen usw.
- Mit dem Eigenschaften-Inspector[3]
werden die Eigenschaften für ausgewählte Objekte oder Textstellen
angezeigt. Sie können diese Eigenschaften hier ändern.
- Über Kontextmenüs können Sie schnell
nützliche Befehle aufrufen, die sich auf die aktuelle Auswahl oder den
aktuellen Bereich beziehen.
Annmerkung am Rande: Selbst langjährige Webseiten - Gestallter sind von
dieser Fenstervielfalt anfangs "erschlagen" [4]...
Die mitbelieferte Online - Hilfe wird - wie könnte es anders sein - als
HTM - Datei mitgeliefert, deren Suche allerdings
ein im Browser aktiviertes Java voraussetzt.:
Nun zu den Fakten:
- Visuelles Entwickeln
für dynamisches Publishing: Unterstützt Server Side Include (SSI)[5];
Icat e-Commerce; WYSIWYS (What You See is What You Serve[6]);
Integration von fremden Programmen (ASP, ColdFusion, Drumbeat, Tango etc.)
So ist es möglich, wie unteres Bild zeigt, verschiedene Bildschirmauflösungen darzustellen.
- da wir schon bei der
Statusleiste sind:
Auf der rechten Seite die vorhin beschriebene Bildschirmauflösung, anschließend die voraussichtliche Ladezeit der gerade bearbeiteten WWW - Datei (mit Bildern). Anzumerken ist hier, dass Macromedia eine geringere Ladezeit der Web - Seite anzeigt, als vergleichsweise MS Frontpage, bei gleichen Einstellungen.
Zu guter letzt, folgen noch die Quicklaunch - Buttons.
Auf der linken Seite befindet sich die Tag - Anzeige, aber dazu später mehr.
- Dream Templates: Trennung
von Design und Inhalten durch Templates;
Template-Erstellung mit editierbarem Inhalt aber gleichbleibendem Design, ermöglicht inhaltliche Pflege durch verschiedene Teammitglieder ohne die Gefahr von Designveränderungen. - Tools für
Seiten-Management: Automatisches Link-Management;
Links einfügen per Drag&Drop; erweiterte Suchen- und Ersetzen-Funktion (ohne Skripting)[7] - Table Editing: erweiterte
Zellen- und Tabellenbearbeitung per Kontext-Menü, so einfach wie in Word
oder Excel; Auswahlmöglichkeit aus vorgegebenen Tabellenformaten
Auch dazu einige Screen – Shot’s:
Nachdem die Tabelle eingefügt wurde, kann man mit dem Eigenschaftsfenster noch das Aussehen verschiedener Teile der Tabelle verändern.
Das lässt sich natürlich für jede Zelle, sowie spalten- und zeilenweise anwenden.
Da es mitunter eine Spielerei ist mit dem Mauscursor die ganze Tabelle für das Eigenschaftsfenster zu selektieren, hat man hierfür einen eigenen Menü - Punkt.
Man klickt einfach innerhalb der Tabelle auf die Rechte Maus - Taste und erhält unten dargestelltes Kontextmenü:
Der erste Menüpunkt wählt die gesamte Tabelle aus.
- Layout und Design:
Rollover-Effekte in einem Schritt integrieren;
beliebige Farbenwahl mit automatischer Anpassung an die näheste aus der Webfarben-Palette; Gruppierungsfunktion; absolute Positionierung; Drag&Drop Seiten-Layout-Erstellung (Kompatibel mit 2.0 oder 3.0 Browsern); Tracing Image (grafischen Layout-Entwurf als Hintergrund für exaktes Positionieren der HTML-Objekte importieren)
[8]
Den automatisch erstellten Quellcode können Sie weiter unten ersehen.
- Behalten der Kontrolle
über den HTML-Code; im HTML-Inspektor kontrollieren Sie den Quellcode, den
Dreamweaver generiert hat. Bereits existierende HTML-Formatierungen (Tags)
aus anderen Editoren werden beibehalten.
Scripte werden zwar erkannt, jedoch hat der komplette Syntax eine einheitliche Farbe (in der Grundeinstellung alles Weinrot).
Obwohl unteres Fenster auf den ersten Blick nicht wie ein MDI - (child) Fenster aussieht, so kann damit wie mit einem Texteditor gearbeitet werden. Die dazugehörende Menüleiste ist immer im Dreamweaver - Hauptfenster (auch HTML - Formatierungen) [9].
unteres Bild zeigt den erstellten Source - Code bei vorhin erwähnten "Roll - Over - Buttons"
[10]
Trotzdem ist der Script - Editor sehr spartanisch. Kein farblicher hervorgehobener Syntax und entgegen dem Quell - Inspektor funktionieren hier auch nicht die Menü - Befehle des Hauptsfensters (wie Bearbeiten - Einfügen). Die folgenden Screenshot´s sprechen Bände...
Zuerst der (Java) Script - Editor von Frontpage, anschließend die Ausführung vom Macromedia mit dem selben Quellcode eines Java Script Beispieles.
Nun zu den Formatierungen.
Natürlich sind alle gängigen Formatierungen über das Menü, bezw über die Eigenschaftsliste verfügbar. Für tiefergreifende Aktionen wählt man den Tag - Editor (Menü: "Tag um Objekt legen“), der weiter unten abgebildet ist. So fehlt z.B. ein "Hoch-", bezw "Tiefstellen von Zeichen“, wie es beispielsweise für Formeln benötigt wird. Dieses Problem wird dann mit dem Tag - Editor behoben.
Das untere Bild zeigt den Tag - Editor.
In dieser Liste ist nun das entsprechende Attribut auszuwählen [11].
Hinweisen möchte ich jetzt noch auf die bereits vorhin erwähnte Statuszeile.
Auf der linken Seite stehen bereits die Tags, in die das Objekt (in diesem fall der Wort "Glasbearbeitung") eingebunden ist (<body> <div>,...).
- Animieren Sie
CSS-Ebenen ohne Scripting dank Dynamic HTML-Unterstützung, einer
intuitiven Timeline und einer Bibliothek mit JavaScript-Elementen
(Bildüberblendungen, Abspielen von Sounds, Eingabeprüfung,
Roll-Over-Effekte, welche vorhin erwähnt wurden)
- Ebenen wie in Freehand
oder Photoshop; Seitenübergreifendes Management von Inhalten (sich
wiederholende Bildelemente werden in einer Bibliothek verwaltet) [12].
- Farbcodes für
HTML-Formatierungen wie Tabellen, Text in Fettdruck, Frames; macht
Navigation im HTML-Quelltext einfach.
- Hyperlink-Prüfung für
Seiten, Verzeichnisse, Sites auf fehlerhafte, externe Hyperlinks und
verwaiste Dateien mit Korrektur.
Auch bezüglich Dokumentüberprüfung einige Bilder:
- "Browser
überprüfen" für konditionale Hyperlinks, basierend auf Browsertyp und
-Version, mit Verweis auf jeweils für Browsertyp optimierte URLs
Interessanter wird das, wenn man sich unter: http://www.dreamworker.de [13] diverse Zusatztools und andere Zielbrowser - Überprüfungsvorgaben herunterlädt (z.B. OPERA Version 3.0):
FTP-Unterstützung für Firewalls zum Arbeiten hinter einer Firewall
Bild FTP - Betrieb
Übertragen können die Dateien unter anderen per Drag and Drop werden. Wie es sich
für einen anständigen FTP - Assistenten gehört, wird sofort gemeldet, wenn eine
neuere Datei überschrieben werden soll. Auch passt das Programm auf, welche
Dateien automatisch mitübertragen werden müssen (z.B.: wird ein in einem HTML - Dokument eingefügtes Bild auf Wunsch
automatisch mitübertragen).
Dateien synchronisieren ermöglicht Ihnen, die lokale Kopie einer Site
mit der Version auf dem Server zu synchronisieren, wobei sichergestellt wird,
dass die aktuellste Version jeder Datei sich sowohl in der lokalen Site als
auch in der entfernten Site befindet. Mit dieser Funktion können Sie zudem
nicht mehr benötigte Dateien löschen.
Möchte man nur die neueren Dateien übertragen, klickt man auf: Menüzeile
unter "Ansicht" auf "Neuere lokale auswählen" oder "Neuere
entfernte auswählen" - dann checkt Dreamweaver die Daten aller Dateien auf
dem lokalen Rechner und dem Server. Die modifizierten oder neuen Dateien werden
dann markiert. Danach einfach diese uploaden und fertig. Nur die neuen Dateien
werden übertragen.
Noch ein paar Worte zur FTP - Einstellung, da hierbei immer wieder
Probleme auftreten können:
FTP-Port: Ist in der Regel eine URL wie www.provider.at [14]
Host-Ordner: hier steht meistens nichts [15]
Anmeldung: sollte der Loginname sein, mit dem man sich auch sonst anmeldet
Kennwort: sollte das Passwort sein, welches ebenfalls üblicherweise verwendet
wird.
Unter dem Menüpunkt FTP - Einstellungen sieht das dann folgendermaßen aus:
[16]
[17]
Nun wieder zurück zur "lokalen Festplatte", wo man sich natürlich
auch die Links innerhalb des Projektes auch grafisch betrachten kann: Bild
Grafische Seitendarstellung (Tree - Darstellung) [18]
Bei sehr großen Projekten ist es auch möglich die Seitendarstellung als als
Bild "Site-Map" zu exportieren.
- Konvertieren in
3.0-Browser-Format; DHTML-Designfunktionen nutzen und dennoch Web-Seiten
erzeugen, die auf 3.0-Browsern noch phantastisch aussehen!
- Importieren von
Dateien, die mit WinWord (Vers.
97/98 und 2000) in HTM - Format abgespeichert wurden [19].
- Import von
Tabellendaten (mit Angaben von Trennzeichen); Anm.: Man kann natürlich
eine Excel - Tabelle in WinWord einfügen, und anschließend das WinWord -
Dokument importieren. Auch der Import von Excel - Dateien, die vorher im
HTM - Format abgespeichert wurden, ist möglich [20].
Neu in der aktuellen Version
- HTML und XML:
Integrationsmöglichkeit von Homesite und BBEdit für Macintosh; definieren
von 3rd party tags; Aufräumfunktion für HTML-Befehle und Zuweisung von
Formatierungen in einem Schritt; XML-Opener; Import und Export von
Template-Inhalten als XML
- 3rd
Party Extensions: Beatnik Action Set für
Dreamweaver, HP Open Pix Objects, IBM HotMedia Objects, ColdFusion
Objects, Live Picture Objects
- Evolve/Devolve: Mit dieser
Funktion konvertieren Sie DHTML-Seiten schnell in vereinfachte Versionen,
die auch auf älteren Browsern hervorragend aussehen. Sie können auch
automatisch dynamische HTML-Seiten von Ihren älteren Webseiten erstellen.
- Photo Album Script: Schneidet
alle in Dreamweaver ausgewählten Bilder automatisch in Fireworks zurecht
und liefert sie an Dreamweaver zurück.
- Neue Design Notes: Erlaubt
Team-Mitgliedern Information über den Status einzelner Webseiten
auszutauschen.
Design Notes ermöglichen Ihnen, Anmerkungen an Dateien anzufügen, damit Sie die Änderungen an Dateien verfolgen und mit anderen Team-Mitgliedern über Entwicklungsprobleme sprechen können. Sie können auch Design Notes an Bilder in Fireworks anfügen und diese anschließend in Dreamweaver lesen und bearbeiten. - Die Funktion der "Absoluten
Positionierung" gestattet Ihnen eine anpassungsfähige und genaue
Gestaltung der Web-Seite.
- HTML-Stile ermöglichen
Ihnen, Stile mit browserunabhängigem, standardmäßigem HTML-Zeichen-Markup
(wie z. B. den Tags
BundFONT) zu definieren, anstatt Cascading Style Sheets zu verwenden. (Die Stilpalette von Dreamweaver 2.0 heißt jetzt CSS-Stilpalette.)
Unter HTML - Stiele versteht Macromedia das Zuweisen abgespeicherter Textattribute. Vergleichbar sind diese Stile also mit den Cascading Stylesheets, allerdings mit dem Unterschied, dass die HTML-Stile nichts Weiteres als eine Speicherung in Form eines Makros sind: Im Wesentlichen beschreibt ein HTML-Stil neben dem Zeichensatz die Schriftattribute und die Ausrichtung. Beim Zuweisen eines Stils werden dann in den HTML-Code lediglich die vorbestimmten P- und FONT-Tags mit den richtigen Attributen eingefügt [21]. Wird ein Stil nachträglich noch einmal geändert, hat das – im Gegensatz zur Verwendung der Stylesheets – keine Auswirkung auf bisher damit ausgezeichnete Textteile. Umgekehrt bedeutet das auch, dass Sie nach der Zuweisung eines HTML-Stils nicht mehr feststellen können, welchen Stil der Textteil jetzt besitzt.[22]
- Ebenfalls neu ist eine
History, wie man sie von Bildbearbeitungsprogrammen her kennt.
Diese History – Pallette [23]zeigt eine Liste aller vorgenommenen Änderungen, was ein komfortables Wiederholen oder Annullieren von Arbeitsschritten ermöglicht (siehe Bild, Kontextmenü)
Die einzelnen Arbeitsschritte können auch in das Windows - Clipbord eingefügt werden, oder als Arbeitsschritte abgespeichert werden.
Um eine einzelne Aktion erneut auszuführen, genügt es, den jeweiligen Eintrag zu selektieren und in der Palette auf den Knopf Wiedergabe zu drücken. Wesentlich nützlicher ist jedoch die Möglichkeit, mehrere ausgeführte Aktionen als Befehl abspeichern zu können. (z.B.: Einfüge und Formatieren von Tabellen). Der abgespeicherter Arbeitsschritt erscheint als unterster Menüpunkt unter "Befehle".
Ich bin selbst erst Kurzzeitbenutzer dieses Programms, doch hoffe ich mit
dieser Kurzvorstellung von Dreamweaver 3.0 auch Ihnen einen Überblick über
dieses HTML - Designerwerkzeug verschafft zu haben.
Es handelt sich um ein mächtiges Werkzeug bezüglich Funktionsumfang, dass
allerdings in manchen Fällen HTML - Kenntnisse, oder ein gründliches Studium
des (guten) Handbuches, voraussetzt.
Weiterführende Links:
- Macromedia
im Internet: http://www.macromedia.com
- weiterführende
Infos und Zusatz - Programme in deutsch: http://www.dreamworker.de/
- weitere Add - On´s: http://exchange.macromedia.com
Seit einiger Zeit gibt es eine eigene Newsgroup für
Dreamweaver. Es ist keine offizielle, von Macromedia eingerichtete Gruppe. Sie
entstand auf Initiative von Dreamworker und durch die Hilfe von Andreas Werla,
dem auf diesem Wege auch unser Dank gesagt werden soll. Neben einer Newsgroup für Dreamweaver ist auch eine
Newsgroup für Fireworks und eine Newsgroup für UltraDev rausgesprungen.
Sie erreichen die Newsgroups auf folgendem Newsserver:
molokai.hisite.com
Port 119
Die Newsgruppen sind:
- germany.dreamweaver
- germany.fireworks
- germany.ultradev