So sieht die Arbeitsoberfläche von Dreamweaver aus:

• Die Menü-Leiste befindet sich -wie bei allen Windows-Programmen- ganz oben, von hier aus sind alle wichtigen Befehle erreichbar.
• Darunter ist die Einfügen-Leiste, die eine Auswahl besonders häufig genutzter Befehle enthält.
• In der Symbol-Leiste direkt oberhalb des Dokument-Fensters findest du Befehle, die die Darstellung des Dokumentes steuern.
• Das Dokument-Fenster enthält deine aktuelle Seite.
• Ganz unten im Eigenschaften-Fenster erscheinen verschiedene Einstellungsmöglichkeiten in Abhängigkeit zum markierten Bereich des Dokumentes.
• Rechts befinden sich die thematisch sortierten Bedien-Felder, die je nach Bedarf ein- der ausgeklappt werden können.

Eine Site ist eine komplette Homepage, d.h. alle Dokumente, Bilder und sonstige Dateien, die zur Homepage gehören, sowie die gesamte Homepage-Struktur.
Eine Seite ist ein einzelnes Dokument innerhalb der Homepage, also eine HTML-Datei.

Wenn du eine Site angelegt hast, wacht Dreamweaver darüber, dass auch wirklich alle Dateien im Site-Ordner abgelegt sind.
Fügst du z.B. ein Bild aus einem fernen Ordner in deine Seite ein, so fragt Dreamweaver sofort, ob diese Datei in den Siteordner kopiert werden soll - du brauchst nur auf JA zu klicken und einen Speicherort innerhalb der Site auszuwählen.
Benennst du eine Datei um oder verschiebst du eine Datei innerhalb der Site, so passt Dreamweaver automatisch alle Links von und zu dieser Datei in allen Dateien der Site an.
Der Site-Ordner ist von der Umgebung unabhängig und kann auf beliebige andere Computer verschoben werden, ohne dass die Funktion deiner Homepage beeinträchtigt wird.

In allen weiteren Lektionen wird davon ausgegangen, dass du eine Site angelegt hast.

Eine lokale Site erstellst du mit Site - Sites verwalten... - Neu... ( bzw. in MX: Site - Neue Site). Es öffnet sich das Fenster Site-Definition für die Grundeinstellungen deiner Site.

Gib deiner Site zunächst einen aussagekräftigen Namen; klicke dann auf weiter und wähle den Eintrag Nein, keine Servertechnologie verwenden an.

Im nächsten Feld wählst du: Lokale Kopien auf meinem Rechner bearbeiten und anschließend auf den Server laden.

Als Stammordner gibst du den vorhin angelegten Ordner an, durch Klicken auf das Ordner-Symbol hinter dem Textfeld kannst du ihn suchen.
(Man kann hier auch direkt einen neuen Ordner anlegen.)

Im nächsten Fenster wählst du dann Verbindung zum Remote-Server: Keine .

Im letzten Fenster siehst du eine Zusammenfassung deiner Auswahl, die du jetzt mit Fertig bestätigen oder mit Zurück korrigieren kannst.

Rechts findest du jetzt deine Site im Sitefenster.
Sollte es nicht zu sehen sein, musst du es mit Fenster - Dateien oder mit F8 herbeizaubern. (in MX mit Fenster - Site .)
In diesem Fenster werden später alle Dateien und Ordner deiner Site dargestellt.
Wichtig: Alle Änderungen der Site müssen über dieses Fenster vorgenommen werden, denn nur so kann Dreamweaver deine Site richtig verwalten.

Durch Rechtsklick auf die Dateien kannst du diese löschen, umbenennen, koperen oder darunter neu einfügen.

Die vielen Schaltflächen in diesem Fenster werden erst interessant, wenn du deine Homepage online verwalten willst.

Falls beim Start nicht automatisch eine leere Seite geöffnet wurde, kannst du dies über Datei - Neu... und im sich öffnenden Fenster mit (Karteikarte allgemein - einfache Seite - HTML -) erstellen nachholen.
Eine in der Site vorhandene Seite öffnest du am einfachsten durch Doppelklick auf die entsprechende Datei im Dateien-Fenster auf der rechten Seite, alternativ kannst du auch über das Menü Datei - Öffnen gehen, hier kannst du dann auch auf Ordner außerhalb der Site zugreifen.
(Achtung: auswärtige Seiten bei Nachfrage unbedingt in die Site integrieren lassen!).

Jede Seite sollte einen Seitentitel haben, er erscheint ganz oben im Browserfenster und wird von Suchmaschinen mit ausgewertet. Du kannst ihn sehr einfach oben in der Symbolleiste eingeben.

Dreamweaver kann eine Seite in drei verschiedenen Ansichten anzeigen. Reine Codeansicht, Code- und Entwurfsansicht oder reine Entwurfsansicht. Du kannst sie über das Ansicht-Menü oder in der Symbolleiste ändern.
Die Codeansichten sind interessant, wenn man verfolgen will, welchen Code Dreamweaver aus den Eingaben Dokumentenfenster produziert und wenn man selbst Hand anlegen will.
Du brauchst im Moment nur die reine Entwufsansicht.

Im Menü Modifizieren - Seiteneigenschaften kannst du viele grundlegende Eigenschaften deiner Seite einstellen:
Titel, Hintergrundbild, Farbe von Hintergrund, Text und Links, Randbreiten und Tracingbild. Bei leeren Feldern werden die Voreinstellunge des Browsers benutzt.

Eine Seite speichern kannst du über das Menü Datei- speichern oder - wenn du den Namen ändern willst - über Datei - speichern unter... .
Wenn du das Dokumentenfenster schließt, fragt Dreamweaver auf jeden Fall nach, ob die Datei noch gespeichert werden soll.

Du kannst eine Seite umbenennen, indem du im Site-Fenster auf die Datei einen Rechtsklick ausführst und dann Umbenennen anklickst. Ein nicht zu schneller Doppelklick auf den Dateinamen führt zum gleichen Ergebnis.

Du kannst jede Seite löschen, indem du im Site-Fenster auf die Datei einen Rechtsklick ausführst und dann Löschen anklickst.

Der Textumbruch am Zeilenende erfolgt automatisch, du solltest also keinesfalls an jedem Zeilenende die Enter-Taste drücken. Die drückst du nur, wenn du einen neuen Absatz beginnen möchtest.
Willst du eine Zeile vorzeitig beenden, gelangst du mit Shift-Enter direkt in eine neue Zeile. (Zwischen 2 Absätzen ist eine größere Lücke als zwischen 2 Zeilen).

Mehrere aufeinander folgende Leerzeichen werden in HTML immer auf ein Leerzeichen reduziert. Größere Leerräume kannst du mit Einfügen - HTML - Sonderzeichen - Geschütztes Leerzeichen erzeugen. Schneller geht das allerdings über den Textbereich der Einfügen-Leiste.

Um einen Text zu markieren (für Ausschneiden, Kopieren oder Löschen) kannst du ihn mit der Maus bei gedrückter linker Maustaste überfahren; durch Doppelklick in den Text wird ein Wort markiert, dreimaliges Klicken markiert einen ganzen Satz.

Korrigieren, Löschen, Verschieben und Kopieren von Textteilen funktioniert über die Zwischenablage genau wie in jeder anderen Textverarbeitung.

Einen oder mehrere Arbeitsschritte rückgängig machen kannst du mit Bearbeiten - Rückgängig, Strg+Z oder über das Rückgängig-Symbol in der Standard-Symbolleiste.

Über Bearbeiten - Suchen und Ersetzen erhälst du ein Fenster mit dessen Hilfe du bestimmte Begriffe auf der gesamten Seite löschen oder durch anderen Text ersetzen kannst. (Das funktioniert auch im Quelltext.)

Unten im Eigenschaftenfenster kannst du zuvor markierten Text formatieren. Bei Schriftart findest du verschiedene Schriftarten jeweils in Dreiergruppen zur Auswahl.

Warum Dreiergruppen? Nicht jede Schrift ist auf jedem Computer vorhanden. Werden nun 3 Schriften angegeben, so versucht der Browser zunächst die erste Schrift darzustellen, ist das nicht möglich, nimmt er die zweite oder danach die dritte.
So gibt es auf dem Apple keine Arial, aber die sehr ähnliche Helvetica, ein Unix/Linux-Rechner kann eventuell mit beiden Namen nichts anfangen und nimmt dann eine beliebige andere Schrift ohne Serifen (sans serif).
So bleibt die Darstellung auf allen Systemen sehr ähnlich.

Weitere Felder beeinflussen Schriftformat (z.B. Überschrift), Schriftstil (nur bei Verwendung von CSS), Schriftgröße und Schriftfarbe.

Im Eigenschaften-Fenster kannst du über die Auswahlliste Format deinen Textabsatz in eine Überschrift verwandeln; Überschrift 1 ist am größten.
Möchtest du eine Überschrift- oder eine Absatz-Markierung entfernen, klickst du hier auf keine.

Über Text - Ausrichten oder durch Anklicken einer Schaltfläche unten im Eigenschaften-Fenster kann ein Absatz linksbündig, rechtbündig, zentriert oder als Blocksatz ausgegeben werden

Absatzeinzüge (positiv und negativ) bekommst du durch Klicken auf die entsprechenden Symbole im Eigenschaften-Fenster.

Eine Liste erstellst du, indem du die gewünschten Absätze markierst und dann im Eigenschaften-Fenster auf das entsprechende Symbol klickst. Durch Drücken der Eingabetaste (Enter) am Ende der Liste wird ein neues Listenelement erzeugt. Zweimaliges Drücken beendet die Liste.

Durch Klicken auf die Einzüge-Symbole rückt der ausgewählte Listenabsatz ein und wird mit einem anderen Listenzeichen versehen. Entsprechend kann die Einrückung auch wieder rückgängig gemacht werden.

Definitionslisten werden häufig bei Begriffserklärungen und Glossaren benutzt:

Wähle Text - Liste - Definitonsliste.

Überschrift und erklärender Text sind jeweils als ein Absatz einzugeben.

Unten bei Eigenschaften kannst du einige Bildeigenschaften und die Position deines Bildes ändern. Befindet sich dein Bild innerhalb eines Textabsatzes, solltest du über Ausrichten das Bild rechts oder links positionieren. Außerdem kannst du über V- und H-Abstand den Freiraum zwischen Bild und Text verändern.

(Sollte der untere Teil des Eigenschaften-Fensters nicht zu sehen sein, klicke auf den kleinen Abwärtspfeil rechts unten in der Ecke.)

Unten im Eigenschaften-Fenster kannst du der Tabelle oder einzelnen Feldern eine Hintergrundfarbe geben und auch eine Randfarbe auswählen. Mit Zellauffüllung bestimmst du den Abstand zwischen dem Zelleninhalt (Text oder Bild) und dem Zellrahmen. Mit Zellraum bestimmst du den Abstand zwischen zwei Zellrahmen. (Probiere es ruhig einmal aus.)

Klicke rechts im Fenster Design auf den Reiter CSS-Stile und klicke dann auf das Symbol Stylesheet anfügen. Im erscheinenden Fenster kannst du dann die einzubindende CSS-Datei auswählen. Achte darauf, dass Hinzufügen als Verknüpfung ausgewählt ist und klicke dann auf OK.

Internetseiten sind durch Hyperlinks miteinander verbunden.

Absoluter Link:
Jede Webseite im Internet hat eine eindeutige Adresse (URL = Uniform Resource Locator), z.B.: http://www.goole.de/index.html .

Relativer Link:
Relative Links sind verkürzte Verweise innerhalb einer Site; sie enthalten nicht die vollständige Adresse, sondern nur die Teile, die sich von der Adresse der aufrufenden Seite unterscheiden.
Steht die aufzurufende Seite im gleichen Ordner, besteht der Link nur aus dem Dateinamen (datei.htm). Liegt die Datei in einem Unterordner, wird der Name des/der Unterordner vor den Dateinamen geschrieben (unterordner/datei.htm).

Dateien in einem übergeordneten Ordner werden durch Vorsetzen von zwei Punkten erreicht (../datei.htm).

Relative Links haben den Vorteil,, dass man den gesamten Siteordner verschieben kann, ohne dass sich ein Link ändert.

Beim Site-internen Verschieben von Dateien und Ordnern kümmert sich Dreamweaver um die exakte Verwaltung der relativen Links - allerdings muss dieses Verschieben innerhalb von Dreamweaver und nicht außerhalb z.B. mit dem Windows-Datenexplorer erfolgen..

Um einen Link zu einer anderen Datei einzurichten gibt es mehrere Möglichkeiten. Nachdem du die Textstelle markiert hast, kannst du unten im Eigenschaften-Fenster...

1. ... im Hyperlink-Feld einen Dateinamen eingeben.
   
2. ... das Ordnersymbol rechts neben dem Hyperlinkfeld anklicken und dann im sich öffnenden Ordnerfenster eine Datei auswählen.
3. ... auf das Dateizeigersymbol klicken und mit gedrückter Maustaste auf die zu verlinkende Datei rechts im Site-Fenster zielen und dann loslassen.

Bei langen Seiten bietet es sich manchmal an, vom Seitenanfang an mehrere verschiedene Stellen weiter unten auf der Seite springen zu können. Hierzu musst du zunächst einen Anker (Sprungmarke) definieren, zu dem dann gesprungen werden kann.

Setze die Schreibmarke an die Stelle, wo später hingesprungen werden soll. Wähle dann Einfügen - benannter Ankerpunkt (MX: Einfügen - unsichtbare Tags - Ankerpunkt) oder klicke in der Einfügeleiste im Teil Allgemein auf das Ankersymbol.
Im erscheinenden Dialogfenster gibst du dem Ankerpunkt einen eindeutigen Namen.
Dreamweaver zeigt den Ankerpunkt im Dokumentenfenster durch ein kleines Symbol an. (Sollte das nicht der Fall sein, kannst du es über Ansicht - visuelle Hilfsmittel - unsichtbare Elemente sichtbar machen.)

Um einen Ankerpunkt anzuspringen, wählst du als Linkadresse den Ankernamen. Alternativ kannst du auch mit Datenzeigersymbol auf den Ankerpunkt zielen und loslassen.

Um bei einer neu aufgerufenen Seite direkt bei einem Ankerpunkt zu landen, gibst du hinter dem Seitennamen ein Doppelkreuz (#) und direkt dahinter den Ankernamen an (neu.htm#mitte). Auch hierfür kannst du besser mit dem Datenzeigersymbol arbeiten.

Du kannst beliebige Dateien (Programme, Word-Dokumente, Photoshop-Bilder, Zip-Archive,...) auf deiner Seite verlinken. Der Browser sorgt später beim Anklicken eines solchen Links dafür, dass die entsprechende Datei aus dem Internet geladen und zur weiteren Verwendung gespeichert wird. Sofern ein entsprechendes Programm zum Öffnen der Datei vorhanden ist, kann die Datei meist auch direkt im Browser geöffnet werden (z.B.: Office, Audio, Video)..

Zum Verlinken gibst du unten im Eigenschaftenfenster im Hyperlinkfeld den Dateinamen mit dem eventuellen relativen Pfad an.

Um einen Link auf eine E-Mail-Adresse zu legen (dessen Anklicken zum Öffnen des Computer-eigenen Mailprogrammes führt), markierst du die entsprechende Textstelle und klickst dann auf Einfügen - Email-Verknüpfung oder du klickst in der Einfügen-Leiste in der Rubrik Allgemein auf das Mail-Symbol.
Im sich öffnenden Dialogfenster gibst du dann die vollständige E-Mail-Adresse an.
Alternativ könntest du auch direkt unten im Hyperlinkfeld des Eigenschaften-Fensters die Mailadresse eintragen und den Text "mailto:" davor setzen.

Wähle Site - Sites bearbeiten, klicke im sich öffnenden Fenster auf deinen Sitenamen und wähle dann Bearbeiten... . Klicke dann etwa dreimal auf Weiter, du bist dann in dem Fenster Dateifreigabe, in dem du deine Zugangsdaten einträgst, die du von deinem Internetprovider bekommen hast.

Wenn du alles ausgefüllt hast, solltest du zunächst versuchen, eine Testverbindung aufzubauen, um zu sehen, ob alles OK ist.

Nach einem Druck auf Weiter wirst du noch gefragt, ob du Dateien ein- und auschecken willst - solange du die Site allein verwaltest, solltest du hier Nein wählen

Wenn du oben auf Erweitert klickst, kannst du noch einige weitere Eigenschaften deiner Site festlegen - momentan kannst aber wahrscheinlich alles so belassen. (Sollte die Testverbindung nicht klappen, kannst du hier ein Häkchen vor passiven FTP verwenden setzen, evtl klappt es dann besser. )

Wenn du Dateien per FTP zwischen dem Internet-Server und deinem Rechner austauschen willst, musst du zunächst im Site-Fenster auf das Verbinden-Symbol klicken; wenn die kleine Lampe grün leutet, steht die Verbindung.

Wenn du im Sitefenster gleichzeitig die lokalen und die fernen Dateien sehen willst, kannst du auf die Schaltfläche Wiederherstellen/Minimieren klicken, du bekommst dann ein bildschirmfüllendes Sitefenster. Ein weiterer Klick auf dieses Symbol führt zurück zur alten Ansicht.

Wenn du deine Homepage von verschiedenen Rechnern aus pflegst (z.B. Notebook und PC), musst du die Dateien zwischen deinen Rechnern und dem Internetserver bei jedem Rechnerwechsel abgleichen, um immer die aktuellen Dateien bearbeiten zu können.

Wähle im Site-Fenster Site - Synchronisieren und wähle dann die Optionen so, dass alle aktuelleren Dateien der Homepage auf deinen Rechner übertragen werden. Nach dem Drücken auf Vorschau startet der Vorgang.