Im zweiten Teil dieses Tutorials lernen Sie, wie Sie eine Web-Seite für die Aufnahme und Formatierung von Text vorbereiten, Text direkt in der Live-Ansicht hinzufügen und Text aus einem vorhandenen Dokument kopieren.
5496-create-first-website_1408x792

Hinweis:

Über die Download-Buttons können Sie die Creative Cloud-Bibliothek und alle Projektdateien für dieses Tutorial herunterladen. Sie können entweder mit der Datei weiterarbeiten, die Sie im ersten Teil des Tutorials angelegt haben, oder die Version im Ordner für diese Lektion verwenden.

Einführung

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

Wenn Sie Designer sind, wundern Sie sich 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 Ihrer Website keine Rolle. Sie suchen ausschließlich nach relevanten Textinhalten mit informativen Überschriften und relevanten Links.

Container für die Web-Seite erstellen und Stylesheet hinzufügen

Bevor Sie Text hinzufügen, sollten Sie einen Container für die gesamte Seite anlegen. Damit können Sie den Seiteninhalt auf großen Bildschirmen zentriert ausrichten. Sie werden auch ein externes Stylesheet mit der Seite verknüpfen.

  1. Öffnen Sie die Datei index.html der „Bayside Responsive“-Site. Das ist die leere Seite, die Sie im ersten Teil des Tutorials erstellt haben. Falls die Datei „sights.html“ noch geöffnet sein sollte, schließen Sie sie. Denn jetzt geht es nur um die Datei „index.html“, die Homepage der Website.

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. Verwenden Sie die geteilte Ansicht für die nächsten Schritte. Klicken Sie links oben im Dokumentfenster auf die Schaltfläche Teilen, um die geteilte Ansicht zu öffnen (siehe Abbildung 1).
fig01
Abbildung 1: In der geteilten Ansicht können Sie den HTML-Code der Seite überprüfen.
  1. Klicken Sie in der Live-Ansicht auf eine beliebige Stelle im Hauptbereich der Seite.

  2. Öffnen Sie das Bedienfeld Einfügen, indem Sie auf die entsprechende Registerkarte in der Bedienfeldgruppe auf der rechten Seite Ihres Arbeitsbereichs klicken. Vergewissern Sie sich, dass im Dropdown-Menü links oben „HTML“ ausgewählt ist (siehe Abbildung 2).
fig02
Abbildung 2: Wählen Sie im Bedienfeld „Einfügen“ die Kategorie „HTML“ aus.

    Diese Kategorie enthält Optionen zum Hinzufügen gängiger HTML-Elemente zu einer Web-Seite.

  1. Klicken Sie 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 Live-Ansicht 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“.
fig03
Abbildung 3: In der Live-Ansicht wird das DIV-Element von der Elementanzeige als solches ausgewiesen.
  1. Ein DIV-Element ist ein generischer Container, der per CSS formatiert werden kann. Zur näheren Identifizierung müssen Sie ihm eine ID zuweisen. Da dieses DIV-Element den gesamten Seiteninhalt umschließen (englisch: to wrap) wird, nennen Sie es wrapper.

  2. Klicken Sie auf das Pluszeichen der Elementanzeige. Es wird ein Feld geöffnet, über das Sie eine Klasse oder ID zum Element hinzufügen können. Geben Sie „#wrapper“ in das Feld ein, und drücken Sie die Tabulator- oder Eingabetaste, um die Änderung zu bestätigen.

  3. Neben der Elementanzeige wird ein Popup-Bedienfeld eingeblendet, über das Sie die Quelle der CSS-Anweisung für die eben erstellte ID auswählen müssen. Öffnen Sie das Dropdown-Menü „Quelle auswählen“, und wählen Sie Neue CSS-Datei erstellen (siehe Abbildung 4).
fig04
Abbildung 4: Wenn Sie eine Klasse oder ID zu einem Element hinzufügen, fragt Dreamweaver, wo die zugehörige CSS-Anweisung definiert wird.
  1. Klicken Sie im Dialogfeld Neue CSS-Datei erstellen rechts neben dem Feld „Datei/URL“ auf die Schaltfläche Durchsuchen, um das Dialogfeld „Stylesheet-Datei speichern unter“ zu öffnen.

  2. Legen Sie im Stammordner „bayside“ einen neuen Ordner mit dem Namen styles an, und öffnen Sie ihn.

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

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

    <div id="wrapper">Raum für den Inhalt des neuen Div-Tags</div>

    Das ID-Attribut im HTML-Code beginnt nicht mit einem Hash-Zeichen (#). Dreamweaver verwendet die CSS-Syntax zur visuellen Unterscheidung von IDs und Klassen. In CSS beginnt ein ID-Selektor mit einem Hash-Zeichen (#), und eine Klasse beginnt mit einem Punkt (.).

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

Klicken Sie in der Leiste „Zugehörige Dateien“ auf responsive.css. Die Code-Ansicht im Dokumentfenster zeigt nun den Code des eben erstellten Stylesheets an. Die Zeilen 2 bis 3 enthalten eine leere CSS-Anweisung für die Wrapper-ID (siehe Abbildung 6).

fig06
Abbildung 6: Über die Leiste „Zugehörige Dateien“ können Sie das angehängte Stylesheet aufrufen.

    Beachten Sie, dass der Selektor im Stylesheet mit einem Hash-Zeichen beginnt. Das Hash-Zeichen bedeutet, dass der Selektor die Formatierung für ein Element mit derselben ID vorgeben wird. Sie werden die CSS-Anweisungen für das Wrapper-DIV-Element im vierten Teil dieses Tutorials hinzufügen, wenn Sie mit dem Layout der Site beginnen.

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

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

    <link href="styles/responsive.css" rel="stylesheet" type="text/css">

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

  4. Öffnen Sie das Bedienfeld „Dateien“, und blenden Sie den Inhalt des Ordners „styles“ ein. Prüfen Sie, ob das Stylesheet „responsive.css“ an der korrekten Stelle erstellt wurde (siehe Abbildung 7).
fig07
Abbildung 7: Stellen Sie sicher, dass das Stylesheet an der korrekten Stelle erstellt wurde.

Das ist nicht die einzige Methode, um ein Stylesheet mit einer Web-Seite zu verknüpfen. Später erfahren Sie, wie Sie dies mit CSS Designer bewerkstelligen, dem Hauptbedienfeld für die Gestaltung von Web-Seiten in Dreamweaver. 

Text direkt in der Live-Ansicht eingeben

Die Live-Ansicht 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 Sie später noch sehen werden, können Sie in der Live-Ansicht 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 Sie im vierten Teil des Tutorials am Layout arbeiten, wird das Erscheinungsbild der Seite eher nüchtern wirken. Jetzt fügen Sie aber zunächst einmal Text hinzu, indem Sie ihn direkt in der Live-Ansicht eingeben.

  1. Vergewissern Sie sich, dass in der Leiste „Zugehörige Dateien“ Quellcode aktiviert ist, und klicken Sie in der Live-Ansicht auf eine beliebige Stelle im Platzhaltertext. In der Code-Ansicht müssten Sie die Einfügemarke (eine vertikale Linie) irgendwo im Text sehen können.

  2. Rufen Sie im Eigenschafteninspektor das Dropdown-Menü Format auf, und wählen Sie Überschrift 1 aus (siehe Abbildung 8). Falls Sie das Menü Format nicht sehen, prüfen Sie, ob links im Eigenschafteninspektor die Option „HTML“ aktiviert ist.
fig08
Abbildung 8: Wandeln Sie den Platzhaltertext in eine Überschrift erster Ordnung um.
  1. In der Live-Ansicht wird der Platzhaltertext nun in großer, fetter Schrift angezeigt. Die Elementanzeige weist ihn als H1-Element aus, also als Überschrift erster Ordnung.

  2. Im HTML-Code hat Dreamweaver den Platzhaltertext mit H1-Tags umschlossen, die wiederum im Wrapper-DIV-Element verschachtelt sind (siehe Abbildung 9).

fig09
Abbildung 9: Der Platzhaltertext wurde in ein H1-Element umgewandelt.
  1. Während die H1-Überschrift noch ausgewählt ist, machen Sie irgendwo im Text innerhalb der Live-Ansicht einen Doppelklick, um den Bearbeitungsmodus zu aktivieren. Der blaue Rahmen wird durch einen orangefarbenen Rahmen ersetzt, und die Code-Ansicht wird ausgegraut.

  2. Wählen Sie den kompletten Platzhaltertext aus, und geben Sie „Bayside Beat“ ein. Klicken Sie außerhalb des orangefarbenen Rahmens, um den Bearbeitungsmodus zu beenden. In der Code-Ansicht müsste zwischen den H1-Tags genau der Text stehen, den Sie eben eingegeben haben.

  3. Beim Ersetzen des Platzhaltertextes im Bearbeitungsmodus kann es passieren, dass Dreamweaver die Zeichenfolge „&nbsp;“ direkt nach dem öffnenden oder direkt vor dem schließenden HTML-Tag einfügt. Das ist der HTML-Ausdruck für ein geschütztes Leerzeichen. Dreamweaver fügt sie deswegen ein, weil öffnende und schließende Tags grundsätzlich irgendeinen Inhalt dazwischen erfordern. Falls Sie die Zeichenfolge „&nbsp;“ entdecken, wechseln Sie zur Code-Ansicht, und entfernen Sie die Zeichen manuell. Wenn Sie das nicht tun, kann das geschützte Leerzeichen im Code später Probleme beim Layout verursachen. Aus eben diesem Grund empfiehlt es sich, immer ein Auge auf den HTML-Code zu haben, auch wenn Sie ihn nicht selbst verfassen möchten.

  4. Als Nächstes werden Sie 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 Live-Ansicht zu erstellen, müssen Sie zuerst einen Absatz einfügen.

  5. Während die H1-Überschrift in der Live-Ansicht noch ausgewählt ist, öffnen Sie das Bedienfeld Einfügen, und wählen Sie unter der Kategorie „HTML“ Absatz aus (das dritte Element von oben).

  6. Das Dialogfeld zur Positionierungshilfe (siehe Abbildung 10) wird eingeblendet, über das Sie die Position des neuen Elements festlegen können. Der Absatz soll nach der Überschrift eingefügt werden, also klicken Sie auf Nach.
fig10
Abbildung 10: Mithilfe des Dialogfeldes zur Positionierungshilfe lassen sich neue Elemente präzise einfügen.
  1. Dreamweaver fügt den neuen Absatz inklusive Platzhaltertext direkt unter der Überschrift ein.

  2. Während der Absatz in der Live-Ansicht noch ausgewählt ist, wandeln Sie ihn in eine ungeordnete Liste um, indem Sie im Eigenschafteninspektor auf das Symbol „Ungeordnete Liste“ klicken (siehe Abbildung 11).
fig11
Abbildung 11: Wandeln Sie den Absatz in eine ungeordnete Liste um.
  1. Vergleichen Sie Ihre Seite mit der Abbildung 12. In der Live-Ansicht wird dem Platzhaltertext ein Aufzählungszeichen vorangestellt, und 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.
fig12
Abbildung 12: Der Absatz wurde in eine ungeordnete Liste mit einem einzelnen Listeneintrag umgewandelt.
  1. Während das Listenelement in der Live-Ansicht noch ausgewählt ist, machen Sie irgendwo im Platzhaltertext einen Doppelklick, um den Bearbeitungsmodus zu aktivieren. Wählen Sie den gesamten Platzhaltertext aus, und überschreiben Sie ihn mit dem Text Home.

  2. Bleiben Sie noch im Bearbeitungsmodus, und drücken Sie die Eingabetaste. Geben Sie dann das Wort Sights (Sehenswürdigkeiten) ein.

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

  4. Klicken Sie außerhalb des orangefarbenen Rahmens, um den Bearbeitungsmodus zu beenden. Ihre Seite sollte nun wie in Abbildung 13 aussehen.
fig13
Abbildung 13: Die ungeordnete Liste wird später in das Navigationsmenü umgewandelt.
  1. Speichern Sie die Datei „index.html“.

Text aus einem Microsoft Word-Dokument über die Zwischenablage kopieren

Dreamweaver ist eine Web-Entwicklungsumgebung und kein Textverarbeitungs-Programm. Es kann daher recht mühsam sein, große Mengen von Text direkt in der Live-Ansicht 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 Sie gleich verwenden werden, unterscheidet sich aber vom Speichern eines Microsoft Word-Dokuments als HTML-Datei. Wenn Sie mit Word eine HTML-Datei generieren, fügt das Programm proprietären Code hinzu. Beim Kopieren von Text aus Word über die Zwischenablage entfernt Dreamweaver den unnötigen Code.

Falls Sie Microsoft Word nicht installiert haben, können Sie den kostenlosen Word Viewer für Windows herunterladen. Für macOS X gibt es kein Äquivalent, aber die Beispieldateien enthalten auch RTF-Dateien mit demselben Text. Wie Sie die RTF-Dateien verwenden, erfahren Sie im nächsten Abschnitt. Versuchen Sie nicht, die Word-Dateien in Open Office oder Libre Office zu öffnen. Wenn Sie Text aus ODF-Dateien (OpenDocument Format) kopieren, wird unnötiger Code hinzugefügt, der sich nur schwer entfernen lässt.

  1. Blenden Sie im Bedienfeld „Dateien“ den Inhalt des Ordners „content“ ein, und machen Sie einen Doppelklick auf die Datei index.docx, um sie in Microsoft Word zu öffnen.

  2. Wählen Sie den kompletten Text bis zum Ende des Copyright-Hinweises aus, und kopieren Sie ihn in Ihre Zwischenablage.

  3. Wechseln Sie zurück zu Dreamweaver. Vergewissern Sie sich, dass in der Live-Ansicht die ungeordnete Liste (nicht nur eines der Listenelemente) ausgewählt ist. Sie können das gesamte Element auswählen, indem Sie auf eine beliebige Stelle in der Liste und anschließend unten im Tag-Selektor des Dokumentfensters auf den UL-Tag klicken (siehe Abbildung 14).
fig14
Abbildung 14: Der Tag-Selektor zeigt die aktuelle Auswahl in der HTML-Struktur an.
  1. Wählen Sie Bearbeiten > Inhalte einfügen, oder verwenden Sie die Tastenkombination Strg+Umschalt+V (Windows) bzw. Befehl+Umschalt+V (macOS). Das Dialogfeld „Inhalte einfügen“ wird eingeblendet (siehe Abbildung 15).
fig15
Abbildung 15: Über das Dialogfeld „Inhalte einfügen“ können Sie steuern, was Dreamweaver aus externen Dokumenten übernehmen soll.
  1. Wählen Sie das dritte Optionsfeld Text mit Struktur und einfacher Formatierung (fett, kursiv), und vergewissern Sie sich, dass das Kontrollkästchen Abstand der Word-Absätze optimieren aktiviert ist. Klicken Sie dann auf OK.

  2. Dreamweaver fügt den Text direkt nach dem ausgewählten Element (der ungeordneten Liste) ein und formatiert die Absätze und Überschriften mit den passenden HTML-Tags.

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

  1. Wählen Sie den ersten Absatz aus (er beginnt mit „Bayside Beat keeps you ...“), indem Sie in der Live-Ansicht auf eine beliebige Stelle im Absatz klicken. Die Elementanzeige zeigt an, dass es sich um ein P-Element (einen Absatz, englisch: paragraph) handelt. In der Code-Ansicht ist der Text von P-Tags umschlossen.

  2. Falls der eingefügte Text keine Elementanzeige aufweist und es keine Tags im HTML-Code gibt, hatten Sie beim Einfügen des Word-Textes die Code-Ansicht ausgewählt. Machen Sie den Vorgang rückgängig, indem Sie Strg+Z (Windows) bzw. Befehl+Z (macOS) drücken. Wählen Sie dann in der Live-Ansicht die ungeordnete Liste aus, bevor Sie den Text einfügen.

  3. Wählen Sie die erste Überschrift Riding the Cable Cars (Fahrten mit den San Francisco Cable Cars) aus, indem Sie in den Text klicken. Die Elementanzeige zeigt an, dass es sich um ein H2-Element (eine Überschrift zweiter Ordnung) handelt. Im HTML-Code ist der Text von zwei H2-Tags umschlossen (siehe Abbildung 16).
fig16
Abbildung 16: Die Überschrift wurde beim Einfügen aus Word automatisch formatiert.

    Die Überschrift war in Word als „Überschrift 2“ formatiert. Dreamweaver hat automatisch das entsprechende HTML-Tag angewendet.

  1. Klicken Sie 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).
fig17
Abbildung 17: Die Elementanzeige bestätigt, dass es sich beim Copyright-Hinweis um einen Absatz handelt.
  1. Falls keine Elementanzeige eingeblendet wird, müssen Sie die Formatierung anpassen. Markieren Sie dazu den Copyright-Text in der Code-Ansicht. Wählen Sie dann im Dropdown-Menü Format des Eigenschafteninspektors die Option Absatz (siehe Abbildung 18).
fig18
Abbildung 18: Möglicherweise müssen Sie die letzte Textzeile nachträglich als Absatz formatieren.

Dreamweaver bestimmt anhand des Umbruchs am Ende eines Absatzes, einer Überschrift oder eines sonstigen Textelements in Word, welches HTML-Tag gesetzt werden muss. Wenn der Umbruch nicht mit ausgewählt wurde, geht die Absatzformatierung verloren. Wenn Sie Text in einem Word-Dokument auswählen, markieren Sie ihn daher immer bis zum Ende einer Zeile. Üblicherweise befindet sich nach dem letzten Zeichen eine kleine Leerstelle (siehe Abbildung 19).

fig19
Abbildung 19: Markieren Sie immer auch die Leerstelle am Ende eines Textes, wenn Sie ihn aus Microsoft Word kopieren.
  1. Speichern Sie die Datei „index.html“.

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

Wenn Sie sich den HTML-Code in der Code-Ansicht ansehen, fallen Ihnen mehrere Instanzen der Zeichenfolge &rsquo; 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 Sie den Inhalt aus einem Microsoft Word-Dokument kopiert haben, finden Sie im nächsten Abschnitt nützliche Informationen dazu, wie man die Formatierung eines Textelements mithilfe der Elementanzeige ändern kann.

Elemente mithilfe des Direkt-Eigenschafteninspektors formatieren

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

  1. Blenden Sie im Bedienfeld „Dateien“ den Inhalt des Ordners „content“ ein, und machen Sie einen Rechtsklick bzw. Ctrl-Klick auf die Datei „index.rtf“. Wählen Sie im Kontextmenü Öffnen mit > Durchsuchen, und wählen Sie einen geeigneten Text-Editor wie z. B. TextEdit aus.

  2. Die RTF-Datei enthält denselben Text wie die Datei „index.docx“, allerdings ist nach jedem Absatz und jeder Überschrift eine Leerzeile eingefügt. Das ist wichtig, damit Dreamweaver den Text korrekt als Absätze formatiert.

  3. Wählen Sie den gesamten Text vom Anfang bis einschließlich des Copyright-Hinweises aus. Kopieren Sie den ausgewählten Text in Ihre Zwischenablage.

  4. Wechseln Sie zurück zu Dreamweaver. Vergewissern Sie sich, dass in der Live-Ansicht die ungeordnete Liste ausgewählt ist (siehe Schritt 3 und Abbildung 14).

  5. Wählen Sie Bearbeiten > Inhalte einfügen, oder verwenden Sie die Tastenkombination Strg+Umschalt+V (Windows) bzw. Befehl+Umschalt+V (macOS). Das Dialogfeld „Inhalte einfügen“ wird eingeblendet. Die beiden letzten Optionsfelder und das zweite Kontrollkästchen sind deaktiviert, da Sie den Text nicht aus einem Word-Dokument einfügen (siehe Abbildung 20).
fig20
Abbildung 20: Wenn Sie Text nicht aus Microsoft Word kopieren, sind einige Optionen deaktiviert.

    Prüfen Sie, ob das zweite Optionsfeld Text mit Struktur (Absätze, Listen, Tabellen usw.) aktiviert ist. Deaktivieren Sie das Kontrollkästchen „Zeilenumbrüche beibehalten“. Klicken Sie dann auf OK, damit Dreamweaver den Text als Absätze einfügt.

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

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

 

fig21
Abbildung 21: Sie können Textelemente in der Live-Ansicht mit dem Direkt-Eigenschafteninspektor formatieren.
  1. Wiederholen Sie den letzten Schritt für die zweite Überschrift Cable Car Tips.

  2. Wählen Sie den Copyright-Hinweis unten auf der Seite aus, und überprüfen Sie, ob er als Absatz formatiert ist. Falls nötig, passen Sie die Formatierung wie im vorherigen Abschnitt unter Schritt 9 beschrieben an.

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

  • Zwischen den einzelnen Absätzen oder Überschriften müssen zwei Leerzeilen vorhanden sein.

  • Kopieren Sie auch immer die Leerzeile nach dem letzten Absatz mit.

  • Gehen Sie immer über den Menüpfad Bearbeiten > Inhalte einfügen, oder verwenden Sie die Tastenkombination Strg+Umschalt+V (Windows) bzw. Befehl+Umschalt+V (macOS). Deaktivieren Sie das Kontrollkästchen Zeilenumbrüche beibehalten. Obwohl sich Dreamweaver Ihre Einstellungen merkt, werden beim Einfügen von Text aus RTF-Datei per Strg+V bzw. Befehl+V überflüssige Leerzeilen in den HTML-Code eingefügt.

  • Verwenden Sie den Direkt-Eigenschafteninspektor, um Absätze in HTML-Überschriften umzuwandeln. Klicken Sie auf das Hamburgersymbol der Elementanzeige, um den Direkt-Eigenschafteninspektor aufzurufen.

Nächste Schritte

Die Homepage der Bayside Beat-Website ist nun mit Text gefüllt, sieht aber noch ziemlich nüchtern aus. Wenn Sie die Seite in einem Browser öffnen, erstrecken sich die Absätze über die gesamte Fensterbreite. Das können Sie mithilfe von CSS regeln. Aber Sie müssen noch weitere HTML-Strukturelemente hinzufügen, um die Seite über logische Gruppen formatieren zu können. Wie das geht, erfahren Sie in Teil 3 – Strukturelemente und Links hinzufügen.

04/13/2018

Beitrag von: David Powers, Tom Alex Buch

War diese Seite hilfreich?