Siteverwaltung – Webseite in Dreamweaver anlegen

In diesem Workshop möchte ich erklären, wie eine Site angelegt wird und welche Vorteile das hat. Ein klein wenig Theorie:

Wenn innerhalb einer HTML-Datei (also des eigentlichen Dokuments) auf ein anderes verwiesen wird, wird ein Link gesetzt. Jetzt wird jedoch dabei unterschieden, ob ein absoluter Pfad oder ein relativer Pfad angegeben wird.

Absolute Pfade

Absolute Pfade enthalten die vollständige URL des verknüpften Dokuments und das zu verwendende Protokoll (für Webseiten in der Regel http://). http://www.macromedia.com/support/dreamweaver/contents.html ist ein Beispiel für einen absoluten Pfad.

Absolute Pfade sind erforderlich, wenn ein Hyperlink zu einem Dokument auf einem anderen Server erstellt werden soll. Es können absolute Pfade zwar auch für lokale Hyperlinks (d. h. für Hyperlinks auf Dokumente derselben Site) verwendet werden, doch wird dies nicht empfohlen. Wenn später die Site zu einer anderen Domäne verlagert wird, werden alle lokalen absoluten Pfade ungültig. Die Verwendung relativer Pfade bietet auch eine größere Flexibilität, wenn ich die Dateien innerhalb der Website verschieben muss. Außerdem wird der Quellcode so ein wenig kleiner.

Hinweis: Bilder einfügen (nicht Hyperlinks): Wenn ein absoluter Pfad zu einem Bild verwendet wird, das auf einem Remote-Server gespeichert und nicht auf der lokalen Festplatte verfügbar ist, kann das Bild nicht im Dokumentfenster angezeigt werden. Stattdessen muss eine Vorschau des Dokuments in einem Browser anzeigt werden, wenn das Bild angezeigt werden soll. Darum verwendet man möglichst dokumentrelative oder zum Site-Stammordner relative Pfade für Bilder, sofern dies möglich ist.

 

Relative Pfade

Relative Pfade sind Links zu Dateien auf dem eigenen Server, jedoch ohne http://www.sitenname/ sondern nur z.B. Bilder/bild1.html .

Vorteil ist, dass, wenn der Webserver bzw. die Seite sich vom Namen ändert, alle Links noch funktionieren, und das sogar, wenn die Seite auf dem PC getestet wird! Darum unbedingt immer relative Pfade benutzen, außer, es wird eine Datei von einer fremden Seite verlinkt.

Dreamweaver erstellt standardmäßig Hyperlinks zu anderen Seiten in der angelegten Site mithilfe dokumentrelativer Pfade. Bei kleineren Seiten können alle Dateien in einem Ordner gelagert werden. Jedoch sollte bei jeder ordentlich geführten Seite ein Unterordner mit den Bildern und dann z.B. ein Unterordner mit den Downloads angelegt werden, damit alles schön seine Ordnung hat. Im Hauptordner werden dann nur die HTML- / PHP-Dateien abgelegt. So sind auch die meisten CMS-Systeme aufgebaut.

Hier ein kleines Beispiel, wie es bei einer ordnungsgemäßen HTML-Webseite aufgebaut sein sollte:

Wir empfehlen:
Dreamweaver-Video-Training

 

Und hier, wie z.B. Joomla! aufgebaut ist (CMS -> Content Management System):

 

So genug von der Theorie. Jetzt erkläre ich das Site-Verwaltungstool von Dreamweaver:

Bevor es losgeht, sollte unbedingt darauf geachtet werden, wenn die Site eingerichtet ist, niemals Änderungen außerhalb von Dreamweaver vorzunehmen (z.B. im Explorer Dateien umbenennen innerhalb der Site-Ordnerstruktur). Auch dürfen die Dateinamen (Bilder usw.) niemals Umlaute, Leerzeichen oder Sonderzeichen besitzen (die können zwar von Firefox gelesen werden, aber von vielen anderen Browsern und ggf. auch Suchmaschinen nicht).

Eine neue Site wird bei Dreamweaver im Menü unter Site>Neue Site angelegt. Ein Dialog öffnet sich. Jetzt werden die gesamten Einstellung für die neue Site eingegeben:

 

Unter dem Punkt Site-Name wird z.B. der Name der Webseite eingetragen. Hier kann auch ein Name x-beliebiger Name eingetragen werden. Er dient ausschließlich der Organisation der Dateien innerhalb von Dreamweaver. Die Schreibweise ist dabei vollkommen egal (auch Umlaute und Sonderzeichen sind erlaubt).

Bei Lokaler Stammordner wird ein Ordner ausgewählt, worin die Webseite auf der Festplatte abgelegt wird. Das Häkchen bei Liste mit lokalen Dateien automatisch aktualisieren sollte unbedingt angeklickt sein, damit Dreamweaver Änderungen an Dateien automatisch aktualisiert.

Der Standard-Bildordner ist ein Ordner, worauf Dreamweaver beim Einfügen eines neuen Bildes automatisch zugreift.

Bei Hyperlinks relativ zu kann eingestellt werden, ob Links relativ zum Stammordner oder zum Dokument sein sollen. Für normale HTML-Webseiten ohne CMS-Funktion sollte zum Dokument ausgewählt werden. Bei CMS kann auch zum Stammordner benutzt werden, jedoch ist der Nachteil dieser Verlinkung, dass keine lokale Vorschau erzeugt werden kann.

Bei HTTP-Adresse wird die Webseiten-URL eingetragen (den kompletten absoluten Pfad wie z.B. http://www.psd-tutorials.de), damit Dreamweaver bei absouten Pfaden die Verlinkungen auf Gültigkeit überprüfen kann.

Die Option Cache aktivieren sollte unbedingt aktiviert werden, damit Dreamweaver Änderungen an der Webseite schneller aktualisieren kann.

 

Im Register Remote-Informationen wird der FTP-Zugang eingerichtet. Dank diese Modules wird kein externen FTP-Programm benötigt. Dreamweaver kann so bei Änderungen sofort die Dateien im Web aktualisieren.

Wenn mit einer Firewall gearbeitet wird, was hoffentlich alle installiert haben sollten, kann es sein, dass die Daten nicht auf den Server hochgeladen werden können. Wenn dem so ist, sollte die Option Passiven FTP verwenden aktiviert werden. Um die Daten sicherer zu versenden, kann die Option Secure FTP (SFTP) verwenden aktiviert werden. Damit bei fehlerhafter Änderung der Dateien nicht gleich die falsche Version online zu sehen ist, sollte die Option Dateien beim Speichern automatisch auf Server laden deaktiviert werden. Danach reicht ein Klick auf den Button Test, um zu sehen, ob die Verbindung korrekt aufgebaut werden kann.

 

Wenn dynamische Webseiten mit PHP & MySQL erstellt werden sollen, so kann ich hier einen Testserver einrichten. Meistens ist es eine z.B. XAMPP-Umgebung (Apache MySQL PHP phpMyAdmin), die sehr einfach zu installieren ist.

 

Dank der Cloaking-Funktion können Dateien, die nicht auf den Webserver gehören, ausgeschlossen werden wie z.B. große Photoshop-Dateien.

 

Mit den Design Notes können Notizen für jede Datei / Ordner angelegt werden. Das ist auch sehr praktisch bei einer Gruppenarbeit.

 

Angelegt werden Design Notes ganz einfach, indem ich auf das Dateienregister gehe und dann mit der rechten Maustaste die Datei auswähle, die einen Kommentar erhalten soll.

 

Mit der Ansicht Sitemap-Layout kann die komplette Ordner- und Dateistruktur und deren Beziehungen zwischen den Dateien angezeigt bzw. definiert werden.

 

Unter Dateiansichtsspalten können die Spalten jeweils ein- oder ausgeblendet werden für die Site-Verwaltung.


Sollte das Programm Contribute von Adobe installiert sein, kann diese Option aktiviert werden (ist ein Programm zum Verwalten von Webseiten).

Im nächsten Workshop werde ich auf die Erstellung der eigentlichen Webseite eingehen.

Wir empfehlen:
PHP-Workshop-DVD - Basics & Tricks

Unsere Empfehlung für dich

Grundlagen HTML, CSS und JavaScript

Grundlagen HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Wer die Grundlagen kennt, navigiert mit klarer Sicht durchs Netz und ist zudem in der Lage, ganz einfach selbst in die Programmzeilen einzugreifen.

  • 62 Lektionen in über acht Stunden Video-Training zum Einstieg in HTML, CSS und JavaScript
  • Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
  • Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Zum Training