Bilder - Einfügen
Webbrowser können grundsätzlich folgende Bildtypen bzw. Grafiken anzeigen: "JPG" (zB Fotos), "PNG" (Bilder und Grafiken), "GIF" (Grafiken und animierte Grafiken). Bilder sollten in einem eigenen Bilderordner innerhalb der Site angelegt werden (meistens Ordner "images" oder "Bilder").

In Dreamweaver können Bilder bzw. Grafiken folgendermaßen eingefügt werden:
[1] Menü: "Einfügen" -> "Bild";
[2] Tastenkombination: "STRG" + "ALT" + "I";
[3] In beiden Fällen wird das Dialogfenster "Bildquelle auswählen" angezeigt": Das Bild wird ausgewählt, die Bildvorschau [4] für das Bild kann aktiviert werden. Zusätzliche Informationen werden angezeigt: zB URL (Adresse), Auflösung, Typ, Dateigröße;
[5] Bilder können auch über das Bedienfeld "Dateien" ausgewählt und mit dem Zeigegerät [6] in das Dokumentfenster gezogen werden.
[7] In allen Fällen wird nach der Auswahl standardmäßig die Dialogbox "Eingabehilfen-Attribute für Image-Tag" angezeigt. Für das Attribut "alt" sollte eine sinnvolle Bezeichnung für das Bild eingegeben werden.
[8] Abschließend wird das Bild im Dokumentfenster plaziert.
[9] Im Bereich "Eigenschaften" werden verschiedene Eigenschaften des eingefügten und ausgewählten Bildes angezeigt: zB Breite und Höhe in Pixel, Bildquelle (Adresse), Alternativbezeichnung, ID (eindeutige Identfikitaion) des Bildes;
[10] Im Tag-Selektor wird der Tag für Bilder angezeigt: <img>

Gleichzeitig wird beispielsweise folgender Quellcode erzeugt:
<img src="images/meereswelle.jpg" alt="Meereswelle" name="imgmeer" width="300" height="201" id="imgmeer" />

Bilder - Eigenschaften
Nach dem Anklicken des [1] Bildes im Dokumentfenster werden im [2] Eigenschaftsinspektor von Dreamweaver u.a. folgende Eigenschaften angezeigt:
[3] Dateigröße: in Kilobyte (zB 54K);
[4] Quelle: vollständiger Dateiname mit Pfad (zB imgaes/farboval.jpg);
[5] Breite: in Pixel (zB 280);
[6] Höhe: in Pixel (zB 200);
[7] Alternativbezeichnung: Alt. (zB Ei-Farboval);
[8] Rahmen: Rahmenbreite in Pixel, wenn angegeben (zB 5);
[9] Hyperlink: Adresse, wenn verlinkt (zB feste.html);
[10] ID: Bildname, wenn angegeben (zB oval1);

[11] In der Tagleiste wird der Tag [12] angegeben, und - wenn vorhanden -
die [13] ID des Bildes, getrennt durch das "#"-Zeichen, angezeigt (zB img#ovak).

Bilder - Tools
Dreamweaver stellt Tools zur [1] Bearbeitung von Bildern und Grafiken zur Verfügung, sodass die Bearbeitung innerhalb von Dreamweaver erfolgen kann.
Diese können nach Anklicken des zu bearbeitenden Bildes im [2] Eigenschaftsinspektor aufgerufen werden:

[3] Bildeinstellungen bearbeiten: Skalieren (Größenänderung) und Beschneiden des Bildes in einem Dialogfenster;
[4] Zuschneiden: Bildausschnitte durch Ziehen mit der Maus erstellen;
[5] Neu auflösen: Nach der Größenänderung mit dem Zeigegerät wird das Bild in der geänderten Größe und Auflösung gespeichert;
[6] Helligkeit/Kontrast: Ändern der Bildhelligkeit und des Kontrastes;
[7] Scharf stellen: Schärfen des Bildes

Zu beachten ist, dass in der Regel die Bildänderung nicht mehr rückgängig gemacht werden kann.

Formulare, Formularobjekte, Textfeld einzeilig
In Dreamweaver wird ein einzeiliges Textfeld für ein Formular über die Dokumentsymbolleiste mit Hilfe von Symbolen des Menüs [1] Formulare oder über die [2] Anwendungsleiste über das Pulldown-Menü "Einfügen" -> "Formulare" -> "Textfeld" erstellt.

Nach der Menüauswahl werden im Fenster [3] "Eingabehilfen-Attribute für Input-Tag" verschiedene Optionen für die einzeilige Textzeile angeboten:
[4] id: Wert für das Attribut "id" (und ev. "name") (zB person) wird hinzugefügt;
[5] Beschriftung: Dem Textfeld kann eine Beschriftung vor oder nach dem Feld, je nach Positionsauswahl, zugewiesen werden. Für den Stil der Beschriftung gibt es folgende Möglichkeiten, wobei die Unterschiede im Quelltext und nicht unbedingt in der Entwurfsansicht erkennbar sind:
[6]Stil: Kein Label-Tag: Die Beschriftung wird als Text dem Input-Tag hinzugefügt.
[7]Stil: Umbruch mit Label-Tag: Die Beschriftung und der Tag <input> wird innerhalb der Tags <label> angeordnet.
[8]Stil: Label-Tag mit 'for'-Attribut anhängen: Die Beschriftung wird innerhalb des Tags <label> vor dem Tag <input> angeprdnet. Dem Tag <label> wird zusätzlich das Attribut "for" hinzugefügt (gleicher Wert wie bei Attribut "id")

Für die Position der Beschriftung gibt es zwei Möglichkeiten:
[9] Position: Vor Formularelement: Die Beschriftung des Textfeldes wird vor dem Formularlement angeordnet.
[10] Position: Nach Formularelement: Die Beschriftung des Textfeldes wird nach dem Formularlement angeordnet.

[11] Im Eigenschaftsinpektor werden die Eigenschaften des [12] Textfeldes angezeigt, welche hier auch geändert werden können:
[13] Wert des Attributs "id" (und ev. des Attributes "name"): unterhalb von "Textfeld" (zB person)
[14] Typ des Textfeldes: Hier ist natürlich "Einzeilig" vorgegeben.
[15] Die Zeichenbreite erhält einen internen Vorgabenwert, welcher jedoch geändert werden kann (zB 32)
[16] Die Eingabe der höchst zulässigen Zeichenanzahl kann durch Eingabe eines Zahlen-Wertes in " Zeichen max." beschränkt werden (zB 80).
[17] Das Textfeld kann durch Eingabe von Zeichen im Feld "Anfangswert" einen Vorgabewert erhalten (zB Maria Maier).

Formulare, Grundlagen, Formularobjekte
In Dreamweaver können Formulare und Formularobjekte über die [1] Dokumentsymbolleiste mit Hilfe von Symbolen des Menüs Formulare oder über die [2] Anwendungsleiste über das Pulldown-Menü "Einfügen" -> [5] "Formulare" erstellt werden.
Die Formulardarstellung in der [3] Entwurfsansicht weicht, vor allem, was die Breite der Objekte betrift, von der Darstellung im [4] Webbrowser etwas ab.

Folgende Standardobjekte für Formulare werden angeboten:
[6] Formular: In der Entwurfsansicht ist der Rahmen des Formulars rot gepunktet umrahmt.
[7] Textfeld: Einzeiliges Textfeld;
[8] Textbereich: Mehrzeiliger Textbereich, falls notwendig, werden Schieberegler angezeigt;
[9] Schaltfläche: Wird normalerweise zum Absenden des Formulars oder zum Zurücksetzen der Eingaben verwendet;
[10] Checkbox: Zum Auswählen von einer oder mehreren Optionen;
[11] Optionsschalter: Zur Auswahl einer angebotenen Option (nur eine Auswahl ist möglich);
[12] Liste/Menü: Zum Auswählen von Einträgen aus einer Liste oder einem Menü;
[13] Dateifeld: Feld zum Hochladen von Dateien (Datei-Upload);
[14] Bildfeld: Verknüpfte Grafik, kann auch als Schaltfläche verwendet werden);
[15] Verstecktes Feld: Weist dem Feld einen Wert zu, der für den User im Webbrowser nicht sichtbar ist (wird in der Entwurfsansicht mit einem Symbol angezeigt)
siehe auch ->HTML, Formulare, Grundlagen

Framesets
Mit Dreamweaver können beim Erstellen von [1] neuen Dateien Framesets aus Beispielseiten [2] ("Seite aus Beispiel") erstellt werden.
Nach Auswahl des [3] Beispielordners [4] "Frameset" kann eine [5] Beispielseite mit Framesets gewählt werden. Als [6] Beispiele werden die üblichen Framesets mit unterschiedlichen Frame-Kombinationen angeboten. Zusätzlich wird eine [7] Grafik, die die zugehörige Fensterteilung darstellt, und eine [8] Kurzbeschreibung des Framesets gezeigt.
Der jeweilige Frame, dessen Höhe oder Breite nicht veränderlich ist, wird mit dem Zusatz "fest" versehen.


Beispiel:
Beispielseite:
[9] Links fest, oben verschachtelt,
[7] Grafik: Darstellung der Dreiteilung,
Kurzbesachreibung: [8] Frameset mit linkem Frame in fester Größe und verschachteltem oberem Frame.
Durch Klicken auf den [9] Button "Erstellen" wird ein Frameset mit 3-geteiltem Fenster erstellt.

Spry-Akkordeon erstellen
Spry-Akkordeons sind sogenannte "reduzierbare Paletten", die aus einer Titelleiste und einem Inhaltsfenster bestehen. Eine SpryAkkordeon-Palette zeigt sowohl Titelleiste als auch Inhalt an, während alle anderen nur die Titelleiste zeigen. Durch Anklicken einer Titelleiste wird das zugehörige Inhaltsfenster geöffnet und das vorherige Inhaltsfenster geschlossen.
Spry-Akkordeons bestehen analog zu den anderen Spry-Widgets, aus dem HTML-Code, dem JavaScript-Code ("SpryAccordion.js") und dem CSS-Code ("SpryAccordion.css").

In Dreamweaver werden Spry-Akkordeons folgendermaßen erstellt:
Im Menü [1] "Einfügen" -> [2] "Layoutobjekte" -> [3] "Spry-Akkordeon" auswählen oder das Symbol [4] "Spry-Akkordeon" aus dem Menü "Layout" oder aus dem Menü "Spry" auswählen;
[5] Zwei Spry-Accordeons mit Titelleiste und Inhaltsfenster werden erstellt (siehe auch Eigenchaftsinspektor und Tagleiste!). Alle Elemente sind in <div>-Tags eingeschlossen. Folgende Vorgaben werden angewendet:
[6] Tagleiste: <div#Accordion1.Accordion> : enthält Tag, ID-Selektor und Klassenselektor
[7] Bezeichnung (ID-Selektor): id="Accordion1" (siehe Tagleiste und Eigenschaftsinspektor)
[8] Klasse (Klassenselektor) des für das gesamte Spry-Akkordeon: class="Accordion" (siehe Tagleiste und Eigenschaftsinspektor), weitere Klassen für Titelleiste und Inhaltsfenster
[9] Bezeichnung in den Titelleisten: "Bezeichnung 1" und "Bezeichnung 2" (siehe Dokumentfenster und Eigenschaftsinspektor)
[10] Inhalt in den Inhaltsfenstern: "Inhalt 1" und "Inhalt 2"
[11] Öffnen des zweiten
Inhaltfensters: Klicken auf das Augen-Symbol der zweiten Titelleiste (und umgekehrt)

Anmerkung
Natürlich werden die Bezeichnungen der Titelleisten und die Inhalte bei weiterer Bearbeitung sofort geändert werden.

Spry-Akkordeon - Bereich hinzufügen
Zu einem bereits vorhandenem Spry-Akkordeon können in Dreamweaver beliebig viele Bereiche hinzugefügt werden.

Neue Spry-Akkordeons werden in der Entwurfsansicht von Dreamweaver folgendermaßen hinzugefügt:
[1] Spry-Akkordeon auswählen: In der Tag-Leiste den <div>-Tag mit der richtigen "id" anklicken (zB <div#Accordion1.Accordion>)
[2] Im Eigenschaftsinspektor Bereich, nach welchem ein neues Spry-Akkordeon eingefügt werden soll, auswählen (zB Bereich "Funktion HEUTE ()")
[3] Symbol "+" (plus) anklicken
[4] Neuer Bereich mit der vorgegebenen Bezeichnung (zB "Bezeichnung 3") wird hinzugefügt und im [5] Dokumentfenster mit Titelleiste und geöffneten Inhaltsfenster angezeigt.

Anmerkung
Hinzugefügten Bereich bearbeiten siehe -> "Spry-Akkordeon -Titel und Inhalt bearbeiten"

Spry-Akkordeon -Titel und Inhalt bearbeiten
Titel und Inhalt von Spry-Akkordeons können im Dreamwever im Dokumentfenster geändert werden.
[1A] und [1B] Titel: Text in den Titelzeilen im Dokumentfenste ändern, Änderungen werden auch im Eigenschaftsinspektor angezeigt
[2A] und [2B] Inhalt: Text im im geöffneten Inhaltsfenster ändern
[3] Öffnen des geschlossenen Inhaltsfensters: In der zugehörigen Titelzeile auf das [3A] Augensymbol klicken oder
im Eigenschaftsinspektor im Eingebefeld von [3B] "Bereiche" Bezeichnung der zugehörigen Titelzeile auswählen
[4] Funktion der Spry-Akkordeons im Webbrowser überprüfen: [5] geschlossenes Inhaltsfenster durch Klicken auf die zugehörige Titelzeile öffnen

Anmerkung
Im Internetexplorer das Ausführen von JavaScript zulassen, in anderen Browsern wird das Ausführen von JavaScript üblicherweise zugelassen

Horizontale Spry-Menüleiste erstellen
Ein Spry-Widget als [1] Spry-Menüleiste für ein horizontales Menü (im Webbrowser als Pulldown-Menü verwendbar) kann in Dreamweaver folgendermaßen erstellt werden:
[2] Im Menü "Einfügen" -> "Layoutobjekte" -> "Spry-Menüleiste" auswählen oder das Symbol
[3] "Spry-Menüleiste" aus dem Menü [4A] "Layout" oder aus dem Menü [4B] "Spry" auswählen;
[5] Im Fenster "Spry-Menüleister" das Layout "Horizontal" auswählen;
[6] Eine vordefinierte Anzahl von [7] Menüelementen und [8] Menü-Unterelementen wird im Arbeitsfenster erstellt.
[9] Die Struktur dieser Menü-Elemente wird durch Aufzählungslisten (<ul><li>....) festgelegt
[10] Das Aussehen bzw. Design der Menüelemente bestimmt eine gewisse Anzahl von CSS-Stilen, die in der gleichzeitig erzeugten Datei [11] "SpryMenuBarHorizontal.css" enthalten sind.
Die dynamischen Eigenschaften rnthält die Spry-Menüleiste durch den JavaScript-Code in der entstanden JavaScript-Datei [12] "SpryMenuBar.js"
[13] Im Eigenschaftsinspektor sind die vordefinierten Eigenschaften zu sehen:
[14] Vordefinierter Namen der Menüleiste (id id="MenuBar1");
Die [7] Elemente und [8] Unterelemente mit den vordefinierten Bezeichnungen (zB "Element", "Element 1.1"...);
[15] Textfeld, in dem die vordefinierten Bezeichnungen geändert werden können;
[16] Feld, in dem ein zugehöriger Hyperlink eingetragen werden kann (vordefiniert "#" -> Hand wird im Browser angezeigt.)
[17] Vor der Vorschau im Webbrowser werden zusätzlich Grafiken (zB Pfeile) in die Website kopiert, die das Aussehen der Spry-Menüleisten mitbestimmen

Spry-Menü-Einträge entfernen
Aus der [1] Spry-Menüleiste können [2] Menü-Elemente und [3] Menü-Unterelemente (Listeneinträge) nach [4] Auswahl der Spry-Menüleiste im [5] Eigenschaftsinspektor entfernt werden.
Durch das Klicken auf das [6] Minus-Symbol wird das [7] markierte Menü-Elementes bzw. Menü-Unterelement entfernt (gelöscht). Das aktuelle Menü wird im [8A] Eigenschaftsinspektor und gleichzeitig im [8B] Arbeitsfenster angezeigt.
Auf die gleiche Weise können weitere Elemente und Unterelemente entfernt werden.
Wird ein [9] Menü-Element oder Menü-Unterelement, das weitere [10] Unterelemente enthält, entfernt, werden sowohl das [11] ausgewählte Element als auch die zugehörigen [12] Unterelemente gelöscht. Dies muss vorher in einem Popup-Fenster bestätigt werden.

Spry-Menüeinträge hinzufügen
Der [1] Spry-Menüleiste können [2] Menü-Elemente und [3] Menü-Unterelemente (Listeneinträge) nach [4] Auswahl der Spry-Menüleiste im [5] Eigenschaftsinspektor hinzugefügt werden.
Durch das Klicken auf das [6] Plus-Symbol wird unterhalb des [7] markierten Menü-Elementes bzw. Menü-Unterelements ein [8] neues Menü-Element bzw. Menü-Unterelement hinzugefügt und anschließend im [9} Text-Fenster umbenannt. Das neue Element wird gleichzeitig im [10] Arbeitsfenster angezeigt.
Auf die gleiche Weise können weitere [11] Menü-Unterelemente (zB ein Unterelement des Unterelements) hinzugefügt werden, wobei darauf zu achten ist, dass das zugehörige [12] Menü-Element bzw. Menü-Unterelement markiert ist.
Dreamweaver fügt, in der [13] Entwurfsansicht sichtbar, das neue Unterelement neben dem übergeordneten Menü-Element hinzu.

Position von Menü-Elementen ändern
In der [1] Spry-Menüleiste können die Postionen der [2] Menü-Elemente und [3] Menü-Unterelemente (Listeneinträge) nach [4] Auswahl der Spry-Menüleiste im [5] Eigenschaftsinspektor geändert bzw. verschoben werden.
Durch das Klicken auf eines [6] der Pfeil-Symbole wird das markierte Menü-Elementes bzw. Menü-Unterelement in Pfeilrichtung vertikal verschoben. Das aktuelle Menü mit dem verschobenen Element gleichzeitig im [7] Arbeitsfenster angezeigt. Das vertikale Verschieben von Menü-Elementen (Hauptelementen) bewirkt in Wirklichkeit ein horizontales Verschieben im Arbeitsfenster der Entwurfsansicht und im Webbrowser.
Durch mehrmaliges Drücken auf das Pfeil-Symbol kann des Element um mehrere Positionen verschoben werden.


Beispiel: Verschieben (Positionsänderung) von Elementen:
[8] Menü-Unterelement "PremierePro" nach oben verschieben:
[8A] Unterelement auswählen -> [8B] "Symbol "Pfeil nach oben" anklicken -> [8C] verschobene Position wird angezeigt;
[9] Menü-Element "Cadat Educ" nach unten verschieben:
[8A] Element auswählen -> [8B] "Symbol "Pfeil nach unten" anklicken -> [9C] verschobene Position wird angezeigt: im Eigenschaftsinspektor = vertikale Verschiebung, in der Entwurfsansicht = horizontale Verschiebung;
[10] Die zugehörigen Unterelemente werden mitverschoben.

Änderung der Spry-Menü-Einträge
Die Menü-Elemente (Listeneinträge) einer [1] Spry-Menüleiste können direkt im [2] Arbeitsfenster oder nach [3] Auswahl der Spry-Menüleiste im [4] Eigenschaftsinspektor geändert werden. Jedem [5] Menü-Element kann außer der Bezeichnung [5A] (zB im Feld "Text") ein [6] Hyperlink, ein [7] Titel (als "Tool-Tip) und ein [8] Ziel für den Hyperlink zugeordnet werden.

Beispiel für Änderung der Listeneinträge:
[9] Änderung des Elementes "Element 1" im Feld "Text" in [9A] "Cadat Educ";
[10] Zuordnung eines Hyperlinks [10A]("http://www.cadat.at/acd/");
[11] Eintrag des Titels für den Tool-Tip [11A](zB "Übersicht");
[12] Zurodnung eines Zieles für den Hyperlink [12A] (zB "_blank", um den Link in einem neuen Fenster zu öffnen)
[13] Änderung des Unterelementes "Element 1.1" im Feld "Text" in [13A] "Dreamweaver";
[14] Zuordnung eines Hyperlinks für das Unterelement;
[15] Eintrag des Titels für das Unterelement;
[16] Analog dazu können weitere Elemente und Unterelemente geändert werden.
[17] Layout und Funktionalität können im Webbrowser überprüft werden

Verhalten - Bild austauschen
Im Bedienfenster [1] "Verhalten" kann in Dreamweaver u.a. das "Verhalten" [2] "Bild austauschen" ausgewählt werden. Nach Anwenden dieses "Verhaltens" wird nach Eintritt eines Ereignisses (zB durch eine Bewegung des Zeigegerätes) das bestehende Bild durch ein anderes ersetzt.

Folgendes ist dabei durchzuführen:
[3] Bild, dem das Verhalten "Bild austauschen" zugewiesen werden soll im Eigenschaftsinspektor eine eindeutige ID zuweisen (zB ID wein);
[4] Bild auswählen;
[5] Im Bedienfenster "Verhalten" das Verhalten "Bild austauschen" auswählen;
[6] Im Dialogfenster "Bild austauschen" das richtige [7] Bild auswählen;
[8] unter "Quelle einstellen auf:" den Dateinamen des zu ersetzenden Bildes eintragen oder ein Bild mit Hilfe von "Durchsuchen..." auswählen;
[9] Mit "OK" das Verhalten "Bild austauschen" zuweisen;
[10] Im Bedienfeld "Verhalten² wird das Ereignis onMOuseOver ("Rollover") mit der zugewiesenen Aktion "Bild austauschen" angezeigt:
[11] Das Verhalten "Bild austauschen" wird erst ausgeführt, wenn die die Webseite im Webbrowser aufgerufen wird.

Zusätzliche Optionen im Dialogfenster "Bild austauschen":
[12] "Bilder vorausladen": bei Aktivierung (Häkchen) wird das auszutauschende Bild bereits beim Laden der Webseite geladen, um es bei Bedarf schneller anzeigen zu können.
[13] "Bilder bei onMouseOut wiederherstellen": bei Aktivierung (Häkchen) wird das ursprüngliche Bild nach dem Verlassen des Bildes mit dem Zeigegerät wieder angezeigt -> [14] Im Bedienfeld "Verhalten" wird das Ereignis onMOuseOut mit der zugewiesenen Aktion "Bildaustausch wieder herstellen" angezeigt:

Verhalten JavaScript
Mit dem Modul [1] "Verhalten" können in Dreamweaver Ereignisse und Aktionen und somit dynamische Webseiten erstellt und gesteuert werden. Dreamweaver erzeugt dazu den erforderlichen [2] JavaScript-Code ("Verhaltenscode"), der auf bestimmte ausgewählte Elemente der Webseite angewendet wird. Bestimmte Ereignisse (Events) lösen dabei zugehörige Aktionen (JavaScript-Funktionen) aus. Die Verbindung zwischen Ereignissen und dem JavaScript-Code der Aktionen sind sogenannte Event-Handler, die zB auf Mausbewegungen oder Tastendruck reagieren.

Beispiele für Ereignisse bzw. Event-Handler sind:
[3] OnMouseOver: Die Aktion wird beim Ãœberfahren des Elements mit dem Zeigegerät ausgelöst;
[4] OnMouseOut: Die Aktion wird beim Verlassen des Elements mit dem Zeigegerät ausgelöst;
[5] OnClick: Die Aktion wird beim Anklicken des Elements ausgelöst;
[6] OnLoad: Die Aktion wird beim Laden einer Datei ausgelöst;

Je nach ausgewähltem Element der Webseite werden unterschiedliche Aktionen angeboten. Manche Aktionen sind für bestimmte Elemente jedoch nicht möglich.
Beispiele für Aktionen, ausgelöst durch Ereignisse (Event-Handler):
[7] Bild austauschen: das angezeigte Bild wird durch ein anderes ersetzt;
[8] Browserfenster öffnen: die angegebene Adresse wird aufgerufen;
[9] Popup_Meldung: Der vordefinierte Text wird in einem Popup-Fenster angezeigt;

Ansichten
In Dreamweaver sind für das Bearbeiten von Webseiten folgende Ansichten möglich:
[1] Code-Ansicht: Zur Bearbeitung von HTML-Quellcode oder von Code für dynamische Seiten (zB PHP, JavaScript);
[2] Entwurfs-Ansicht: Zur leichteren Bearbeitung von HTML-Seiten in einer Voransicht, die der Ansicht im Webbrowser ähnlich sieht (zB zum Designen von Webseiten);
[3] Teilen: Das Arbeitsfenster wird geteilt - oben enthält es die Code-Ansicht, unten die Entwurfsansicht;
Zusätzlich gibt es bei neueren Programmversionen:
[4] Live-Ansicht: Es wird versucht die Darstellung im Webbrowser zu imitieren (zB werden auch Daten aus der Datenbank live gezeigt).
[5] Live-Code: In Verbindung mit der Live-Ansicht wird auch der aktuelle Quellcode gezeigt, wie er vom Web-Server für den Computer des Anwenders zur Verfügung gestellt wird (interessant bei dynamischen Webseiten).
[6] Multiview-Ansicht: Mehrere Ansichtsversionen für unterschiedliche Oberflächen (zB für Handys, ab Version CS5)

Multi-Screen-Vorschau - Bildschirmtypen
Mit der Multi-Screen-Vorschau in Dreamweaver (ab CS5, CS6) kann in der [1] Entwurfsansicht und in der [2] Live-Ansicht von der derzeit bearbeiteten Seite eine Vorschau von voreingestellten Bildschirmtypen angezeigt werden. Damit kann die Darstellung der Seite auf unterschiedlichen Geräten mit verschiedenen Bildschirmauflösungen getestet werden. Ein Klick auf die Symbole von drei Geräten auf der Statusleiste mit zugeordneten Bildschirmauflösungen zeigt eine entsprechende Vorschau.

Folgende drei Bildschirmtypen sind voreingestellt:
[3] Mobilgerät (Handy, Smartphone)
[4] Tablet-PC
[5] Desktop (PC-Monitor)

Anmerkung: [6] Ausrichtung (Querformat, Hochformat) und Zuordnung der Bildschirmgrößen kann jederzeit geändert werden.

Multi-Screen-Vorschau - Vergleich
Eine Multi-Screen-Vorschau in Dreamweaver (ab CS5, CS6) für drei Bildschirmtypen im Vergleich kann durch Auswahl des [1] Symbols "Multiscreen" in der Symbolleiste des Dokumentfensters hergestellt werden. Im Dokumentfenster [2] "Mulit-Screen Vorschau" wird die Ansicht im Webbrowser für [3] Handy, [4] Tablet und [5] Desktop in der voreingestellten Größe (Auflösung) simuliert.
Diese Bildschirmgrößen (Screen-Auflösungen) können über den [6] Button "Viewport-Größen" geändert werden. Im [7] Fenster "Viewport-Größen" können neue Werte für Handy, Tablet und Desktop eingegeben werden. Der [8] Button "Auf Standardwerte zurücksetzen" setzt die Werte wieder auf die im Dreamweaver voreingestellten Werte zurück.

Anmerkung: Änderungen an der Seite werden nicht automatisch, sondern erst durch Klicken auf das [9] Symbol "Aktualisieren" übernommen.

Gliederung des Arbeitsbereiches
Der Arbeitsbereich von Dreamweaver (CS[4]ist im wesentlichen folgendermaßen gegliedert:
[1] Dokumentfenster: Zum Bearbeiten der Inhalte in Entwurfsansicht, Code-Ansicht oder geteilten Ansicht (hier zB geteilte Ansicht);
[2] Anwendungsleiste: Enthält Menüs, Menügruppem und Pulldown-Menüs, Steuerelemente;
[3] Dokumentsymbolleiste: Enthält je nach Konfiguration die wichtigsten Symbole bzw. Befehle (hier auch mit Standardsymbolleiste);
[4] Tag-Selektor: Zeigt die Tags in der entsprechenden Hierarchie;
[5] Bereich "Eigenschaften" (Eigenschaftsinspektor): Zeigt die Eigenschaften der ausgewählten Objekte an;
[6] Bedienfeldgruppen: Können ein- und ausgeblendet werden;
[7] Bedienfeld "Dateien": Zeigt alle Dateien der ausgewählten Site;
[8] Arbeitsbereichumschalter: Auswahl der verfügbaren Arbeitsbereiche und Layouts (zB Designer, Coder)

CSS-Datei verknüpfen
Wenn CSS-Stile bereits in einer externen Stylesheet-Datei (CSS-Datei) bereits vorhanden sind, kann diese Datei mit den darin enthalten CSS-Stilen mit der aktuellen HTML-Datei verknüpft werden.

In Dreamweaver geschieht dies folgendermaßen:
[1] Das Fenster CSS-Stile muss geöffnet sein;
[2] Im Fenster "Alle Regeln" wird die Meldung "(keine Stile definiert)" ausgegeben, wenn bisher weder interne noch externe CSS-Stile (CSS-Regeln) erstellt wurden.
[3] Durch Klicken auf das Verküpfungssymbol wird das [4] Fenster "Externes Stylesheet anfügen" geöffnet.
[5] Die Option "Verknüpfung" muss aktiviert sein, da die CSS-Stile nicht importiert, sondern nur verknüpft werden sollen.
[6] Mithilfe von "Durchsuchen" wird die externe [7] CSS-Datei [Standardmäßiger Dateityp: Sytlesheet-Dateien (*.css)] ausgewählt und mit [8] "OK" angefügt bzw. verknüpft.
[9] Im Fenster "CSS-Stile" wird die verknüpfte Stylesheet.Datei mit den darin enthaltenen CSS-Stilen (CSS-Regeln) angezeigt.

Neue CSS-Regel
Im Dialogfenster [1] "Neue CSS-Regel" kann durch Auswahl festgelegt werden, [2] wo die neue CSS-Regel festgelegt werden soll:
[3] Nur dieses Dokument: CSS-Regel wird in den Head-Teil der HTML-Datei geschrieben.
[4] Neue Stylesheet-Datei: CSS-Regel wird in eine externe Textdatei geschrieben; [5] Dateiname (zB "stylesheet.css") und Speicherort muss angegeben werden;

Anmerkung: Siehe auch Short-Info Nr. 595

Neue CSS-Regel erstellen
Nachdem im Dialogfenster "Neue CSS-Regel" der Selektor-Typ ausgewählt wurde, können im Daialogfenster [1] "CSS-Regel-Definition" die CSS-Eigenschaftten festgelegt werden.
Die CSS-Eigenschaften sind in in [2] acht Kategorien gegliedert: Schrift, Hintergrund, Block, Box, Rahmen, Liste, Positionierung und Erweiterungen. Nach Auswahl der Kategorie (zB Schrift) können die [3] zugehörigen Eigenschaften ausgewählt oder eingegeben werden.
[4] Mit "OK" werden die Eigenschaften, je nach vorheriger Festlegung, in den Head-Teil oder in eine CSS-Datei geschrieben.
Im Bedienfeld [5] "CSS-Stile" ist der neue CSS-Stil bzw. die neue CSS-Regel jetzt vorhanden und kann auf HTML-Elemente angewendet werden.

Beispiel:
[6] CSS-Regel für Klasse ._kapitel_ueberschrift -> Eigenschaften für Kategorie Schrift:
[7] Font-family: Arial, Helvetica, sans-serif (Schriftfamilie)
[8] Font-size: 24pt (Schriftgröße 24 Punkt)
[9] Font.weigth: bold (fett)
[10] Color: #2853FF (Schriftfarbe - ein Blauton)
Alle anderen Eigenschaften wurden nicht gesetzt.

Siehe auch Short-Infos Nr. 595 bis 598

CSS - Selektor-Typ
Im Fester [1] CSS-Stile von Dreamweaver kann durch Anklicken des [2] Plus-Symbols ein neuer CSS-Stil (CSS-Regel) erstellt werden.
Im aufgerufenen Dialogfenster [3] "Neue CSS-Regel" kann aus folgenden [4] Selektor-Typen ausgewählt werden:
[5] Klasse (kann auf beliebige HTML-Elemente angewendet werden)
[6] ID (wird nur auf jeweils ein HTML-Element angewendet)
[7] Tag (definiert ein HTML-Element neu)
[8] Zusammengesetzter Ausdruck (beruht auf Ihrer Auswahl)

Anmerkungen zu den [4] Selektor-Typen:
zu [5] "Klasse" sind CSS-Regel die im Beginntag mit Attribut "class" aufgerufen werden (zB class = "text_rot");
zu [6] "ID" sind CSS-Regel, deren Namen im Beginntag einer HTML-Datei nur 1 mal vorkommen dürfen (zB id = "layer1"). Sie werden u.a. für Ebenen verwendet;
zu [7] "Tag" wird auf ein bestehendes HTML-Tag angewendet. Hier darf kein "erfundener" Tag-Name eingegeben werden;
zu [8] "Zusammengesetzter Ausdruck" bezieht sich auf mindestens zwei Tags, Klassen oder IDs gleichzeitig (zB "div p" bezieht sich auf alle <p> innerhalb von <div>-Tags;

Selektor-Typ "Klasse"
Nachdem im Dialogfenster [1] "Neue CSS-Regel" der [2] Selektor-Typ "Klasse" ausgewählt wurde, muss der Selektor-Name eingegeben werden:
[3] Selektor-Name: Der Selektor-Name darf nicht mit einer Ziffer beginnen und keine Interpunktionszeichen und Leerzeichen enthalten. Keine Tag-Namen!
Der Selektorname kann mit einem Punkt oder [4] ohne Punkt beginnen. Im letzteren Fall wird der Punkt durch Dreamweaver in der CSS-Regel ergänzt.

Beispiel:
zulässig: [4] kapitel_ueberschrift
zulässig: .kapitel_ueberschrift
nicht zulässig: 1kapitel_ueberschrift
nicht zulässig: #kapitel_ueberschrift
nicht zulässig: kapitel ueberschrift
nicht zulässig: kapitel+ueberschrift
Siehe auch Short-Info Nr. 595 und 596

Selektor-Typ "Tag"
Nachdem im Dialogfenster [1] "Neue CSS-Regel" der [2] Selektor-Typ "Tag" ausgewählt wurde, muss der [3] Selektor-Name bestimmt werden:
[4] Selektor-Name aus Liste auswählen oder;
[5] Selektor-Name in das Eingabefeld schreiben;
[6] Die CSS-Regel wird auf alle Tags mit dem ausgewählten Selektor-Namen angewendet.

Beispiel:
Selektor-Name ist "h1" -> [6] Die neue CSS-Regel wird auf alle h1-Tags angewendet (<h1>Ãœberschrift 1</h1>9. Es dürfen nur gültige Tags eingegeben und keine neuen Tag-Namen erfunden werden.
Siehe auch Short-Info Nr. 595 und 596.

Formulare, Formularobjekte, Schaltfläche
In Dreamweaver wird eine Schaltfläche für ein Formular über die Dokumentsymbolleiste mit Hilfe von Symbolen des Menüs [1] Formulare oder über die [2] Anwendungsleiste über das Pulldown-Menü "Einfügen" -> "Formular" -> "Schaltfläche" erstellt.

Im Fenster [3] "Eingabehilfen-Attribute für Input-Tag" können u.a. folgende Eingaben gemacht werden:
[4] id: Werte für die Attribute "id" und "name" werden hinzugefügt (zB "button1")
[5] Beschriftung: Dem Textfeld kann eine Beschriftung vor oder nach dem Feld, je nach Positionsauswahl, zugewiesen werden (zB "Schaltfläche:")
In der Entwurfsansicht wird die [6] Schaltfläche mit der vorgegebenen Beschriftung "Senden" eingefügt. Die Breite der Schaltfläche passt sich größenmäßig an die Beschriftung an.
Im [7] Eigenschaftsinpektor werden die änderbaren Eigenschaften des Textbereiches angezeigt. Dies sind u.a. die für die [8] Attribute für "id" und "name" identischen Werte unterhalb von "Textfeld".
Als [9] Wert wird standardmäßig "Senden" eingetragen. Automatisch wird die für ein Formular notwendige Aktion [10] "Abschicken" ausgewählt.
Wird eine zweite Schaltfläche eingefügt, erhält sie automatisch den [11] Wert und die [12] Beschriftung "Zurücksetzen". Als [13] Aktion wird automatisch "Zurücksetzen" ausgewählt. Mit dieser Schaltfläche können daher User vor dem Abschicken alle Eingaben wieder löschen.
Beschriftung und Wert einer Schaltfläche können natürlich nachträglich [14] geändert werden (zB Änderung in "OK-Senden").
Soll einer Schaltfläche keine vorgegebene Aktion zugewiesen werden, kann [15] "Keine" ausgewählt werden.

Anmerkung : Der Wert der Schaltfläche wird für die Beschriftung der Schaltfläche verwendet.

Formulare, Formularobjekte, Textfeld, Kennwort
In Dreamweaver wird für die Eingabe eines Kennwortes (Passwort) ein einzeiliges Textfeld für ein Formular verwendet. Dieses ist über die Dokumentsymbolleiste mit Hilfe von Symbolen des Menüs [1] "Formulare" oder über die Anwendungsleiste über das Pulldown-Menü [2] "Einfügen" -> "Formulare" -> "Textfeld" erstellt.
Siehe auch -> Textfeld einzeilig

Im Fenster [3] "Eingabehilfen-Attribute für Input-Tag" können u.a. folgende Eingaben gemacht werden:
[4] id: Werte für die Attribute "id" und "name" werden hinzugefügt (zB "password")
[5] Beschriftung: Dem Textfeld kann eine Beschriftung vor oder nach dem Feld, je nach Positionsauswahl, zugewiesen werden (zB "Kennwort").
In der Entwurfsansicht wird das [6] Eingabefeld für das Passwort mit der eventuellen Beschriftung dargestellt.
Im [7] Eigenschaftsinpektor werden die änderbaren Eigenschaften des Textfeldes angezeigt.
Dies sind u.a. die für die [8] Attribute für "id" und "name" identischen Werte unterhalb von "Textfeld".
Als Typ ist hier [9] "Kennwort" auszuwählen. Bei der Eingabe des Kennwortes im [9] Formular eines Webbrowsers werden dabei die Zeichen nicht als Klartext, sondern als [10] Punkte dargestellt.

Anmerkung :
Auch hier kann ein [11] Anfangswert, welcher in Punktform angezeigt wird eingegeben werden. Aber bei der Abfrage von Kennwörtern sind vorgegebene Anfangswerte sicher nicht sinnvoll.

Formulare, Formularobjekte, Textfeld, Textbereich
In Dreamweaver wird ein mehrzeiliges Textfeld (Textbereich) für ein Formular über die Dokumentsymbolleiste mit Hilfe von Symbolen des Menüs [1] Formulare oder über die [2] Anwendungsleiste über das Pulldown-Menü "Einfügen" -> "Formular" -> "Textbereich" erstellt.
Siehe auch -> Textfeld einzeilig

Im Fenster [3] "Eingabehilfen-Attribute für Input-Tag" können u.a. folgende Eingaben gemacht werden:
[4] id: Werte für die Attribute "id" und "name" werden hinzugefügt (zB "textbereich1")
[5] Beschriftung: Dem Textfeld kann eine Beschriftung vor oder nach dem Feld, je nach Positionsauswahl, zugewiesen werden (zB "Mitteilung:")
In der Entwurfsansicht wird das [6] Eingabefeld für den Textbereich mit der eventuellen Beschriftung dargestellt. Dabei werden Standardvorgaben für die Zeichenbreite und Anzahl der anzuzeigenden Zeilen verwendet
Im [7] Eigenschaftsinpektor werden die änderbaren Eigenschaften des Textbereiches angezeigt.
Dies sind u.a. die für die [8] Attribute für "id" und "name" identischen Werte unterhalb von "Textfeld".
Als [9] Typ des Textfeldes ist natürlich "Mehrzeilig" vorgegeben.
Vorgabewerte für die [10] Zeichenbreite sind zB 45 Zeichen und für die Anzahl der [11] anzuzeigenden Zeilen zB 5 Zeilen. Werden mehr als 5 Zeilen Text eingegeben, können mit dem [12] Schieberegler die verdeckten Zeilen in den sichtbaren Textbereich verschoben werden.
Für den [13] Anfangswert kann ein Vorgabetext eingegeben werden. Dieser wird im [14] Textbereichseingabefeld angezeigt und automatisch umgebrochen, falls er länger als die angegebene Zeichenbreite ist.
[15] Zeichenbreite und anzuzeigende Zeilen können im Eigenschaftsinspektor jederzeit geändert werden.
Bei der Eingabe von Text im [16] Textbereich eines Formulars im Webbrwoser kann der Benutzer Text hinzufügen und bestehenden Vorgabetext ändern.

Anmerkung :
Im Eigenschaftsinspektor kann ein mehrzeiliges Textfeld in ein einzeiliges Textfeld oder Passworttextfeld geändert werden.
Werden keine Zeichenbreite und keine Zahl für die Zeilen angegeben, werden als Minimum ca. 30 Zeichenbreite und 2 Zeilen vom Browser angenommen.

Absolute Hyperlinks einfügen und entfernen
Absolute Hyperlinks können in der Entwurfsansicht von Dreamweaver folgendermaßen erstellt werden:
[1] Menü: "Einfügen" -> "Hyperlink" -> [2] Dialogfenster "Hyperlink": Einzugeben ist der Text [3], der verlinkt werden soll und die [4] vollständige Adresse für den Hyperlink einschließlich Protokoll (zB http://www.educ.cadat.at/).
Weitere Attribute für den Link-Tag (<a .....>) können ergänzt werden, [6] wie zB ein Titel für den Link (zB Short-Infos). Dieser Titel wird im Webbrowser [7] beim Darüberfahren mit dem Zeigegerät angezeigt.
Der Hyperlink erhält standardmäßig eine [7] spezielle Formatierung, damit er sich vom normalen Text unterscheidet.
[8] Ausgewählter Text kann ebenfalls verlinkt werden. Dieser wird als Vorgabe für den Linktext verwendet.
[9] Im Tag-Selektor wird der zugehörige Tag für die Hyperlinks (<a>) angezeigt.

[10] Ausgewählte Hyperlinks können mittels Kontextmenü -> "Hyperlink entfernen" wieder entfernt werden.
[12] Im Bereich Eigenschaften bzw. im Eigenschaftsinspektor ist es ebenfalls durch Eingabe, Ändern oder Löschen von Werten in den [13] Eingabefeldern möglich, Hyperlinks zu erstellen, ändern oder löschen. Weiters kann [15] zB der Titel geändert, hinzugefügt oder entfernt werden.
Wenn im Feld Ziel keine Eingabe erfolgt wird die verlinkte Seite in demselben Browserfenster geöffnet. Durch die Auswahl von zB "_blank" wird die verlinkte Seite in einem neuen Browserfenster angezeigt.

Hyperlink: Einstellungen in der Site-Verwaltung
Hyperlinks können grundsätzlich in absolute Hyperlinks (Verweise) und relative Hyperlinks (Verweise) eingeteilt werden.
Absolute Hyperlinks verweisen auf die vollständige Adresse mit allen Pfadinformationen samt zugehörigen Verzeichnissen. Im Internet verweisen absolute Hyperlinks [1] auf weltweit einmalige Adressen (zB "http://www.cadat.at/").
Relative Hyperlinks [2] (Verweise) beziehen sich auf Adressen, die Bezug auf die aktuelle Datei (Hyperlinks relativ zum Dokument [3], zB "medien/index.html" ) oder auf den Stammordner (Hyperlinks relativ zum Stammordner [4]) nehmen.
Die Art der Verlinkung kann in der Site-Verwaltung von Dreamweaver eingestellt werden. Stamdardmäßig ist die relative Verlinkung eingestellt, wobei dokumentrelative Pfade verwendet werden.
Mit dem Menüpunkt "Seite" -> "Hyperlinks auf der ganzen Site überprüfen" oder mit der Tastenkombination "STRG + F8" kann die Funktionsfähigkeit aller Verlinkungen überprüft werden.


Wenn "Hyperlinks relativ zum Stammordner" eingestellt ist, soll die HTTP-Adresse [1] der eigenen Website eingegeben werden, damit die Verknüpfungen nicht nur während der Bearbeitung lokal, sondern auch im Internet funktionieren.
[5] Die Unterscheidung zwischen Groß- und Kleinschreibung ist zu beachten (aktivieren!), da es auch Server, die wischen Groß- und Kleinschreibung unterscheiden, gibt.
[6] "Cache aktivieren" soll eingeschaltet sein, da die Hyperlinkprüfung schneller durchgeführt wird und andernfalls gewisse Funktionen im Dreamweaver nicht ausführbar sind.

Relative Hyperlinks
Texte für relative Hyperlinks innerhalb einer Site können in der Entwurfsansicht von Dreamweaver folgendermaßen erstellt werden:
[1] Zu verlinkenden Text auswählen;
[2] Menü: "Einfügen" -> "Hyperlink" -> Dialogfenster "Hyperlink": Angezeigt wird der zu verlinkende Text, oder der zu verlinkende Text ist jetzt einzugeben;
[3] Rechte Maustaste über ausgewählten Text anklicken;
[4] Im Eigenschafteninspektor Ordnersymbol anklicken;
[5] In allen bisherigen Methoden ([2] bis [4]) ist die Zieldatei aus der angezeigten [6] Dateiliste im Dialogfenster auszuwählen: Nach der [7] Auswahl wird die [8] Linkadresse (URL) und die [9] Art der Verlinkung angezeigt.

[10] Die Linkadresse bzw. der Dateiname (inklusive Dateiendung: zB "links.htm") für den Hyperlink kann auch direkt im Eingabefeld "Hyperlink" des Eigenschafteninspektors eingegeben werden.
[11] Mit dem Dateizeigersymbol (Zielsymbol) im Eigenschafteninspektor kann direkt auf das Linkziel, auf eine Datei im Bedienfenster "Dateien", gezeigt werden. Der Dateiname der ausgewählten Datei wird im Hyperlink-Eingabefeld des Eigenschafteninspektors automatisch eingetragen.

[12] Ist die Verlinkung mit einer der vorangegangenen Methoden durchgeführt, wird der zu verlinkende Text im Format für den Hyperlink angezeigt (Standard: Schrift blau, unterstrichen).
[13] Gleichzeitig wird der Quellcode für den Hyperlink ergänzt und im Tag-Selektor wird der zugehörige Tag angezeigt: <a>.

Verlinkung zu Verlinkungs-Ziel (Anker)
Bei einem Hyperlink (Verlinkung) zu einem Verlinkungs-Ziel innerhalb einer Seite muss in der aktuellen Seite das Verlinkungs-Ziel (Anker) definiert und benannt sein.
Die Verlinkung zum Anker wird wie bei anderen Verlinkungen durchgeführt:
[1] Zu verlinkenden Text auswählen;
[2] Menü: Einfügen -> Hyperlink -> Dialogfenster "Hyperlink": Angezeigt wird der zu verlinkende [3] Text oder der zu verlinkende Text ist jetzt einzugeben.
[4] Im Feld "Hyperlink" ist das Zeichen "#" zusammen [5] mit Namen des Verlinkungs-Zieles einzugeben oder aus der [6] Liste auszuwählen.

Im Eigenschafteninspektor kann das Verlinkungs-Ziel im Feld [7] "Hyperlink" ebenso eingegeben werden oder
das [8] Dateizeigersymbol (Zielsymbol) wird direkt auf das Verlinkungs-Ziel mit dem [9] Ankersymbol gezogen.
[10] Die Verlinkung zu einem Ziel in der aktuellen Seite ist fertig gestellt und wird durch die Linkformatierung angezeigt.

Verlinkungs-Ziel (Anker) erstellen
Wird ein Hyperlink mit Verweis auf eine Datei (Dokument) erstellt, wird standardmäßig - ohne zusätzliche Angaben - zum Beginn der Datei verlinkt. Soll jedoch zu einer bestimmten Stelle in einem Dokument gesprungen werden, muss ein Verlinkungs-Ziel (Anker) vorhanden sein.
In Dreamweaver wird das Verlinkungs-Ziel (Anker) folgendermaßen erstellt:
[1] Der Cursor muß sich an der Stelle befinden, an der das Ziel eingefügt werden soll.
[2] Menü: "Einfügen" -> Benannter Ankerpunkt;
[3] Tastenkombination: "STRG + ALT + A";
[4] Bedienfeld "Einfügen": Kategorie "Allgemein" -> [5] Symbol für "Benannter Anker" einfügen;
[6] Anschließend wird das Dialogfenster "Benannter Anker" geöffnet, in das der Anker-Name (zB Ziel1) einzugeben ist.
[7)] Der Anker wird jetzt in der Entwurfsansicht als Symbol angezeigt.

[8] Gleichzeitig wird der Quellcode durch den Tag für den Anker (Verlinkungs-Ziel) ergänzt (zB <a name="Ziel1"></a>).

Imagemaps - Hotspots
Bevor Hotspots einem Bild in der Webseite zugewiesen werden, sollen - nach [1] Auswahl des Bildes - Im [2] Eigenschaftsinspektor folgende Vorbereitungen durchgeführt werden:
[3] Dem Bild eine eindeutige ID zuweisen (zB ID "roemer");
[4] Der Imagemap einen eindeutigen Namen zuweisen (zB Map "mroemer")

Danach wird ein Hotspot folgendermaßen erzeugt:
[5] Einen der drei Hotspot-Typen (geometrische Form) auswählen: zB "Kreis";
[6] Den Hotspot bzw. Image-Map-Bereich mit dem Zeigegerät erstellen und eine [7] Alternativbezeichnung für den Hotspot eintragen (zB Alt. "Zur Hochzeit")
[8] Dem ausgewählten Hotspots kann ein [9] Hyperlink zugewiesen werden [zB "roemer.html")

Imagemaps
sind [1] Bilder, die bestimmte Bereiche, sogenannte [2] Hotspots, enthalten. Diesen Bereichen können bestimmte Aktionen wie zB [3] Hyperlinks zugewiesen werden. Wird auf einen Hotspot im Bild geklickt, wird beispielsweise der zugehörige Hyperlink im Webbrowser geöffnet. Hotspots sind im Webbrowser nicht sichtbar. Sie sind durch das Handsymbol erkennbar, wenn sich der Cursor innerhalb des Hotspots befindet.

Folgende Typen von Hotspots (Imagemap-Bereiche) stehen zur Verfügung:
[4] Rechteck;
[5] Kreis;
[6] Vieleck;
In Dreamweaver kann nach der Auswahl eines Bildes der Typ des Hotspots im [7] Eigenschaftsinspektor ausgewählt werden.

Im Quellcode werden Imagemaps mit dem Tag <map> gekennzeichnet.

Layer (Ebenen)
Layer sind "Ebenen", die beliebige Inhalte enthalten können, und die durch DIV-Tags mit besonderen Attributen definiert werden. In Dreamweaver heißen die Layoutobjekte AP Div (AP-Elemente) und werden über den Menüpunkt [1] -> Einfügen -> Layoutobjekte -> AP Div eingefügt.
In der Entwurfsansicht werden die [2] AP-Elemente durch eine Umrahmung, welche links oben eine Griffmarke enthält, kenntlich gemacht.
Layer benötigen eindeutige Namen (id), wobei Dreamweaver automatisch einen [3] Namensvorschlag (zB apDiv1) vergibt. Dieser Name (Layer-ID) wird in der Tag-Leiste und im Eigenschaftsinspektor unter [3] "CSS-P-Element" angezeigt.
Bei der Layer-Definition legt Dreamweaver vorläufig einige Attribute, die natürlich verändert werden können, fest:
[4] L: Abstand vom linken Rand: nicht festgelegt (bedeutet praktisch: "kein Abstand):
[5] O: Abstand vom oberen Rand: nicht festgelegt (bedeutet praktisch: "kein Abstand);
[6] B 200px: Vorgabe-Breite der Ebene in Pixel;
[7] H 115px: Vorgabe-Höhe der Ebene in Pixel;
[8] Z-Index: 1 -> bei mehreren Ebenen ist dies die unterste Ebene;
[9] Sichtb. default: Sichtbarkeit der Ebene (standardmäßig sichtbar);

Die [10] Position (Abstand vom linken und oberen Rand) der Ebene kann durch Ziehen mit dem Zeigegerät oder durch Eingabe von Zahlenwerten in die Felder [11] "L" und [12] "O" geändert werden.
Die Ebenennamen mit Angabe der Sichtbarkeit und des Z-Index sind auch im Fenster [13] "AP-Elemente" zu finden.
Die Ebeneneigenschaften werden durch CSS-Eingaben im Head-Teil festgelegt.

Beispiel für eine Ebene (hier noch ohne Inhalt):
<html>
<head>
..........
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 45px;
top: 44px;
}
-->
</style>
</head>

<body>
<div id="apDiv1"></div>
</body>
</html>

Video als ActiveX einbetten
Wenn in Dreamweaver Videos als [1] ActivX-Objekte in den HTML-Code integriert werden, müssen mindestens folgende Informationen bekannt sein: Die Klassen-ID des Players, der im Webbrowser das Video abspielen soll und die Frame-Größe des Videos. ActiveX-Objekte sind vor allem für den Internet-Explorer unter Windows vorgesehen, obwohl auch einige andere Webbrowser damit umgehen können.

Medien als ActiveX-Objekte werden in der Entwurfsansicht folgendermaßen integriert:
[2] Menüpunkt: Einfügen -> Medien -> ActiveX auswählen;
[3] Im Fenster "Eingabehilfen-Attribute für Objekt-Tag" kann zB ein Titel eingegeben werden;
[4] Symbol für ActivX: wird im Dokumentfenster angezeigt
[5] Im Eigenschaftsinspektor eingeben oder auswählen:

[6] Qu(= Quelle): Video-Datei auswählen;
[7] Klassen-ID: Class-ID des geeigneten Videoplayers für den Webbrowser auswählen oder, falls nicht vorgegeben, manuell eintragen; Klassen-IDs sind weltweit gleich.
[8] B (= Breite): Framebreite in Pixel des Videos eingeben;
[9] H (= Höhe): Framehöhe in Pixel des Videos eingeben;
[10] Einbetten: wenn aktiviert (Häkchen), wird auch der Tag <embed> verschachtelt innerhalb des Tags <object> erstellt;
[11] Parameter... : Hier können weitere Paramater für Verhalten und Anzeige des Videos eingegeben werden. Deren Bezeichnungen und Werte müssen aber bekannt sein.

Beispiel für Einbetten eines Videos:
[6] Qu: kunst1.wmv (WMV-Videodatei als Quelle)
[7] Klassen-ID: CLSID: 22D6F312-B0F6-11D0-94AB-0080C74C7E95 für WindowsMediaPlayer 6.4 oder
Klassen-ID: CLSID: 6BF52A52-394A-11d3-B153-00C04F79FAA6 für WindowsMediaPlayer 7 und höher>
[8] B: 176
[9] H: 144
[10] Einbetten: Häkchen setzen
Folgender Quellcode wird zB erzeugt:
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="176" height="180" title="Kunst 1">
<embed src="kunst1.wmv" width="176" height="180"></embed>
</object>
Video Im Webbrowser testen und geblockte Inhalte zulassen!

Minimale Site-Definitionen
In Dreamweaver wird eine Website bzw. Site über den Menüpunkt "Site" --> "Neue Site..." erstellt oder über "Sites verwalten..." bearbeitet.
Folgende Angaben sind für die Erstellung einer Site mit Dreamweaver das absolute Minimum:
[1] Site-Name - Dient nur zur Information und Verwaltung;
[2] Lokaler Stammordner - In diesem Ordner und seinen Unterordnern müssen alle Dateien für die Website vorhanden sein. Hier sollen auch keine Dateien und Ordner gespeichert werden, die für die Website nicht benötigt werden (Datenmüll);
[3] Standard-Bilderordner - Ablage von Bildern und Grafiken in einem eigenen Unterordner, der meistens mit "images" (oder "bilder") bezeichnet wird und ein Unterordner des Stammordners sein muss.

Bei der Erstellung einer dynamischen Website sind weitere Angaben erforderlich: Art des Zugriff (zB FTP), Testserver (zB PHP MySQL), HTTP-Adresse, weitere Angaben von Adressen (URL) usw.

Spry-Widgets: Grundlagen
Das [1] Spry-Framework besteht aus einer [2] CSS-Bibliothek und einer [3] JavaScript-Bibliothek.
Im Rahmen des Spry-Frameworks können [4] Spry-Widgets mit interaktiven Seitenelementen (zB Menüs) auch in einfachen HTML-Seiten erstellt werden. Ein Spry-Widget besteht aus folgenden Elementen:
[5] Widget-Struktur mit HTML-Code;
[6] Widget-Verhalten mit JavaScript-Code;
[7] Widget-Stil mit CSS-Code;
In Dreamweaver werden Spry-Widgets im Menü [8] "Einfügen" -> Spry oder im Fenster [9] "Einfügen" -> "Spry" aus den vorhandenen Icons ausgewählt und eingefügt.

Beispiele für Spry-Widgets:
[10] Spry-Menüleiste für horizontale oder vertikale Menüs;
[11] Spry-Paletten mit Registerkarten;
[12] Spry-Akkordeon mit Titelleisten und zugehörigen Inhalten;

Tabelleneigenschaften festlegen
Wenn in Dreamweaver eine der möglchen Anweisungen zur Erstellung einer neuen Tabelle gegeben wurde, erscheint das Dialogfenster [1] "Tabelle", in dem die Eigenschaften der neuen Tabelle festgelegt werden können.
Diese betreffen u.a. die [2] Tabellengröße:
[3] Zeilen (<tr>);
[4] Spalten (<td> oder <th>);
[5] Tabellenbreite (width): Diese kann entweder in [6] Prozent oder in Pixel angegeben werden;
Für die Gestaltung der Tabelle können folgende Eigenschaften angegeben werden:
[7] Randstärke in Pixel (border): Breite des Tabellenrandes;
[8] Zellauffüllung in Pixel (cellpadding): Abstand des Zellinhalts vom Zellenrand;
[9] Zellabstand in Pixel (cellspacing): Abstand der Zellen untereinander;
[10] Zusätzlich kann festgelegt werden, ob Kopfzeilen (<th>, dunkelgraue Felder) eingefügt werden sollen. Dabei gibt es die Möglichkeit zu bestimmen, dass keine [10A] Kopfzeilen, [10B] Kopfzeilen links, [10C] Koopfzeilen oben ("Spaltenüberschriften") oder [10D] Kopfzeilen links und oben ausgeführt werden sollen.

[11] Beispiel: folgende Angaben ergeben folgende Tabelle (siehe Grafik):
3 Zeilen, 4 Spalten, Tabellenbreite: 50% (Tabellenbreite ist variabel, abhängig von der aktuellen Fenstergröße), Randstärke: 1, Zelluaffüllung 3, Zellabstand: 2

Tabellen erstellen - Grundlagen
In Dreamweaver werden Tabellen folgendermaßen erstellt:
[1] Menü: "Einfügen" -> "Tabelle"
[2] Tastenkombination: "STRG + ALT + T"
[3] Bedienfeld "Einfügen": [3A] Kategorie "Allgemein" oder [3B] Kategorie "Layout" -> [4] Symbol für "Tabelle" einfügen

Tabellen Breite
In Dreamweaver kann die Tabellenbreite bei der [1] Erstellung eingegeben oder nachträglich bei der Änderung der Breite im [2] Eigenschaften-Inspektor geändert werden. In allen Fällen wird im Quellcode das Attribut "width" für die Tabellenbreite ergänzt oder geändert
Die Breite von Tabellen kann in [3] Prozent oder in [4] Pixel erfolgen.
[3] Bei der Angabe in Prozent richtet sich die Tabellenbreite nach der verfügbaren Fenstergröße im Browser (zB B 80 % -> width="80%" -> 80% der Fensterbreite).
[4] Bei der Angabe in Pixel (zB 200 Pixel -> width="200") bleibt die Tabellenbreite immer gleich, sofern der Tabelleninhalt (zB Bilder) nicht eine größere Tabellenbreite erzwingt.

Tabellen - Zeilenumbruch
Text wird standardmäßig der [1] Zellengröße einer Tabelle angepasst. Notfalls werden [2] Zeilenumbrüche eingefügt, sodass der Textinhalt, je nach Fenstergröße, mehrzeilig dargestellt wird. Dieses Verhalten zeigt auch Dreamweaver in der Entwurfsansicht.
Die [3] einzeilige Darstellung des Textes kann jedoch erzwungen werden.

In Dreamweaver kann dieses Verhalten im [4] Eigenschaftsinspektor folgendermaßen gesteuert werden:
Die entsprechende [5] Zelle mit dem Textinhalt markieren;
Standardmäßig ist die Eigenschaft "Kein Umbruch" im Eigenschaftsinspektor ]6} nicht gesetzt: Der Text wird durch Zeilenumbrüche an die Zellengröße angepasst.
Die Eigenschaft "Kein Umbruch" im Eigenschaftsinspektor [7] setzen bzw. anklicken: Der Text wird nur [3] einzeilig dargestellt.

Anmerkung:
Im Quellcode wird die Eigenschaft "bowrap" eingefügt:
<td nowrap="nowrap">

Tabellen - Standardeinstellungen
Werden in Dreamweaver bei der Erstellung von Tabellen keine Eigenschaften - ausgenommen Anzahl der Zeilen und Spalten - eingegeben (<table> ...), werden die Vorgaben bzw. Standardeinstellungen verwendet. Diese können, je nach Webbrowser, variieren.
In Dreamweaver werden in der [1] Entwurfsansicht und im [2] Eigenschafteninspektor folgende Standardeinstellungen für die Tabelle [3] (<table>) angezeigt
[4] Ausrichten: "Standard" (d.h. "Linksbündig");
[5] B (Tabellenbreite): keine Angaben -> Dreamweaver fügt automatisch in jede Zelle ein geschütztes Lehrzeichen ( ) hinzu, sodass die Tabelle mit [6] minimaler Breite noch sichtbar ist.
[7] Werden die Zellen mit Inhalt gefüllt (zB mit Text), passen sich sowohl Tabellenbreite als auch Spaltenbreite an den Zellinhalt an.

[8] Zellauffüllung: keine Angaben -> Dreamweaver zeigt einen Abstand zwischen Zellinhalt und Zellrand von 1 Pixel (entspricht: cellpadding = "1") an.
[9] Zellraum: keine Angaben -> Dreamweaver zeigt einen Abstand zwischen den Zellen von 2 Pixel (entspricht: cellspacing = "2") an.
[10] Rahmen: keine Angaben -> Dreamweaver zeigt keinen Rahmen (entspricht: border = "0") an. Um die Zellgrenzen jedoch in der Entwurfsansicht sichtbar zu machen, werden strichlierte Linien als Arbeitshilfe angezeigt.

Tabellen - Kopfzeilen
In Dreamweaver sind [1] Zellen standardmäßig links ausgerichtet.
Im Tagselektor wird der zugehörige [2] Tag <td> angezeigt.
Werden Zellen als Kopfzeilen definiert, wird der in ihnen enthaltene Text zentriert und fett dargestellt.
Nach [3] Auswahl der entsprechenden Zellen können diese mit Hilfe des [4] Eigenschaftsinspektors in [5] Kopfzeilen bzw. Kopfzellen umgewandelt werden.
Durch Klicken auf die das Kästchen neben [6] "Kopfzeile" werden die Texte in den ausgewählten Zellen zu [7] Kopfzeilen und damit fett und zentriert angezeigt.
Im Tagselektor wird der geändert Tag für die [8] Kopfzeile <th> angezeigt.

Zellen teilen
In Dreamweaver kann eine Zelle folgendermaßen geteilt werden:
[1] Zu teilende Zelle auswählen, anschließend eine der folgenden Möglichkeiten auswählen:
[2] Menü: Modifizieren -> Tabelle -> Zellen teilen;
[3] Rechte Maustaste: Tabelle -> Zellen verbinden;
[4] Tastenkombination: "STRG + ALT + SHIFT + M";
[5] Eigenschaftsinsektor: Symbol "Zelle teilen" auswählen;
Nun werden zwei Teilungsmöglichkeiten angeboten:
[6] Zelle teilen in zwei oder mehrere Zeilen: [7] Anzahl der Zeilen eingeben, oder
[8] Zelle teilen in zwei oder mehrere Spalten: [9] Anzahl der Spalten eingeben;


[10] Beispiel 1: Zelle in 2 Reihen teilen -> "Zelle teilen - Zeilen" auswählen -> Anzahl der Zeilen [2] eingeben;
[11] Beispiel 2: Zelle in 3 Spalten teilen -> "Zelle teilen - Spalten" auswählen -> Anzahl der Spalten [3] eingeben;

Zellen verbinden
In Dreamweaver können zwei oder mehrere nebeneinander liegende Zellen folgendermaßen verbunden werden:
[1] Zu verbindende Zellen auswählen, anschließend eine der folgenden Möglichkeiten auswählen:
[2] Menü: Modifizieren -> Tabelle -> Zellen verbinden;
[3] Rechte Maustaste: Tabelle -> Zellen verbinden;
[4] Tastenkombination: "STRG + ALT + SHIFT + M";
[5] Eigenschaftsinsektor: Symbol "Zelle verbinden" auswählen;


[6] Beispiel 1: Zellen 1-1 und 1-2 verbinden -> verbundene Zellen in Reihe (colspan = "2");
[7] Beispiel 2: Zellen 2-1, 2-2 und 2-3 verbinden -> verbundene Zellen in Spalte (rowspan = "3");

Zellen - Hintergrundfarbe
Der Hintergrund von Zellen in Tabellen ist standardmäßig [1] transparent. Wenn daher keine Eigenschaften in den Beginntags der Tabellen, Zeilen oder Zellen eingegeben werden, wird die Hintergrundfarbe der HTML-Seite (<body>) sichtbar.
[2] In Dreamweaver kann die Hintergrundfarbe einer Zelle im Eigenschaftsinspektor geändert werden. Die Farbeigenschaften für den Hintergrund können durch das Klicken in die entsprechende Zelle angezeigt werden. Ist im Feld kein Eintrag vorhanden, hat die Zelle auch keine Hintergrundfarbe.
Die Hintergrundfarbe kann durch Klicken auf das [3] Farbfeld (neben "HgF") geändert werden.
Wird auf das Farbfeld gecklickt, kann mit dem [4] Farbwähler mit Hilfe der Pipette eine Hintergrundfarbe ausgewählt werden.
Die Hintergrundfarbe kann auch direkt durch Eintragen des [5] hexadezimalen Farbcodes in das Eingabefeld im Eigenschaftsfenster geändert werden.
[6] Die ausgewählte Zelle zeigt in der Entwurfsansicht nun die neue Hintergrundfarbe an.

Soll die Hintergrundfarbe gelöscht werden, ist dies direkt im [5] Eingabefeld durch Löschen des hexadezimalen Farbcodes oder durch Anklicken des Symbols [7] "Quadrat mit der roten Diagonale" möglich.

[8] Beispiel:
Durch Auswahl der Farbe "#33F99" (Grünton), wird im Quellcode die Eigenschaft "bgcolor" mit dem zugewiesenen Farbcode eingetragen (zB <td bgcolor="#33FF99">).

Spaltenbreite in %
Die Zellen- bzw. Spaltenbreite kann ebenso wie die Tabellenbreite in Prozent oder in Pixel angegeben werden. Die Zellenbreiten werden im [1] Eigenschafteninspektor nach Markierung der entsprechenden Zelle [2](<td>) im Feld [3] "B" eingetragen (zB 25%).
Wird die Zellenbreite (= Spaltenbreite) in [4] Prozent angegeben, sind die tatsächlichen Breiten abhängig von der [5] Fensterbreite, in der die Tabelle angezeigt wird. In der Entwurfsansicht von Dreamweaver wird sowohl die Spaltenbreite in [6] Prozent als auch für den Zelleninhalt die momentan verfügbare [7] Breite in Pixel angezeigt.
Wenn für eine Spalte keine Breite angegeben wird, wird für diese Spalte die [8] Restbreite vom Browser berechnet. Werden für [9] jede Spalte Breiten in Prozent eingegeben, soll die Summe aller Breiten 100% ergeben.
Bei einer [10] Verringerung der Tabellenbreite (zB 70% der Fensterbreite) werden natürlich auch die Spaltenbreiten proportional kleiner.
[11] Die minimalen Spaltenbreiten ergeben sich aus dem Zelleninhalt. Ist der Zelleninhalt (zB Bild, Text) breiter als die angegebene Spaltenbreite wird die Zellenbreite automatisch angepasst, d.h. vergrößert.


[12] Beispiel 1: Tabellenbreite 100%: 3 Spaltenbreiten je 25%, Spaltenbreite der Spalte 3 wird vom Browser berechnet;
[13] Beispiel 2: Tabellenbreite 70%: 4 Spaltenbreiten je 25% (Summe = 100%) -> da die Tabellenbreite nur 70% der Fensterbreite beträgt, beträgt die Spaltenbreit nur 17,5% der Fensterbreite;
[14] Beispiel 3: Tabellenbreite 100%: bei großen Fensterbreiten werden die Spaltenbreiten in den vorgegebenen Prozentbreiten (15%, 40%, 30%, 15%) angezeigt. [15] Bei kleinen Fensterbreiten kann die Tabellenbreite in diesem Beispiel nur auf minimal 141 Pixel reduziert werden, da der Text der Zellinhalte sonst nicht angezeigt werden könnte. Die angegebenen Prozentbreiten können daher bei zu kleiner Tabellenbreite nicht eingehalten werden.