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;

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

Ä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

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.

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.

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.

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 -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

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"

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;

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

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, 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.

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.

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!

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;

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

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.

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

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-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.

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.

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