Handbuch Webdesign: Dreamweaver

Aus Wikibooks

[Bearbeiten] Dreamweaver

Handbuch Webdesign Dreamweaver

[Bearbeiten] Einleitung

Ein "wysiwyg" Web-Editor wie Dreamweaver macht das Erzeugen von HTML-Dateien einfacher. Das Ergebnis ist aber immer eine ganz normale HTML-Datei; mit genug Fleiß und einem Text-Editor könnte man das gleiche Ergebnis erzielen.

"wysiwyg" ist eine englische Abkürzung für "what you see is what you get", die Abkürzung wird ungefähr "wie-sie-wieg" ausgesprochen. Das Prinzip "was du siehst ist was du bekommst" bedeutet in diesem Fall: Man sieht im Editor nicht den HTML-Code, sondern man sieht, wie die fertige Webseite im Browser aussehen wird.

Aber Achtung: während DTP-Programme, die nach dem wysiwyg-Prinzip arbeiten, dieses Versprechen auch erfüllen können, ist das bei Web-Editoren nicht möglich. Bei einem DTP-Programm kenne ich mein Ausgabemedium–z.B. A4. Bei einer Webseite kann ich viele Eigenschaften meines Ausgabemediums gar nicht kennen (siehe die Diskussion im ersten Kapitel), z.B. die Breite des Browserfensters, die zur Verfügung stehenden Schriftarten, u.s.w. Es müsste also heißen "Was du siehst ist ungefähr was du bekommen könntest".

Dreamweaver ist ein Produkt der ehemaligen Firma Macromedia (jetzt Adobe Systems). Die aktuelle Version ist im Herbst 2006 die Version Dreamweaver 8. Es gibt eine Windows- und eine Mac-Version (siehe Abbildung 51) des Programms. In diesem Buch werden meist Screenshots von Dreamweaver für Windows verwendet, manchmal auch Screenshots von Dreamweaver für Mac.

Seit Dreamweaver 3 empfehle ich das Programm un­ein­geschränkt. Die Unterschiede zwischen den Versionen sind für die nun folgenden Betrachtungen nicht relevant, sie betreffen z.B. die Unterstützung von PHP oder Datenbanken, also fortgeschrittenere Themen. Konkurrenzprodukte zu MACROMEDIA Dreamweaver sind unter anderem Microsoft Frontpage und Adobe GoLive.

Sie können eine Demo-Version von Dreamweaver herunterladen^[1], und für drei Monate gratis benutzen. Erst danach müssen Sie entscheiden, ob Sie Dreamweaver kaufen wollen.

Diese Kapitel beginnt mit einer sehr detaillierte Beschreibung der Dreamweaver-Oberfläche, die für zukünftige Experten gedacht ist, die ihr Werkzeug bis ins Detail beherrschen. Danach lernen Sie, wie Sie den HTML-Code den Sie in Kapitel 2 kennen gelernt haben mit Dreamweaver erstellen können. Am Ende des Kapitels können Sie eine informierte Entscheidung treffen ob Sie Dreamweaver einsetzen wollen.

[Bearbeiten] Entwurfsansicht, Codeansicht, Gemischte Ansicht

Dreamweaver funktioniert wie einleitend beschreiben nach dem wysiwyg-Prinzip–Sie sehen bei der Arbeit also eine Darstellung die ungefähr der Darstellung der Webseite im Browser entspricht. Sie können aber jederzeit auch den "darunter liegenden" HTML-Code ansehen und bearbeiten. Dreamweaver unterscheidet drei "Ansichten": Die Entwurfsansicht, die (HTML-)Codeansicht, und eine gemischte Ansicht. Letztere sehen Sie in Abbildung 52.

Die gemischte Ansicht eignet sich besonders gut zum Erlernen von neuem HTML-Code: Sie können in der Entwurfs-Ansicht einen Bereich markieren, im Code-Ansicht wird der entsprechende Code ebenfalls markiert. So können Sie erforschen, welcher HTML-Code zu welchem Element der Seite gehört.

Die schnellste Art zwischen den Ansichten hin und her zu wechseln ist die Tastenkombination Strg-Tabulator. Dabei bleibt die Markierung erhalten. Ein Qualitätskriterium bei Web-Editoren, und der Grund warum ich Dreamweaver empfehle, ist die Qualität des erzeugten HTML-Codes, und die "Durchlässigkeit" zwischen Entwurfs- und Code-Ansicht. Dreamweaver erzeugt kurzen, gut lesbaren HTML-Code und fördert das Erlernen des Codes durch das gute Zusammenspiel der Ansichten.

[Bearbeiten] Überblick über die GUI von Dreamweaver

Die Oberfläche von Dreamweaver besteht aus einer Vielzahl von Fenstern und Elementen. Für den Einstieg in die Arbeit mit Dreamweaver sind die in Abbildung 53 gezeigten Elemente wichtig:

Das Dokument wird zentral angezeigt. Sie können wie oben beschreiben das Dokument in der Code-Ansicht oder der Entwurfs-Ansicht betrachten und bearbeiten, das Umschalten erfolgt in der Symbolleiste Dokument (in Abbildung 53 mit einem Pfeil markiert). Tabelle zeigt wo Sie weitere wichtige Informationen zum Dokument finden.

Alle weiteren Fenster in Dreamweaver sind mit Ihrem Namen beschriftet.

Das Fenster Einfügen ermöglicht das Einfügen von Elementen in das Dokument. Das Fenster ist oberhalb des Dokumentes platziert, die Handhabung ist damit ähnlich wie in den meisten Windows-Programmen.

Das Fenster Eigenschaften ist unterhalb des Dokumentes platziert, und widerspricht damit den Windows-Konventionen. Dieses Fenster ist für die Arbeit mit Dreamweaver zentral. Der Inhalt des Fensters verändert sich mit der jeweiligen Markierung im Dokument. Ist z.B. eine Tabellen-Zelle im Dokument markiert sieht das Eigenschaften Fenster anders aus, als wenn ein Bild im Dokument markiert ist (siehe Abbildung 55)

Das Eigenschaften Fenster dient sowohl zur Anzeige der Eigenschaften, als auch zur Bearbeitung. So können Sie z.B. in Abbildung 55 die Breite und Höhe des Bildes ablesen, aber auch neue Werte in diese Felder eingeben, und damit die Darstellung des Bildes verändern. Es gibt dabei einen engen Zusammenhang zwischen Eigenschaften Fenster und dem HTML-Code. In Abbildung 56 können Sie nachvollziehen, wie jedes Eingabe-Element im Eigenschafts-Fenster einem Attribut des HTML-Tags entspricht.

 <img width="446" height="446" 
 src="mma/brigitte-jellinek.jpg" 
 alt="Portrait Brigitte Jellinek"
 name="b1" id="b1" />

Das der Eingabefelder wird in zwei HTML-Attribute übertragen: in name und id. Der Grund dafür ist eine Veränderung in der Bedeutung der Attribute: id wird heute dort verwendet, wo früher name verwendet wurde. Dreamweaver setzt die Beiden gleich, und vermeidet damit Kompatiblitätsprobleme. Abbildung 57 zeigt ein komplexeres Beispiel.

Ein Link (<a>-Tag) ist markiert. Das Eigenschafts-­Fenster zeigt (unter anderem) das href-Attribut an, mit der Beschriftung Hyperlink. Das Eigenschafts-Fenster zeigt gleichzeitig aber noch ein paar andere Dinge: Format bezieht sich auf den übergeordneten <p>-Tag. Wenn Sie hier statt "Absatz" "Überschrift 1" auswählen, wird der HTML-Code wie in Abbildung 58 gezeigt verändert.

 <p>Ich empfehle <a href="...">Google</a> für die Suche im Internet</p>

 <h1>Ich empfehle <a href="...">Google</a> für die Suche im Internet</h1>

Wenn Sie das Symbol Ungeordnete Liste drücken verändert Dreamweaver den Code noch stärker, wie in Abbildung 59 gezeigt:

<p>Ich empfehle <a href="...">Wikipedia</a></p>

<ul>
<li>Ich empfehle <a href="...">´Wikipedia</a> 
</li>
</ul>

[[Image:Handbuch Webdesign-DW Fenster einklappen.gif|thumb|right|Fenster zusammenklappen}} Wenn Sie das Eigenschaftsfenster nicht benötigen können Sie es zusammenklappen wie rechts gezeigt. Am rechten Rand des Dreamweaver-Fensters ist Platz für weitere Fenster. Diese können über das Menü "Fenster" ein- und ausgeblendet werden. Mit der Maus können Sie auch diese Fenster "zusammenklappen", in Gruppen anordnen, aus dem Fensterrahmen lösen und in schwebende Fenster verwandeln. Welche Fenster Sie für die Arbeit benötigen wird sich immer wieder verändern, sie können Dreamweaver hier an Ihre eigenen Bedürfnisse anpassen.

[Bearbeiten] Text formatieren mit Dreamweaver

Wie im vorherigen Abschnitt beschrieben können Sie mit dem Eigenschaftsfenster Text formatieren. Für die wichtigsten HTML-Tags gibt es in Dreamweaver zusätzlich Tastatur-Kürzel:

Tabelle 7: Dreamweaver Tastaturkürzel für die Formatierung von Text Durch die Verwendung dieser Tastaturkürzel könne Sie Ihre Arbeit wesentlich beschleunigen.

[Bearbeiten] Links und Anker

Tippen Sie zuerst den Link-Text ein, der im Browser angezeigt werden soll. Markieren Sie dann einen Teil des Textes mit der Maus. Tippen Sie die URL in das Feld Hyperlink des Eigenschafts-Fensters ein. Sobald Sie das Eingabefeld verlassen wird die Änderung aktiv, der Link erscheint blau und unterstrichen. ACHTUNG! Sie können den Link in Dreamweaver nicht anklicken um ihn zu testen! Das funktioniert nur im Browser. Nachdem Sie in Dreamweaver eine Site definiert haben (siehe Seite fehlt) funktioniert auch folgendes: Wenn Sie zu einer lokalen Datei linken wollen, also innerhalb Ihrer Site, dann mit können Sie dem gelben Ordern-Symbol neben dem Eingabefeld Hyperlink eine Datei auswählen, oder mit dem "Dateizeiger-Symbol" zu der Datei zeigen.

Anker (HTML-Tag <a name="ankername">) kann man mit Dreamweaver wie in Abbildung 61 gezeigt setzen und verlinken:

• Zuerst den Anker setzen: Einfügen à benannter Ankerpunkt. Sie werden nach einem Namen gefragt (in diesem Beispiel "Aufgabe")
• Dann einen Link dorthin machen: Sie können entweder das Zeichen # und den Namen des Ankers in das Feld Hyperlink eintippen (hier also #Aufgabe oder Sie verwenden das "Dateizeiger-Symbol", und ziehen es mit der Maus zum Anker.

[Bearbeiten] Bilder und Rollovers

Um ein Bild in die Webseite einzufügen verwenden Sie das Bild-Symbol im Fenster Einfügen.

Der Effekt, dass sich ein Bild in ein anderes verwandelt, wenn Sie den Mauszeiger darüber bewegen heißt "Rollover-Effekt" oder "OnMouseOver-Effekt". In Abbildung 62 werden zwei Bilder gezeigt, die für so einen "Rollover-Effekt" geeignet wären. Zuerst müssen Sie die beiden Bilder erzeugen und in einem geeigneten Ordner ablegen zum Beispiel im selben Ordner in dem auch die HTML-Datei liegt.

Abbildung 62: Zwei Bilder für einen "Rollover"-Effekt

Der Code hinter dem Effekt ist eine Kombination aus einem <img>-Tag, einem Link und ein bisschen Javascript-Code. Mit Dreamweaver kann dieser Effekt ganz einfach mit dem Symbol "Rollover-Bild" im Fenster Einfügen erzeugt werden.

Den Bildnamen können Sie frei wählen. Bei Originalbild und Rollover-Bild geben Sie die Dateinamen (oder den relativen Pfad) der beiden Bilder ein. Jedes Rollover-Bild ist gleichzeitig ein Link. Wenn Sie bei "Wenn angeklickt, gehe zu URL" nur das Zeichen "#" eingeben ist es ein Link zur selben Seite. Sie könne aber auch den Dateinamen einer anderen HTML-Datei oder eine URL eingeben.

[Bearbeiten] Unsichtbare Elemente

Manche Dinge die bei der Darstellung der Webseite im Browser unsichtbar sind werden in der Entwurfsansicht von Dreamweaver dargestellt, z.B. wie in Abbildung 64 gezeigt der <br>-Tag der einen Zeilenumbruch erzwingt.

Bei Web-Formular wird in der Entwurfsansicht von Dreamweaver der <form> - Tag als rote, strichlierte Linie dargestellt. zeigt die Darstellung in Dreamweaver und im Browser:

[Bearbeiten] Handhabung von Tabellen

Der Tag-Selektor am unteren Rand des Dokumentenfensters zeigt an, innerhalb welcher HTML-Tags sich der Cursor im Dokumentenfenster gerade befindet. Im Beispiel rechts: der Curser befindet sich auf einem Link <a>, der befindet sich innerhalb eines Absatzes <p>, der wiederum ist innerhalb des <body>-Tags. Beim Bearbeiten von Tabellen können Sie den Tag-Selector besonders gut gebrauchen: Ein Klick auf <td> im Tag-Selektor, und die Zelle wird markiert. Gleichzeitig zeigt das Eigenschaftsfenster die Eigenschaften dieser Zelle an, wie in Abbildung 66 gezeigt.

Ein Klick auf <tr> im Tag-Selektor, und die Zeile wird markiert. Gleichzeitig zeigt das Eigenschaftsfenster die Eigenschaften dieser Zeile an, wie in gezeigt.

Ein Klick auf <table> im Tag-Selektor, und die gesamte Tabelle wird markiert. Gleichzeitig zeigt das Eigenschaftsfenster die Eigenschaften der Tabelle an, wie in Abbildung 68 gezeigt.

Das funktioniert auch wenn Tabellen in von Tabellen geschachtelt werden, wie in Abbildung 69 gezeigt. Sie können immer ganz gezielt das richtige Objekt auswählen und verändern.

Mit Dreamweaver wird das Erstellen und Verändern von Tabellen sehr viel einfacher als mit notepad. Mit wenigen Klicks können Sie sehr komplizierte Tabellen-Konstruktionen erzeugen. Achten Sie trotzdem darauf immer die einfachste mögliche Tabelle zu verwenden!

[Bearbeiten] Site Verwalten

Eine Ansammlung von Webseiten die zusammen gehören nennt man eine "Website" oder "Site". Die einzelnen Dateien einer Site müssen in einem gemeinsamen Ordner liegen. Eine Site entspricht also einem Projekt. Wenn Sie gleichzeitig für mehrer KundInnen Sites erstellen werden Sie die Daten in getrennten Ordnern aufbewahren. Dreamweaver hat ein eigenes Fenster, mit dem Sie die Dateien einer Site verwalten können. Das Site-Fenster sieht beispielsweise wie links gezeigt aus. Mit dem Symbol "Wiederherstellen/Minimieren" können Sie die große Variante des Site-Fensters (bildschirmfüllend) einblenden.

In diesem Fall gehören alle Dateien in c:\data\webmirror\kurse zu einer Site mit dem Titel "Kurse". Bei der ersten Verwendung dieses Fensters müssen Sie zuerst die Site definieren–d.h., Sie müssen Dreamweaver mitteilen, in welchem Ordner die Site liegt, wie in Abbildung 71 gezeigt.

[Bearbeiten] FTP-Upload

Wenn Sie Webspace mieten erhalten Sie einen Usernamen und ein Passwort - mit diesen beiden haben Sie die Berechtigung Seiten auf den Webserver hinaufzuladen. Dazu benötigen Sie ein FTP-Programm. Das Site-Fenster von Dreamweaver ist so ein FTP ( Genau: ein FTP- und SFTP-Programm. An der FH verwenden wir SFTP. Das S stehe für secure, weil die Übertragung des Passworts verschlüsselt erfolgt.) -Programm. Im Sitefenster sieht man rechts die Dateien am eigenen Computer, und links die Dateien am Webserver draußen im Internet, wie in Abbildung 72 gezeigt.

Im Gegensatz zu anderen FTP-Programmen unterstützt Sie Dreamweaver dabei, Ihre Dateien im richtigen Ordner abzulegen. Wenn Sie wie in Abbildung 72 gezeigt auf "Datei bereitstellen" drücken wird die ausgewählte Datei in den richtigen Ordner (html-ue1) auf dem Webserver geladen. Die Ordnerstruktur bleibt erhalten, und damit auch die Funktionstüchtigkeit der relativen Links (vergleiche Seite 36) Abbildung 73 zeigt, was Sie nicht tun sollten: die Datei in einen anderen Ordner am Webserver hinauf laden. Dann funktionieren alle relativen Links nicht mehr.

Bevor Sie FTP im Dreamweaver Site-Fenster benutzen können müssen Sie (Unter Siteà Site bearbeiten à Bearbeiten à Webserver Infos) die Angaben für FTP eintragen: Der Name des Servers, Username und Passwort.

Neben FTP bietet Dreamweaver auch noch den Upload mit SFTP (FTP mit Verschlüsselung) und mit dem WebDAV-Protokoll an, das aber nur von wenigen Webservern unterstützt wird.

[Bearbeiten] Imagemaps

Mit Imagemaps (auch Hotspots genannt) können Sie einzelne Bereiche auf einem Bild markieren, die einen besonderen Link erhalten sollen. Das Werkzeug zum Einfügen der Hotspots erscheint nur, wenn Sie ein Bild markiert haben:

Zu jedem Hotspot können Sie eine eigene URL angeben:

Der HTML-Code dazu sieht etwas unübersichtlich aus, weil er die Koordinaten der einzelnen Hotspots enthält. Die Koordinaten werden von der linken oberen Ecke des Bildes gemessen, und zwar in Pixel.

<img 
    src="karte.gif" width="379"
    height="309" usemap="#Map"
    border="0"> 
<map name="Map"> 
<area shape="circle"
    coords="196,285,37"
    href="#">
<area shape="rect"
    coords="238,220,351,293"
    href="#">
<area shape="poly" 
    coords="197,222,184, "
    href="#">
</map&gt

[Bearbeiten] Zusammenfassung

Dreamweaver ist ein gutes Werkzeug für Webdesign: er erstellt guten Code wenn Sie ihn als "wysiwyg"-Editor benutzen, und er unterstützt Sie auch bei der direkten Arbeit mit HTML und CSS-Code.

Sie haben nun einen Überlbick über die Fähigkeiten von Dreamweaver, und können entscheiden ob, und für welche Aufgabenstellungen sie ihn einsetzen wollen.

[Bearbeiten] Quellen

1. ↑ http://www.adobe.com/downloads/#webdesdev