Willkommen zu Teil 2 dieses Tutorials zur Erstellung einer einfachen, responsiven Website mit Dreamweaver. Im ersten Teil hast du eine Site definiert und zwei Web-Seiten angelegt. Im Moment haben diese Seiten nur einen Titel. In dieser Lektion wirst du Text zur Homepage (index.html) der Website hinzufügen. Zuerst wirst du im Bearbeitungsmodus der Ansicht „Live“ Text direkt eingeben. Anschließend kopierst du Text über die Zwischenablage aus einem Microsoft Word-Dokument. Falls du Word nicht installiert hast, kannst du den Text aus einer RTF-Datei (Rich Text Format) kopieren und die Formatierung nachträglich anpassen.

Wenn du Designer bist, wunderst du dich vielleicht, warum nicht zuerst das Layout der Seite erstellt wird. Es spricht nichts dagegen, von Anfang an das Design im Hinterkopf zu behalten. Aber für Suchmaschinen spielt der Look deiner Website keine Rolle. Sie suchen ausschließlich nach relevanten Textinhalten mit informativen Überschriften und relevanten Links.

Bevor du Text hinzufügst, solltest du einen Container für die gesamte Seite anlegen. Damit kannst du den Seiteninhalt auf großen Bildschirmen zentriert ausrichten. Du wirst auch ein externes Stylesheet mit der Seite verknüpfen.

Hinweis: Es ist üblich, die Homepage einer Website „index.html“ zu nennen. Der Grund ist, dass die meisten Webserver die Datei „index.html“ (oder „index.htm“) als die Standardseite in einem Verzeichnis (Ordner) erkennen. Diese Seite wird automatisch angezeigt, wenn kein bestimmter Dateiname am Ende der URL genannt wird.

1. Klicke in der Ansicht „Live“ auf eine beliebige Stelle im Hauptbereich der Seite.
   

2. Öffne das Bedienfeld Einfügen, indem du auf die entsprechende Registerkarte in der Bedienfeldgruppe auf der rechten Seite deines Arbeitsbereichs klickst. Vergewissere dich, dass im Dropdown-Menü links oben „HTML“ ausgewählt ist (siehe Abbildung 2).

1. Klicke auf Div (das erste Element in der Liste). Im Code werden ein HTML-Element und Platzhaltertext zwischen den Tags eingefügt. Der Platzhaltertext wird in der Ansicht „Live“ mit einem hellblauen Rahmen dargestellt. Oberhalb des Rahmens wird ein Tab mit dem Namen des HTML-Elements angezeigt (siehe Abbildung 3). Dieser Tab ist die sogenannte „Elementanzeige“.

1. Ein DIV -Element ist ein generischer Container, der per CSS formatiert werden kann. Zur näheren Identifizierung musst du ihm eine ID zuweisen. Da dieses DIV -Element den gesamten Seiteninhalt umschließen (englisch: to wrap) wird, nenne es wrapper .
   

2. Neben der Elementanzeige wird ein Popup-Bedienfeld eingeblendet, über das du die Quelle der CSS-Anweisung für die eben erstellte ID auswählen musst. Öffne das Dropdown-Menü „Quelle auswählen“. Wähle Neue CSS-Datei erstellen (siehe Abbildung 4).

1. Klicke im Dialogfeld Neue CSS-Datei erstellen rechts neben dem Feld „Datei/URL“ auf Durchsuchen, um das Dialogfeld „Stylesheet-Datei speichern unter“ zu öffnen.
   

2. Lege im Stammordner „bayside“ einen neuen Ordner mit dem Namen styles an. Öffne ihn.
   

3. Gib im Feld Dateiname den Namen responsive.css ein. Klicke auf Speichern. Klicke auf OK, um das erste Dialogfeld zu schließen. Falls das Popup-Menü von Abbildung 4 noch angezeigt wird, klicke außerhalb, um es zu schließen.
   

4. In der Ansicht „Code“ wurde das öffnende DIV -Tag durch ein ID-Attribut ergänzt:
   
   

   Raum für den Inhalt des neuen Div-Tags

   ID

5. Oben im Dokumentfenster ist zwischen der Registerkarte mit dem Dateinamen und dem Button Teilen eine neue Leiste eingeblendet worden (siehe Abbildung 5). Es handelt sich um die Leiste Zugehörige Dateien , auf der alle Dateien aufgelistet werden, die mit der aktuellen Web-Seite verknüpft sind.

1. Klicke auf der Leiste „Zugehörige Dateien“ auf Quellcode , um zum HTML-Code der Seite „index.html“ zurückzukehren.
   

2. Wirf einen Blick auf die Zeile 6. Hier wird das Stylesheet mit der aktuellen Seite verknüpft:
   
   

3. Neben beiden Dateinamen auf der Leiste „Zugehörige Dateien“ ist ein Sternchen (*) zu sehen. Das bedeutet, sie enthalten Änderungen, die noch nicht gespeichert wurden. Wähle Datei > Alle zugehörige Dateien speichern.
   

4. Öffne das Bedienfeld „Dateien“. Blende den Inhalt des Ordners „styles“ ein. Prüfe, ob das Stylesheet „responsive.css“ an der korrekten Stelle erstellt wurde (siehe Abbildung 7).

Die Ansicht „Live“ von Dreamweaver nutzt das Chromium Embedded Framework (CEF). Sie ist also de facto ein Browser, der im Dokumentfenster ausgeführt wird. Sie ist gleichzeitig ein Editor, mit dem neue Inhalte hinzugefügt oder vorhandene Inhalte neu angeordnet werden können. Wie du später noch sehen wirst, kannst du in der Ansicht „Live“ Text und Bilder per Drag-and-Drop platzieren. Sie ist aber keine grafische Layout-Umgebung, in der sich die Größe und Position von Elementen per Ziehen verändern lassen. Layout und Elementpositionen werden ausschließlich über CSS-Code gesteuert.

Bis du im vierten Teil des Tutorials am Layout arbeitest, wird das Erscheinungsbild der Seite eher nüchtern wirken. Jetzt fügst du aber zunächst einmal Text hinzu, indem du ihn direkt in der Ansicht „Live“ eingibst.

1. In der Ansicht „Live“ wird der Platzhaltertext nun in großer, fetter Schrift angezeigt. Die Elementanzeige weist ihn als H1 -Element aus, also als Überschrift erster Ordnung.
   

1. Während die H1 -Überschrift noch ausgewählt ist, mache irgendwo im Text innerhalb der Ansicht „Live“ einen Doppelklick, um den Bearbeitungsmodus zu aktivieren. Der blaue Rahmen wird durch einen orangefarbenen Rahmen ersetzt. Die Ansicht „Code“ wird ausgegraut.
   

2. Wähle den kompletten Platzhaltertext aus. Gib „Bayside Beat“ ein. Klicke außerhalb des orangefarbenen Rahmens, um den Bearbeitungsmodus zu beenden. In der Ansicht „Code“ müsste zwischen den H1 -Tags genau der Text stehen, den du eben eingegeben hast.
   

3. Als Nächstes wirst du eine Aufzählung hinzufügen, die später in ein Navigationsmenü umgewandelt werden soll. In der HTML-Sprache werden Aufzählungen als „ungeordnete Listen“ bezeichnet und mit UL -Tags umschlossen. Um eine ungeordnete Liste in der Ansicht „Live“ zu erstellen, musst du zuerst einen Absatz einfügen.
   

4. Das Dialogfeld zur Positionierungshilfe (siehe Abbildung 10) wird eingeblendet. Darüber kannst du die Position des neuen Elements festlegen. Der Absatz soll nach der Überschrift eingefügt werden, also klicke auf Nach.

1. Dreamweaver fügt den neuen Absatz inklusive Platzhaltertext direkt unter der Überschrift ein.
   

2. Während der Absatz in der Ansicht „Live“ noch ausgewählt ist, wandle ihn in eine ungeordnete Liste um. Klicke dazu im Eigenschafteninspektor auf „Ungeordnete Liste“ (siehe Abbildung 11).

1. Vergleiche deine Seite mit der Abbildung 12. In der Ansicht „Live“ wird dem Platzhaltertext ein Aufzählungszeichen vorangestellt. Die Elementanzeige verrät, dass es sich um ein LI -Element (Listenelement) handelt. Im HTML-Code ist das LI -Element innerhalb zweier UL -Tags verschachtelt.

1. Während das Listenelement in der Ansicht „Live“ noch ausgewählt ist, mache irgendwo im Platzhaltertext einen Doppelklick, um den Bearbeitungsmodus zu aktivieren. Wähle den gesamten Platzhaltertext aus. Überschreibe ihn mit dem Text Home.
   

2. Bleibe noch im Bearbeitungsmodus, und drücke die Eingabetaste. Gib dann das Wort Sights (Sehenswürdigkeiten) ein.
   

3. Wiederhole das noch drei Mal, um die Einträge Dining (Restaurants), Events (Veranstaltungen) und Lodging (Unterkünfte) zur Liste hinzuzufügen.
   

4. Klicke außerhalb des orangefarbenen Rahmens, um den Bearbeitungsmodus zu beenden. Deine Seite sollte nun wie in Abbildung 13 aussehen.

1. Speichere die Datei „index.html“.

Dreamweaver ist eine Web-Entwicklungsumgebung und kein Textverarbeitungs-Programm. Es kann daher recht mühsam sein, große Mengen von Text direkt in der Ansicht „Live“ einzugeben. Dreamweaver ist allerdings in der Lage, Microsoft Word-Dokumente in korrekten HTML-Code umzuwandeln und dabei Überschriften, Absätze, Aufzählungen, nummerierte Listen und Schriftschnitte (fett/kursiv) zu erhalten.

Die Methode, die du gleich verwenden wirst, unterscheidet sich aber vom Speichern eines Microsoft Word-Dokuments als HTML-Datei. Wenn du mit Word eine HTML-Datei generierst, fügt das Programm proprietären Code hinzu. Beim Kopieren von Text aus Word über die Zwischenablage entfernt Dreamweaver den unnötigen Code.

Die Beispieldateien enthalten auch RTF-Dateien mit demselben Text, falls du Word nicht installiert hast. Wie du die RTF-Dateien verwendest, erfährst du im nächsten Abschnitt. Versuche nicht, die Word-Dateien in Open Office oder Libre Office zu öffnen. Wenn du Text aus ODF-Dateien (OpenDocument Format) kopierst, wird unnötiger Code hinzugefügt, der sich nur schwer entfernen lässt.

1. Wähle Bearbeiten > Inhalte einfügen. Oder verwende die Tastenkombination Strg+Umschalt+V (Windows) bzw. Befehl+Umschalt+V (macOS). Das Dialogfeld „Inhalte einfügen“ wird eingeblendet (siehe Abbildung 15).

Hinweis: Wähle niemals das vierte Optionsfeld zur Beibehaltung der vollständigen Formatierung, auch wenn du dieselben Farben und Schriften verwenden möchtest. Damit wird eine große Menge von proprietärem Microsoft-Code in deine HTML-Seite kopiert, der die Formatierung per CSS erheblich erschwert.

1. Klicke auf eine beliebige Stelle im Copyright-Hinweis. Er müsste der letzte Absatz auf der Seite und in der Elementanzeige als Absatz ausgewiesen sein (siehe Abbildung 17).

1. Falls keine Elementanzeige eingeblendet wird, musst du die Formatierung anpassen. Markiere dazu den Copyright-Text in der Ansicht „Code“. Wähle dann im Dropdown-Menü Format des Eigenschafteninspektors die Option Absatz (siehe Abbildung 18).

Du wirst sicherlich zustimmen, dass diese Methode wesentlich schneller ist, als Text direkt in der Ansicht „Live“ einzugeben. Dreamweaver merkt sich die Einstellungen im Dialogfeld „Inhalte einfügen“, sodass du weitere Inhalte einfach über die Tastenkombination Strg+V (Windows) bzw. Befehl+V (macOS) direkt in die Ansicht „Live“ einfügen kannst. Bevor du das tust, wähle aber immer das Element aus, das unmittelbar vor dem einzufügenden Inhalt liegen soll.

Wenn du dir den HTML-Code in der Ansicht „Code“ ansiehst, fallen dir mehrere Instanzen der Zeichenfolge ’ auf. Der Word-Text enthält typografische Apostrophe, die Dreamweaver in den HTML-Ausdruck für ein einfaches rechtes Anführungszeichen umgewandelt hat.

Auch wenn du den Inhalt aus einem Microsoft Word-Dokument kopiert hast, findest du im nächsten Abschnitt nützliche Informationen dazu, wie man die Formatierung eines Textelements mithilfe der Elementanzeige ändern kann.

Wenn du weder Microsoft Word noch Word Viewer installiert hast, musst du den Text aus einem RTF-Dokument kopieren und anschließend die Überschriften formatieren, da Dreamweaver den kompletten Text als Absätze formatiert.

1. Beim Einfügen von Text aus RTF-Dateien erkennt Dreamweaver keine Überschriften. Klicke an eine beliebige Stelle im Absatz „Riding the Cable Cars“.
   

2. Klicke dann links in der Elementanzeige auf das Symbol, das wie ein Hamburger aussieht, um den Direkt-Eigenschafteninspektor einzublenden. Wähle „H2“ im Dropdown-Menü „Format“ (siehe Abbildung 21). Dadurch wird der Absatz in eine Überschrift zweiter Ordnung umgewandelt.

Das Kopieren von Text aus einer RTF-Datei ist relativ simpel. Es sind dabei nur folgende Punkte zu beachten:

Die Homepage der Bayside Beat-Website ist nun mit Text gefüllt, sieht aber noch ziemlich nüchtern aus. Wenn du die Seite in einem Browser öffnest, erstrecken sich die Absätze über die gesamte Fensterbreite. Das kannst du mithilfe von CSS regeln. Aber du musst noch weitere HTML-Strukturelemente hinzufügen, um die Seite über logische Gruppen formatieren zu können.