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

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, 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, 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, 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, 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, Formulare, Grundlagen, Formularobjekte

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

Dreamweaver, Formulare, Formularobjekte, Textfeld einzeilig

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

Dreamweaver, Formulare, Formularobjekte, Textfeld, Kennwort

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.

Dreamweaver, Formulare, Formularobjekte, Textfeld, Textbereich

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.

Dreamweaver, Formulare, Formularobjekte, Schaltfläche

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.

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

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


Wer keine Sorgen hat, macht sich welche.


	58 INFOS WEBSITES DREAMWEAVER