Hallo.
In diesem Video zeige ich Ihnen, wie Sie eine Site in Dreamweaver definieren.
Das ist der erste Schritt, wenn Sie in Dreamweaver ein neues Projekt beginnen.
Alle Dateien einer Website sollten zentral verwaltet werden.
Sehen wir uns eine vorhandene Site-Definition an.
Die Ansicht variiert je nach Modus.
Ich bin im Standard-Modus.
Im Entwickler-Modus befindet sich das Bedienfeld „Dateien“ (Files) links, im Standard-Modus ist es auf der rechten Seite.
Falls es gar nicht angezeigt wird, blenden Sie es über „Fenster > Dateien“ (Window > Files) ein.
Das ist also eine Site-Definition, die ich schon vorher angelegt habe.
Im Prinzip bildet sie einen Ordner ab, der auf meinem Desktop liegt und „Rendered“ heißt.
In diesem Ordner befinden sich eine HTML-Datei, eine CSS-Datei, ein Ordner mit JavaScript-Dateien sowie Bilder und einige Videos.
Sehen wir uns das auf dem Desktop an.
Im Ordner auf dem Desktop sind exakt die gleichen Inhalte vorhanden: HTML-Datei, CSS, der Ordner „images“ ...
Die Site-Definition ist also eine Art Verknüpfung zu den Inhalten auf dem Desktop.
Erstellen wir nun unsere eigene Site-Definition.
Ich öffne das Dreamweaver-Menü „Site“ und wähle „Neue Site“ (New Site).
Im Feld „Site-Name“ (Site Name) können Sie einen Namen für Ihre Site eingeben.
Das ist nur eine interne Referenz, und Sie können einen beliebigen Namen verwenden.
Ich nenne die Site „My Portfolio“.
Hier sind Leerzeichen zwischen den Wörtern erlaubt.
Der Eintrag unter „Lokaler Site-Ordner“ (Local Site Folder) ist wichtig.
Er informiert Dreamweaver, wo die Website-Inhalte sind.
Ich klicke auf das Symbol für „Durchsuchen“ und navigiere zum Desktop.
Ich lege einen neuen Ordner auf dem Desktop an und nenne ihn „my_portfolio“.
Verwenden Sie keine Leerzeichen, wenn Sie einen Ordner benennen.
Verwenden Sie stattdessen Binde- oder Unterstriche.
Ich klicke auf „Erstellen“ (Create) und dann auf „Auswählen“ (Choose).
Gut.
Dreamweaver weiß jetzt, wo alle benötigten Dateien zu finden sind.
Jetzt gebe ich an, wo ich die Bilder speichern werde.
Ich navigiere zu „Erweiterte Einstellungen > Lokale Info“ (Advanced Settings > Local Info) und dann zu „Standard-Bilderordner“ (Default Images folder).
Ich klicke wieder auf das Symbol für „Durchsuchen“ und auf „Neuer Ordner“ (New Folder).
Ich nenne ihn „images“.
Dann klicke ich auf „Erstellen“ (Create) und auf „Auswählen“ (Choose).
Das ist wichtig, wenn wir Bilder in unsere Website einbinden und sie dazu von verschiedenen Orten aus hineinziehen.
Dreamweaver ist so intelligent, die Bilder zu erkennen und sie im Ordner „images“ abzulegen.
Denken Sie daran: Alle Inhalte müssen in diesem Ordner liegen, damit die Website funktioniert.
Die Site ist definiert.
Ich klicke auf „Speichern“ (Save).
Werfen wir einen Blick auf den Ordner auf dem Desktop und vergleichen ihn.
OK, hier ist der Ordner „my_portfolio“.
Darin befindet sich der Ordner „images“.
Sonst ist noch nichts vorhanden, aber dieser Ordner wird alle Inhalte der Website aufnehmen.
Ich wechsle zurück zu Dreamweaver und erstelle eine Beispieldatei.
Auf der rechten Seite sehen Sie die lokalen Dateien mit dem Ordner „images“.
Hier erstelle ich ein HTML-Dokument, das ich zunächst leer lasse.
Ich klicke auf „Speichern“ (Save) und nenne das Dokument „index.html“.
Ich speichere.
Wie Sie sehen, legt Dreamweaver das Dokument in diesem Ordner ab.
Im Ordner auf dem Desktop ist die Index-Datei ebenfalls vorhanden.
Das ist der Sinn der Site-Definition: Alle Inhalte gelangen an die richtige Stelle.
Sehen wir uns weitere Vorteile an, die eine Site-Definition bietet.
Bei dieser Dreamweaver-Site sind die Site-Definition, eine HTML-Datei, einige Bilder, eine CSS-Datei und weitere Inhalte vorhanden.
Ich öffne nun „index.html“ per Doppelklick.
Die Datei wird hier links geöffnet.
Ich bin in der Code-Ansicht, Sie vielleicht in der geteilten oder der Live-Ansicht oder sogar im Entwickler-Modus.
Hier also sind die Datei „index.html“ und der Ordner „images“.
Verweise auf den Ordner „images“ gibt es viele in dieser Site.
Das sehen Sie zum Beispiel hier am Eintrag „images/menu-hamburger.png“.
Sie sehen, dass Bilder überall auf der Site verwendet werden.
Hier steht „images“, hier und hier ebenfalls.
Der Eintrag kommt häufig vor, da die Site viele Bilder verwendet.
Ich starte die Vorschau im Browser, um die Website anzuzeigen.
Und zwar mit „Datei“ (File) > „Echtzeitvorschau > Google Chrome“ (Real-time Preview > Google Chrome.app).
Hier ist die Site mit einem schönen Video, das im Hintergrund abläuft.
Hier ist ein Bild.
Noch ein Bild.
Viele Bilder.
Bilder, Bilder, Bilder – jede Menge.
Es gibt also sehr viele Verweise auf den Ordner „images“.
Zurück zu Dreamweaver.
Nehmen wir an, Sie müssen Objekte umbenennen.
Sie könnten das auf dem Desktop tun und beispielsweise den Ordner „images“ in „img“ ändern.
Dieser Name wird auch häufig verwendet.
Wenn ich das aber außerhalb von Dreamweaver mache, also quasi „hintenherum“ den Ordnernamen ändere, sucht Dreamweaver trotzdem noch im Ordner „images“.
In der Vorschau passiert Folgendes: Die Bilder können nicht geladen werden.
Wann immer Sie also Änderungen an Dateien vornehmen oder Ordnernamen ändern, tun Sie das über das Bedienfeld „Dateien“ (Files).
Ich setze die Änderungen zurück.
In Dreamweaver ändere ich den Ordnernamen nun erneut.
Dazu klicke ich rechts, wähle „Bearbeiten“ (Edit) und dann „Umbenennen“ (Rename).
Ich gebe „img“ ein.
OK.
Jetzt werde ich gefragt, ob alle Verweise auf Dateien auf den neuen Ordner geändert werden sollen.
Ja, das sollen sie.
Wie Sie sehen, wird „img“ hier und in allen anderen Instanzen eingetragen.
Wenn ich jetzt die Vorschau starte ...
Ja!
Alle Bilder sind da, obwohl ich den Namen des Bilderordners geändert habe.
Das gilt für alle Namensänderungen.
Falls Sie CSS-Dateien oder andere Seiten umbenennen möchten, machen Sie das immer im Bedienfeld „Dateien“, damit Dreamweaver den Code so anpassen kann, dass alle Inhalte weiterhin funktionieren.
So weit zu den Grundlagen zum Anlegen einer Site.
Gehen wir ein wenig ins Detail.
Nehmen wir an, ich möchte die Site-Definition ändern.
Dazu wähle ich im Menü „Site“ nicht „Neue Site“ wie vorhin, sondern „Sites verwalten“ (Manage Sites).
Hier sind all meine Site-Definitionen aufgelistet.
Ich öffne die vorhin erstellte mit dem Namen „My Portfolio“ per Doppelklick.
Hier kann ich den Site-Namen ändern oder einen anderen lokalen Site-Ordner angeben, falls ich ihn verschoben haben sollte.
Eine weitere wichtige Registerkarte ist „Server“ (Servers).
„Server“ enthält die Verbindungsdaten zur Remote-Site oder einer Test-Site.
Damit kann Ihre Site über das Internet aufgerufen werden.
Wenn ich auf das Plussymbol klicke, kann ich die Hosting-Daten eintragen.
Normalerweise erhalten Sie sie von Ihrem Hosting-Anbieter per E-Mail.
Tragen Sie sie hier ein.
Ich gehe nicht auf die Details ein, denn dazu gibt es ein eigenes Video, das die Server-Definition genau erläutert.
Ich klicke auf „Speichern“ (Save), noch einmal „Speichern“ und dann auf „OK“.
Eine weitere praktische Funktion von „Sites verwalten“ ist diese: Wir haben eine Site-Definition für die Website „My Portfolio“ erstellt, einen lokalen Ordner angelegt, die Remote-Site definiert und die Verbindung zu einer Hosting-Plattform hergestellt.
Wenn ich die Site weitergeben möchte, weil z.
B. jemand anderes daran arbeiten soll oder ich selbst den Computer wechseln möchte, z.
B. vom Laptop zum Desktop, geht das, ohne diese ganzen Daten erneut eingeben zu müssen.
Ich wähle die Site aus und klicke auf das Symbol für den Export, klicke auf „OK“ und erhalte eine STE-Datei.
Diese kann ich nun per E-Mail verschicken oder weitergeben.
Der Empfänger – ich breche hier ab – wählt einfach über „Site > Sites verwalten“ die Option „Site importieren“ (Import).
Die Site wird importiert mit allen Daten vorhanden, sodass der Empfänger sofort damit arbeiten kann.
Zum Löschen einer Site klicken Sie auf das Minussymbol.
Die Site ist bereits ausgewählt.
Ich klicke auf das Minussymbol.
Folgendes passiert: Wenn ich die Site-Definition durch Klicken auf das Minussymbol lösche, werde ich gewarnt, dass das nicht rückgängig gemacht werden kann.
Ich klicke dennoch auf „Ja“ (Yes).
Aber keine Sorge.
Ich klicke auf „OK“ und auf „Fertig“ (Done) und wechsle dann zum Desktop.
Hier ist meine Portfolio-Site inklusive aller erstellten Dateien.
Die Dateien werden also nicht von der Festplatte gelöscht, nur die Site-Definition wird entfernt.
Prima.
Wir haben eine lokale Site definiert, sie mit einem Server verbunden, und wir haben einige Vorteile des Bedienfelds „Dateien“ kennengelernt.
Sehen wir uns zum Schluss noch an, was es beim Einrichten einer Site mit der ersten Seite auf sich hat.
Wir haben eine Seite namens „index.html“ erstellt.
Sie müssen wissen, dass beim Erstellen einer Site mindestens eine Seite „index.html“ heißen muss.
Warum?
Das ist die Seite, die der Browser sucht und aufruft.
Er zeigt den Namen zwar nicht an, aber dies ist die Startseite, die jede Website haben muss.
Die anderen Seiten können Sie nach Belieben benennen, aber die Seite „index.html“ muss exakt so geschrieben sein.
Sehen wir uns das im Browser an.
Ich rufe die Adobe-Website auf und ergänze „index.html“.
Ich drücke die Eingabetaste, und der Browser zeigt die Seite an, ohne den Seitennamen zu nennen.
Er wird versteckt.
Wenn Sie eine Site mit 1.000 Seiten erstellen, aber die Index-Seite vergessen, wird die ganze Site nicht geladen.
Sie erhalten nur eine Fehlermeldung.
Eine Sache sollten Sie noch wissen, wenn es um Ihre Site und deren Dateien geht: Wenn Sie Dateien außerhalb von Dreamweaver hinzufügen, müssen Sie die Ansicht vielleicht aktualisieren.
Sehen wir uns den Ordner „images“ noch einmal an.
Er enthält einige Bilder, und ich möchte ein weiteres hinzufügen – und zwar außerhalb von Dreamweaver.
Ich navigiere im Finder zum Ordner „images“, und ich möchte diese Datei hinzufügen.
Ich ziehe sie in den Ordner.
Oft wird die Ansicht schnell aktualisiert, ohne dass Sie auf „Aktualisieren“ klicken müssen.
Hier ist es so.
Das geht ganz schnell und automatisch.
Falls nicht, klicken Sie auf das Symbol für „Aktualisieren“.
Damit wird die Aktualisierung der Ansicht erzwungen.
Fein.
So, jetzt haben Sie gelernt, was eine Site-Definition ist.
Sie kennen ihre Funktion zum Verweisen auf einen Ordner auf Ihrem Desktop und wissen, dass alle Dateien für eine Website in diesem einen Ordner vorhanden sein müssen.
Die Site-Definition dient auch zur Verbindung mit einem Remote-Server bzw.
Ihrem Hosting-Anbieter.
Und Sie wissen, dass Sie Objekte über das Bedienfeld „Dateien“ umbenennen sollten, damit Dreamweaver den Code aktualisieren kann.
Denken Sie auch immer daran, eine Seite „index.html“ anzulegen.
Ohne sie geht gar nichts, und die Seite kann nicht geladen werden.
Beides.
So viel also zur Site-Definition in Dreamweaver.
