Erstellen einer Dreamweaver-Site: Teil 1 – Site-Setup (2023)

Was brauchen Sie

Dreamweaver bietet visuelle Tools zum Entwickeln und Gestalten von Websites. Das Programm mag auf den ersten Blick einschüchternd wirken, da der Funktionsumfang riesig ist. Wie soll man sich dort zurechtfinden?

Dieses achtteilige Tutorial zeigt Ihnen Schritt für Schritt, wie Sie mit Dreamweaver eine einfache und elegante Website erstellen. Erfahren Sie, wie Sie eine Website definieren, eine Webseite in HTML (HyperText Markup Language) strukturieren, Text und Bilder hinzufügen und Seiten mit CSS (Cascading Style Sheets) formatieren.

Damit das Tutorial nicht unnötig lang wird, erstellen Sie nur zwei Webseiten für Ihre Site. Aber Sie werden alles lernen, was Sie wissen müssen, um später weitere Seiten zu erstellen.

Laden Sie die Beispieldateien herunter. 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 Ort, den Sie leicht finden können, z. B. Ihren Schreibtisch.
   
   • Unter macOS X: Klicken Sie im Finder auf die heruntergeladene ZIP-Datei, um sie automatisch zu entpacken.
   • Unter Windows: Klicken Sie mit der rechten Maustaste auf die ZIP-Datei. Wählen Sie im Kontextmenü Alle Dateien extrahieren. Geben Sie den Pfad an, in dem Sie die extrahierten Dateien speichern möchten. Klicken Sie auf Extrahieren.
     
3. Die extrahierten Beispieldateien werden in einem Ordner namens "bayside" gruppiert. Dieser Ordner enthält neun Unterordner (siehe Abbildung 1).

Pastafelizenthält den Text der beiden Webseiten. Pastajsist eine JavaScript-Datei, die das Erscheinungsbild des Navigationsmenüs auf kleinen Bildschirmen steuert. Jeder der verbleibenden Ordner enthält eine Vollversion des Projekts, wie es am Ende jeder Lektion erscheinen 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.

4. Zum Einfügen öffnenTeil 7. Ziehen Sie die Datei index.html in einen Browser, um sie anzuzeigen. Das folgende Bild zeigt die Startseite der fertigen Website.

5. Ziehen Sie den linken oder rechten Rand des Browserfensters 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 angezeigtSPEISEKARTEvor einem schwarzen Hintergrund ersetzt. Das ursprünglich weiße Textfeld über dem Bild der Golden Gate Bridge ist jetzt dunkelrosa und befindet sich unter dem Bild (siehe Abbildung 3).

6. klicke auf das WortSPEISEKARTE. Nach unten öffnet sich ein halbtransparent schwarz hinterlegtes Navigationsmenü (siehe Abbildung 4).

7. Klicken Sie erneut auf das WortSPEISEKARTE. Das Navigationsmenü ist oben wieder ausgeblendet.
8. Öffnen Sie das Navigationsmenü erneut. klicken Sie auf EingabeANSICHTENum die zweite Seite anzuzeigen (die anderen Menüpunkte sind nur Platzhalter).

Dies ist die Site, die Dreamweaver zum Erstellen in diesem Lernprogramm verwendet. Sie lernen, wie Sie die folgenden Schritte ausführen:

• Definieren einer Site in Dreamweaver
• Geben Sie die Struktur einer Webseite mithilfe von HTML5-Elementen an
• Navigieren Sie auf einer Seite und fügen Sie neue Elemente mit dem DOM-Bedienfeld hinzu
• Fügen Sie einer Seite Text und Bilder hinzu
• Laden Sie Bilder aus einer Creative Cloud-Bibliothek herunter und passen Sie sie an
• Formatieren einer Webseite mit dem Bedienfeld „CSS Designer“.
• Erstellen Sie eine zweite Webseite mit demselben Format
• Steuern Sie das Design mithilfe von Medienabfragen
• Laden Sie ganze Seiten auf einen Online-Webserver hoch

Außerdem lernen Sie die wichtigsten Bereiche der Dreamweaver-Benutzeroberfläche kennen.

Dieses Tutorial ist sehr detailliert. Nehmen Sie sich hierfür viel Zeit. Jeder Teil ist in kurze Abschnitte unterteilt, die nicht nur das Wie, sondern auch das Warum erklären. Machen Sie Pausen zwischen einzelnen Abschnitten, um das Gelernte zu verinnerlichen.

Eine Werbung:Dieses Tutorial wurde für Dreamweaver 2015.2 geschrieben und behandelt Funktionen, die in früheren Versionen nicht verfügbar waren. Wir empfehlen, das Tutorial mit Dreamweaver 2015.2 (oder höher) zu befolgen, obwohl Sie im Prinzip dieselbe Site auch mit einer früheren Version von Dreamweaver erstellen könnten. Wenn Sie kein Creative Cloud-Abonnement haben, können Sie dies tunKostenlose Testphasebenutzen.

Ein häufiger Anfängerfehler besteht darin, mit der Arbeit an Webseiten in Dreamweaver zu beginnen, ohne zuerst eine Site zu definieren. In diesem Fall verweisen alle Verknüpfungen zu Dingen wie Bildern und Stylesheets auf einen Speicherort auf der Festplatte Ihres Computers. Dies ist in Ordnung, bis die Site auf einen Remote-Server hochgeladen wird. Dann funktionieren die Links nicht mehr und müssen akribisch repariert werden. Wenn Sie immer zuerst eine Site definieren, sparen Sie sich diesen zusätzlichen Aufwand. Auch das geht schnell und einfach.

In Dreamweaver sammelt eine Site alle Dokumente, die sie für ihre Site verwendet, in einem lokalen Verzeichnis. Dies vereinfacht das Nachverfolgen und Verwalten von Links, das Organisieren verwandter Dateien und das Hochladen von Website-Dateien auf einen Webserver. Eine Dreamweaver-Site besteht normalerweise aus mindestens zwei Teilen:

• Reihenfolge der Einrichtungen:Dies ist Ihr Arbeitsverzeichnis, normalerweise ein Ordner auf Ihrer Festplatte. In Dreamweaver wird dieser Ordner „Root“-Ordner genannt.
• Fernbestellung:Dieser Ordner befindet sich auf dem Computer, auf dem der Webserver ausgeführt wird. Der Webserver ist normalerweise (aber nicht immer) der Computer, der Ihre Website im Internet veröffentlicht.

Beratung:Wenn Sie an mehreren Sites gleichzeitig arbeiten möchten, erstellen Sie für jede Site einen separaten Ordner auf Ihrer Festplatte. Unter macOS X ist bereits ein „Sites“-Ordner im Benutzerverzeichnis angelegt. Unter Windows müssen Sie einen Ordner namens „Sites“ auf der obersten Ebene des Laufwerks C:\ einrichten. Die Screenshots in diesem Tutorial wurden auf einem Windows-Computer aufgenommen. Die Anleitung für macOS X ist identisch. Es gibt nur Unterschiede in den Tastaturkürzeln und den Namen einiger Schaltflächen (wo zutreffend angegeben).

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

1. Starten Sie Dreamweaver. wählenWebsite > Neue Website. Das Dialogfeld Site-Definition wird angezeigt.
2. kein Feld gebenWebseiten-NameNameempfindliche BuchtDer .Dreamweaver verwendet diesen Namen intern, um die Site zu identifizieren. Es spielt keine Rolle, ob der Name Leerzeichen enthält.
3. Klicken Sie auf das Ordnersymbol neben dem FeldPasta tun Site Local. Navigieren Sie zu dem Ordner auf der Einschubseite, den Sie mit den Beispieldateien heruntergeladen haben. Das Dialogfeld Site-Definition sollte nun Abbildung 6 ähneln. Der Dateipfad im Feld Local Site Folder basiert darauf, wo Sie den Bayside-Ordner auf Ihrer Festplatte gespeichert haben.

4. Optionen ausblendenerweiterte Einstellungenlinks neben dem DialogDefinition von Websitedie. wählenlokale Informationen.
5. Klicken Sie auf das Ordnersymbol rechts neben dem FeldStandardbildordnerum den Dialog zu öffnenBildordner auswählenOffen.
6. klicke aufneue Paste(Unter Windows befindet sich die Option oben im Dialogfeld, unter macOS X unten.) Nennen Sie den Ordner "Bilder". auswählen Klicken Sie aufwählen Sie den Ordner aus(Windows) diWählen(Mac OS). Das Dialogfeld „Site-Definition“ sollte jetzt Abbildung 7 ähneln.

7. Behalten Sie für alle anderen Optionen die Standardeinstellungen bei. Im Feld "Web-URL" müssen Sie nichts eingeben, da Sie Links verwenden, die in Bezug auf das Dokument funktionieren.
8. klicke aufSpeichern Sie nicht Computer.

Das Bedienfeld „Dateien“ zeigt jetzt den neuen lokalen Stammordner für die aktuelle Site (siehe Abbildung 8). Die Dateiliste im Bedienfeld „Dateien“ funktioniert wie ein Dateimanager; Das bedeutet, dass Sie Dateien wie im Explorer (Windows) oder Finder (macOS) kopieren, einfügen, löschen, verschieben und öffnen können.

Eine Website enthält normalerweise eine große Anzahl von Dateien und Ordnern. Um sie übersichtlicher zu gestalten, sollten Sie sie nach logischen Kriterien organisieren. Erstellen Sie separate Ordner mit aussagekräftigen Namen für Bilder, Videos, Stylesheets und externe JavaScript-Dateien. Außerdem sollten Sie folgende Punkte beachten:

• Website-Datei- und Ordnernamen dürfen keine Leerzeichen oder die folgenden Sonderzeichen enthalten:/\?%*:|”<>.
• Obwohl andere Sonderzeichen erlaubt sind, ist es am besten, nur alphanumerische Zeichen, Bindestriche und Unterstriche zu verwenden.
• Die meisten Datei- und Ordnernamen erscheinen in der URL einer Webseite. Daher sollten sie kurz und gleichzeitig aussagekräftig sein. Lange URLs sind schwer zu merken oder in Browsern auf Smartphones oder Tablets einzugeben.
• Die meisten Websites werden auf Linux-Servern gehostet, bei denen zwischen Groß- und Kleinschreibung unterschieden wird. Das Auffinden von Dateien wird einfacher, wenn Sie nur Kleinbuchstaben für Datei- und Ordnernamen verwenden.

Bilder und Farbschema für dieses Projekt sind online auf einer gemeinsamen WebsiteCreative Cloud-BibliothekGerettet. Creative Cloud-Bibliotheken bieten Ihnen den Vorteil, dass Sie sie verwenden können, um von überall aus auf Ihre Inhalte zuzugreifen. Sie sind auch besonders nützlich, wenn Sie mit anderen Personen an einem Projekt arbeiten, z. Zum Beispiel, wenn eine Person die Assets erstellt und Sie die Website erstellen. Weitere Informationen zur Verwendung von Creative Cloud-Bibliotheken in Dreamweaver finden Sie in der Online-Hilfe.

Sie müssen die gemeinsam genutzten Bibliothekselemente in einer benutzerdefinierten Bibliothek speichern.

1. Verwenden Sie Bibliothekselementean der Bucht.
2. Klicken Sie in der oberen rechten Ecke des Browserfensters aufIn Creative Cloud speichern. Speichern Sie freigegebene Inhalte in Ihrer eigenen Bayside-Bibliothek, falls Sie dies noch nicht getan haben.
3. Wählen Sie im Bedienfeld „CC Libraries“ die Bayside-Bibliothek aus. Sie sollten die folgenden vier Bilder und sechs Beispiele sehen.

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

Erstellen Sie zunächst zwei HTML-Seiten für die Website.

1. Wenn der Begrüßungsbildschirm von Dreamweaver angezeigt wird, klicken Sie auf den Abschnitterstelle eine neueumHTML.auwehDatei > Neu. In beiden Fällen öffnet sich das Dialogfeld „Neues Dokument“ (siehe Abbildung 10).

2. Stellen Sie sicher, dass in der linken Spalte die Optionneues Dokumentist ausgewählt. NiedrigArt des Dokumentser mussHTMLund darunterStrukturführen mussNEINausgewählt werden
3. kein Feld gebenTitelNameBayside Beat: SeilbahnenA.
4. überprüfen Sie, ob untenArt des DokumentsStandardeinstellungenHTML5ist ausgewählt. FeldAnexar CSSes muss leer sein. Wenn im Feld „CSS anhängen“ Einträge vorhanden sind, wählen Sie diese aus. Klicken Sie auf den Papierkorb rechts neben dem Feld.
5. klicke aufErstellen. Dreamweaver öffnet eine leere HTML-Seite im Dokumentfenster.
6. Klicken Sie ggf. auf in der oberen linken Ecke des DokumentfenstersTeilen(siehe Abbildung 11), um den zugehörigen HTML-Code anzuzeigen.

7. Das Dokumentfenster (oder „Live“-Ansicht) ist noch komplett leer. Aber in der Codeansicht wird die Grundstruktur von HTML angezeigt (siehe Abbildung 12).

Zeile 1 enthält die Deklaration für die Dokumentart ("Art des Dokuments"), die dem Browser mitteilt, dass es sich um eine HTML-Datei handelt.

HTML ist eine Tag-basierte Sprache. Tags werden in spitze Klammern (<>) eingeschlossen. Die meisten Tags werden paarweise deklariert. Das schließende Tag ist durch den Schrägstrich (/) nach der öffnenden spitzen Klammer gekennzeichnet.

Die gesamte Website ist innerhalb von zweiHTML- Verschachtelte Labels (auf Zeile 2 und 10). ENTWEDERKOPF-Der Abschnitt von Zeile 2 bis 6 enthält Informationen für den Browser. Der eigentliche Inhalt der Seite liegt irgendwo dazwischenKÖRPER-Etiketten eingefügt.

In den meisten Fällen generiert Dreamweaver automatisch den erforderlichen Code basierend auf den Einstellungen, die über die visuelle Benutzeroberfläche und die Dialogfelder vorgenommen wurden. Sie sollten jedoch vorsichtig sein, wenn Sie Code aus anderen Quellen einbinden. Eine HTML-Seite hat nur einen Kopf und einen Körper, genau wie ein Mensch. Wenn der Inhalt nicht in der Live-Ansicht oder in Ihrem Browser angezeigt wird, wurde er höchstwahrscheinlich außerhalb des BODY-Abschnitts eingefügt.

8. Speicher die Datei. wählenDatei > Speichern. Oder drücken Sie Strg+S (Windows) oder Befehlstaste+S (macOS).
9. Stellen Sie dies im Dialog sicherSpeichern alsein lokaler Pasta-Ortan der Buchtist ausgewählt. benennen Sie die Dateiindex.html. oder klickenSpeichern Sie nicht Computer.

Die Datei wird nun im Bedienfeld „Dateien“ angezeigt. Die Registerkarte in der oberen linken Ecke des Dokumentfensters zeigt den Namen der Datei.

Beratung:Sie können jederzeit zum lokalen Ordner der aktuellen Site zurückkehren, indem Sie unten im Dialogfeld „Speichern unter“ auf klicken.StammpasteClique

10. Erstellen Sie eine neue HTML-Seite. Da der Startbildschirm nicht mehr angezeigt wird, sollten Sie dies tunDatei > NeuWählen Sie diese Option, um das Dialogfeld „Neues Dokument“ zu öffnen. Oder drücken Sie Strg+N (Windows) oder Befehlstaste+N (macOS).
11. Wählen Sie dieselben Einstellungen wie in Schritt 2. Lassen Sie dieses Mal jedoch das Feld stehenTitelleer. dann klickErstellen.
12. Speichern Sie die Datei im Stammverzeichnis unter dem NamenSehenswürdigkeiten.html.
13. Geben Sie in der Ansicht „Code“ dieTITELEtiketten in Zeile 5Nicht-Wohltäter-Dokument.

    Dieser Text wird in der Titelleiste eines Browser-Tabs oder -Fensters angezeigt und von Suchmaschinen ausgewertet. Diesen Wert unverändert zu lassen, ist ein weiterer Anfängerfehler.

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

    • Klicken Sie auf den Code und ändern Sie den Wert manuell. Stellen Sie sicher, dass die öffnenden und schließenden HTML-Tags intakt bleiben.
    • Verwenden Sie den Eigenschafteninspektor von Dreamweaver (siehe Schritt 14).
      
14. Der Eigenschafteninspektor ist das große Bedienfeld unterhalb des Dokumentfensters im Arbeitsbereich „Design“. Klicken Sie bei Bedarf auf die Registerkarte Eigenschaften, um sie in den Vordergrund zu bringen. (Die Registerkarte Ausgabe ist standardmäßig geöffnet.)

ersetzenNicht-Wohltäter-Dokumentkein FeldDokumentationdurchBayside-Beat: Turismo. Während der Eingabe ändert sich nichts am HTML-Code der Seite.

15. Um die Änderungen zu übernehmen, drücken Sie die Tabulatortaste oder die Eingabetaste. Daraus wird der Text.Nicht-Wohltäter-Dokumentin Zeile 5 des HTML-Codes durch den Wert im Feld „Document Title“ ersetzt (siehe Abbildung 13).

16. Speichern Sie die Datei views.html.

Obwohl Dreamweaver HTML automatisch generiert, sollten Sie Webseiten hauptsächlich in der Freigabeansicht bearbeiten. Sie können schnell überprüfen, ob die Änderungen korrekt implementiert wurden. Das soll nicht heißen, dass Dreamweaver unzuverlässig ist. Außer in besonders ungewöhnlichen Situationen macht das Programm genau das, was Sie ihm sagen. Aber Sie sollten immer wissen, wo Sie sich in dem Dokument befinden. Befindet sich der Einfügepunkt an der falschen Stelle, wird der neue Code trotzdem dort eingefügt. Wenn Sie nicht aufpassen, generieren Sie einen „Spaghetti-Code“, der schwer zu knacken sein kann. Das DOM-Bedienfeld, das Sie im nächsten Teil des Tutorials erkunden werden, hilft Ihnen, die Struktur der Seite zu steuern.

Beratung:Wenn Sie möchten, dass der HTML-Code zusammen mit der Layoutansicht angezeigt wird, wählen SieAnsicht > Vertikal teilen. Um das Dokumentfenster horizontal zu teilen, klicken Sie erneut auf diese Option. Sie können auch im Menü „Ansicht“ auswählen, auf welcher Seite die Live-Vorschau angezeigt werden soll.Ziehen Sie die Leiste zwischen den Ansichten „Code“ und „Live“, um die Größe relativ zueinander zu ändern. Dreamweaver merkt sich Ihre Einstellungen automatisch.

Sie haben Ihre Website eingerichtet und zwei leere Webseiten erstellt. Es beginnt dann mit dem Hinzufügen von Inhalten zu den Seiten.

18.10.2021