Top im Web
Webpublishing mit Dreamweaver und Fireworks
Kurs der Volkshochschule Bern

Hier gehts zurück zur Übungs-Übersicht

Übung 2: Eine Site definieren

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier.

Besonders wichtig ist das Einrichten einer Site, bevor man überhaupt an einer Datei zu arbeiten beginnt, d.h. das etwas erweiterte Anlegen eines Ordners für einen Webauftritt. Man erspart sich auf diese Weise einige Probleme. Da im Kursraum jeweils alle Grundeinstellungen über Nacht gelöscht werden, kommen wir nicht darum herum, an jedem Kurstag eine Site wieder von neuem zu definieren - und das ist nicht mal so schlecht, denn leider denken viele Dreamweaver-EinsteigerInnen, das sei nicht so wichtig und wundern sich dann über seltsame Fehlermeldungen ("Wollen Sie die Datei hierher kopieren?"). Je mehr wir vor dem Arbeiten also dran denken, die Site neu zu definieren, umso besser.

Was hat es aber mit der Site genau auf sich? Dreamweaver erleichtert die Verwaltung einer Site erheblich. So werden z.B. beim Ändern eines Bildnamens oder beim Verschieben einer Datei in einen Unterordner alle Links auf diese Datei oder dieses Bild automatisch angepasst. Zudem besitzt Dreamweaver ein internes Tool zum Upload der Dateien auf den Server. Hat man einmal einen Ordner auf der Festplatte angelegt, empfiehlt es sich, fortan den Windows-Explorer geschlossen zu halten und alle Änderungen nur noch via Dreamweaver-Site zu machen.

Zuerst geht es also darum, einem neuen Auftritt einen eigenen Ordner auf der Festplatte zu geben. Dies ist quasi die Grundbedingung, um ein Chaos zu vermeiden. Legen Sie ein Verzeichnis "Websites" auf Harddisk D an, und dort ein Unterverzeichnis "Kurs" (oder eine beliebige Bezeichnung).

Wenn Sie sich schon im Klaren sind, dass Sie Bilder usw. in der Site haben werden, können Sie im Ordner "Kurs" nun bereits Unterordner namens "images", "downloads", "fotogalerien" usw. anlegen. Achten Sie aber beim Benennen dieser Verzeichnisse darauf, dass Sie hier bereits die Konventionen eines Internet-Dateinamens einhalten - diese Namen werden später Teil des URL (Internetadresse)!

Also: Keine Leerschläge, keine Sonderzeichen und Umlaute, keine gemischte Gross-/Kleinschreibung. Als Ordnername unzulässig wäre folglich "Fotos der Ferien am Ätna". Ich empfehle, Dateinamen nur in Kleinbuchstaben zu schreiben und als einziges Sonderzeichen den Bindestrich - zu verwenden.

Nun geht es ans Definieren der Site - wir müssen Dreamweaver mitteilen, welche Grundvoraussetzungen vorhanden sind, damit das Verwalten der Site möglichst komfortabel vonstatten geht.

Starten Sie Dreamweaver MX oder MX 2004. Wenn Sie das Programm zum ersten Mal starten, bekommen Sie ev. die Frage gestellt, ob Sie den MX- oder 4er-Arbeitsbereich wählen wolllen. Nehmen Sie MX.

Wenn das Programm läuft, wählen Sie im Menu "Site" > Sites verwalten, danach "Neu > Site" (unter älteren DW-Fassungen "Site / Neue Site") und folgen Sie dem Dialog.

Wechseln Sie in den Reiter "Erweitert". Zuerst müssen Sie nun einen Sitenamen wählen. Hier müssen Sie die Dateinamen-Konventionen nicht beachten - dies ist eine interne Bezeichnung. Unter "Lokaler Stammordner" müssen Sie das im Explorer vorgefertigte Verzeichnis auf Harddisk D wählen:

Unter "Remote-Informationen" können Sie sodann die Servereinstellungen eingeben. In der gedruckten Kursdokumentation finden Sie (auf einem farbigen, separaten Blatt) alle nötigen aktuellen Angaben für unseren Kurs. Aus Sicherheitsgründen können diese nicht online verfügbar gemacht werden - auf den Screenshots hier sind nur Beispielangaben.

Achtung: Die Bezeichnungen für das, was man landläufig unter Server, Username und Passwort versteht, sind leider überall verschieden. Als Bezeichnungen für ein und dasselbe gelten in der Regel:

• FTP-Host = Server, Host
• Host-Ordner = Initial Remote Host Directory
• Anmeldung = Username, Benutzerkennung, Benutzername, User, Account
• Kennwort = Username, Benutzerkennung, Benutzername, User, Account, Kennung, Login

Unter "Host-Ordner" muss ein auf dem Server existierender Ordner eingegeben werden, in unserem Fall "ihrnachname" (ein unterverzeichnis mit ihrem familiennamen in kleinschreibung, das ich bereits erstellt habe). So wird die Verbindung von Beginn an in den richtigen Ordner auf dem Server hergestellt. All diese Angaben ändern natürlich von Server zu Server! Nochmals: Hier sehen Sie ausschliessich Beispielwerte, die einzig richtigen Angaben finden sich auf dem farbigen Blatt in Ihrer Dokumentation und müssen auf den Punkt genau exakt eingegeben werden.

Alle haben eigene Benutzernamen. Abrufbar sind die Dateien später im Webbrowser unter der Adresse http://www.topimweb.ch/ihrnachname

Falls nun im Site-Fenster "Remote-Ansicht" gewählt ist, wechseln Sie wieder zur "lokalen Ansicht". "Remote" heisst soviel wie "Auf dem Server" und "lokal" bedeutet "auf Ihrer Harddisk":

Nun haben wir zwei Fliegen auf einen Schlag: Einerseits eine gescheite Site-Verwaltung, andererseits die Möglichkeit, Dateien auf den Server zu kopieren - wo Sie sofort weltweit abrufbar sind.

Wenn Sie nur gerade www.topimweb.ch/ihrnachname eingeben wollen (ohne Angaben eines Dateinamens wie "blabla.htm" nach "ihrnachname"), müssen Sie zwingend eine Datei namens index.htm oder index.html zuoberst in Ihrem Verzeichnis haben. Nur so benannte Dateien werden vom Server automatisch dargestellt.

Wenn Sie also im Browser die Meldung...

...bekommen, nachdem Sie die Adresse korrekt eingegeben haben, haben Sie entweder

• Ihren Nachnamen falsch geschrieben
• keine index.htm oder index.html auf dem Server
• ins falsche Verzeichnis kopiert.

Zurück zur Site! Zuerst werden ab sofort alle Links und Verweise automatisch angepasst, wenn Sie eine Datei umbenennen oder innerhalb der Site verschieben. Dreamweaver fragt vorher jeweils nach, ob das Programm nach Dateien suchen soll, die geändert werden müssen:

Mit "Datei / Seite überprüfen / Hyperlinks überprüfen" können Sie zudem "tote Links" innerhalb Ihres Auftritts suchen und flicken. Achtung: Nicht geprüft werden natürlich Links zu externen Seiten, diese werden lediglich aufgezählt.

Nun - wir haben jetzt ein schönes Fenster mit allen nötigen Feldern. Dieses sollte etwa so aussehen:

Unten haben Sie das sogenannte Eigenschaften-Fenster, hier können Sie (wie Sie es von Word gewöhnt sind) Texte mit bestimmten Attributen oder Links versehen, Bilder einfügen usw.

Rechts haben Sie Ihr Site-Verwaltungsfenster, wo Sie alle Dateien Ihrer Site stets sehen. Die Verwaltung der Site (Umbenennen von Dateien, Verschieben von Dateien in andere Ordner usw.) geschieht HIER (und NUR hier).

Wenn Sie Dateien auf den Server schieben wollen, stellen Sie sicher, dass die Angaben zum Server (siehe oben) korrekt sind.

Die schnellste Variante ist sodann, die Datei oder den Ordner einmal anzuklicken, den Sie auf den Server aufschalten wollen, und dann den "Bereitstellen"-Knopf zu klicken, wobei "Bereitstellen" hier etwas umständlich für "auf den Server kopieren" steht:

Kommt nur eine Fehlermeldung? Dann haben Sie leider die Server-Werte vom Blatt falsch abgetippt. Wählen Sie "Site / Sites verwalten" (frühere DW-Fassungen: "Site / Sites bearbeiten"). Wählen Sie Ihre soeben definierte Site aus und wählen Sie "Bearbeiten". Unter "Remote-Informationen" korrigieren Sie Ihre Eingaben, die Sie alle mit "OK / Fertig" bestätigen, bis Sie wieder am Anfang sind.

Versuchen Sie es nochmals. Wenns nicht klappt, rufen Sie mich ungeniert! Zu Ihrer Beruhigung: Die wenigsten schaffen das auf Anhieb. In einigen Wochen können Sie dies im Schlaf.

Sie können übrigens auch manuell einen Blick auf den Server werfen, um dort Ordner zu erstellen oder andere Arbeiten zu erledigen. Klicken Sie auf den "Verbinden"-Button:

Dort, wo vor kurzem noch "lokale Ansicht" stand, steht nun "Remote-Ansicht", was soviel bedeutet wie "Ansicht der Daten auf dem Server". Viel wird hier am Anfang nicht sichtbar sein. Sie können ja z.B. als Test mal einen neuen Ordner erstellen, indem Sie mit der rechten Maustaste auf den leeren Bereich oder den Servernamen klicken und "Neuer Ordner" wählen. So können Sie diesen später auch löschen.

Der Button ganz rechts in der Siteverwaltung dient dazu, gleichzeitig die Datenstruktur auf der Harddisk und auf dem Server nebeneinander darzustellen:

(oben: Screen aus Dreamweaver MX 2004 / unten: CS3)

So können Sie - wie Sie es vom Explorer gewöhnt sind - Dateien mit der Maus "packen" und hin- und herschieben; schieben Sie die Dateien immer direkt auf den Ordner, in den Sie kommen sollen. Wenn Sie "zuoberst" (ins "Root", also in keinem Unterordner) hin kommen, steuern Sie den obersten "Ordner" an (Servername), der natürlich streng genommen gar kein Ordner ist.

Beantworten Sie beim Kopieren die Meldung "abhängige Dateien einschliessen?" lieber mit NEIN, wenn Sie Ihre Page gut im Griff haben, sonst dauert der Up-/Download ev. zu lange, da auch alle zu einer Page gehörenden Bilder usw. nochmals übertragen werden. Sofern Sie es schätzen, dass Dreamweaver auch gleich die mit einer Datei verknüpften Elemente (Bilder usw.) mit hinauf schiebt, sagen Sie JA.

Übrigens: Die lokalen Daten können auch rechts sein - bei "Bearbeiten / Voreinstellungen" unter "Site" können Sie wählen, welche Dateien Sie links und rechts haben wollen.

Die Dateien auf dem Server bleiben übrigens sichtbar, auch wenn die Verbindung zum Host getrennt wurde.

Wenn Sie die Site-Definiton wieder verlassen haben und von neuem aufrufen wollen (z.B. weil Sie die Remote-Informationen ändern wollen), wählen Sie "Site / Sites verwalten", klicken Sie die gewünschte Site an und wählen Sie "Bearbeiten". Geben Sie die Korrekturen ein - am Schluss wählen Sie "OK" und "Fertig".

Beachten Sie unbedingt den Unterschied: Was mache ich "unter Windows"? Was mache ich "unter Dreamweaver"? - Sie können an sich problemlos einen im Windows-Explorer erstellten Ordner "herz" erstellen und in Dreamweaver eine Site "lunge" definieren, wobei sich die Dateien im Ordner "lunge" befinden. Ob das aber zur Klarheit beiträgt? Nennen Sie den Ordner, der die Site-Dateien enthält (HTML-Dokumente, Fotos, Grafiken...), am besten gleich wie die Dreamweaver-Site.

Achtung:

• Speichern Sie niemals Dateien, die an sich zur Site gehören (z.B. Bilder), ausserhalb der Site ab.
• Definieren Sie nie zwei verschiedene Sites "auf den selben Ordner". Dreamweaver wird dann böse und quittiert Ihre Eingaben mit Fehlermeldungen.
• Wählen Sie als Ordner für eine Site keine Ordner, die sich innerhalb einer bereits definierten Site befinden.
• Fazit: Jedem Webauftritt seinen eigenen Ordner und seine eigene Site!
• Vergewissern Sie sich stets, dass auf der Harddisk und auf dem Server die gleiche Dateistruktur herrscht.

Wenn Sie eine Site nach den bisher genannten Kriterien definiert haben, rühren Sie sie im Windows-Explorer nie mehr an! Arbeiten Sie nur noch in der DW-Site-Verwaltung.

PS: Falls Sie sich schon gewundert haben, was das lästige Verzeichnis "_notes" soll, das sich in Ihrem Auftritt ständig neu einnistet, seien Sie unbesorgt - dies dient den sogenannten Design Notes, die wichtig sind, wenn ein Team an einer Website arbeitet. Dies würde in diesem Kurs zu weit führen. Was Sie wissen müssen: Wenn Sie diese Funktion nicht brauchen, schalten Sie sie in den Optionen der Site aus (Site / Sites bearbeiten / Ihre Site auswählen). Unter "Design Notes" entfernen Sie dann die Häkchen. Zudem sollten Sie unter "Ein-/Auschecken" sicherstellen, dass die Funktion deaktiviert ist.

Arbeiten Sie jedoch in einem Team oder wollen aufwendige Sites bearbeiten, so finden Sie hier mehr zum Thema Design Notes und Dateien ein-/auschecken (freiwilliges Selbststudium).

Zum Nachlesen: KnowWare-Heft 12, Seite 77.

Nun denn: Sie wissen nun also, wie man Dateien auf den Server schiebt (und dort mit dem Browser prüft) sowie vom Server wieder auf die Harddisk. Mit anderen Worten: Der Server ist nicht nur der Ort, wo Ihre Daten im Web abrufbar sind, sondern auch eine Drehscheibe - so können Sie immer auf dem neusten Stand bleiben. Also:

1. Im Kursaum etwas machen, auf den Server kopieren
2. Daheim ebenfalls eine Site definieren, alles Herunterladen und daran weiterarbeiten
3. Am Dienstag vor dem Kurs alles wieder auf den Server laden in der neusten Fassung
4. Im Kursraum zuerst alles vom Server herunterladen und daran weiterarbeiten
5. undsoweiter...

Bedingung dafür ist natürlich, dass Sie möglichst immer die selbe Site-Definition verwenden oder sich konsequent Unterordner für jede Übung erstellen. Die Planung überlasse ich Ihnen - überlegen Sie sich aber, wie Sie dies am besten anstellen wollen.

Hier gehts zurück zur Übungs-Übersicht

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier.