Cadat EDU - Infos-Stichworte

Dreamweaver, Arbeitsbereich, Gliederung

MULTIMEDIA WEBDESIGN WEBSITES DREAMWEAVER

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

Dreamweaver, Ansichten

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

Dreamweaver, Ansichten, Multi-Screen-Vorschau, voreingestellte Bildschirmtypen

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

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

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

Dreamweaver, Ansichten, Multi-Screen-Vorschau, Vorschau im Vergleich

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

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

Dreamweaver, Tag-Selektor, Hierarchie, Auswahl

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.

Dreamweaver, Tag-Selektor, Tag entfernen

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.

Dreamweaver, Site, minimale Angaben

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.

Dreamweaver, Text, Format, Absatz, Zeilenumbruch

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>

Dreamweaver, Text, Format, Ãœberschriften

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>

Dreamweaver, Text, Format, Listen, nummerierte Listen (geordnete Listen)

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>

Dreamweaver, Text, Format, Listen, AufzÃ¤hlungslisten (ungeordnete Listen)

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>

Dreamweaver, Text, Format, Listen, verschachtelte Listen

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>

Dreamweaver, Text, Format, Listen, Eigenschaften Ã¤ndern

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

Dreamweaver, Bilder oder Grafik, einfÃ¼gen

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

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

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

Dreamweaver, Layer, Ebenen, Layoutobjekte, AP-Elemente

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>

Dreamweaver, Hyperlinks, Grundlagen, Einstellungen in der Site-Verwaltung

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

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

Dreamweaver, Hyperlinks, absolute Hyperlinks mit Text einfÃ¼gen und entfernen

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

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

Dreamweaver, Hyperlinks, relative Hyperlinks mit Text innerhalb einer Site erstellen

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

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

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

Dreamweaver, Hyperlinks, Verlinkungs-Ziel (Anker) erstellen

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

Dreamweaver, Hyperlinks, Verlinkung zu Verlinkungs-Ziel (Anker)

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

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

Dreamweaver, Tabellen erstellen, Grundlagen 1

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

Dreamweaver, Tabellen erstellen, Eigenschaften festlegen

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

Dreamweaver, Tabellen, Zellen in Kopfzeilen umwandeln

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.

Dreamweaver, Tabellen, Tabellenbreite

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.

Dreamweaver, Tabellen, Vorgaben, Standardeinstellungen

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.

Dreamweaver, Tabellen, Zellenbreite, Spaltenbreite, Breite in %, Eingabe im Eigenschafteninspektor

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.

Dreamweaver, Tabellen, Zellen verbinden

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

Dreamweaver, Tabellen, Zellen teilen

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;

Dreamweaver, Medien, Video als ActiveX, einbetten

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!

Dreamweaver, Tabellen, Zellen, Hintergrundfarbe im Eigenschaftsinspektor auswÃ¤hlen

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

Dreamweaver, Imagemaps, Hotspots, Grundlagen

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.

Dreamweaver, Tabellen, Text in Zellen. Zeilenumbruch

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

Dreamweaver, Frameset erstellen

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.

Dreamweaver, CSS, Neue CSS-Regel erstellen, Selektor-Typ auswÃ¤hlen

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;

Dreamweaver, Imagemaps, Hotspots erzeugen

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

Dreamweaver, CSS, Neue CSS-Regel erstellen, definieren in "head" oder CSS-Datei

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

Dreamweaver, CSS, Neue CSS-Regel erstellen, Selektor-Typ Tag

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.

Dreamweaver, CSS, Neue CSS-Regel erstellen, Selektor-Typ Klasse

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

Dreamweaver, CSS, Neue CSS-Regel erstellen, CSS-Eigenschaften festlegen

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

Dreamweaver, CSS, Externe Stylesheet-Datei verknÃ¼pfen

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.

Dreamweaver, Spry-Framework, Spry-Widgets, Grundlagen

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;

Dreamweaver, Spry-Widget, Spry-MenÃ¼leiste horizontal erstellen

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

Dreamweaver, Spry-Widget, Spry-MenÃ¼leiste, Ã„nderung der MenÃ¼-Elemente (ListeneintrÃ¤ge)

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

Dreamweaver, Spry-Widget, Spry-MenÃ¼leiste MenÃ¼-Elemente (ListeneintrÃ¤ge) hinzufÃ¼gen

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.

Dreamweaver, Spry-Widget, Spry-MenÃ¼leiste MenÃ¼-Elemente (ListeneintrÃ¤ge) entfernen

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.

Dreamweaver, Verhalten, Bild austauschen, Rollover

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:

Dreamweaver, Verhalten, JavaScript-Code

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;

Dreamweaver, Spry-Widget, Spry-MenÃ¼leiste, MenÃ¼-Elemente (ListeneintrÃ¤ge) Position Ã¤ndern

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.

Dreamweaver, Bilder, Anzeige der Eigenschaften

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

Dreamweaver, Bilder, Tools zum Bearbeiten

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.

Links/Seite:	Suchen im aktuellen Thema:
Sortieren nach:	Stichwort	Thema(Code)	Reihung	Aktueller ausgewählter Code: 4nd


Your Virtual Reality is Your Real Reality? You are real virtual.


	58 INFOS MULTIMEDIA WEBDESIGN \| WEBSITES DREAMWEAVER