6 Ãœberschriften
In HTML gibt es sechs vordefinierte Absatzformate für Überschriften.
In Dreamweaver können diese Formate in der Entwurfsansicht, nach dem Markieren des Textes [1] für die Überschrift, folgendermaßen erstellt werden:
[2] Bereich "Eigenschaften": Auswahl aus den Ãœberschriften 1 bis 6 aus "Format";
[3] Menü "Text" oder (CS4) "Formatieren" -> "Absatzformat" -> Überschrift 1 bis Überschrift 6;
[4] Tastenkombinationen (Shortcuts): "STRG + 1" (für Überschrift 1 ) bis "STRG + 6" (für Überschrift 6 );

Gleichzeitig werden in der Code-Ansicht die entsprechenden HTML-Tags erzeugt:
<h1>Ãœberschrift 1</h1>
<h2>Ãœberschrift 2</h2>
<h3>Ãœberschrift 3</h3>
<h4>Ãœberschrift 4</h4>
<h5>Ãœberschrift 5</h5>
<h6>Ãœberschrift 6</h6>

Verschachtelte Listen
Sowohl ungeordnete als auch geordnete Listen können verschachtelt werden. Dies wird optisch bzw. standardmäßig [1] durch Einzüge verdeutlicht. Die Verschachtelung und Hierarchie der Listen ist auch im [2] TAG-Selektor von Dreamweaver erkennbar.

In Dreamweaver können geordnete oder ungeordnete Listen in der Entwurfsansicht so erzeugt werden:
[3] Bereich "Eigenschaften" -> Symbol "Geordnete Listen" oder "Ungeordnete Listen" auswählen;
[4] Menü (CS4) "Einfügen"-> "HTML" -> "Textobjekte" -> "Geordnete Liste" oder "Ungeordnete Listen" auswählen;

Die Verschachtelung bzw. die Einzüge können bei Erstellung der Listen als auch nachträglich erzeugt werden. Einzüge können so erzeugt werden:
[5] Bereich "Eigenschaften" -> Symbol "Texteinzug" auswählen;
[6] Menü "Formatieren" -> "Einzug" auswählen;
[7] Taste "TAB" (Tabulator, Doppelpfeile) oder Tastenkombination "STRG + ALT + ä" [7];

Neagtiveinzüge können so erzeugt werden:
[8] Bereich "Eigenschaften" -> Symbol "Text-Negativeinzug" auswählen;
[9] Menü "Formatieren" -> "Negativeinzug" auswählen;
[10] Taste "BACKSPACE" oder Tastenkombination "STRG + ALT + ö" [10];

Gleichzeitig werden in der Code-Ansicht die entsprechenden HTML-Tags erzeugt (Beispiel):
<ol>
<li>CSS-Regeln</li>
<li>Selektoren</li>
<li>Attributselektoren
<ul>
<li>ID-Selektor</li>
<li>Klassenselektor</li>
<li>Typselektor</li>
</ul>
<li>Pseudoklassen</li>
<li>Pseudoelemente</li>
</ol>

Nummerierte (geordnete) Listen
Der Beginn von [1] nummerierten Listen (geordneten Listen) wird in HTML durch den [2] Tag <ol> gekennzeichnet. Einzelne Listenpunkte werden durch den [3] Tag <li> zwischen <ol> und </ol> gekennzeichnet.

In Dreamweaver können geordnete Listen in der Entwurfsansicht so erzeugt werden:
[4] Bereich "Eigenschaften" -> Symbol "geordnete Listen" auswählen;
[5] Menü (CS4) "Einfügen" -> "HTML" -> "Textobjekte" -> "Geordnete Liste": erzeugt Listen mit fortlaufend nummerierten Listenelementen (<ol><li></li></ol>);
[6] Menü (CS4) "Einfügen" -> "HTML" -> "Textobjekte" -> "Listenelement": erzeugt einzelne Listenelemente (<li></li>), die passend nummeriert sind.
Zusätzliche Listenpunkte innerhalb einer Liste können auch durch die Taste "ENTER" erzeugt werden.

Gleichzeitig werden in der Code-Ansicht die entsprechenden HTML-Tags erzeugt.
Beispiel:
<ol>
<li>Aufstehen</li>
<li>Duschen</li>
<li>Zähne putzen</li>
<li>Waschen</li>
<li>Anziehen</li>
<li>Ausziehen</li>
</ol>

Listeneigenschaften ändern
Eigenschaften von Listen können durch Eingabe von Attributen im Beginntag geändert oder durch Änderung von Tags (zB von <ol> in <ul>) zur Gänze umgewandelt werden.
In Dreamweaver können Änderungen von Listen [1] am leichtesten unter dem Menüpunkt "Formatieren" -> "Liste" [2] oder auch mit Hilfe der Symbole für "geordnete" und "ungeordnete" Listen im Bereich "Eigenschaften" (Eigenschaftsinspektor) durchgeführt werden.
Vollständige Kontrolle über Darstellung, Art und Eigenschaften von Listen (zB einer nummerierten Liste [1]) wird in der Dialogbox "Listeneigenschaften" angeboten.
Hier gibt es, auszugsweise, folgende Möglichkeiten:
[3] "Listentyp: Nummerierte Liste", "Stil": auswählen (zB Große römische Zahlen) -> Liste wird vollständig neu nummeriert [4];
[5] Nur ausgewählte Listenelemente ändern: "Neuer Stil:" auswählen (zB Großbuchstaben) -> nur ausgewählte Listenelemente werden geändert;
[6] Liste neu nummerieren: "Zähler starten:" neue Startnummer eingeben (zB 5) -> Liste wird, beginnend mit "5", neu nummeriert;
[7] Nur ausgewählte Listenelemente neu nummerieren: "Zähler zurücksetzen auf´:" neue Startnummer eingeben (zB 8) -> Liste wird ab dem ersten ausgewählten Listenelement neu nummeriert;
[8] Typ der Liste ändern: "Listentyp:" Neuen Listentyp auswähleb (zB Aufzähluns-Liste) -> zB nummerierte Liste wird zur ungeordneten Liste;
[9] Stil des ausgewählten Listenelements ändern: "Neuer Stil:" zB Stil "Quadrat" für Aufzählungsliste auswählen -> Listenpunkt ändert sich von rund auf quadratisch;

Bei Änderung der Listeneigenschaften werden beispielsweise folgende Attribute in Tags eingetragen:
[10] Nummerierte Liste mit großen römischen Zahlen: <ol type="I">;
[11] Mit neuer Nummer starten: <ol start="5">;
[12] Quadratischer Listenpunkt in Aufzählungsliste: <li type="square">;

Aufzählungslisten (ungeordnete Listen)
Der Beginn von Aufzählungslisten (ungeordnete Listen) [1] wird in HTML durch den [2] Tag <ul> gekennzeichnet. Einzelne Listenpunkte bzw. Aufzählungen werden durch den [3] Tag <li> zwischen <ul> und </ul> gekennzeichnet.

In Dreamweaver können Aufzählungslisten in der Entwurfsansicht so erzeugt werden:
[4] Bereich "Eigenschaften" -> Symbol "ungeordnete Listen" auswählen;
[5] Menü (CS4) "Einfügen" -> "HTML" -> "Textobjekte" -> "Ungeordnete Liste": erzeugt Aufzählungsliste mit Listenpunkt (<ul><li></li></ul>);
[6] Menü (CS4) "Einfügen" -> "HTML" -> "Textobjekte" -> "Listenelement": erzeugt einzelnen Listenpunkt (<li></li>).
Zusätzliche Listenpunkte innerhalb einer Liste können auch durch die Taste "ENTER" erzeugt werden.

Gleichzeitig werden in der Code-Ansicht die entsprechenden HTML-Tags erzeugt:
Beispiel:
ul>
<li>HTML</li>
<li>XML</li>
<li>CSS</li>
<li>XSLT</li>
<li>PHP</li>
<li>JavaScript</li>
</ul>

Absätze und Zeilenumbrüche
Absätze werden in HTML durch den Tag <p> [1] gekennzeichnet. Der Webbrowser verwendet zwischen den Absätzen vordefinierte Abstände [2] Ein Zeilenumbruch innerhalb eines Absatzes kann durch den Tag <br> [3] ausgeführt werden.

In Dreamweaver können neue Absätze in der Entwurfsansicht so erzeugt werden:
[4] Bereich "Eigenschaften" -> "Format": Format Absatz auswählen;
[5] Drücken der "ENTER-Taste";
[6] CS4: Menü "Einfügen" -> "HTML" -> "Textobjekte" -> "Absatz";

Der Zeilenumbruch kann in der Entwurfsansicht so erzeugt werden:
[7] Drücken der Tastenkombination "SHIFT + ENTER";

Gleichzeitig werden in der Code-Ansicht die entsprechenden HTML-Tags erzeugt:
<p>Dies ist ein Absatz, dies ist ein Absatz, dies ist ein Absatz, dies ist ein Absatz, dies ist ein Absatz, dies ist ein Absatz, dies ist ein Absatz...</p>
<p>Dies ist ein neuer Absatz, dies ist ein neuer Absatz, dies ist ein neuer Absatz, dies ist ein neuer Absatz.<br />
Dies ist ein Zeilenumbruch innerhalb eines Absatzes.<br />
Dies ist ein neuer Absatz.
</p>

Tag-Selektor: Tag entfernen
Im [1] Tag-Selektor von Dreamweaver können [2] Tags (zB <strong>...</strong>) und damit die zugewiesenen Eigenschaften entfernt werden. Das Ergebnis wird sowohl in der [3] Entwurfsansicht als auch in der [4] Code-Ansicht sofort angezeigt. Damit die richtige HTML-Struktur nicht beschädigt wird, können manche Tags und deren Inhalte so jedoch nicht entfernt werden (zB <tr>...</tr>)
Tags im Tag-Selektor werden folgendermaßen entfernt:
[5] Tag im Tag-Selektor anklicken -> Tag und deren Inhalte bzw. Eigenschaften werden sowohl in der Code- als auch in der Entwurfsansicht [6] ausgewählt
Rechte Maustaste über dem ausgewählten Tag anklicken -> aus dem Kontextmenü den Menüpunkt [7] "Tag entfernen" auswählen
[8] Der Tag wird aus dem Tagselektor und aus dem Dokument entfernt.

Beispiel:
[3] Der Tag mit der CSS-Eigenschaft <span.titel2> ist angeklickt: In der Code-Ansicht und in der Entwurfsansicht ist der Tag <span> mit der CSS-Klasse <class="titel2"> samt Taginhalt zwischen Beginntag und Endtag ausgewählt. Nach Anklicken des Menüpunkts "Tag entfernen" sind alle ausgewählten Objekte entfernt bzw. gelöscht.

Tag-Selektor: Hierarchie, Auswahl
Der [1] Tag-Selektor von Dreamweaver zeigt den [2] aktuellen Tag und alle übergeordneten Tags an (zB Tag einer Tabellenzelle <td> bis zum höchsten Tag <body>). Welche Tags angezeigt werden, hängt von der Position des Cursors innerhalb des Tags ab.
Wenn ein Tag im [3] Tag-Selektor angeklickt wird, wird der Inhalt des aktuellen Tags und aller untergeordneten Tags sowohl in der [4] Entwurfs-Ansicht als auch
[9] Bei "Conainer tags" werden nur die Tags ohne zugehörigen Text entfernt, bei "Empty tags" werden auch die in den Attributen enthaltenen Objekte entfernt (zB <img .... />). Siehe auch -> Tags

Beispiele:
[2] Cursor befindet sich innerhalb des <span>-Tags: Die übergeordneten Tags <p>, <td>, <tr>, <table> und <body> werden ebenfalls angezeigt.
[3] Der Tag <tr> ist angeklickt: Der gesamteInhalt der Tags <tr> bis zum Tag <span> ist ausgewählt.

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.

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

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

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.

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

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

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;

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.

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!

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>

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.

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

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