Strukturelemente und Links hinzufügen

Willkommen zu Teil 3 dieses Tutorials zur Erstellung einer einfachen, responsiven Website mit Dreamweaver CC. In dieser Lektion werden Sie HTML5-Strukturelemente zur Homepage hinzufügen, um die Formatierung der verschiedenen Bereiche zu vereinfachen. Außerdem erstellen Sie Verknüpfungen mit der zweiten Web-Seite und externen Websites. Schließlich werden Sie die zweite, aktuell noch leere Seite mit Inhalten füllen.

Hinweis: Internet Explorer 8 und andere ältere Browser können HTML5-Elemente nicht interpretieren und daher die fertige Website nicht korrekt darstellen. Ältere Browser wurden daher bewusst nicht berücksichtigt, damit das Tutorial nicht unnötig kompliziert wird. Falls Sie ältere Browser unterstützen müssen, finden Sie entsprechende Hilfe im Dreamweaver-Support-Forum.

Obwohl Sie auf der Homepage bereits den vollständigen Text eingefügt und formatiert haben, müssen Sie noch einige weitere HTML-Tags hinzufügen, um der Seite eine logische Struktur geben. Mithilfe dieser Tags werden Sie Container für die unterschiedlichen Bereiche der Seite einrichten, sodass Sie sie unabhängig voneinander formatieren können.

Abbildung 1 zeigt, wie die Seite strukturiert sein soll. Header und Footer werden sich immer über die gesamte Breite des Wrapper-DIV-Elements erstrecken. Auf großen Bildschirmen werden die meisten Seiteninhalte in zwei Spalten dargestellt. Auf kleinen Bildschirmen wird der Inhalt der rechten Spalte unter den Inhalt der linken Spalte gerückt.

Sie werden die Seitenstruktur mithilfe des DOM-Bedienfelds festlegen. DOM ist die Abkürzung für „Document Object Model“. Sie können darunter eine Art Landkarte verstehen, mit deren Hilfe ein Browser die verschiedenen Bereiche einer Seite identifiziert. Falls Sie zum ersten Mal eine Website entwickeln oder sich noch nie zuvor mit HTML-Code beschäftigt haben, kann das DOM-Bedienfeld auf den ersten Blick einschüchternd wirken. Es ist jedoch ein äußerst effizientes Tool zur Prüfung und Steuerung der Struktur einer Web-Seite.

1. Öffnen Sie die Datei „index.html“ im Dokumentfenster, und sehen Sie sich das DOM-Bedienfeld an. Im Arbeitsbereich „Entwurf“ wird es standardmäßig in der unteren Hälfte der Bedienfeldgruppe auf der rechten Seite des Bildschirms angezeigt. Falls nötig, klicken Sie auf die Registerkarte „DOM“, um das Bedienfeld nach vorne zu holen. Alternativ können Sie „Fenster > DOM“ wählen oder Strg+/ (Windows) bzw. Befehl+/ (macOS) drücken. Der Inhalt des Bedienfelds müsste so ähnlich wie in Abbildung 2 aussehen.

Einige Elemente im DOM-Bedienfeld sind möglicherweise ausgeblendet. Sie können sie einblenden, indem Sie auf das Dreieck links neben dem jeweiligen Element klicken. Verschachtelte Elemente werden rechts eingerückt dargestellt. So ist z. B. das H1-Element innerhalb des DIV-Elements mit der ID „wrapper“ verschachtelt, und die LI-Elemente sind innerhalb des UL-Elements verschachtelt.

Verschachtelte Elemente nennt man untergeordnete Elemente oder auch Kinder. Die äußeren Elemente bezeichnet man als übergeordnete Elemente; sie sind quasi die „Eltern“. Elemente auf der gleichen Ebene sind gleichgeordnete Elemente oder – um im Bild zu bleiben – „Geschwister“. Das DOM-Bedienfeld stellt also die Struktur einer Seite wie einen Familienstammbaum dar. In diesem Sinne sind verschachtelte Elemente Nachfahren der äußeren Elemente, die wiederum manchmal auch als Vorfahren bezeichnet werden.

2. Wählen Sie im DOM-Bedienfeld das H1-Element aus. Halten Sie dann die Umschalttaste gedrückt, und wählen Sie das UL-Element aus. Die ausgewählten Elemente sollten nun in einem kräftigen Blau markiert sein. Wenn Sie das UL-Element erweitern, sehen Sie, dass die darin verschachtelten LI-Elemente in einem helleren Blau hervorgehoben werden (siehe Abbildung 3). Diese Hervorhebung zeigt an, dass sich der nächste Bearbeitungsschritt sowohl auf die untergeordneten LI-Elemente als auch auf das übergeordnete UL-Element auswirken wird.

Hinweis: Die Möglichkeit, mehrere Elemente im DOM-Bedienfeld auswählen zu können, ist neu in Dreamweaver CC 2015.2. Die Anweisungen in diesem Abschnitt gelten also nicht für ältere Dreamweaver-Versionen.

3. Klicken Sie auf das Pluszeichen links neben dem UL-Element und dann auf In Tag einschließen (siehe Abbildung 4).

4. Über dem H1-Element werden zwei editierbare Felder angezeigt. Dreamweaver schlägt standardmäßig ein DIV-Tag vor. Überschreiben Sie den Eintrag, indem Sie im linken Feld header eingeben. Sobald Sie anfangen, zu tippen, werden Codehints eingeblendet. Verwenden Sie die Pfeiltasten oder Ihre Maus, um „header“ in der Liste der Vorschläge auszuwählen.



Lassen Sie das rechte Feld leer. Hier können Sie später eine ID oder Klasse für das Element festlegen. Im Moment ist das aber nicht erforderlich.

Drücken Sie die Eingabetaste zweimal, um die Änderung zu bestätigen. Die ausgewählten Elemente sind nun innerhalb eines HEADER-Elements verschachtelt.

5. Wählen Sie im DOM-Bedienfeld das UL-Element aus, und klicken Sie auf das Pluszeichen links daneben. Dieses Mal werden Ihnen mehr Optionen angeboten (siehe Abbildung 5), da Sie nur ein einzelnes Element (und seine untergeordneten Elemente) ausgewählt haben.

6. Wählen Sie In Tag einschließen, und geben Sie im linken Feld nav ein. Lassen Sie das rechte Feld wieder leer.
   
   
7. Wählen Sie das erste P-Element direkt nach dem UL-Element aus. Sie können in der Live- oder Code-Ansicht überprüfen, ob Sie das richtige Element ausgewählt haben. Der mit „Bayside Beat keeps …“ beginnende Absatz sollte markiert sein.
   
   
8. Klicken Sie auf das Pluszeichen, und wählen Sie In Tag einschließen. Übernehmen Sie den vorgeschlagenen Wert „div“ im linken Feld, und geben Sie im rechten Feld #hero ein. Damit wird der Absatz von einem DIV-Element mit der ID hero umschlossen.



Dieses Mal erstellt Dreamweaver nicht automatisch einen Selektor für die ID im Stylesheet. Selektoren werden nur automatisch erstellt, wenn Sie einem Element über die Elementanzeige eine ID oder Klasse zuweisen.

9. Umschließen Sie auf die gleiche Weise das erste H2-Element und die nächsten drei P-Elemente mit einem HTML-Element vom Typ main (für den Hauptinhalt der Seite).



Umschließen Sie dann das nächste H2-Element und die beiden darauffolgenden Absätze mit einem Element vom Typ „aside“ (für sekundären Content).

10. Legen Sie nun noch ein Element um den letzten Absatz, und geben Sie im linken Feld footer ein.

Das DOM-Bedienfeld sollte nun wie in Abbildung 6 aussehen. (Die untergeordneten Elemente des UL-Elements sind hier ausgeblendet)

11. Überprüfen Sie, ob Ihre Struktur korrekt ist, indem Sie die verschachtelten Elemente mithilfe der Dreiecke ausblenden. Ihr DOM-Bedienfeld sollte nun wie in Abbildung 7 aussehen.

12. Speichern Sie die Datei „index.html“.

Die Struktur im DOM-Bedienfeld entspricht nun dem Schema in Abbildung 1 am Anfang dieses Abschnitts – mit einer Ergänzung: Es gibt ein DIV-Element mit der ID „hero“ zwischen dem HEADER- und dem MAIN-Element. Dieses Element wird nur auf der ersten Seite verwendet, um ein großes Bild von der Golden Gate Bridge und einen kurzen Textabsatz aufzunehmen.

Die Erstellung einer solchen HTML-Struktur scheint nicht viel mit dem Entwerfen eines attraktiven Designs zu tun zu haben, aber sie ist als solide Grundlage für das Layout unverzichtbar. Wenn alle Elemente korrekt ineinander verschachtelt sind, lassen sich die einzelnen Seitenbereiche später als kohärente Gruppen formatieren.

Die Elemente „header“, „nav“, „main“, „aside“ und „footer“ selbst werden nicht formatiert. Sie sind lediglich gruppierende Elemente, deren Namen ihre Funktion auf der Seite widerspiegeln.

Links – oder Hyperlinks, wie sie korrekt heißen – sind ein wesentliches Merkmal einer Web-Seite. Sie können damit auf andere Bereiche derselben Website oder auf externe Websites verweisen. In diesem Abschnitt werden Sie die Aufzählung in interne Links umwandeln und den Haupttext um einige externe Links ergänzen.

1. Wählen Sie den ersten Listeneintrag (Home) aus, und machen Sie einen Doppelklick auf den Text, um den Bearbeitungsmodus zu aktivieren.
   
   
2. Wenn Sie im Bearbeitungsmodus Text auswählen, erscheinen drei kleine Symbole links darüber. Markieren Sie das ganze Wort, und klicken Sie auf das Verknüpfungssymbol. Es wird ein Feld eingeblendet, in das Sie das Link-Ziel eingeben können (siehe Abbildung 8).

3. Sie können zwar das Ziel Ihres Hyperlinks direkt in dieses Feld eingeben, aber für interne Links ist es sicherer, auf das Ordnersymbol rechts neben dem Eingabefeld zu klicken. Daraufhin öffnet sich das Dialogfeld „Datei auswählen“.
   
   

Wählen Sie die Datei „index.html“ im Stammordner „bayside“ aus (klicken Sie ggf. auf Stammordner). Klicken Sie dann auf OK (Windows) bzw. Öffnen (macOS). Klicken Sie anschließend außerhalb des orangefarbenen Rahmens, um den Bearbeitungsmodus zu beenden. Das Wort Home ist nun blau und unterstrichen. Das zeigt an, dass es sich um einen Link handelt.

Der Weg über das Dialogfeld „Datei auswählen“ mag übervorsichtig erscheinen, aber im Gegensatz zur direkten Eingabe des Dateinamens ist so sichergestellt, dass der Pfad zur Zieldatei bestimmt korrekt geschrieben und formatiert wird.

4. Wiederholen Sie diesen Schritt für den nächsten Listeneintrag (Sights), und legen Sie einen Link zur Datei sights.html an.
   
   
5. Für die restlichen drei Listeneinträge gibt es keine Beispielseiten. Geben Sie daher im Link-Feld ein Hash-Zeichen (#) ein, um Dummy-Links zu erstellen.
   
   
6. Machen Sie einen Doppelklick auf den ersten Absatz nach „Riding the Cable Cars“, und markieren Sie die Worte „Fisherman’s Wharf“. Hier soll ein Link zu einer externen Website eingefügt werden, also müssen Sie die vollständige URL in das Link-Feld eingeben: http://www.fishermanswharf.org/.
   
   
7. Erstellen Sie nun im ersten Absatz nach „Cable Car Tips“ weitere externe Links für „Muni Passport“ und „BART subway system“. Sie finden die entsprechenden URLs in den Beispieldateien „index.docx“ und „index.rtf“ im Ordner „content“.

Ein häufiger Fehler bei der Einrichtung eines Links zu einer externen Website ist, dass das Präfix http:// oder https:// am Anfang der URL vergessen wird. Dann sieht der Browser die URL als internen Link und sucht die Seite innerhalb derselben Website. Die sicherste Methode zur Erstellung eines externen Links ist, die URL aus der Adresszeile des Browsers zu kopieren und in das Link-Feld in Dreamweaver einzufügen.

Nachdem Sie die erste Seite mit Text und Links versehen haben, wenden Sie sich nun der zweiten Seite zu. Über das DOM-Bedienfeld können Sie ganz einfach Elemente für die Struktur der nächsten Seite kopieren.

1. Speichern Sie die Datei „index.html“, falls noch nicht geschehen. Halten Sie die Strg-Taste (Windows) bzw. die Befehlstaste (macOS) gedrückt, und wählen Sie im DOM-Bedienfeld Header und Footer aus. Die untergeordneten Elemente werden automatisch mit ausgewählt. Achten Sie aber darauf, dass Sie sonst keine anderen Elemente auswählen.
   
   
2. Machen Sie einen Rechtsklick bzw. Ctrl-Klick auf die ausgewählten Elemente, und wählen Sie im Kontextmenü die Option Kopieren (siehe Abbildung 9).

3. Öffnen Sie die Datei sights.html mit einem Doppelklick auf den Dateinamen im Bedienfeld „Dateien“.
   
   
4. Die Datei „sights.html“ ist nun das aktive Dokument. Wählen Sie im DOM-Bedienfeld das BODY-Element aus. Klicken Sie mit der rechten Maustaste darauf, und wählen Sie die Option Als untergeordnetes Element einfügen (siehe Abbildung 10). Die kopierten Elemente werden damit innerhalb der BODY-Tags der zweiten Seite verschachtelt.

5. Wählen Sie „header“ und „footer“ (aber nicht das BODY-Element) aus, klicken Sie auf das Pluszeichen, und wählen Sie die Option In Tag einschließen. Die ausgewählten Elemente werden in ein DIV-Element eingeschlossen. Dazu werden zwei editierbare Felder im DOM-Bedienfeld geöffnet.



Klicken Sie in das rechte Feld, geben Sie „#wrapper“ ein, und drücken Sie die Eingabetaste, um die Änderung zu bestätigen.

6. Wählen Sie das header-Element aus, klicken Sie auf das Pluszeichen, und wählen Sie die Option „Danach einfügen“. Überschreiben Sie im linken Feld den Eintrag div mit main, und drücken Sie zweimal die Eingabetaste, um die Änderung zu bestätigen.
   
   
7. Wählen Sie das soeben eingefügte MAIN-Element aus, klicken Sie auf das Pluszeichen, und wählen Sie die Option Danach einfügen. Ändern Sie den Elementnamen in „aside“.

Die HTML-Struktur der zweiten Seite ist damit fertig.

Da nun die HTML-Struktur steht, können Sie den Haupttext für die zweite Seite hinzufügen. Das MAIN- und das ASIDE-Element enthalten Platzhaltertext. Um sicherzugehen, dass der Inhalt aus einer externen Datei an der richtigen Stelle eingefügt wird, müssen Sie den Platzhaltertext zuerst formatieren.

1. Klicken Sie in der Live-Ansicht auf eine beliebige Stelle im Platzhaltertext des MAIN-Elements, und wählen Sie im Menü Format des Eigenschafteninspektors die Option Absatz (siehe Abbildung 11).

2. Öffnen Sie die Datei sights.docx im Ordner „content“ (verwenden Sie die Datei „sights.rtf“, wenn Sie Microsoft Word nicht installiert haben). Kopieren Sie die erste Überschrift und die sechs darauffolgenden Absätze in Ihre Zwischenablage.
   
   
3. Wechseln Sie wieder zu Dreamweaver. Vergewissern Sie sich, dass der im ersten Schritt formatierte Absatz noch immer ausgewählt ist. Die Elementanzeige sollte „p“ anzeigen, nicht „main“ (siehe Abbildung 12).

Dieser Schritt ist notwendig, weil Inhalte aus externen Dateien nach der aktuellen Auswahl auf derselben Ebene in der HTML-Hierarchie hinzugefügt werden.

Fügen Sie den aus dem externen Dokument kopierten Text in die Live-Ansicht ein. (Wenn Sie den Text aus der RTF-Datei einfügen, verwenden Sie dazu die Option Inhalte einfügen. Sie müssen in diesem Fall den ersten Absatz mithilfe des Direkt-Eigenschafteninspektors in eine Überschrift umwandeln.)

4. Nachdem Sie den neuen Inhalt hinzugefügt haben, wählen Sie den Absatz mit dem Platzhaltertext aus, und löschen Sie ihn.
   
   
5. Kopieren Sie den restlichen Text aus der Datei „sights.docx“ bzw. „sights.rtf“ (von „Tourist information“ bis „see the city on a Segway) in das ASIDE-Element. Wenn Sie den Text aus der RTF-Datei verwenden, formatieren Sie die Absätze „Tourist information“ und „Sightseeing Tours“ als Überschriften.
   
   
6. Speichern Sie die Datei „sights.html“.

Es ist notwendig, den Platzhaltertext zuerst zu formatieren und später zu löschen, weil Dreamweaver Inhalte aus externen Dateien als gleichgeordnete Elemente des ausgewählten Elements einfügt. Wenn Sie das nicht tun, werden alle eingefügten Überschriften und Absätze nach dem ausgewählten Element eingefügt und nicht darin verschachtelt. Dreamweaver zeigt das Dialogfeld zur Positionierungshilfe nur an, wenn Sie das Bedienfeld „Einfügen“ oder den Menübefehl verwenden.

Um den Inhalt der Seite „sights.html“ zu vervollständigen, müssen Sie noch ein paar Links innerhalb des Textes erstellen. Verwenden Sie die URLs in den Dateien „sights.docx“ bzw. „sights.rtf“. Zur Orientierung können Sie sich die Version der Datei „sights.html“ im Beispielordner part3 ansehen.

Herzlichen Glückwunsch! Sie haben zwei voll funktionsfähige Seiten für eine Website erstellt. Sie sehen zwar nicht besonders schön aus, aber darum kümmern Sie sich in Teil 4 – Schriften ändern und grundlegende Layout-Eigenschaften festlegen.