Im zweiten Teil dieses Tutorials lernst du, wie du eine Web-Seite für die Aufnahme und Formatierung von Text vorbereitest, Text direkt in der Ansicht „Live“ hinzufügst und Text aus einem vorhandenen Dokument kopierst.
Bunte, gemusterte Kacheln schweben in den Himmel.

Hinweis:

Über die Download-Buttons kannst du die Creative Cloud-Bibliothek und alle Projektdateien für dieses Tutorial herunterladen. Du kannst entweder mit der Datei weiterarbeiten, die du im ersten Teil des Tutorials angelegt hast, 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. 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.

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

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.

  1. Öffne die Datei index.html für die responsive Bayside Beat-Website. Das ist die leere Seite, die du im ersten Teil des Tutorials erstellt hast. Falls die Datei „sights.html“ noch geöffnet sein sollte, schließe 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. Verwende die Ansicht „Teilen“ für die nächsten Schritte. Klicke links oben im Dokumentfenster auf Teilen, um die geteilte Ansicht zu öffnen (siehe Abbildung 1).
Der Button „Teilen“ wird ausgewählt, um den HTML-Code in einem Bereich des Dokumentfensters anzuzeigen.
Abbildung 1: In der geteilten Ansicht kannst du den HTML-Code der Seite überprüfen.
  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).
Im Bedienfeld „Einfügen“ ist die Kategorie „HTML“ ausgewählt.
Abbildung 2: Wähle 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. 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“.
Ein DIV-Element wird mit Platzhaltertext hinzugefügt und in der Ansicht „Live“ von der Elementanzeige als solches ausgewiesen.
Abbildung 3: In der Ansicht „Live“ 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 musst du ihm eine ID zuweisen. Da dieses DIV-Element den gesamten Seiteninhalt umschließen (englisch: to wrap) wird, nenne es wrapper.

  2. Klicke auf das Pluszeichen der Elementanzeige. Es wird ein Feld geöffnet, über das du eine Klasse oder ID zum Element hinzufügen kannst. Gib „#wrapper“ in das Feld ein. Drücke die Tabulator- oder Eingabetaste, um die Änderung zu bestätigen.

  3. 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).
Beim Hinzufügen einer Klasse oder ID zu einem Element fragt Dreamweaver, wo die zugehörige CSS-Anweisung definiert wird.
Abbildung 4: Wenn du eine Klasse oder ID zu einem Element hinzufügst, fragt Dreamweaver, wo die zugehörige CSS-Anweisung definiert wird.
  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:

    <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 (#). Eine Klasse beginnt mit einem Punkt (.).

  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.
Zugehörige Dateien werden unterhalb der Registerkarte mit dem Dateinamen aufgelistet.
Abbildung 5: Zugehörige Dateien werden unterhalb der Registerkarte mit dem Dateinamen aufgelistet.

Klicke auf der Leiste „Zugehörige Dateien“ auf responsive.css. Die Ansicht „Code“ 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).

Die Leiste „Zugehörige Dateien“ bietet Zugriff auf das angehängte Stylesheet.
Abbildung 6: Über die Leiste „Zugehörige Dateien“ kannst du das angehängte Stylesheet aufrufen.

    Beachte, 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. Du wirst die CSS-Anweisungen für das Wrapper-DIV-Element im vierten Teil dieses Tutorials hinzufügen, wenn du mit dem Layout der Site beginnst.

  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:

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

  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).
Das Stylesheet befindet sich an der korrekten Stelle im Ordner „styles“.
Abbildung 7: Stelle 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 erfährst du, wie du dies mit CSS Designer bewerkstelligst, dem Hauptbedienfeld für die Gestaltung von Web-Seiten in Dreamweaver. 

Text direkt in der Ansicht „Live“ eingeben.

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. Vergewissere dich, dass auf der Leiste „Zugehörige Dateien“ Quellcode aktiviert ist. Klicke in der Ansicht „Live“ auf eine beliebige Stelle im Platzhaltertext. In der Ansicht „Code“ musst du die Einfügemarke (eine vertikale Linie) irgendwo im Text sehen können.

  2. Rufe im Eigenschafteninspektor das Dropdown-Menü Format auf. Wähle Überschrift 1 aus (siehe Abbildung 8). Falls du das Menü Format nicht siehst, prüfe, ob links im Eigenschafteninspektor die Option „HTML“ aktiviert ist.
Der Platzhaltertext wird in eine H1-Überschrift umgewandelt.
Abbildung 8: Wandle den Platzhaltertext in eine Überschrift erster Ordnung um.
  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.

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

Der Platzhaltertext wurde in ein H1-Element umgewandelt.
Abbildung 9: Der Platzhaltertext wurde in ein H1-Element umgewandelt.
  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. 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 du die Zeichenfolge „&nbsp;“ entdeckst, wechsle zur Ansicht „Code“, und entferne die Zeichen manuell. Wenn du das nicht tust, 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 du ihn nicht selbst verfassen möchtest.

  4. 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.

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

  6. 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.
Mithilfe des Dialogfeldes zur Positionierungshilfe lässt sich das neue Element präzise einfügen.
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 Ansicht „Live“ noch ausgewählt ist, wandle ihn in eine ungeordnete Liste um. Klicke dazu im Eigenschafteninspektor auf „Ungeordnete Liste“ (siehe Abbildung 11).
Durch Klicken auf „Ungeordnete Liste“ im Eigenschafteninspektor wird der Absatz in eine ungeordnete Liste umgewandelt.
Abbildung 11: Wandle den Absatz in eine ungeordnete Liste um.
  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.
fig12
Abbildung 12: Der Absatz wurde in eine ungeordnete Liste mit einem einzelnen Listeneintrag umgewandelt.
  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.
Zusätzliche Listenelemente werden mit einem LI-Tag hinzugefügt.
Abbildung 13: Die ungeordnete Liste wird später in das Navigationsmenü umgewandelt.
  1. Speichere 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 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. Blende im Bedienfeld „Dateien“ den Inhalt des Ordners „content“ ein. Mache einen Doppelklick auf die Datei index.docx, um sie in Microsoft Word zu öffnen.

  2. Wähle den kompletten Text bis zum Ende des Copyright-Hinweises aus. Kopiere ihn in deine Zwischenablage.

  3. Wechsle zurück zu Dreamweaver. Vergewissere dich, dass in der Ansicht „Live“ die ungeordnete Liste (nicht nur eines der Listenelemente) ausgewählt ist. Du kannst das gesamte Element auswählen, indem du auf eine beliebige Stelle in der Liste und anschließend unten im Tag-Selektor des Dokumentfensters auf den UL-Tag klickst (siehe Abbildung 14).
Der Tag-Selektor zeigt die aktuelle Auswahl in der HTML-Struktur an.
Abbildung 14: Der Tag-Selektor zeigt die aktuelle Auswahl in der HTML-Struktur an.
  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).
Über das Dialogfeld „Inhalte einfügen“ wird gesteuert, wie Text aus externen Dokumenten in Dreamweaver eingefügt wird.
Abbildung 15: Über das Dialogfeld „Inhalte einfügen“ kannst du steuern, was Dreamweaver aus externen Dokumenten übernehmen soll.
  1. Wähle das dritte Optionsfeld Text mit Struktur und einfacher Formatierung (fett, kursiv). Vergewissere dich, dass das Kontrollkästchen Abstand der Word-Absätze optimieren aktiviert ist. Klicke 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: 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. Wähle den ersten Absatz aus (er beginnt mit „Bayside Beat keeps you ...“), indem du in der Ansicht „Live“ auf eine beliebige Stelle im Absatz klickst. Die Elementanzeige zeigt an, dass es sich um ein P-Element (einen Absatz, englisch: paragraph) handelt. In der Ansicht „Code“ ist der Text von P-Tags umschlossen.

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

  3. Wähle die erste Überschrift Riding the Cable Cars (Fahrten mit den San Francisco Cable Cars) aus, indem du in den Text klickst. 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).
Die Überschrift wurde beim Einfügen aus Word automatisch formatiert.
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. 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).
Die Elementanzeige bestätigt, dass es sich beim Copyright-Hinweis um einen Absatz handelt.
Abbildung 17: Die Elementanzeige bestätigt, dass es sich beim Copyright-Hinweis um einen Absatz handelt.
  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).
Hervorgehobener Text wird als Absatz formatiert.
Abbildung 18: Möglicherweise musst du 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 du Text in einem Word-Dokument auswählst, markiere ihn daher immer bis zum Ende einer Zeile. Üblicherweise befindet sich nach dem letzten Zeichen eine kleine Leerstelle (siehe Abbildung 19).

Am Ende eines Copyright-Hinweises, der aus Microsoft Word kopiert und eingefügt wurde, befindet sich eine Leerstelle.
Abbildung 19: Markiere immer auch die Leerstelle am Ende eines Textes, wenn du ihn aus Microsoft Word kopierst.
  1. Speichere die Datei „index.html“.

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 &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 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.

Elemente mithilfe des Direkt-Eigenschafteninspektors formatieren.

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. Blende im Bedienfeld „Dateien“ den Inhalt des Ordners „content“ ein. Mache einen Rechtsklick bzw. Ctrl-Klick auf die Datei „index.rtf“. Wähle im Kontextmenü Öffnen mit > Durchsuchen. Wähle 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ähle den gesamten Text vom Anfang bis einschließlich des Copyright-Hinweises aus. Kopiere den ausgewählten Text in deine Zwischenablage.

  4. Wechsle zurück zu Dreamweaver. Vergewissere dich, dass in der Ansicht „Live“ die ungeordnete Liste ausgewählt ist (siehe Schritt 3 und Abbildung 14).

  5. 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. Die beiden letzten Optionsfelder und das zweite Kontrollkästchen sind deaktiviert, da du den Text nicht aus einem Word-Dokument einfügst (siehe Abbildung 20).
Einige Optionen aus „Inhalte einfügen“ sind deaktiviert, wenn Text nicht aus Microsoft Word kopiert wird.
Abbildung 20: Wenn du Text nicht aus Microsoft Word kopierst, sind einige Optionen deaktiviert.

    Prüfe, ob das zweite Optionsfeld Text mit Struktur (Absätze, Listen, Tabellen usw.) aktiviert ist. Deaktiviere das Kontrollkästchen „Zeilenumbrüche beibehalten“. Klicke 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. 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.

 

Mit dem Direkt-Eigenschafteninspektor werden Textelemente formatiert.
Abbildung 21: Du kannst Textelemente in der Ansicht „Live“ mit dem Direkt-Eigenschafteninspektor formatieren.
  1. Wiederhole den letzten Schritt für die zweite Überschrift Cable Car Tips.

  2. Wähle den Copyright-Hinweis unten auf der Seite aus. Überprüfe, ob er als Absatz formatiert ist. Falls nötig, passe 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.

  • Kopiere auch immer die Leerzeile nach dem letzten Absatz mit.

  • Gehe immer über den Menüpfad Bearbeiten > Inhalte einfügen. Oder verwende die Tastenkombination Strg+Umschalt+V (Windows) bzw. Befehl+Umschalt+V (macOS). Deaktiviere das Kontrollkästchen Zeilenumbrüche beibehalten. Obwohl sich Dreamweaver deine 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.

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

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. 

 

Vorheriges Thema:  Projektüberblick und Site-Definition |  Nächstes Thema: Strukturelemente und Links hinzufügen

 

10/19/2021

Beitrag von: David Powers, Tom Alex Buch

War diese Seite hilfreich?