Strukturelemente und Links hinzufügen.

Willkommen zu Teil 3 dieses Tutorials zur Erstellung einer einfachen, responsiven Website mit Dreamweaver. In dieser Lektion wirst du HTML5-Strukturelemente zur Homepage hinzufügen, um die Formatierung der verschiedenen Bereiche zu vereinfachen. Außerdem erstellst du Verknüpfungen mit der zweiten Web-Seite und externen Websites. Zum Schluss füllst du die zweite, aktuell noch leere Seite mit Inhalten.

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 du ältere Browser unterstützen musst, findest du entsprechende Hilfe im Dreamweaver-Support-Forum.

Obwohl du auf der Homepage bereits den vollständigen Text eingefügt und formatiert hast, musst du noch einige weitere HTML-Tags hinzufügen, um der Seite eine logische Struktur geben. Mithilfe dieser Tags wirst du Container für die unterschiedlichen Bereiche der Seite einrichten, sodass du sie unabhängig voneinander formatieren kannst.

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.

Du wirst die Seitenstruktur mithilfe des Bedienfelds „DOM“ festlegen. DOM ist die Abkürzung für „Document Object Model“. Du kannst darunter eine Art Landkarte verstehen, mit deren Hilfe ein Browser die verschiedenen Bereiche einer Seite identifiziert. Falls du zum ersten Mal eine Website entwickelst oder dich noch nie zuvor mit HTML-Code beschäftigt hast, kann das Bedienfeld „DOM“ 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. Öffne die Datei „index.html“ im Dokumentfenster. Schaue dir das Bedienfeld „DOM“ 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, klicke auf die Registerkarte „DOM“, um das Bedienfeld nach vorne zu holen. Alternativ kannst du „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 Bedienfeld „DOM“ sind möglicherweise ausgeblendet. Du kannst sie einblenden, indem du auf das Dreieck links neben dem jeweiligen Element klickst. Verschachtelte Elemente werden rechts eingerückt dargestellt. So ist z. B. das H1-Element innerhalb des DIV-Elements mit der ID „wrapper“ verschachtelt. 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 Bedienfeld „DOM“ 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ähle im Bedienfeld „DOM“ das H1-Element aus. Halte dann die Umschalttaste gedrückt, und wähle das UL-Element aus. Die ausgewählten Elemente sollten nun in einem kräftigen Blau markiert sein. Wenn du das UL-Element erweiterst, siehst du, 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 Bedienfeld „DOM“ auswählen zu können, gibt es seit Dreamweaver 2015.2. Die Anweisungen in diesem Abschnitt gelten also nicht für ältere Dreamweaver-Versionen.

3. Klicke 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. Überschreibe den Eintrag, indem du im linken Feld header eingibst. Sobald du anfängst, zu tippen, werden Codehints eingeblendet. Verwende die Pfeiltasten oder deine Maus, um „header“ in der Liste der Vorschläge auszuwählen.

Lasse das rechte Feld leer. Hier kannst du später eine ID oder Klasse für das Element festlegen. Im Moment ist das aber nicht erforderlich.

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

5. Wähle im Bedienfeld „DOM“ das UL-Element aus. Klicke auf das Pluszeichen links daneben. Dieses Mal werden dir mehr Optionen angeboten (siehe Abbildung 5), da du nur ein einzelnes Element (und seine untergeordneten Elemente) ausgewählt hast.

6. Wähle In Tag einschließen. Gib im linken Feld nav ein. Lasse das rechte Feld wieder leer.
   
   
7. Wähle das erste P-Element direkt nach dem UL-Element aus. In der Ansicht „Live“ oder in der Ansicht „Code“ kannst du überprüfen, ob du das richtige Element ausgewählt hast. Der mit „Bayside Beat keeps …“ beginnende Absatz sollte markiert sein.
   
   
8. Klicke auf das Pluszeichen. Wähle In Tag einschließen. Übernimm den vorgeschlagenen Wert „div“ im linken Feld. Gib 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 du einem Element über die Elementanzeige eine ID oder Klasse zuweist.

9. Umschließe 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ße dann das nächste H2-Element und die beiden darauffolgenden Absätze mit einem Element vom Typ „aside“ (für sekundären Content).

10. Lege nun noch ein Element um den letzten Absatz. Gib im linken Feld footer ein.

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

11. Überprüfe, ob deine Struktur korrekt ist, indem du die verschachtelten Elemente mithilfe der Dreiecke ausblendest. Dein Bedienfeld „DOM“ sollte nun wie in Abbildung 7 aussehen.

12. Speichere die Datei „index.html“.

Die Struktur im Bedienfeld „DOM“ 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 der Gestaltung eines visuell ansprechenden 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. Du kannst damit auf andere Bereiche derselben Website oder auf externe Websites verweisen. In diesem Abschnitt wirst du die Aufzählung in interne Links umwandeln und den Haupttext um einige externe Links ergänzen.

1. Wähle den ersten Listeneintrag (Home) aus. Mache einen Doppelklick auf den Text, um den Bearbeitungsmodus zu aktivieren.
   
   
2. Wenn du im Bearbeitungsmodus Text auswählst, erscheinen drei kleine Symbole links darüber. Markiere das ganze Wort. Klicke auf das Verknüpfungssymbol. Es wird ein Feld eingeblendet, in das du das Link-Ziel eingeben kannst (siehe Abbildung 8).

3. Du kannst zwar das Ziel deines 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ähle die Datei „index.html“ im Stammordner „bayside“ aus (klicke ggf. auf Stammordner). Klicke dann auf OK (Windows) bzw. Öffnen (macOS). Klicke 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. Wiederhole diesen Schritt für den nächsten Listeneintrag (Sights). Lege einen Link zur Datei sights.html an.
   
   
5. Für die restlichen drei Listeneinträge gibt es keine Beispielseiten. Gib daher im Link-Feld ein Hash-Zeichen (#) ein, um Dummy-Links zu erstellen.
   
   
6. Mache einen Doppelklick auf den ersten Absatz nach „Riding the Cable Cars“. Markiere die Worte „Fisherman’s Wharf“. Hier soll ein Link zu einer externen Website eingefügt werden, also musst du die vollständige URL in das Link-Feld eingeben: http://www.fishermanswharf.org/.
   
   
7. Erstelle nun im ersten Absatz nach „Cable Car Tips“ weitere externe Links für „Muni Passport“ und „BART subway system“. Du findest 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 du die erste Seite mit Text und Links versehen hast, wende dich nun der zweiten Seite zu. Über das Bedienfeld „DOM“ kannst du ganz einfach Elemente für die Struktur der nächsten Seite kopieren.

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

3. Öffne die Datei sights.html mit einem Doppelklick auf den Dateinamen im Bedienfeld „Dateien“.
   
   
4. Die Datei „sights.html“ ist nun das aktive Dokument. Wähle im Bedienfeld „DOM“ das BODY-Element aus. Mache einen Rechtsklick bzw. Ctrl-Klick darauf, und wähle Als untergeordnetes Element einfügen (siehe Abbildung 10). Die kopierten Elemente werden damit innerhalb der BODY-Tags der zweiten Seite verschachtelt.

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



Klicke in das rechte Feld. Gib „#wrapper“ ein. Drücke die Eingabetaste, um die Änderung zu bestätigen.

6. Wähle das HEADER-Element aus. Klicke auf das Pluszeichen. Wähle die Option Danach einfügen. Überschreibe im linken Feld den Eintrag div mit main. Drücke zweimal die Eingabetaste, um die Änderung zu bestätigen.
   
   
7. Wähle das soeben eingefügte MAIN-Element aus. Klicke auf das Pluszeichen. Wähle die Option Danach einfügen. Ändere den Elementnamen in „aside“.

Die HTML-Struktur der zweiten Seite ist damit fertig.

Da nun die HTML-Struktur steht, kannst du 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, musst du den Platzhaltertext zuerst formatieren.

1. Klicke in der Ansicht „Live“ auf eine beliebige Stelle im Platzhaltertext des MAIN-Elements. Wähle im Menü Format des Eigenschafteninspektors die Option Absatz (siehe Abbildung 11).

2. Öffne die Datei sights.docx im Ordner „content“ (verwende die Datei „sights.rtf“, wenn du Microsoft Word nicht installiert hast). Kopiere die erste Überschrift und die sechs darauffolgenden Absätze in deine Zwischenablage.
   
   
3. Wechsle wieder zu Dreamweaver. Vergewissere dich, 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üge den aus dem externen Dokument kopierten Text in die Ansicht „Live“ ein. (Wenn du den Text aus der RTF-Datei einfügst, verwende dazu die Option Inhalte einfügen. Du musst in diesem Fall den ersten Absatz mithilfe des Direkt-Eigenschafteninspektors in eine Überschrift umwandeln.)

4. Nachdem du den neuen Inhalt hinzugefügt hast, wähle den Absatz mit dem Platzhaltertext aus, und lösche ihn.
   
   
5. Kopiere 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 du den Text aus der RTF-Datei verwendest, formatiere die Absätze „Tourist information“ und „Sightseeing Tours“ als Überschriften.
   
   
6. Speichere 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 du das nicht tust, 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 du das Bedienfeld „Einfügen“ oder den Menübefehl verwendest.

Um den Inhalt der Seite „sights.html“ zu vervollständigen, musst du noch ein paar Links innerhalb des Textes erstellen. Verwende die URLs in den Dateien „sights.docx“ bzw. „sights.rtf“. Zur Orientierung kannst du dir die Version der Datei „sights.html“ im Beispielordner part3 ansehen.

Herzlichen Glückwunsch! Du hast zwei voll funktionsfähige Seiten für eine Website erstellt. Noch sehen sie recht schlicht aus, aber darum kümmerst du dich im nächsten Schritt.