Im ersten Teil dieses Tutorials lernen Sie, wie Sie eine Dreamweaver-Site definieren, die den lokalen Speicherort für Dateien und Ordner festlegt.
5496-create-first-website_1408x792

Einführung

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

Anhand dieses achtteiligen Tutorials lernen Sie Schritt für Schritt, wie Sie eine einfache, aber elegante Website mit Dreamweaver CC erstellen können. Sie erfahren, wie Sie eine Site definieren, die Struktur einer Web-Seite in HTML (Hypertext Markup Language) festlegen, Text und Bilder hinzufügen und Seiten mittels CSS (Cascading Style Sheets) formatieren.

Damit das Tutorial nicht unnötig lang wird, erstellen Sie nur zwei Web-Seiten für Ihre Website. Dabei lernen Sie aber alles, was Sie wissen müssen, um später weitere Seiten zu erstellen.


Hinweis:
Wenn Sie vorher noch nie mit Dreamweaver gearbeitet haben, 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 im Tutorial Seiten mithilfe von HTML strukturieren und im Artikel Cascading Style Sheets (CSS) von Adobe sowie im Kurs zu HTML und CSS von Codeacademy vermittelt.

Die fertige Website

Laden Sie zunächst die Beispieldateien herunter, und sehen Sie sich das fertige Projekt an.

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

  2. Extrahieren Sie den Inhalt der ZIP-Datei an einen Speicherort, den Sie leicht wiederfinden, z. B. Ihren Desktop.
    • Unter macOS X: Klicken Sie im Finder auf die heruntergeladene ZIP-Datei, um sie automatisch zu entpacken.
    • Unter Windows: Machen Sie einen Rechtsklick auf die ZIP-Datei, und wählen Sie im Kontextmenü die Option „Alle Dateien extrahieren“. Geben Sie den Pfad an, unter dem Sie die extrahierten Dateien speichern möchten, und klicken Sie auf „Extrahieren“.
  3. Die extrahierten Beispieldateien sind in einem Ordner namens „bayside“ zusammengefasst. Dieser Ordner enthält neun Unterordner (siehe Abbildung 1).
fig01
Abbildung 1: Die Beispieldateien enthalten den Stand des Projekts am Ende der einzelnen Lektionen.

    Der Ordner content enthält den Text für die beiden Web-Seiten. Im Ordner js befindet sich eine JavaScript-Datei, die das Erscheinungsbild des Navigationsmenüs auf kleinen Bildschirmen regelt. Die restlichen Ordner enthalten jeweils eine komplette Version des Projekts, wie es am Ende der einzelnen Lektionen aussehen sollte. Sie können Ihren eigenen Code damit vergleichen. Für den achten Teil dieses Tutorials gibt es keinen Ordner, da Sie in diesem Schritt lernen, wie Sie das fertige Projekt auf einen Webserver hochladen.

  1. Öffnen Sie den Ordner part7, und ziehen Sie die Datei „index.html“ in einen Browser, um sie anzuzeigen. Die folgende Abbildung zeigt die Homepage der fertigen Website.
fig02
Abbildung 2: Die Homepage der fertigen Website ist in zwei Spalten gegliedert.
  1. Ziehen Sie den linken oder rechten Rand Ihres 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 vormals weiße, eingerahmte Text über dem Bild der Golden Gate Bridge ist nun dunkelrosa und steht unterhalb des Bildes (siehe Abbildung 3).
fig03
Abbildung 3: Auf kleineren Bildschirmen wird die Seite in einem einspaltigen Layout dargestellt.
  1. Klicken Sie auf das Wort MENU. Daraufhin öffnet sich nach unten hin ein Navigationsmenü mit halbtransparentem, schwarzem Hintergrund (siehe Abbildung 4).
fig04
Abbildung 4: Das Navigationsmenü wird eingeblendet.
  1. Klicken Sie erneut auf das Wort MENU. Das Navigationsmenü wird nach oben hin wieder ausgeblendet.

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

Das also ist die Website, die Sie anhand dieses Tutorials mit Dreamweaver CC erstellen werden. Dabei lernen Sie, wie Sie:

  • eine Site in Dreamweaver definieren

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

  • mithilfe des DOM-Bedienfelds 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 lernen Sie die wichtigsten Bereiche der Dreamweaver-Benutzeroberfläche kennen.

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

Hinweis: Dieses Tutorial wurde für Dreamweaver CC 2015.2 geschrieben und verweist auf Funktionen, die in älteren Versionen nicht verfügbar sind. Wir empfehlen Ihnen, das Tutorial mit Dreamweaver CC 2015.2 durchzuarbeiten, auch wenn Sie prinzipiell dieselbe Website auch mit einer früheren Version von Dreamweaver erstellen könnten. Falls Sie kein Creative Cloud-Abo haben, können Sie auch die kostenlose Testversion verwenden.

Dreamweaver-Arbeitsbereich einrichten

Bevor Sie anfangen, wechseln Sie zum Arbeitsbereich „Entwurf“. Hier können Sie direkt auf alle Bedienfelder zugreifen, die Sie für dieses Tutorial brauchen. Unter Windows klicken Sie dazu am einfachsten auf die Arbeitsbereich-Auswahl rechts oben (siehe Abbildung 5).

fig05
Abbildung 5: Klicken Sie in der Arbeitsbereich-Auswahl auf „Entwurf“.

Unter macOS X befindet sich die Arbeitsbereich-Auswahl normalerweise an derselben Stelle. Wenn Sie den Anwendungsrahmen deaktiviert haben, finden Sie sie auf der linken Seite. Falls Sie auch die Anwendungsleiste deaktiviert haben sollten, ist die Arbeitsbereich-Auswahl nicht sichtbar. Alternativ können Sie den Arbeitsbereich „Entwurf “ auch über Fenster > Arbeitsbereichlayout > Entwurf aufrufen.

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 Ihres 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 Sie immer zuerst eine Site definieren, bleibt Ihnen dieser Zusatzaufwand erspart. Das ist auch schnell und einfach erledigt.

In Dreamweaver werden über eine Site alle Dokumente, die Sie für Ihre Website verwenden, 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 Ihr Arbeitsverzeichnis – meist ein Ordner auf Ihrer 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 Ihre Website im Internet veröffentlicht wird.

Tipp: Falls Sie an mehreren Websites gleichzeitig arbeiten möchten, sollten Sie für jede Website einen eigenen Ordner auf Ihrer Festplatte anlegen. Unter macOS X ist bereits ein Ordner „Sites“ im Benutzerverzeichnis angelegt. Unter Windows müssen Sie 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 Schaltflächen (auf die gegebenenfalls hingewiesen wird).

Lokalen Site-Ordner für die Bayside Beat-Website definieren

Zunächst müssen Sie Ihrer Site einen Namen geben und Dreamweaver mitteilen, wo Sie die Dateien auf dem lokalen Computer speichern möchten. Den Remote-Ordner müssen Sie erst bestimmen, wenn Sie Ihre Website über einen Webserver im Internet veröffentlichen möchten.

  1. Starten Sie Dreamweaver, und wählen Sie Site > Neue Site. Das Dialogfeld „Site-Definition“ wird angezeigt.

  2. Geben Sie 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. Klicken Sie auf das Ordnersymbol neben dem Feld Lokaler Site-Ordner, und navigieren Sie zum Ordner „bayside“, den Sie mit den Beispieldateien heruntergeladen haben. Das Dialogfeld „Site-Definition“ sollte jetzt so aussehen wie in Abbildung 6. Der Dateipfad im Feld „Lokaler Site-Ordner“ richtet sich danach, wo Sie den Ordner „bayside“ auf Ihrer Festplatte gespeichert haben.
fig06
Abbildung 6: Legen Sie den lokalen Site-Ordner für die Website „Bayside Responsive“ fest.
  1. Blenden Sie die Optionen unter Erweiterte Einstellungen links im Dialogfeld Site-Definition ein, und wählen Sie Lokale Info.

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

  3. Klicken Sie auf Neuer Ordner (unter Windows befindet sich die Option oben im Dialogfeld, unter macOS X unten). Nennen Sie den Ordner „images“, wählen Sie ihn aus, und klicken Sie auf Ordner auswählen (Windows) bzw. Auswählen (macOS). Das Dialogfeld „Site-Definition“ sollte nun so aussehen wie in Abbildung 7.
fig07
Abbildung 7: Legen Sie den Standard-Bilderordner fest.
  1. Behalten Sie bei den anderen Optionen die Standardeinstellungen bei. Sie müssen im Feld „Web-URL“ nichts eintragen, weil Sie Links verwenden werden, die relativ zum Dokument arbeiten.

  2. Klicken Sie auf Speichern.

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

fig08
Abbildung 8: Im Bedienfeld „Dateien“ werden die Beispieldateien und der Bilderordner angezeigt.

Damit haben Sie einen lokalen Site-Ordner für die Bayside Beat-Website definiert. Hier werden Sie die Arbeitskopien der Web-Seiten lokal auf Ihrem Computer speichern. Sie haben außerdem den Standardordner für Bilder angelegt. Sobald Sie Bilder von einer Quelle außerhalb des Site-Stammordners importieren, 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, sollten Sie sie nach logischen Kriterien organisieren. Legen Sie jeweils eigene und aussagekräftig benannte Ordner für Bilder, Videos, Stylesheets und externe JavaScript-Dateien an. Weiterhin sollten Sie folgende Punkte beachten:

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

  • Auch wenn andere Sonderzeichen erlaubt sind, verwenden Sie 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 Mobilgeräten einzugeben.

  • Die meisten Websites werden auf Linux-Servern gehostet, bei denen die Groß- und Kleinschreibung wichtig ist. Sie vermeiden Probleme bei der Suche nach Dateien, wenn Sie zur Benennung von Dateien und Ordnern ausschließlich Kleinbuchstaben verwenden.

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 Sie damit von überall auf Ihre Inhalte zugreifen können. Außerdem sind sie besonders nützlich, wenn Sie mit anderen an einem Projekt arbeiten, z. B., wenn eine Person für die Erstellung der Elemente zuständig ist und Sie für die eigentliche Website. Weitere Informationen zur Verwendung von Creative Cloud-Bibliotheken in Dreamweaver finden Sie in der Online-Hilfe.

Sie müssen die Elemente aus der freigegebenen Bibliothek in einer eigenen Bibliothek speichern.

  1. Verwenden Sie die Elemente aus der Bibliothek Bayside.

  2. Klicken Sie rechts oben im Browser-Fenster auf In der Creative Cloud speichern, und speichern Sie die freigegebenen Inhalte in Ihrer eigenen Bayside-Bibliothek, falls Sie das nicht schon getan haben.

  3. Wählen Sie im Bedienfeld „CC Libraries“ die Bayside-Bibliothek aus. Sie müssten die folgenden vier Bilder und sechs Farbfelder sehen.
fig09
Abbildung 9: Die Creative Cloud-Bibliothek „Bayside“ enthält die Inhalte für Ihre Website.

Arbeitsversionen der Web-Seiten anlegen

Sie werden die Bayside Beat-Website von Grund auf neu erstellen. Die Beispieldateien, die Sie heruntergeladen haben, enthalten Microsoft Word- und RTF-Dateien mit Text, eine JavaScript-Datei und Kopien des Projekts in verschiedenen Entwicklungsstadien. Anhand dieser Kopien können Sie Ihre eigenen Dateien überprüfen.

Als Erstes erstellen Sie zwei HTML-Seiten für die Website.

  1. Wenn der Startbildschirm von Dreamweaver angezeigt wird, klicken Sie im Abschnitt Neu erstellen auf HTML. Oder wählen Sie Datei > Neu. In beiden Fällen öffnet sich das Dialogfeld „Neues Dokument“ (siehe Abbildung 10).
fig10
Abbildung 10: Das Dialogfeld „Neues Dokument“ bietet Optionen für verschiedene Dateitypen.
  1. Vergewissern Sie sich, 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. Geben Sie im Feld Titel den Namen Bayside Beat: Cable Cars ein.

  3. Prüfen Sie, 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, markieren Sie diese, und klicken Sie auf den Papierkorb rechts neben dem Feld.

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

  5. Falls nötig, klicken Sie links oben im Dokumentfenster auf Teilen (siehe Abbildung 11), um den zugehörigen HTML-Code einzublenden.
fig11
Abbildung 11: Klicken Sie auf „Teilen“, um den HTML-Code im Dokumentfenster anzuzeigen.
  1. Das Dokumentfenster (bzw. die Live-Ansicht) ist noch vollkommen leer, aber in der Code-Ansicht wird die grundlegende HTML-Struktur angezeigt (siehe Abbildung 12).
fig12
Abbildung 12: Dreamweaver legt automatisch die grundlegende HTML-Struktur an.

    Zeile 1 enthält die Deklaration für den Dokumenttyp („doctype“), die dem Browser mitteilt, dass es sich um eine HTML-Datei handelt.

    HTML ist eine Tag-basierte Sprache. Tags werden mit spitzen Klammern (<>) umschlossen. Die meisten Tags werden paarweise deklariert. Das schließende Tag erkennt man am Schrägstrich (/) nach der öffnenden spitzen Klammer.

    Die gesamte Seite ist innerhalb von zwei HTML-Tags (in Zeile 2 und 10) verschachtelt. Der HEAD-Abschnitt in den Zeilen 2 bis 6 enthält Informationen für den Browser. Der eigentliche Inhalt der Seite wird zwischen den beiden BODY-Tags eingefügt.

    Meistens erstellt Dreamweaver den erforderlichen Code automatisch anhand der Einstellungen, die Sie auf der Oberfläche und in den Dialogfeldern vornehmen. Sie müssen allerdings aufpassen, wenn Sie Code aus anderen Quellen einfügen. Eine HTML-Seite hat nur einen Kopf und nur einen Körper – genauso wie ein Mensch. Falls Inhalte nicht in der Live-Ansicht oder in Ihrem Browser angezeigt werden, liegt das sehr wahrscheinlich daran, dass sie außerhalb des BODY-Abschnitts eingefügt wurden.

  1. Speichern Sie die Datei. Wählen Sie Datei > Speichern, oder drücken Sie Strg+S (Windows) bzw. Befehl+S (macOS).

  2. Vergewissern Sie sich, dass im Dialogfeld Speichern unter der lokale Site-Ordner bayside ausgewählt ist. Nennen Sie die Datei index.html, und klicken Sie auf Speichern.
  3. Die Datei ist nun im Bedienfeld „Dateien“ aufgeführt. Die Registerkarte links oben im Dokumentfenster zeigt den Dateinamen an.

    Tipp: Sie können jederzeit zum lokalen Site-Ordner der aktuellen Website zurückkehren, indem Sie unten im Dialogfeld „Speichern unter“ auf die Schaltfläche Stammordner klicken.

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

  5. Wählen Sie dieselben Einstellungen wie in Schritt 2, aber lassen Sie dieses Mal das Feld Titel leer. Klicken Sie dann auf Erstellen.

  6. Speichern Sie die Datei im Stammordner unter dem Namen sights.html.

  7. In der Code-Ansicht steht zwischen denTITLE-Tags in Zeile 5 Unbenanntes Dokument.

    Dieser Text wird in 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.

    Sie haben zwei Möglichkeiten, den Wert zu ändern:

    • Klicken Sie in den Code, und ändern Sie den Wert manuell. Achten Sie darauf, dass die öffnenden und schließenden HTML-Tags intakt bleiben.

    • Benutzen Sie den Eigenschafteninspektor von Dreamweaver (siehe Schritt 14).
  8. Der Eigenschafteninspektor ist das breite Bedienfeld unterhalb des Dokumentfensters im Arbeitsbereich „Entwurf“. Falls nötig, klicken Sie auf die Registerkarte „Eigenschaften“, um sie nach vorne zu holen. (Standardmäßig ist die Registerkarte „Ausgabe“ geöffnet.)
  9. Ersetzen Sie Unbenanntes Dokument im Feld Dokumenttitel durch Bayside Beat: Sightseeing. Während Sie tippen, ändert sich am HTML-Code der Seite nichts.

  10. Um die Änderungen zu übernehmen, drücken Sie 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).
fig13
Abbildung 13: Mit dem Eigenschafteninspektor können Sie den Dokumenttitel festlegen.
  1. Speichern Sie die Datei „sights.html“.

Obwohl Dreamweaver den HTML-Code automatisch erstellt, sollten Sie Web-Seiten überwiegend in der geteilten Ansicht bearbeiten. Sie können 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 Sie ihm vorschreiben. Aber Sie sollten immer wissen, wo im Dokument Sie sich gerade befinden. Falls die Einfügemarke an der falschen Stelle steht, wird neuer Code trotzdem dort eingefügt. Wenn Sie nicht aufpassen, erzeugen Sie „Spaghetti-Code“, der sich vielleicht nur schwer entwirren lässt. Das DOM-Bedienfeld, das Sie im nächsten Teil des Tutorials kennenlernen werden, leistet unschätzbare Dienste, wenn es darum geht, den Überblick über die Seitenstruktur zu behalten.

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

Nächste Schritte

Sie haben Ihre Site definiert und zwei leere Web-Seiten erstellt. In Teil 2 – Text hinzufügen und formatieren werden Sie die ersten Inhalte zu den Seiten hinzufügen.

04/13/2018

Beitrag von: David Powers, Tom Alex Buch

War diese Seite hilfreich?