TUTORIAL-ARTIKEL

Experte

30 Min.

Projektüberblick und Site-Definition.

Lerne im ersten Teil dieses Tutorials, wie du eine Dreamweaver-Site definierst, die den lokalen Speicherort für Dateien und Ordner festlegt.

Einführung.

Dreamweaver bietet visuelle Tools für die Entwicklung und Gestaltung von Websites. Das Programm kann auf den ersten Blick einschüchternd wirken, denn der Funktionsumfang ist riesig. Wie soll man sich da nur zurechtfinden?

Anhand dieses achtteiligen Tutorials lernst du Schritt für Schritt, wie du eine einfache, aber elegante Website mit Dreamweaver erstellen kannst. Erfahre, wie du eine Site definierst, die Struktur einer Web-Seite in HTML (Hypertext Markup Language) festlegst, Text und Bilder hinzufügst und Seiten mittels CSS (Cascading Style Sheets) formatierst.

Damit das Tutorial nicht unnötig lang wird, erstelle nur zwei Web-Seiten für deine Website. Dabei lernst du aber alles, was du wissen musst, um später weitere Seiten zu erstellen.


Hinweis: Wenn du vorher noch nie mit Dreamweaver gearbeitet hast, ist das kein Problem. Jedoch sind allgemeine Kenntnisse in HTML (Hypertext Markup Language) und CSS (Cascading Style Sheets) hilfreich, um die in diesem Tutorial behandelten Themen besser einordnen zu können. HTML und CSS sind offene Webstandards, zu denen es zahlreiche Lernressourcen im Web gibt. Wichtige Grundlagen werden beispielsweise in den Tutorials Seiten mithilfe von HTML strukturieren und Web-Seiten mit CSS layouten und formatieren von Adobe sowie im Kurs zu HTML und CSS von Codeacademy vermittelt.

Die fertige Website.

Lade die Beispieldateien herunter. Schaue dir das fertige Projekt an.

  1. Klicke auf den Link oben auf dieser Seite, um die Beispieldateien herunterzuladen.

  2. Extrahiere den Inhalt der ZIP-Datei an einem Speicherort, den du leicht wiederfindest, z. B. deinen Desktop.

    • Unter macOS X: Klicke im Finder auf die heruntergeladene ZIP-Datei, um sie automatisch zu entpacken.

    • Unter Windows: Mache einen Rechtsklick auf die ZIP-Datei. Wähle im Kontextmenü die Option „Alle Dateien extrahieren“. Gib den Pfad an, unter dem du die extrahierten Dateien speichern möchtest. Klicke auf „Extrahieren“.

  3. Die extrahierten Beispieldateien sind in einem Ordner namens „bayside“ zusammengefasst. Dieser Ordner enthält neun Unterordner (siehe Abbildung 1).

  1. Öffne den Ordner part7. Ziehe die Datei „index.html“ in einen Browser, um sie anzuzeigen. Die folgende Abbildung zeigt die Homepage der fertigen Website.

  1. Ziehe den linken oder rechten Rand deines Browser-Fensters nach innen. Sobald das Fenster weniger als 700 Pixel breit ist, ändert sich das Layout – aus zwei Spalten wird eine Spalte. Die Navigationsleiste wird durch das Wort MENU vor einem schwarzen Hintergrund ersetzt. Der ursprünglich weiße, eingerahmte Text über dem Bild der Golden Gate Bridge ist nun dunkelrosa und steht unterhalb des Bildes (siehe Abbildung 3).

  1. Klicke auf das Wort MENU. Daraufhin öffnet sich nach unten hin ein Navigationsmenü mit halbtransparentem, schwarzem Hintergrund (siehe Abbildung 4).

  1. Klicke erneut auf das Wort MENU. Das Navigationsmenü wird nach oben hin wieder ausgeblendet.

  2. Öffne das Navigationsmenü erneut. Klicke auf den Eintrag SIGHTS, um die zweite Seite anzuzeigen (die anderen Menüpunkte sind nur Platzhalter).

Das also ist die Website, die du anhand dieses Tutorials mit Dreamweaver erstellen wirst. Dabei lernst du, wie du folgende Schritte durchführst:

  • Eine Site in Dreamweaver definieren

  • Die Struktur einer Web-Seite mithilfe von HTML5-Elementen festlegen

  • Mithilfe des Bedienfelds „DOM“ innerhalb einer Seite navigieren und neue Elemente hinzufügen

  • Text und Bilder zu einer Seite hinzufügen

  • Bilder aus einer Creative Cloud-Bibliothek herunterladen und anpassen

  • Eine Web-Seite mithilfe des Bedienfelds „CSS Designer“ formatieren

  • Eine zweite Web-Seite mit gleicher Formatierung erstellen

  • Das Layout mittels Media Queries steuern

  • Die fertigen Seiten auf einen Online-Webserver hochladen

Außerdem lernst du die wichtigsten Bereiche des User Interface von Dreamweaver kennen.

Dieses Tutorial ist sehr ausführlich. Nimm dir ausreichend Zeit dafür. Jeder Teil ist in kurze Abschnitte unterteilt, die nicht nur das Wie, sondern auch das Warum erklären. Lege zwischen den einzelnen Abschnitten Pausen ein, um das Gelernte nochmals zu verinnerlichen.

Hinweis: Dieses Tutorial wurde für Dreamweaver 2015.2 geschrieben und verweist auf Funktionen, die in älteren Versionen nicht verfügbar sind. Wir empfehlen dir, das Tutorial mit Dreamweaver 2015.2 (oder höher) durchzuarbeiten, auch wenn du prinzipiell dieselbe Website auch mit einer früheren Version von Dreamweaver erstellen könntest. Falls du kein Creative Cloud-Abo hast, kannst du auch die kostenlose Testversion verwenden.

Den Dreamweaver-Arbeitsbereich einrichten.

Bevor du anfängst, wechsle zum Arbeitsbereich „Entwurf“. Hier kannst du direkt auf alle Bedienfelder zugreifen, die du für dieses Tutorial brauchst. Unter Windows klickst du dazu am einfachsten auf die Arbeitsbereich-Auswahl rechts oben (siehe Abbildung 5).

Unter macOS X befindet sich die Arbeitsbereich-Auswahl normalerweise an derselben Stelle. Wenn du den Anwendungsrahmen deaktiviert hast, findest du sie auf der linken Seite. Falls du auch die Programmleiste deaktiviert haben solltest, ist die Arbeitsbereich-Auswahl nicht sichtbar. Alternativ kannst du den Arbeitsbereich „Entwurf “ auch über Fenster > Arbeitsbereichlayout > Entwurf aufrufen.

Eine Site in Dreamweaver einrichten.

Ein häufiger Anfängerfehler ist, in Dreamweaver mit der Arbeit an Web-Seiten zu beginnen, ohne vorher eine Site definiert zu haben. In dem Fall zeigen alle Verknüpfungen zu Elementen wie Bildern und Stylesheets auf einen lokalen Speicherort auf der Festplatte deines Computers. Das geht solange in Ordnung, bis die Website auf einen Remote-Server hochgeladen werden soll. Dann funktionieren die Links nicht mehr und müssen mühsam repariert werden. Wenn du immer zuerst eine Site definierst, bleibt dir dieser Zusatzaufwand erspart. Das ist auch schnell und einfach erledigt.

In Dreamweaver werden über eine Site alle Dokumente, die du für deine Website verwendest, in einem lokalen Verzeichnis zusammengestellt. Das vereinfacht die Verfolgung und Verwaltung von Links, die Organisation der zugehörigen Dateien und das Hochladen der Website-Dateien auf einen Webserver. Eine Dreamweaver-Site besteht in der Regel aus mindestens zwei Teilen:

  • Lokaler Ordner: Das ist dein Arbeitsverzeichnis – meist ein Ordner auf deiner Festplatte. In Dreamweaver wird dieser Ordner als „Stammordner“ bezeichnet.

  • Remote-Ordner: Dieser Ordner liegt auf dem Computer, der den Webserver ausführt. Der Webserver ist meist (aber nicht immer) der Computer, über den deine Website im Internet veröffentlicht wird.

Tipp: Falls du an mehreren Websites gleichzeitig arbeiten möchtest, solltest du für jede Website einen eigenen Ordner auf deiner Festplatte anlegen. Unter macOS X ist bereits ein Ordner „Sites“ im Benutzerverzeichnis angelegt. Unter Windows musst du einen Ordner namens „Sites“ auf der obersten Ebene des Laufwerks C:\ einrichten. Die Screenshots für dieses Tutorial wurden auf einem Windows-Rechner erstellt. Die Anweisungen für macOS X sind identisch. Es gibt lediglich Unterschiede bei den Tastaturbefehlen und den Bezeichnungen einiger Buttons (auf die gegebenenfalls hingewiesen wird).

Einen lokalen Site-Ordner für die Bayside Beat-Website definieren.

Zunächst musst du deiner Site einen Namen geben und Dreamweaver mitteilen, wo du die Dateien auf dem lokalen Computer speichern möchtest. Den Remote-Ordner musst du erst bestimmen, wenn du deine Website über einen Webserver im Internet veröffentlichen möchtest.

  1. Starte Dreamweaver. Wähle Site > Neue Site. Das Dialogfeld „Site-Definition“ wird angezeigt.

  2. Gib im Feld Site-Name den Namen Bayside Responsive ein. Dieser Name wird intern von Dreamweaver verwendet, um die Site zu identifizieren. Es spielt keine Rolle, ob der Name Leerzeichen enthält.

  3. Klicke auf das Ordnersymbol neben dem Feld Lokaler Site-Ordner. Navigiere zum Ordner „bayside“, den du mit den Beispieldateien heruntergeladen hast. Das Dialogfeld „Site-Definition“ sollte jetzt so aussehen wie in Abbildung 6. Der Dateipfad im Feld „Lokaler Site-Ordner“ richtet sich danach, wo du den Ordner „bayside“ auf deiner Festplatte gespeichert hast.

  1. Blende die Optionen unter Erweiterte Einstellungen links im Dialogfeld Site-Definition ein. Wähle Lokale Info.

  2. Klicke auf das Ordnersymbol rechts neben dem Feld Standard-Bilderordner, um das Dialogfeld Bilderordner wählen zu öffnen.

  3. Klicke auf Neuer Ordner (unter Windows befindet sich die Option oben im Dialogfeld, unter macOS X unten). Nenne den Ordner „images“. Wähle ihn aus. Klicke auf Ordner auswählen (Windows) bzw. Auswählen (macOS). Das Dialogfeld „Site-Definition“ sollte nun so aussehen wie in Abbildung 7.

  1. Behalte bei den anderen Optionen die Standardeinstellungen bei. Du musst im Feld „Web-URL“ nichts eintragen, weil du Links verwenden wirst, die relativ zum Dokument arbeiten.

  2. Klicke auf Speichern.

Das Bedienfeld „Dateien“ zeigt nun den neuen lokalen Stammordner für deine aktuelle Website an (siehe Abbildung 8). Die Dateiliste im Bedienfeld „Dateien“ funktioniert wie ein Datei-Manager, d. h., du kannst wie im Explorer (Windows) bzw. Finder (macOS) Dateien kopieren, einfügen, löschen, verschieben und öffnen.

Damit hast du einen lokalen Site-Ordner für die Bayside Beat-Website definiert. Hier wirst du die Arbeitskopien der Web-Seiten lokal auf deinem Computer speichern. Du hast außerdem den Standardordner für Bilder angelegt. Sobald du Bilder von einer Quelle außerhalb des Site-Stammordners importierst, wird Dreamweaver sie automatisch in diesen Ordner kopieren.

Best Practices zur Benennung von Dateien und Ordnern für Websites.

In der Regel umfasst eine Website eine Vielzahl von Dateien und Ordnern. Um sie leichter verwalten zu können, solltest du sie nach logischen Kriterien organisieren. Lege jeweils eigene und aussagekräftig benannte Ordner für Bilder, Videos, Stylesheets und externe JavaScript-Dateien an. Weiterhin solltest du folgende Punkte beachten:

  • Datei- und Ordnernamen für Websites dürfen weder Leerzeichen noch folgende Sonderzeichen enthalten: /\?%*:|”<>.

  • Auch wenn andere Sonderzeichen erlaubt sind, verwende am besten nur alphanumerische Zeichen, Bindestriche und Unterstriche.

  • Die meisten Datei- und Ordnernamen tauchen in der URL einer Web-Seite auf. Sie sollten daher kurz und trotzdem aussagekräftig sein. Lange URLs sind schwer zu merken bzw. in Browsern auf Smartphones oder Tablets einzugeben.

  • Die meisten Websites werden auf Linux-Servern gehostet, bei denen die Groß- und Kleinschreibung wichtig ist. Die Suche nach Dateien wird leichter, wenn du zur Benennung von Dateien und Ordnern ausschließlich Kleinbuchstaben verwendest.

Projektelemente in einer Creative Cloud-Bibliothek speichern.

Die Bilder und das Farbschema für dieses Projekt sind online in einer freigegebenen Creative Cloud-Bibliothek gespeichert. Creative Cloud-Bibliotheken bieten den Vorteil, dass du damit von überall auf deine Inhalte zugreifen kannst. Außerdem sind sie besonders nützlich, wenn du mit anderen an einem Projekt arbeitest, z. B., wenn eine Person für die Erstellung der Elemente zuständig ist und du für die eigentliche Website. Weitere Informationen zur Verwendung von Creative Cloud-Bibliotheken in Dreamweaver findest du in der Online-Hilfe.

Du musst die Elemente aus der freigegebenen Bibliothek in einer eigenen Bibliothek speichern.

  1. Verwende die Elemente aus der Bibliothek Bayside .

  2. Klicke rechts oben im Browser-Fenster auf In der Creative Cloud speichern. Speichere die freigegebenen Inhalte in deiner eigenen Bibliothek für Bayside, falls du das nicht schon getan hast.

  3. Wähle im Bedienfeld „CC Libraries“ die Bibliothek „Bayside“ aus. Du müsstest die folgenden vier Bilder und sechs Farbfelder sehen.

Arbeitsversionen der Web-Seiten anlegen.

Du wirst die Bayside Beat-Website von Grund auf neu erstellen. Die Beispieldateien, die du heruntergeladen hast, enthalten Microsoft Word- und RTF-Dateien mit Text, eine JavaScript-Datei und Kopien des Projekts in verschiedenen Entwicklungsstadien. Anhand dieser Kopien kannst du deine eigenen Dateien überprüfen.

Als Erstes erstellst du zwei HTML-Seiten für die Website.

  1. Wenn der Startbildschirm von Dreamweaver angezeigt wird, klicke im Abschnitt Neu erstellen auf HTML. Oder wähle Datei > Neu. In beiden Fällen öffnet sich das Dialogfeld „Neues Dokument“ (siehe Abbildung 10).

  1. Vergewissere dich, dass in der linken Spalte die Option Neues Dokument ausgewählt ist. Unter Dokumenttyp muss HTML und unter Framework muss die Registerkarte Keine ausgewählt sein.

  2. Gib im Feld Titel den Namen Bayside Beat: Cable Cars ein.

  3. Prüfe, ob unter Dokumenttyp die Standardeinstellung HTML5 ausgewählt ist. Das Feld CSS anfügen sollte leer sein. Falls sich Einträge im Feld „CSS anfügen“ befinden, markiere diese. Klicke auf den Papierkorb rechts neben dem Feld.

  4. Klicke auf Erstellen. Dreamweaver öffnet eine leere HTML-Seite im Dokumentfenster.

  5. Falls nötig, klicke links oben im Dokumentfenster auf Teilen (siehe Abbildung 11), um den zugehörigen HTML-Code einzublenden.

  1. Das Dokumentfenster (bzw. die Ansicht „Live“) ist noch vollkommen leer. Aber in der Ansicht „Code“ wird die grundlegende HTML-Struktur angezeigt (siehe Abbildung 12).

  1. Speichere die Datei. Wähle Datei > Speichern. Oder drücke Strg+S (Windows) bzw. Befehl+S (macOS).

  2. Vergewissere dich, dass im Dialogfeld Speichern unter der lokale Site-Ordner bayside ausgewählt ist. Nenne die Datei index.html. Oder klicke auf Speichern.

  3. Lege noch eine neue HTML-Seite an. Da der Startbildschirm nicht mehr angezeigt wird, musst du Datei > Neu wählen, um das Dialogfeld „Neues Dokument“ zu öffnen. Oder drücke Strg+N (Windows) bzw. Befehl+N (macOS).

  4. Wähle dieselben Einstellungen wie in Schritt 2. Aber lasse dieses Mal das Feld Titel leer. Klicke dann auf Erstellen.

  5. Speichere die Datei im Stammordner unter dem Namen sights.html.

  6. In der Ansicht „Code“ steht zwischen denTITLE -Tags in Zeile 5 Unbenanntes Dokument.

    Dieser Text wird auf der Titelleiste einer Browser-Registerkarte oder eines Browser-Fensters angezeigt und von Suchmaschinen ausgewertet. Diesen Wert unverändert zu übernehmen, ist ein weiterer Anfängerfehler.

    Du hast zwei Möglichkeiten, den Wert zu ändern:

    • Klicke in den Code, und ändere den Wert manuell. Achte darauf, dass die öffnenden und schließenden HTML-Tags intakt bleiben.

    • Benutze den Eigenschafteninspektor von Dreamweaver (siehe Schritt 14).

  7. Der Eigenschafteninspektor ist das breite Bedienfeld unterhalb des Dokumentfensters im Arbeitsbereich „Entwurf“. Falls nötig, klicke auf die Registerkarte „Eigenschaften“, um sie nach vorne zu holen. (Standardmäßig ist die Registerkarte „Ausgabe“ geöffnet.)

  8. Um die Änderungen zu übernehmen, drücke die Tabulator- oder Eingabetaste. Damit wird der Text Unbenanntes Dokument in Zeile 5 des HTML-Codes durch den Wert im Feld „Dokumenttitel“ ersetzt (siehe Abbildung 13).

  1. Speichere die Datei „sights.html“.

Obwohl Dreamweaver den HTML-Code automatisch erstellt, solltest du Web-Seiten überwiegend in der Ansicht „Teilen“ bearbeiten. Du kannst dann schnell überprüfen, ob Änderungen auch korrekt implementiert wurden. Das soll nicht heißen, dass Dreamweaver nicht zuverlässig arbeiten würde. Das Programm tut – außer in besonders ungewöhnlichen Situationen – genau das, was du ihm vorschreibst. Aber du solltest immer wissen, wo im Dokument du dich gerade befindest. Falls die Einfügemarke an der falschen Stelle steht, wird neuer Code trotzdem dort eingefügt. Wenn du nicht aufpasst, erzeugst du „Spaghetti-Code“, der sich vielleicht nur schwer entwirren lässt. Das Bedienfeld „DOM“, das du im nächsten Teil des Tutorials kennenlernen wirst, hilft dir, den Überblick über die Seitenstruktur zu behalten.

Tipp: Wenn du den HTML-Code lieber neben der Layout-Ansicht eingeblendet haben möchtest, wähle Ansicht > Vertikal teilen. Um das Dokumentfenster horizontal zu teilen, klicke erneut auf diese Option. Über das Menü „Ansicht“ kannst du auch festlegen, auf welcher Seite die Ansicht „Live“ angezeigt werden soll. Ziehe den Balken zwischen den Ansichten „Code“ und „Live“, um deren Größe relativ zueinander zu verändern. Dreamweaver merkt sich deine Einstellungen automatisch.

Du hast deine Site definiert und zwei leere Web-Seiten erstellt. Als Nächstes fügst du die ersten Inhalte zu den Seiten hinzu.


Beitrag Von

David Powers

25. August 2022

Probiere diese Tutorials mit Dreamweaver aus

Moderne, responsive Web-Seiten gestalten