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.

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


Schau nicht hinauf, schau nicht hinab, schau geradeaus.


	58 INFOS WEBSITES DREAMWEAVER