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 -Tags: Die übergeordneten Tags , <td>, <tr>, <table> und <body> werden ebenfalls angezeigt.
[3] Der Tag <tr> ist angeklickt: Der gesamteInhalt der Tags <tr> bis zum Tag ist ausgewählt.

Dreamweaver, Tag-Selektor, Tag entfernen

Tag-Selektor: Tag entfernen
Im [1] Tag-Selektor von Dreamweaver können [2] Tags (zB ...) 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 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  [1] gekennzeichnet. Der Webbrowser verwendet zwischen den AbsÃ¤tzen vordefinierte AbstÃ¤nde [2] Ein Zeilenumbruch innerhalb eines Absatzes kann durch den Tag   [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

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


Die halbe Wahrheit ist keine Wahrheit


	58 INFOS WEBSITES DREAMWEAVER