Text: Vertikaler Text
Mit bestimmten Attributen des Tags Text (text) <text>...</ text> kann in SVG [1] Text vertikal ausgegeben werden.
[1] Die vertikale Ausrichtung des Textes wird durch das Attribut writing-mode bestimmt:
[1A] writing-mode="tb" oder [1B] style="writing-mode: tb;" Einige Browser akzeptieren die Anweisung nur in Verbindung mit Attribut style.
[2] Zusätzlich kann auch die Ausrichtung (Orientierung) der Zeichen bestimmt werden:
glyph-orientation-vertical:="deg" oder style="lyph-orientation-vertical: deg;"
Für deg werden ganze Zahlen in Grad für die Orientierung der Zeichen erwartet:
[2A] glyph-orientation-vertical:="0" Die Zeichen sind horizontal ausgerichtet
[2B] glyph-orientation-vertical:="180" Die Zeichen sind horizontal ausgerichtet und stehen auf dem Kopf
[2C] glyph-orientation-vertical:="270" Die Zeichen sind vertikal und spiegelverkehrt ausgerichtet.
Das Attribut glyph-orientation-vertical ist nur in Verbindung mit dem Attribut writing-mode sinnvoll. Manche Browser ignorieren es vollkommen.
Siehe auch -> Text: Grundlagen!

Beispiele:
<svg width="300" height="400">
[3]<text x="20" y="20" font-size="24px" writing-mode="tb">Text vertikal</text>
<!-- Beispiel 3: Vertikale Textausrichtung Standard-->
[4] <text x="50" y="20" font-size="24px" style="writing-mode: tb;">Text vertikal</text>
<!-- Beispiel 4: Vertikale Textausrichtung Standard, in Verbindung mit Attribut style -->
[5] <text x="80" y="20" font-size="24px" writing-mode="tb" glyph-orientation-vertical="0">Text vertikal</text>
<!-- Beispiel 5: Vertikale Textausrichtung, Zeichenorientierung waagrecht -->
[6] <text x="110" y="20" font-size="24px" style="writing-mode: tb; glyph-orientation-vertical: 0;">Text vertikal</text>
<!-- Beispiel 6: Vertikale Textausrichtung, Zeichenorientierung waagrecht , in Verbindung mit Attribut style -->
[7] <text x="140" y="20" font-size="24px" writing-mode="tb" glyph-orientation-vertical="180">Text vertikal</text>
<!-- Beispiel 7: Vertikale Textausrichtung, Zeichen stehen auf dem Kopf -->
[8] <text x="170" y="20" font-size="24px" style="writing-mode: tb; glyph-orientation-vertical: 180;">Text vertikal</text>
<!-- Beispiel 7: Vertikale Textausrichtung, Zeichen stehen auf dem Kopf, in Verbindung mit Attribut style -->
[9] <text x="200" y="20" font-size="24px" writing-mode="tb" glyph-orientation-vertical="270">Text vertikal</text>
<!-- Beispiel 9: Vertikale Textausrichtung, Zeichen spiegelverkehrt -->
[10] <text x="230" y="20" font-size="24px" style="writing-mode: tb; glyph-orientation-vertical: 270;">Text vertikal</text>
<!-- Beispiel 9: Vertikale Textausrichtung, Zeichen spiegelverkehrt, in Verbindung mit Attribut style --> </svg>

Text - <text>...</ text>: Grundlagen
Mit dem Tag Text (text) <text>...</ text> kann in SVG [1] Text gezeichnet werden. Anzugeben ist zumindest der Startpunkt des Textes und der Textinhalt.
<text x="x1" y="y1">Textinhalt</text>
Der Startpunkt wird durch die X-Koordinate und die Y-Koordinate festgelegt.

Beispiele:<svg width="400" height="500">
[1]<text x="10" y="20">Text</text>
<!-- Beispiel 1: Minimale Angaben für einen Text mit Standardbeschriftung und Standardfarbe-->
[2] <text x="10" y="40" fill="green"> Text: grün</text>
<!-- Beispiel 2: Text mit grüner Füllung -->
[3] <text x="10" y="70" fill="blue" font-size="24px">Text: blau, 24 Pixel</text>
<!-- Beispiel 3: Text mit blauer Füllung, 24 Pixel groß-->
[4] <text x="10" y="100" fill="none" font-size="24px" stroke="#000000">Text: ohne Füllung, nur Umriss</text>
<!-- Beispiel 4: Text ohne Füllung, 24 Pixel groß, mit Umriss in Standardbreite und Standardfarbe-->
[5] <text x="10" y="150" fill="yellow" font-size="44px" stroke="red" stroke-width="2">Text: Umriss 2 Pixel</text>
<!-- Beispiel 5: Text mit gelber Füllung, 44 Pixel groß, mit 2 Pixel breitem roten Umriss--> </svg>

Pfad - <path... />, Ellipsenbogen: A (Elliptical Arc)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. [1] Ellipsenbogen gezeichnet werden. Anzugeben sind für die Ellipse die beiden Radien, die Rotation der X-Achse, welcher Teil und in welche Richtung gezeichnet werden soll, sowie Anfang und Endpunkt der Ellipse.
<path d="Mx1 y1 Arx ry alpha larg-arc-flag sweep-flag x4 y4" />

Im Einzelnen sind folgende Parameter anzugeben:
[2] M oder m: Startpunkt der Ellipse
[3] nach A oder a - Parameter des Ellipsenbogens:
 [3A] rx: Radius der Ellipse auf der X-Achse (zB 120)
 [3B] ry: Radius der Ellipse auf der Y-Achse (zB 80)
 [3C]  [7C] alpha: Rotation der X-Achse der Ellipse: [3C] 0 = keine Rotation;  [7C] Rotation in Grad (zB 90)
 [3D] larg-arc-flag: 0 = kleiner Teil der Ellipse, 1 = großer Teil der Ellipse
 [3E] sweep-flag: 0 = Bogen wird entgegen dem Uhrzeugersinn gezeichnet, 1 = Bogen wird im Uhrzeugersinn gezeichnet
 [3F] x₄ y₄: Absolute bzw. relative Koordinaten des Endpunkts des Ellipsenbogens
[4] Die strichlierten Bögen wären die Ergänzungsbögen zur vollständigen Ellipse
siehe auch -> Pfad - <path... />, Übersicht

Beispiele:
<svg width="400" height="380">
[1]<path d="M80 186 A120 100 0 1 1 260 186" stroke="magenta" stroke-width="4" fill="none"/>
<!-- Beispiel 1: [1] 4 Pixel breiter, magenta Ellipsenbogen wird vom Startpunkt [2] M zum [3F] Endpunkt gezeichnet; [3A] Radius der X-Achse = 120; [3B] Radius der XY-Achse = 100;  [3C] 0 = keine Rotation; [3D] 1 = großer Teil der Ellipse; [3E] 1 = gezeichnet im Uhrzeigersainn, keine Füllung -->
[5] <path d="M100 350 A100 80 90 0 0 260 350" stroke="#00ddb6" stroke-width="6" fill="none"/>
<!-- Beispiel 2: [5] 6 Pixel breiter, blaugrüne Ellipsenbogen wird vom Startpunkt [6] M zum [7F] Endpunkt gezeichnet; [7A] Radius der X-Achse = 100; [7B] Radius der Y-Achse = 80; [7C] 90 = Rotation der X-Achse des Bogens um 90 Grad; [7D] 0 = kleiner Teil der Ellipse (hier die Hälfte); [7E] 0 = gezeichnet entgegen dem Uhrzeigersainn, [8] Füllung: gelb -->
</svg>

Pfad - <path... />, Kubische Bézierkurve: S (Shorthand / Smooth CurveTo)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. verschiedene Bézierkurven gezeichnet werden. Eine [1] Kubische Bézierkurve: kann mit dem Pfad-Kommando [6] S (Shorthand / Smooth CurveTo) weitergeführt werden. Dabei wird als erster Kontrollpunkt der letzte gespiegelte Kontrollpunkt der vorher definierten Bezierkurce verwendet <path d="Mx1 y1 Cx2 y2 x3 y3 x4 y4 Sx5 y5 x6 y6" />

Ergänzend zur Kubischen Bézierkurve sind für die weiterführende kubische Bézierkurve mindestens zwei Punkte anzugeben:
[6A] [6B] S (absolute Koordinaten) oder s (relative Koordinaten) mit Angabe von zwei Punkten: [6A] 1. Punkt nach S (oder s) = weiterer Kontrollpunkt für die weiterführende kubische Bézierkurve, der gleichzeitig ein Punkt der [6C] Tangente zum [6B] Endpunkt der weiterführenden kubischen Bézierkurve ist; erster Kontrollpunkt ist der letzte [6D] gespiegelte Kontrollpunkt der [1] vorherigen Kurve; weitere Kontrollpunkte und Punkte der weiterführenden kubischen Bézierkurve können hinzugefügt werden;
siehe auch -> Pfad - <path... />, Übersicht

Beispiele:
<svg width="470" height="420">
[6] <path d="M10 10 C120 200 210 10 310 50 S329 10 450 50" stroke="magenta" stroke-width="4" fill="none"/>
<!-- Beispiel 1: [1] 4 Pixel breite, magenta Kubische Bézierkurve wird vom Startpunkt M zum Endpunkt gezeichnet; absolute Koordinaten nach S definieren einen weiteren [6A] Kontrollpunkt und den [6B] Endpunkt für die [6] weiterführende Kurve, keine Füllung-->

[7] <path d="M10 300 c50 -110 160 110 300 30 s303 30 150 60" stroke="#00ddb6" stroke-width="6" fill="yellow"/>
<!-- Beispiel 2: [2] 6 Pixel breite, blaugrüne Kubische Bézierkurve wird vom Startpunkt M zum Endpunkt gezeichnet; relative Koordinaten nach s definieren einen weiteren Kontrollpunkt [7A] und den neuen [7B] Endpunkt für die [7] weiterführende Kurve, Füllung: gelb-->
</svg>

Pfad - <path... />, Quadratische Bézierkurve: S (Shorthand / Smooth Quadratic Bézier CurveTo)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. verschiedene Bézierkurven gezeichnet werden. Eine [8] Quadratische Bézierkurve: kann mit dem Pfad-Kommando [9] T (Shorthand / Smooth Quadratic Bézier CurveTo) weitergeführt werden. Dabei wird als Kontrollpunkt der letzte gespiegelte [9A] Kontrollpunkt der vorher definierten Bezierkurce verwendet <path d="Mx1 y1 Qx2 y2 x3 y3 Tx4 y4" />

Ergänzend zur Quadratischen Bézierkurve sind für die weiterführende quadratische Bézierkurve mindestens ein Punkt anzugeben:
[9B] S (absolute Koordinaten) oder s (relative Koordinaten) mit Angabe von einem Punkte nach S (oder s) = [9B] Endpunkt der weiterführenden Quadratischen Bézierkurve; neuer [9A] Kontrollpunkt ist der gespiegelte vorherige Kontrollpunkt, der auch ein Punkt der [9C] Tangente zum Endpunkt der weiterführenden Quadratischen Bézierkurve ist; weitere Punkte für die Quadratische Bezierkurve können hinzgefügt werden
; siehe auch -> Pfad - <path... />, Übersicht

Beispiele:
<svg width="430" height="480">
[9]<path d="M10 100 Q80 180 200 100 T400 100" stroke="magenta" stroke-width="4" fill="none"/>
<!-- Beispiel 1: [8] 4 Pixel breite, magenta Quadratische Bézierkurve wird vom Startpunkt M zum Endpunkt gezeichnet; absolute Koordinaten nach T definieren einen neuen [9B] Endpunkt für die [9] weiterführende Kurve, [9A] Kontrollpunkt ist der gespiegelte Kontrollpunkt der vorherigen Kurve, keine Füllung-->

[11] <path d="M10 300 q100 -60 160 200 40 t200 -40" stroke="#00ddb6" stroke-width="6" fill="yellow"/>
<!-- Beispiel 2: [10] 6 Pixel breite, blaugrüne Quadratische Bézierkurve wird vom StartpunktM zum Endpunkt gezeichnet; relative Koordinaten nach t definieren einen neuen [11B] Endpunkt für die für die [11] weiterführende Kurve, [11A] Kontrollpunkt ist der gespiegelte Kontrollpunkt der vorherigen Kurve, Füllung: gelb-->
</svg>

Pfad - <path... />, Kubische Bézierkurve: C (CurveTo)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. verschiedene Bézierkurven gezeichnet werden. Eine dieser Bézierkurven ist die [1] Kubische Bézierkurve: <path d="Mx1 y1 Qx2 y2 x3 y3" />

Anzugeben ist:
[1A] M oder m: Startpunkt des Pfades bzw. der Kubischen Bézierkurve (zB "M10 10 )
[1B] [1C] [1D] C (absolute Koordinaten) oder c (relative Koordinaten) mit Angabe von drei Punkten: [1B] 1. Punkt und [1C] 2. Punkt = zwei Kontrollpunkte für die Kubische Bézierkurve und Punkt der [1E] Tangente vom Startpunkt und der [1F] Tangente vom Endpunkt der Kubischen Bézierkurve; [1D] 3. Punkt = Endpunkt der Kubischen Bézierkurve;
[3] Farbe des Pfades (zB stroke="magenta")
[4] Breite des Pfades (zB stroke-width="4")
[5] Farbe oder Füllung (zB fill="yellow" oder keine Füllung (zB fill="none)
siehe auch -> Pfad - <path... />, Übersicht

Beispiele:
<svg width="330" height="350">
<path d="M10 10 C 120 200 210 10 310 50" stroke="magenta" stroke-width="4" fill="none"/>
[1]<!-- Beispiel 1: 4 Pixel breite, magenta Kubische Bézierkurve wird vom Startpunkt [1A] M zum [1D] Endpunkt gezeichnet; Koordinaten nach C definieren zwei [1B] [1C] Kontrollpunkte und den [1D] Endpunkt für die Kurve, keine Füllung-->
[2] <path d="M10 300 c 50 -110 160 110 300 30" stroke="#00ddb6" stroke-width="6" fill="yellow"/>
<!-- Beispiel 2: 6 Pixel breite, blaugrüne Kubische Bézierkurve wird vom Startpunkt [2A] M zum [2D] Endpunkt gezeichnet; Koordinaten nach c definieren relative Koordinaten der zwei [2B] [2C] Kontrollpunkte für und den [2D] Endpunkt für die Kurve, [5] Füllung: gelb-->
</svg>

Pfad - <path... />, Quadratische Bézierkurve: Q (Quadratic Bézier CurveTo)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. verschiedene Bézierkurven gezeichnet werden. Eine dieser Bézierkurven ist die [1] Quadratische Bézierkurve: <path d="Mx1 y1 Qx2 y2 x3 y3" />

Anzugeben ist:
[1A] M oder m: Startpunkt des Pfades bzw. der Quadratische Bézierkurve (zB "M10 10 )
[1B] [1C] Q (absolute Koordinaten) oder q (relative Koordinaten) mit Angabe von zwei Punkten: [1B] 1. Punkt = Kontrollpunkt für die Quadratische Bézierkurve und Punkte der [1D] Tangente vom Startpunkt und der [1E] Tangente vom Endpunkt der Quadratische Bézierkurve; [1C] 2. Punkt = Endpunkt der Quadratischen Bézierkurve; [1F] Verbindungslinie durch die Halbierungspunkte der beiden Tangenten ergibt Tangente durch Scheitel der Quadratischen Bézierkurve;
[3] Farbe des Pfades (zB stroke="magenta")
[4] Breite des Pfades (zB stroke-width="4")
[5] Farbe oder Füllung (zB fill="yellow" oder keine Füllung (zB fill="none)
siehe auch -> Pfad - <path... />, Übersicht

Beispiele: <svg width="330" height="350">
[1] <path d="M10 10 Q 120 200 310 50" stroke="magenta" stroke-width="4" fill="none"/>
<!-- Beispiel 1: 4 Pixel breite, magenta Quadratische Bézierkurve wird vom Startpunkt [1A] M zum [1C] Endpunkt gezeichnet; absolute Koordinaten nach Q definieren [1B] Kontrollpunkt für die Kurve, keine Füllung-->
[2] <path d="M10 300 q 50 -110 300 30" stroke="#00ddb6" stroke-width="6" fill="yellow"/>
<!-- Beispiel 2: 6 Pixel breite, blaugrüne Quadratische Bézierkurve wird vom Startpunkt [2A] M zum [2C] Endpunkt gezeichnet; relative Koordinaten nach q definieren [2B] Kontrollpunkt für die Kurve, Füllung: gelb-->
</svg>

Pfad - <path... />, Linie horizontal, Linie vertikal
Mit dem Tag <path... /> kann in SVG ein Pfad (path) u.a. mit einfachen Angaben eine horizontale oder vertikale Linie gezeichnet werden. Außer dem Startpunkt muß bei der horizontalen .Linie nur die X-Kordinate des Endpunktes und bei der vertikalen Linie die Y-Koordinate des Endpunktes eingegeben werden. Die Endpunkte können in relativen oder absoluten Koordinaten angegeben werden. Der Koordinaten des Startpunkts M oder m werden immer als absolute Koordinaten interpretiert. Außerdem sind noch die Farbe der Linie und die Linienbreite anzugeben.

[1] horizontale Linie: <path d="Mx1 y1 Hx2" ... />
Es wird eine horizontale Linie vom [2] Startpunkt M bis zum [3] Endpunkt H oder h gzeichnet.

[4] vertikale Linie: <path d="Mx1 y1 Vy2" ... />
Es wird eine vertikale Linie vom Startpunkt M bis zum Endpunkt V oder v gzeichnet
Anzugeben ist in absoluten oder relativen Koordinaten:
siehe auch -> Pfad - <path... />, Übersicht
siehe auch -> Linie - <line... />

Beispiele: <svg width="1000" height="1000" fill="black">
<path d="M0 100 H200" stroke="blue" stroke-width="2"/>
<!-- Beispiel 1: 2 Pixel breite, blaue, horizontale Linie wird vom Startpunkt M zum Endpunkt H gezeichnet, absolute X-Koordinate = 200 -->
<path d="M100 0 V200" stroke="#f336ff" stroke-width="5"/>
<!-- Beispiel 2: 5 Pixel breite, pinke, vertikale Linie wird vom Startpunkt M zum Endpunkt V gezeichnet, absolute Y-Koordinate = 200 -->
<path d="m20 80 h200" stroke="#ffac36" stroke-width="5"/>
<!-- Beispiel 3: 5 Pixel breite, orange, horizontale Linie wird vom Startpunkt M zum Endpunkt h gezeichnet, relative X-Koordinate = 200 | absolute X-Koordinate = 220 -->
<path d="m120 20 v200" stroke="green" stroke-width="10"/>
<!-- Beispiel 4: 10 Pixel breite, grüne, vertikale Linie wird vom Startpunkt M zum Endpunkt v gezeichnet, relative Y-Koordinate = 200 | absolute Y-Koordinate = 220 -->
<!-- Die neue gezeichneten Linien liegen über der den vorher gezeichneten Linien -->
</svg>

Pfad - <path... />, Linienzug geschlossen
Mit dem Tag <path... /> kann in SVG ein Pfad (path) u.a. als geschlossener Linienzug gezeichnet werden. Der Unterschied zum offenen Linienzug besteht nur darin, dass nach den Koordinaten für die Punkte der Buchstabe Z eingegeben werden muss: <path d="... ...Z" />
siehe auch -> Pfad - <path... />, Übersicht
siehe auch -> Polygon - <polygon... />

Beispiele: <svg width="300" height="400">
[8] <path d="M10 10 L110 50 L180 10 L250 70 Z" stroke="black" stroke-width="3" fill="none" />
<!-- Beispiel 1: Pfad als geschlossener Linienzug, absolute Koordinaten, 3 Pixel breit, schwarz, keine Füllung, letzter Punkt wird mit Startpunkt verbunden -->
[9] <path d="m0 50 l80 50 l90 -40 l110 60 z" stroke="black" stroke-width="3" fill="#44fd4d" />
<!-- Beispiel 2: Pfad als geschlossener Linienzug, relative Koordinaten, 3 Pixel breit, schwarz, Füllung hellgrün, letzter Punkt wird mit Startpunkt verbunden -->
</svg>

Pfad - <path... />, Linienzug offen
Mit dem Tag <path... /> kann in SVG ein Pfad (path) u.a. als offener Linienzug gezeichnet werden. Der Tag dafür beginnt mit <path d="... ..." />
Anzugeben ist in absoluten oder relativen Koordinaten:
[1] M oder m: Startpunkt des Pfades bzw. Linienzuges (zB "M10 10 )
[2] L oder l: Weitere Punkte des Pfades bzw. Linienzuges (zB "L110 50 )
[3] Farbe des Pfades (zB stroke="blue")
[4] Breite des Pfades (zB stroke-width="5")
[5] Farbe oder Füllung (zB fill="yellow" oder keine Füllung (zB fill="none)
siehe auch -> Pfad - <path... />, Übersicht
siehe auch -> Polylinie - <polyline... />

Beispiele: <svg width="300" height="400">
[6] <path d="M10 10 L110 50 L180 10 L250 70" stroke="black" stroke-width="3" fill="none" />
<!-- Beispiel 1: Pfad als offener Linienzug, absolute Koordinaten, 3 Pixel breit, schwarz, keine Füllung -->
[7] <path d="m0 50 l80 50 l90 -40 l110 60" stroke="black" stroke-width="3" fill="#44fd4d" />
<!-- Beispiel 2: Pfad als offener Linienzug, relative Koordinaten, 3 Pixel breit, schwarz, Füllung hellgrün -->
</svg>

Pfad - <path... />, Übersicht
Mit dem Tag <path... /> wird in SVG ein Pfad (path) erstellt. Damit können Linien, Polygonzüge, Kurven, aber auch komplexe Formen gezeichnet werden. Alle Anweisungen für Pfade beginnen mit <path d="..." .../>. Buchstaben innerhalb des Tags bestimmen, welche Art von Pfad gezeichnet wird. (zB mit dem Buchstaben L werden Linien oder Polygonzüge gezeichnet). Dabei werden bei Großbuchstaben absolute Koordinaten (zB Q20 100) und bei Kleinbuchstaben relative Koordinaten (zB q20 100) verwendet.

Übersicht über grundsätzliche Möglichkeiten zum Zeichnen von Pfaden:
[1] Beginn: Punkt, bei dem der Pfad beginnen soll - M (Move to)
[2] Linienzug offen: Linie oder zusammenhängende Linien - L (LineTo)
[3] Linienzug geschlossen: Linie oder zusammenhängende Linien, wobei der letzte Punkt mit dem ersten verbunden wird - Z (ClosePath)
[4] Linie horizontal: horizontale Linie vom aktuellen Punkt bis zum Endpunkt - H (Horizontal LineTo)
[5] Linie vertikal: vertikale Linie vom aktuellen Punkt bis zum Endpunkt - V (Vertical LineTo)
[6] Bézier-Kurven: verschiedene Bézierkurven - Kubische Bézierkurven (Standard-Bézierkurven): C (CurveTo), S (Shorthand/Smooth CurveTo) - quadratische Bézierkurven: Q (Quadratic Bézier CurveTo), T (Shorthand/Smooth Quadratic Bézier CurveTo)
[7] Ellipsenbogen: Ausschnitte von Ellipsen in verschiedenen Varianten - A (Elliptical Arc)

Polygon - <polygon... />
Mit dem Tag <polygon... /> wird in SVG ein Polygon (geschlossener Linienzug) gezeichnet. Es sind mindestens[1] [2] [3] drei Punkte (zB points=20,50 190,20 0,0"), die durch ein Leerzeichen und deren x-Koordinaten und y-Koordinaten durch einen Beistrich getrennt sind, und die Farbe der Polylinie (zB stroke="blue") anzugeben. Anfangs- und Endpunkt werden durch eine gerade Linie verbunden. Mit diesen Angaben wird ein [4] Polygon mit 3 Liniensegmenten (Dreieck), der Farbe der SVG-Ansichtsfläche und der Vorgabelinienbreite 1 gezeichnet (siehe Beispiel 1).
[5] Normalerweise werden mehrere Punkte (zB 6 Punkte) für die zusammenhängenden Liniensegmente (zB für 6 Liniensegmente) eines Polygons angegeben. Außer der Farbe für die gesamte Poylinie (zB stroke="#5a00ff") muß für breitere Polygone auch die Linienbreite (zB stroke-width="8") festgelegt werden. Soll keine Flächenfüllung dargestellt werden muss fill="none" hinzugefügt werden (siehe Beispiel 2).
[6] Vorgabemäßig wird die Farbe der Fläche, die der Polygonlinienzug umschliesst, durch die Farbe der SVG-Ansichtsfläche oder durch eine zusätzlich angegebene Füllfarbe (zB fill="yellow") bestimmt. (siehe Beispiel 3).
siehe auch -> Polylinie - <polyline... />

Beispiele:<svg width="300" height="300" fill="#91f581">
[4]<polygon points="20,50 190,20 0,0" stroke="blue"/>
<!-- Beispiel 1: Minimale Angaben für ein blaues, 1 Pixel breites Polygon mit drei Punkten; Ergebnis: Dreieck mit Füllungsfarbe der SVG-Ansichtsfläche -->
[5]<polygon points="30,80 190,125 220,220 230,35 258,65 265,5" stroke="#fa19c3" stroke-width="8" fill="none"/>
<!-- Beispiel 2: Ein 8 Pixel breites, pinkes Polylgon mit 6 Punkten und 6 Liniensegmenten, ohne Füllung -->
[6]<polygon points="10,120 98,144 183,232 40,288" stroke="blue" stroke-width="15" fill="yellow" />
<!-- Beispiel 3: Ein 15 Pixel breites, blaues Polygon mit 4 Punkten und 5 Liniensegmenten sowie der Füllfarbe gelb -->
</svg>

Polylinie - <polyline... />
Mit dem Tag <polyline... /> wird in SVG eine Polylinie (Linienzug) gezeichnet. Es sind mindestens[1] [2] zwei Punkte (zB points=20,50 190,20"), die durch ein Leerzeichen und deren x-Koordinaten und y-Koordinaten durch einen Beistrich getrennt sind, und die Farbe der Polylinie (zB stroke="blue") anzugeben. Mit diesen Angaben wird eine [3] Polylinie mit 1 Liniensegment und der Vorgabelinienbreite 1 gezeichnet (siehe Beispiel 1).
[4] Normalerweise werden mehrere Punkte (zB 6 Punkte) für die zusammenhängenden Liniensegmente (zB für 5 Liniensegmente) einer Polylinie angegeben. Außer der Farbe für die gesamte Poylinie (zB stroke="#5a00ff") muß für breitere Polylinien auch die Linienbreite (zB stroke-width="8") festgelegt werden. Soll keine Flächenfüllung dargestellt werden muss fill="none" hinzugefügt werden (siehe Beispiel 2).
[5] Vorgabemäßig wird die Farbe der Fläche, die der Polylinienzug umschliesst, durch die Farbe der SVG-Ansichtsfläche oder durch eine zusätzlich angegebene Füllfarbe fill="green" bestimmt . Ist die Polylinie nicht geschlossen, begrenzt eine Verbindungsline zwischen Anfangs- und Endpunkte der Polylinie die Fläche (siehe Beispiel 3).
siehe auch -> Polygon - <polygon... />

Beispiele: <svg width="300" height="300" fill="#ffd200">
[3]<polyline points="20,50 190,20" stroke="blue"/>
<!-- Beispiel 1: Minimale Angaben für eine blaue, 1 Pixel breite Polylinie mit zwei Punkten eines einzigen Liniensegments -->
[4]<polyline points="30,80 190,125 220,220 230,35 258,65 265,5" stroke="#5a00ff" stroke-width="8" fill="none"/>
<!-- Beispiel 2: Eine 8 Pixel breite, violette Polylinie mit 6 Punkten und 5 Liniensegmenten, ohne Füllung -->
[5]<polyline points="10,120 98,144 183,232 40,288" stroke="black" stroke-width="15"/>
<!-- Beispiel 3: Eine 16 Pixel breite, schwarze Polylinie mit 4 Punkten und 3 Liniensegmenten sowie der Füllfarbe des SVG-Ansichtsfensters -->
</svg>

Ellipse - <ellipse... />
Mit dem Tag <ellipse... /> wird in SVG eine Ellipse gezeichnet. Es ist mindestens der [1] horizontale Radius (zB rx="80") und der [2] vertikale Radius (zB ry="160") der Ellipse anzugeben. Für den Mittelpunkt der Ellipse wird der [3] SVG-Koordinatenursprung als Vorgabe verwendet
(zB Vorgabe cx="0" cy="0"). Als Füllfarbe wird die [4] Füllfarbe des SVG-Ansichtsfensters verwendet). Ist diese Füllfarbe nicht angegeben, wird die Vorgabefüllfarbe Schwarz verwendet. Der Bereich der Ellipse außerhalb der SVG-Ansichtsfläche wird nicht angezeigt, sodass in diesem Fall nur ein Viertel der Ellipse zu sehen ist (siehe Beispiel 1).
Normalerweise wird zumindest der Mittelpunkt der Ellipse
(zB [5] cx="200" cy="90"), der [6] horizontale Radius (zB rx="99.999"), der [7] vertikale Radius (zB ry="55.55") und die [8] Füllfarbe der Ellipse (zB fill="yellow") angegeben (siehe Beispiel 2).

Beispiele:
<svg width="330" height="180" fill="#fe799e">
<ellipse rx="80" ry="160"/>
<!-- Beispiel 1: Minimale Angaben für eine Ellipse mit den beiden Radien 80 und 160, deren nicht angegebener Mittelpunkt auf dem SVG-Koordinatenursprung liegt -->
<ellipse cx="200" cy="90" rx="99.999" ry="55.55" fill="yellow"/>
<!-- Beispiel 2: Gelbe Ellipse mit dem Mittelpunkt auf den Koordinaten x=200 und y=90 und den beiden Radien 99,999 und 55,55-->
</svg>

Kreis - <circle... />
Mit dem Tag <circle... /> wird in SVG ein Kreis gezeichnet. Es ist mindestens der [1] Radius (zB r="100") des Kreises anzugeben. Für den Mittelpunkt des Kreises wird der [2] SVG-Koordinatenursprung als Vorgabe verwendet
(zB Vorgabe cx="0" cy="0"). Als Füllfarbe wird die [3] Füllfarbe des SVG-Ansichtsfensters verwendet). Ist diese Füllfarbe nicht angegeben, wird die Vorgabefüllfarbe Schwarz verwendet. Der Bereich des Kreises außerhalb der SVG-Ansichtsfläche wird nicht angezeigt, sodass in diesem Fall nur ein Viertel des Kreises zu sehen ist (siehe Beispiel 1).
Normalerweise wird zumindest der Mittelpunkt des Kreises
(zB [4] cx="140" cy="110"), der [5] Radius (zB r="66.66") und die [6] Füllfarbe des Kreises (zB fill="#fd40dc") angegeben (siehe Beispiel 2).

Beispiele:
<svg width="250" height="200" fill="#21ff8f">
<circle r="100"/>
<!-- Beispiel 1: Minimale Angaben für einen Kreis mit dem Radius 100, dessen nicht angegebener Mittelpunkt auf dem SVG-Koordinatenursprung liegt -->
<circle cx="160" cy="110" r="77.77" fill="#f9b256"/>
<!-- Beispiel 2: Oranger Kreis mit dem Mittelpunkt auf den Koordinaten x=160 und y=110 und dem Radius 77,77 -->
</svg>

Linie - <line... />
Mit dem Tag <line... /> wird in SVG eine Linie gezeichnet. Es ist mindestens einer der [1] Endpunkte (zB x2="300" Y2="100") der Linie anzugeben. Für den anderen Endpunkt der Linie wird der [2] SVG-Koordinatenursprung als Vorgabe verwendet (zB Vorgabe x1="0" Y1="0"). Außerdem muß die [3] Linienfarbe eingetragen werden (zB stroke="#9000ff") . Ist keine Linienbreite angegeben, wird die kleinste Linienbreite (Vorgabe stroke-width="1") angenommen. (siehe Beispiel 1).
Normalerweise werden beide Endpunkte der Linie (zB [4] x1="0" Y1="80" [5] x2="290" Y2="80") und für breitere Linien außer der Linienfarbe (zB stroke="#fd40dc") auch die [6] Linienbreite (zB stroke-width="3") angegeben (siehe Beispiel 2).
Liegt ein Linienendpunkt [7] außerhalb der SVG-Ansichtsfläche (zB x2="355" Y2="-100") wird die Linie an der Grenze der SVG-Ansichtsfläche abgeschnitten (siehe Beispiel 3).

Beispiele:
<svg width="400" height="400">
<line x2="300" y2="100" stroke="#9000ff" />
<!-- Beispiel 1: Minimale Angaben für lila 1 Pixel breite Linie vom Koordinatenursprung nach rechts unten -->
<line x1="0" y1="80" x2="290" y2="80" stroke="#fd40dc" stroke-width="3"/>
<!-- Beispiel 2: Pinkfarbige horizontale 3 Pixel breite Linie von links nach rechts -->
<line x1="50" y1="200" x2="355" y2="-100" stroke="blue" stroke-width="6" />
<!-- Beispiel 3: Blaue 6 Pixel breite Linie von links unten nach rechts oben, außerhalb des SVG-Ansichtsfenstes unsichtbar-->
</svg>

Rechteck - <rect... />
Mit dem Tag <rect... /> wird in SVG ein Rechteck gezeichnet. Es sind mindestens die horizontale Länge bzw. [1] Breite (zB width="200") und die [2] Höhe (zB height="100") anzugeben. In diesem Fall wird ein Rechteck gezeichnet, das mit der linken oberen Ecke im [3] SVG-Koordinatenursprung beginnt und die angegebene Breite und Höhe erhält. Als Füllfarbe wird die [4] Füllfarbe des SVG-Ansichtsfensters verwendet (siehe Beispiel 1). Ist diese Füllfarbe nicht angegeben, wird die Vorgabefüllfarbe Schwarz verwendet.

Soll das Rechteck nicht beim Koordinatenursprung beginnen sind für den [5] linken oberen Eckpunkt des Rechtecks die x-Koordinate (zB x="20") und die y-Koordinate (zB y="105.13345") anzugeben.
Durch Angabe der [6] Rechteckfüllfarbe (zB fill="#64fd6f") in hexadezimaler Schreibweise erhält das Rechteck die angegebene Farbe (siehe Beispiel 2).

Beispiel 1:
<svg width="400" height="400" fill="#feef89">
<rect width="200" height="100" />
</svg>
Diese SVG-Datei im XML-Format erzeugt in einer Ansichtsebene mit 400x400 Pixel und gelber Füllfarbe ein gelbes 200 Pixel breites und 100 Pixel hohes Rechteck, dessen linke obere Ecke im Koordinatenursprung liegt.

Beispiel 2:
<svg width="400" height="400">
<rect x="20" y="122.13345" fill="#64fd6f" width="190" height="75.35" />
</svg>
Diese SVG-Datei zeichnet in einer Ansichtsebene ein hellgrünes 190 Pixel breites und 75,35 Pixel hohes Rechteck, dessen linke obere Ecke vom Koordinatenursprung horizontal 20 Pixel und vertikal 122,13345 Pixel entfernt ist.

ALTER TABLE
Mit ALTER TABLE kann die Struktur einer Tabelle geändert bzw. ergänzt werden.
Nach ALTER TABLE ist der Tabellenname und nach ADD der Feldname mit Angabe des Typs und aller erforderlichen Informationen anzugeben:
[1] ALTER TABLE tabellenname ADD feldname Typ ;

Beispiel:
[1] ALTER TABLE fragen ADD typus VARCHAR( 16 ) NULL
[Der Tabelle "fragen" wird das Feld "typus" für maximal 16 alphanumerische Zeichen hinzugefügt, wobei das Feld bei der Eingabe von Datensätzen auch leer bleiben darf]

DROP TABLE...
Mit dem Befehl DROP TABLE wird in mySQL eine Tabelle aus der aktuellen Datenbank gelöscht.
Nach DROP TABLE wird der Tabellenname angegeben:
[1] DROP TABLE tabellenname
Beispiel:
[2] DROP TABLE mitglieder
[Die Tabelle mitglieder wird vollständig gelöscht, der Befehl kann nicht rückgängig gemacht werden]

RENAME TABLE
Mit dem Befehl RENAME TABLE wird in mySQL eine Tabelle der aktuellen Datenbank umbenannt.
Nach RENAME TABLE wird zuerst der aktuelle bzw. alte und - nach TO - anschließend der neue Tabellenname angegeben:
[1] RENAME TABLE alter_tabellenname TO neuer_tabellenname

Beispiel:
[2] RENAME TABLE user TO user_new
[Die Tabelle user wird in user_new umbenannt]

CREATE TABLE
Mit CREATE TABLE wird eine neue Tabelle erzeugt, wobei der Name der Tabelle und die Felder mit den erforderlichen Informationen anzugeben sind.
Nach CREATE TABLE sind der Tabellenname und anschließend innerhalb der runden Klammern die Felder mit Feldtyp usw. einzutragen:
[1] CREATE TABLE tabellenname (feld1 feldtyp..., feld2 feldtyp..., feldx feldtyp...,)

Beispiele:
[2] Minimalangaben: CREATE TABLE fragen (frage VARCHAR( 255 ))

[3] CREATE TABLE fragen1 (
id INT( 4 ) NOT NULL AUTO_INCREMENT ,
frage VARCHAR( 255 ) NOT NULL ,
antwort VARCHAR( 255 ) NULL ,
PRIMARY KEY ( id )
)
[Hier wurden drei Felder definiert: das Feld "id" für ganze Zahlen mit automatischem fortlaufenden Zahleneintrag und als PRIMARY KEY (Primärschlüssel), und die Felder "frage" und "antwort" für alphanumerische Zeichen; die Felder "id" und "frage" dürfen bei der Eingabe von Datensätzen nicht leer sein.]

CREATE DATABASE
Mit CREATE DATABASE wird in mySQL Daten eine neue, leere Datenbank erzeugt, wobei der Name der Datenbank angegeben werden muss. Nach CREATE DATABASE ist der Name der Datenbank anzugeben.
[1] CREATE DATABASE db_name
Um sie benutzen zu können, sind die Rechte an der neuen Datenbank zu überprüfen und zumindest eine Tabelle zu erzeugen.
Siehe auch -> CREATE TABLE

Beispiel
[2] CREATE DATABASE info_cdt
[Die neue leere Datenbank "info_cdt" wird erzeugt.]

-> Text + Kreis + Pfad: österreichische Städte

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

DELETE FROM ... WHERE ... AND
Mit dem Befehl DELETE werden in einer mySQL-Datenbank Daten nur in den angegebenen Felder einer oder mehrerer Tabellen gelöscht, wenn mit WHERE Bedingungen für das Löschen von Datensätzen angegeben werden.
Nach DELETE FROM werden ein oder mehrere Tabellennamen und mit folgendem WHERE die betroffenen Felder´, in der Regel mit Bedingungen angegeben. Mit der Erweiterung AND können zusätzliche Bedingungen gestellt werden:
[1] DELETE FROM tabellenname1, tabellenname2... WHERE Feldname1 mit Bedingung1a AND Bedingung1b, Feldname2 mit Bedingung2...

Beispiele:
[2] DELETE FROM information, campus, mitglieder WHERE user_nr > 500 AND user_nr < 1000 [Jene Datensätze, deren Wert im Feld "user_nr" größer als 500 und kleiner als 1000 ist, werden aus den drei angegebenen Tabellen gelöscht.]
[3] DELETE FROM information WHERE fragen_nr > 200 AND gruppen_id = 11 [erweiterte Bedingung: Jene Datensätze, deren Wert im Feld "fragen_nr" größer als 200 und im Feld "gruppen_id" 11 ist, werden aus der Tabelle "information" gelöscht.]

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.

DELETE FROM ... WHERE
Mit dem Befehl DELETE werden in einer mySQL-Datenbank Daten nur in den angegebenen Felder einer Tabelle gelöscht, wenn mit WHERE Bedingungen für das Löschen von Datensätzen angegeben werden.
Nach DELETE FROM wird der Tabellenname und mit folgendem WHERE werden eines oder mehrere betroffenen Felder, in der Regel mit Bedingugen angegeben:
DELETE FROM tabellenname WHERE Feldname mit Bedingung.
Wird für Feldnamen keine Bedingung angegeben, werden alle Datensätze der Tabelle gelöscht, sofern die Felder nicht leer sind.

Beispiele:
[1] DELETE FROM information WHERE frage [alle Datensätze werden aus der Tabelle "information" gelöscht, sofern das Feld "frage" nicht leer ist.]
[2] DELETE FROM information WHERE fragen_nr > 200 [Jene Datensätze, deren Wert im Feld "fragen_nr" größer als 200 ist, werden aus der Tabelle "information" gelöscht.]

DELETE FROM
Mit dem Befehl DELETE werden in einer mySQL-Datenbank Datensätze einer oder mehrerer Tabellen gelöscht.
Nach DELETE FROM werden ein oder mehrere Tabellennamen angegeben:
[1] DELETE FROM tabellenname1, tabellenname2...
Wird keine Bedingung angegeben, werden alle Datensätze aus der angegebenen Tabelle gelöscht.

Beispiele:
[2] DELETE FROM information
[alle Datensätze werden aus der Tabelle "information" gelöscht.]
[3] DELETE FROM information, fragen, antworten
[alle Datensätze werden aus den angegebenen drei Tabellen gelöscht.]

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

Photoshop, HDR-Bild erstellen
Zwei oder mehrere Bilder können in Photoshop zu einem HDR-Bild (High Dynamic Range) zusammengefügt werden. Dabei werden üblicherweise Aufnahmen vom gleichen Motiv verwendet. Die verwendeten Bilder müssen gleich groß sein (gleiche Abmessungen). HDR-Bilder sind normalerweise 32-Bit-Bilder, in Photoshop können auch mit 16-Bit-Bildern HDR-ähnliche Effekte erzielt werden.

Ein HDR-Bild wird folgendermaßen erzeugt:
[1] Im Menü "Datei" -> [2] "Automatisieren" den Menüpunkt [3] "Zu HDR Pro zusammenfügen..." anklicken
[4] Im Fenster "Zu HDR Pro zusammenfügen..." [5] "Dateien" (oder einen Ordner mit Bildern) auswählen
[6] Über "Durchsuchen..." [7] zwei oder mehr Bilder auswählen und/oder schon[8] "Geöffnete Dateien hinzufügen"
[9] Die ausgewählten Dateien werden in einer Liste angezeigt.
10] Nach dem Klick auf den "OK-Button" werden im Fenster "Zu HDR Pro zusammenfügen..." die eingestellten Werte für verschiedene Einstellungen angezeigt. Diese können übernommen oder geändert werden.
Nach der Bestätigung durch "OK" wird das [11] HDR-Bild konvertiert und als [12] Hintergrundbild angezeigt. Dieses kann in einem geeigneten Formt (zB JPG, PSD, TIFF...) gespeichert werden.

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

$_POST [...]
Mit der globalen Variablen $_POST[...] können Eingaben bzw. Daten aus einem Formular übergeben werden. Die Definitionen und Eingaben müssen innerhalb eines HTML-Formulars erfolgen, wobei für das Formular die Methode "post" (method="post") angegeben sein muss. Die Daten werden nach dem Absenden des Formulars in der gleichen oder in einer anderen angegebenen Datei verarbeitet. Näheres siehe Erklärungen zu PHP-Formularen!
Daten an eine andere Datei werden in der Regel durch Klicken auf einen Button vom Typ "submit" (type="submit") geschickt. Im Gegensatz zur Methode $_GET [...] werden die Variablen und Werte für den Benutzer unsichtbar und nicht durch Anhängen an eine URL übergeben.
Der Wert für die Variable wird innerhalb der eckigen Klammern gesucht bzw. eingegeben:
$_POST['Wert']
Dieser Wert kann einer Variablen übergeben werden:
$variable1=$_POST['Wert'];
Bei Formularen werden die Werte über mittels <input ...> übergeben:
<input type="text" name="wert" />

Beispiel 1:
$schule = $_POST['school']
Der Variablen $schule wird der Wert aus der globalen Variablen $_POST['school'] zugewiesen

Beispiel 2:
<form action="friends.php" method="post">
Name: <input type="text" name="name" /><br />
Schule: <input type="text" name="school" /><br />
Klasse: <input type="text" name="room" /><br />
<input type="Submit" value="Absenden" />
</form>
Die Werte aus dem Formular werden mit der Methode "post" an die Datei "friends.php" weitergeleitet.

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"

$_GET [...]
Mit der globalen Variablen $_GET[...] können Eingaben bzw. Daten aus einem Formular übergeben werden. Daten an eine andere Datei werden in der Regel über die URL also einen Link übergeben. Dabei werden die Variablenwerte hinter Fragezeichen (?) nach dem Dateinamen übergeben.
Der Wert für die Variable wird innerhalb der eckigen Klammern gesucht bzw. eingegeben:
$_GET['Wert']
Dieser Wert kann einer Variablen übergeben und über die URL weiter geleitet werden:
$variable1=$_GET['Wert'];

Beispiel 1:
$thema1 = $_GET['thema'];
echo $thema1;
Der Variablen $thema1 wird der Wert aus der globalen Variablen $_GET['thema'] zugewiesen

Beispiel 2:
<a href="webthemen.php?thema1=$_GET['thema']">Variablen-Übergabe mit $_GET</a>
Der URL"webthemen.php" wird der Variablen $thema1 der Wert aus $_GET['thema']zur Weiterverarbeitung übergeben.

UPDATE ... WHERE
Mit UPDATE ... WHERE werden Dateneinträge geändert, wobei für die Felder die entsprechenden neuen Werte und nach WHERE die Bedingungen anzugeben sind:
[1] UPDATE tabellenname SET feldname1 = wertneu WHERE feldname2 = bedingung
Beispiel:
[2] UPDATE fragen SET typ = 'mc' WHERE frage IS NOT NULL
[In der Tabelle "fragen" wird in der Spalte "typ" der Wert "mc" eingetragen, wenn in der Spalte "frage" Einträge vorhanden sind.]

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

SVG (Scalable Vector Graphics)
SVG (Scalable Vector Graphics) ist eine HTML-Erweiterung zur Darstellung von zweidimensionalen Vektorgrafiken in Webbrowsern. SVG-Dateien sind im XML-Format geschrieben und können von den meisten neuen Webbrowsern ohne zusätzliches Plug-In angezeigt werden.

Das Koordinatensystem hat seinen Ursprung in der linken oberen Ecke des Zeichenbereichs.
Verwendet werden drei Typen von Elementen:
Vkektorgrafiken: Rechteck, Ellipse und Kreis, Polygon und Pfad
Pixelgrafiken: JPG-, PNG- und BMP-Datein, die innerhalb desKoordinatenssystems verlinkt werden
Text
Die Elemente können verschoben, gruppiert, mit Hilfe von CSS gestaltet und animiert werden.

Beispiel:
<?xml version="1.0" encoding="windows-1250"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
<rect x="50" y="40" fill="#FBB03B" stroke="#0000ff" width="200" height="120"/>
</svg>

UPDATE
Mit UPDATE werden Dateneinträge geändert, wobei für die Felder die entsprechenden neuen Werte anzugeben sind:
[1] UPDATE tabellenname SET feldname = wertneu;
Beispiel:
[2] UPDATE fragen SET typ = 'mc';
[In der Tabelle "fragen" wird in den Feldern "typ" der Wert "mc" eingetragen]

Hochladen einer Datei aus einem HTML-Formular
Die übergebenen Dateidaten aus einem HTML-Formular können in eine PHP-Datei übernommen werden. Die im Dateifeld des HTML-Formulars ausgewählte Datei kann schließlich mit PHP-Anweisungen zum Server hochgeladen [file upload] und in das Zielverzeichnis verschoben werden. Dabei sind folgende Mindestangaben bzw. Informationen zu beachten und in die PHP-Anweisungen zu integrieren, auch duch die Verwendung von Variablen:
[1] Zielverzeichnis auf dem Server (Uploadverzeichnis): zB 'upload/', einer Variablen zugewiesen
[2] Dateiname, mit method="post" aus HTML-Formular übergeben, zB basename ($_FILES['fileup1']['name']), einer Variablen zugewiesen
[3] Hochladen und mit move_uploaded_file verschieben der Datei aus dem Temporärverzeichnis ins Zielverzeichnis: zB move_uploaded_file($_FILES['fileup1']['tmp_name'], $upload_file)
[4] Meldung über erfolgreiches Hochladen ist zu empfehlen, zB echo "Datei wurde erfolgreich hochgeladen";
Es sollten weitere Überpüfungen, welche die die Gültigkeit, Größe oder Sicherheit der hochzuladenen Datei überprüfen, im Script eingebaut werden.
Siehe auch -> HTML-Formulare: Hochladen einer Datei

Beispiel: [5]
<?php
$upload_dir = 'upload/';
$upload_file = $upload_dir . basename($_FILES['fileup1']['name']);
if (move_uploaded_file($_FILES['fileup1']['tmp_name'], $upload_file))
{echo "Datei wurde erfolgreich hochgeladen";}
else
{echo "Es konnte keine Datei hochgeladen werden!";}
?>
/* In der Variablen $upload_dir wird das Zielverzeichnis auf dem Server gespeichert. In der Variablen [6] $upload_file wird der Dateiname aus dem HTML-Formular übernommen und mit dem Verzeichnisnamen verknüpft. Mit [7] move_uploaded_file wird die hochgeladene Datei aus dem temporären Verzeichnis in das Zielverzeichnis verschoben. Mit echo wird das [8] erfolgreiche oder [9] nicht erfolgreiche Hochladen der Datei angezeigt. Hier in dieser Basisversion wird die Datei allerdings nicht geprüft, was im wirklichen Einsatz aber geschehen sollte. */

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.

Mit Photomerge automatisch Panoramabilder erstellen
Photoshop enthält das Tool "Photomerge", das mehrere zusammengehörige, sich überlappende Serienbilder automatisch zu einem einzigen Bild (zB ein Panoramabild) zusammenfügen kann.

Bei der automatischen Voreinstellung des Layouts erfolgt dies folgendermaßen:
[1] Menü "Datei -> Automatisieren -> Photomerge... " auswählen
[2] Im Fenster "Photomerge" Layout "Auto" auswählen
[3] Unter "Quelldateien" bestimmen, ob Dateien (Vorgabe) oder ein gesamter Ordner ausgewählt werden soll
[4] Für bessere Ergebnisse überprüfen, ob "Bilder zusammen überblenden" aktiviert ist
[5] Mit "Durchsuchen" zum gewünschten Bilderverzeichnis navigieren
[6] Die gewünschten zusammengehörigen Bilder auswählen
[7] Die Liste der ausgewählten Bilder im Fenster "Photomerge" mit OK bestätigen
[8] Photoshop importiert ausgewählte Bilder in Ebenen und fügt sie mit automatischer Korrektur zu einem einzigen Bild zusammen: Im Idealfall sind die Schnittstellen nicht zu erkennen.
[9] Ist "Bilder zusammen überblenden" aktiviert, erstellt Photoshop in jeder Ebene geeignete Ebenenmasken
[10] Für das endgültige Layout ist ein Beschneiden des Photomerge-Ergebnisses (zB mit dem Freistellungswerkzeug) zu empfehlen.

MIDI ((Musical Instrument Digital Interface)
Das Musikformat MIDI ((Musical Instrument Digital Interface) ist ein Protokoll zur Übermittlung von Befehlen zum Erzeugen von Klängen in digitalen Musikinstrumenten (zB Synthesizer) oder in Soundkarten in Verbindung mit einem Computer. MIDI-Dateien enthalten daher keine Audioaufnahmen (zB von Musikstücken), sondern nur die Steuerinformationen für die klangerzeugenden Geräte - die Musik wird sozusagen jedesmal neu erzeugt.
Andererseits wird mit MIDI auch die Schnittstelle bezeichnet, über die diese musikalischen Stuerbefehle übertragen werden können (zB 5-6 polige Buchsen, USB, Firewire...).

Schema-Beispiel für Verkabelung:
[1] Computer mit Soundkarte + Treiber + Musiksoftware + Line-Out
[2] MIDI-Musikinstrument (zB Keyboard)
[3] Verstärker
[4] Lautsprecher
[5] MIDI Out am MIDI-Musikinstrument über MIDI-Schnittstelle zu MIDI In am Computer: Audio-Steuerbefehle werden an Klangerzeuger Soundkarte übertragen
[6] MIDI Out am Computer über MIDI-Schnittstelle zu MIDI In am MIDI-Musikinstrument: Audio-Steuerbefehle werden an Klangerzeuger MIDI-Musikinstrument übertragen
[7] Line Out am Computer: Musik vom Klangerzeuger Soundkarte wird an Verstärker übertragen
[8] Audio Out am MIDI-Musikinstrument: Musik vom Klangerzeuger MIDI-Musikinstrument wird an Verstärker übertragen
[9] Audio Out am Verstärker (zB XLR): Musik wird an Lautsprecher ausgegeben

CSS: Schrift definieren - Schriftfamilie und Schriftstärke
Für die Zuordnung von Eigenschaften für Schriftstile gibt es in CSS mehrere Möglichkeiten. Für Schriftfamilie und Schriftstärke einer Schrift gibt es folgende Eigenschaften:
[4] Schriftfamilie - font-family: kann mehrere zusammengehörige Schriftarten definieren: zB font-family: Courier New, Courier, monospace; - Wenn eine Schhriftart nicht installiert ist, wird die nächste verwendet. Wenn keine Schriftart angegeben wird oder keine der angegebenen vorhanden ist, wird die Standardschriftart verwendet.
[5]Schriftstärke - font-weight:
[5A] fett - bold: font-weight: bold;
[5B] Werte in 9 Zahlenstufen von 100 bis 900 (nur sichtbar, wenn Schriftart mehrere Schriftstärken anbietet): bolder (fetter als die übergeordnte Schrift), lighter (dünner als die übergeordnete Schrift), normal (normale Stärke = Standard ohne Angaben)
[5C] Werte in 9 Zahlenstufen von 100 bis 900 (nur sichtbar, wenn Schriftart mehrere Schriftstärken anbietet): 100 (geringste Schriftstärke), 700 (entspricht etwa Schriftstärke bold), 900 (größte Schriftstärke)
Siehe auch -> CSS: Schrift definieren - Farbe und Schriftgröße!
Siehe auch -> CSS: Farben definieren!
->Link Beispiel-HTML-Datei

Beispiele:
<style type="text/css">
[6A] .text4 {font-family: Verdana, Geneva, sans-serif; font-weight: bold;}
<!--Schriftfamilie Verdana..., Schriftstärke fett -->
[6B] .text5 {font-family: "Times New Roman", Times, serif; font-weight: lighter;}
<!--Schriftfamilie TimesNewRoman..., Schriftstärke dünner -->
[6C] .text6 {font-family: Arial, Helvetica, sans-serif; font-weight: 900;}
<!--Schriftfamilie Arial..., Schriftstärke 800 (sehr fett) -->
</style>

Synthesizer
Ein Synthesizer ist ein Musikinstrument, das auf elektronischem Weg Töne, Klänge und Geräusche erzeugt. Meistens ist dies ein digitalesTasteninstrument, das in der Lage ist verschiedene Klangmuster und Klangstrukturen zu erzeugen, zu verändern, zu speichern, wieder abzurufen und über MIDI-Schnittstellen mit dem Computer zu kommunizieren.

Folgende Arten von Synthesizer werden unterschieden:
[1] Analoge Synthesizer (seit 1964): Oszillatoren erzeugen Schwingungen mit unterschiedlichen Wellemformen. In Verbindung mit Filter und Verstärker wird die Frequenz der Oszillatoren durch eine Steuerspannung moduliert.
[2] Digitale Synthesizer (seit 1970er Jahre): Grundlage ist die Erzeugung von digitalen Audiosignalen durch digitale Oszillatoren. Beim Sound-Sampling werden natürliche Klänge digitalisiert, während beim Physical-Modelling-Synthesizer ( PM-Synthese) die "natürlichen" Klänge durch mathematischen Berechnungensimuliert werden.
[3] Hybrid-Synthesizer: Digitale Signalprozessoren (DSP-Bausteine) zur digitalen Signalerzeugung werden mit analogen Komponenten kombiniert.
[4] Virtuell-analoger Synthesizer: Ein digitaler Synthesizer simuliert die Eigenschaften eines analogen Synthesizers. Dies kann auf eines speziellen Hardware oder einem leistungsfähigen Computer (Software-Synthesizer) geschehen.

CSS: Schrift definieren - Farbe und Schriftgröße
Für die Zuordnung von Eigenschaften für Schriftstile gibt es in CSS mehrere Möglichkeiten. Für Farbe und Schriftgröße einer Schrift gibt es folgende Eigenschaften:
[1] Farbe color - Wird definiert mit einem gültigen Wert für eine Web-Farbe (Dafür gibt es wie immer drei Möglichkeiten):
[1A] Im Beginntag mit dem style-Attribut: style="color: farbcode" (zB farbcode = #F6F)
[1B] Im Head einer HTML-Datei: color: farbcode; (zB farbcode = lightgreen)
[1C] In einer externen CSS-Datei: color: farbcode; (zB farbcode = rgb(117,211,255) )

[2] Schriftgröße - font-size(CSS-Code im Head oder in einer CSS-Datei):
[2A] Pixel px: zB font-size: 16px;
[2B] Weitere Einheiten: pt (Punkt), in (Inch), cm (Zentimeter), mm (Millimeter), pc (Pica), em (lt. Schriftsatz), ex (Bezug auf Höhe von "x");
[2C] Prozent % in Relation zur Ausgangschriftgröße zB font-size: 75%;
[2D] Schlüsselwörter für die Größe: xx-small(winzig), x-small (sehr klein), small (klein), medium (mittelgroß), large (groß), x-large (sehr groß), xx-large (riesig)
[2E] Schlüsselwörter zum Ändern der Schriftgröße: smaller (Verkleinern), larger (Vergrößern)
Siehe auch -> CSS: Farben definieren!
->Link Beispiel-HTML-Datei

Beispiele:
<style type="text/css">
[3A] .color1 {font-size: 16px; color: #F00;}
<!--Schriftgröße 16 Pixel, Schriftfarbe im Hexadezimalsystem rot-->
[3B] .color2 {font-size: 125%; color: blue;}
<!--Schriftgröße 125% gegenüber der Normalgröße, Schriftfarbe blau-->
[3C] .color3 {font-size: x-large; color: #007D00;}
<!--Schriftgröße sehr groß, Schriftfarbe im Hexadezimalsystem #007D00-->
.</style>

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.

Bitmap-Modus
Im Bitmap-Modus, bei dem für 1 Bildpunkt nur Bit benötigt wird, können 2 Farben, nämlich Schwarz und Weiss, dargestellt werden.

CSS: Hintergrund definieren
Für die Zuordnung von Hintergründen gibt es in CSS zwei Möglichkeiten:
[1] Zuweisung einer Farbe mit der Eigenschaft background-color: Diese wird mit einem gültigen Wert für eine Web-Farbe definiert.
Dafür gibt es wie immer drei Möglichkeiten:
[1A] Farbzuweisung im Beginntag mit dem style-Attribut: style="background-color: farbcode" (zB farbcode = #F6F)
[1B] Farbzuweisung im Head einer HTML-Datei: background-color: farbcode; (zB farbcode = lightgreen)
[1C] Farbzuweisung in einer externen CSS-Datei: background-color: farbcode; (zB farbcode = rgb(117,211,255) )
[2] Zuweisung eines Bildes oder einer Grafik mit der Eigenschaft background-image. Wie bei der Hintergrundfarbe können diese Attribute ebenfalls auf drei Arten zugewiesen werden: zB im Head:
[2A] background-image: url(pfad/bildname); pfad bezieht sich auf ein Unetrverzeichnis oder eine Internetaddresse (zB images), bildname ist der Dateiname des Bildes (zB meer.jpg)
[2B1] background-repeat: repeat; Bild wird so oft wie möglich horizontal und vertikal wiederholt (Standardeinstellung)
[2B2] background-repeat: no-repeat; Bild wird nur einmal gezeigt
[2B3] background-repeat: repeat-x; Bild wird nur horizontal wiederholt
[2C1] background-position: center; Bild wird in der Mitte zentriert
[2C2] background-position: 10px; Bild beginnt in einer Entfernung von zB 10 Pixel
[2C3] background-position: left; Bild ist am linken Rand (Standardeinstellung)
[2C4] background-position: right; Bild ist am rechten Rand
[2C5] background-position: top; Bild ist am oberen Rand
[2C6] background-position: bottom; Bild ist am unteren Rand
[2C7] background-position: center 30px; Die Werte für Ausrichtung und Abstände können beliebig kombiniert werden. Der erste Wert bezieht sich auf die horizontale Position, der zweite Wert auf die verikale Position (zB horizontal zentriert, Abstand von oben 30 Pixel)
[2D1] background-attachment: scroll; Bild wird beim Scrollen mitbewegt (Standardeinstellung)
[2D2] background-attachment: fixed; Bild wird behält seine fixe Position bei
Siehe auch -> CSS: Farben definieren!
->Link Beispiel-HTML-Datei

Beispiele:
<style type="text/css">
[3] .back_color1 {background-color: #F6F;}
<!--Hintergrundfarbe im Hexadezimalsystem -->
[4] .back_color2 {background-color: lightblue;}
<!--Hintergrundfarbe im Hexadezimalsystem -->
[5] .back_img1 {background-image: url(img/Gr11_0890.jpg);}
<!--Hintergrund als Bild, wird horizontal und vertikal wiederholt-->
[6] .back_img2 {background-image: url(img/PortAn15120.png); background-repeat: no-repeat; background-position: 5px 10px ;}
<!--Hintergrund als Bild, keine Wiederholung, Abstände: links 5 Pixel, oben 10 Pixel-->
[7] .back_img3 {background-image: url(img/hbw_055400.jpg); background-repeat: no-repeat; background-position: center; background-attachment: fixed; }
<!--Hintergrund als Bild, keine Wiederholung, wird in der Mittr zentriert, bleibt an Position, hier als Tabellenhintergrund-->
[8] .back_imgrep1 {background-image: url(img/bl12650A2.png); }
<!--Hintergrund als Bild, wird horizontal und vertikal wiederholt, transparenter Hintergrund: Tabellenhintergrundbild hier sichtbar-->
[9] .back_imgrep2 {background-image: url(img/bl12650C2.png); background-repeat: repeat-x; }
<!--Hintergrund als Bild, wird horizontal wiederholt-->
[10] .back_imgrep3 {background-image: url(img/bl12650B2.png); background-repeat: repeat-y;
background-position: center; }
[11] .back_imgrep4 {background-color: #AA2D39; background-image: url(img/BLwg_090q100.jpg); background-position: center; background-repeat: no-repeat; }
<!--Hintergrundfarbe im Hexadezimalsystem, kombiniert mit Hintergrund als Bid: keine Wiederholung, zentriert-->
span class="nummer">[11] .back_imgrepno {background-image: url(img/bl12650B2.png); background-repeat: no-repeat; background-position: 70px 10px; background-color: #FDD0ED;}
<!--Hintergrundfarbe im Hexadezimalsystem, kombiniert mit Hintergrund als Bidmit transparentem Hintergund: keine Wiederholung, Abstände links 70 Pixel, oben 10 Pixel-->
</style>