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