Die zweite Seite fertigstellen und die Website für Tablets und Desktops formatieren.

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.

Willkommen zu Teil 7 dieses Tutorials zur Erstellung einer einfachen, responsiven Website mit Dreamweaver. Du hast das Projekt fast abgeschlossen. Du musst nur noch die zweite Seite fertigstellen und dann das einspaltige Layout der Bayside Beat-Website (siehe Abbildung 1) in ein zweispaltiges Design ändern, das für Tablets und Desktops geeignet ist.

Die Bereitstellung eines alternativen Layouts für Bildschirme mit höherer Auflösung wird über Media Queries (Medienabfragen) gesteuert. Eine Media Query gibt auf Basis bestimmter Kriterien, z. B. der minimalen oder maximalen Breite des Anzeigefensters, unterschiedliche CSS-Anweisungen an den Browser weiter. Der Einfachheit halber wirst du in dieser Lektion nur zwei Media Queries erstellen. Die erste Media Query gibt vor, dass die Seite ab einer Bildschirmbreite von 700 Pixel im zweispaltigen Layout angezeigt werden soll. Die zweite Media Query bricht den Text um einige Bilder herum, wenn der Bildschirm mindestens 900 Pixel breit ist. Am Ende dieser Lektion wird die Homepage wie in Abbildung 2 aussehen.

Im Laufe der kommenden Schritte wirst du lernen, Fehler bei der absoluten Positionierung von Elementen zu vermeiden. Zunächst musst du aber noch ein wenig an der zweiten Seite arbeiten, denn sie ist noch nicht vollständig formatiert.

Das Praktische an einem externen Stylesheet ist, dass die Stile sofort auf jede Seite angewendet werden, die mit dem Stylesheet verknüpft ist. Nachdem du das Stylesheet mit der Datei „sights.html“ verknüpft hast, musst du nur noch das Navigationsmenü auf dieser Seite aktualisieren.

1. Öffne die Datei sights.html mit einem Doppelklick auf den Dateinamen im Bedienfeld „Dateien“.
   
   
2. Klicke im Bedienfeld „CSS Designer“ links oben im Bereich „Quellen“ auf das Pluszeichen (+). Wähle Vorhandene CSS-Datei anhängen (siehe Abbildung 3).

3. Klicke im Dialogfeld auf Durchsuchen. Navigiere zur Datei responsive.css im Ordner „styles“. Klicke auf „OK“ (Windows) bzw. auf „Öffnen“ (macOS). Schließe das erste Dialogfeld mit einem Klick auf OK.
   
   Durch die Verknüpfung mit dem Stylesheet ändert sich das Layout der Seite sofort. Dreamweaver erkennt auch, dass die Stile einen Adobe Edge Web Font verwenden, und fügt den Code ein, mit dem die Schrift heruntergeladen wird.
   
   
4. Das Navigationsmenü sieht aber immer noch wie eine ungeordnete Liste aus. Wähle im Bedienfeld „DOM“ die ungeordnete Liste aus (sie ist in den Elementen HEADER und NAV verschachtelt). Doppelklicke auf das UL-Element. Gib im rechten Feld #navlinks.displayed ein. Es werden Codehints für IDs und Klassen eingeblendet (siehe Abbildung 4).

Das Navigationsmenü wird neu formatiert und über der ersten Überschrift und den darauffolgenden Absätzen absolut positioniert. Falls die Ansicht „Live“ breiter als 1.000 Pixel ist, mache dir keine Sorgen wegen des halbtransparenten Hintergrunds, der rechts über das Wrapper-DIV-Element hinausragt. Er wird im zweispaltigen Layout nicht zu sehen sein.

5. Erweitere im Bedienfeld „DOM“ das UL-Element und dann das zweite LI-Element. Wähle anschließend das darin verschachtelte A-Element aus. Wenn du das richtige Element ausgewählt hast, ist der Link „SIGHTS“ in der Ansicht „Live“ ebenfalls ausgewählt.
   
   Mache im Bedienfeld „DOM“ einen Doppelklick auf das A-Element. Weise ihm die Klasse .thispage zu (siehe Abbildung 5).

Wenn du die Änderung mit der Eingabetaste bestätigst, wird die Klasse ebenfalls in der Elementanzeige angezeigt. Der zweite Link ändert seine Farbe (siehe Abbildung 6).

6. Um das Navigationsmenü zu vervollständigen, musst du noch den Trigger-Link und die JavaScript-Datei hinzufügen. Dafür gibt es mehrere Methoden. Aber da du dich bereits im Bedienfeld „DOM“ befindest, bietet es sich an, dort gleich weiterzuarbeiten.
   
   Wechsle im Dokumentfenster zur Datei „index.html“. Mache im Bedienfeld „DOM“ einen Rechtsklick bzw. Ctrl-Klick auf das Element „h2 #menulink“. Wähle im Kontextmenü Kopieren (siehe Abbildung 7).

7. Kehre zur Datei „sights.html“ zurück. Klicke im Bedienfeld „DOM“ mit der rechten Maustaste bzw. bei gedrückter Ctrl-Taste auf das NAV-Element. Wähle Als untergeordnetes Element einfügen.
   
   Achtung: Wenn du „Einfügen“ statt „Als untergeordnetes Element einfügen“ wählst, wird der Trigger-Link gleichrangig mit dem NAV-Element (also auf derselben Ebene in der HTML-Hierarchie) und damit im Bedienfeld „DOM“ unterhalb des UL-Elements eingefügt. In der Ansicht „Live“ würde es allerdings an der richtigen Stelle stehen, weil die ungeordnete Liste absolut positioniert und somit vom Fluss der restlichen Dokumentenelemente ausgeschlossen ist.
   
   Überprüfe im Bedienfeld „DOM“, ob das Element „h2 #menulink“ korrekt im NAV-Element über der ungeordneten Liste verschachtelt ist (siehe Abbildung 8).

Falls „h2 #menulink“ unterhalb der ungeordneten Liste eingefügt wurde, mache diese Änderung mit der Tastenkombination Strg+Z (Windows) bzw. Befehl+Z (macOS) rückgängig. Wähle dann das NAV-Element erneut aus. Mache einen Rechtsklick bzw. Ctrl-Klick darauf, und wähle diesmal Als untergeordnetes Element einfügen.

8. Wechsle zurück zur Datei „index.html“. Klicke unten im Bedienfeld „DOM“ mit der rechten Maustaste bzw. bei gedrückter Ctrl-Taste auf das SCRIPT-Element. Wähle im Kontextmenü Kopieren.
   
   
9. Kehre zurück zur Datei „sights.html“. Klicke im Bedienfeld „DOM“ mit der rechten Maustaste bzw. bei gedrückter Ctrl-Taste auf das FOOTER-Element. Wähle Einfügen.
   
   Dieses Mal ist „Einfügen“ die richtige Option, nicht „Als untergeordnetes Element einfügen“. Das Skript soll nach dem Footer eingefügt und nicht darin verschachtelt werden.
   
   Nachdem du das Skript angehängt hast, wird das Navigationsmenü nach den gleichen Kriterien wie in der Datei „index.html“ ausgeblendet. Falls das Dokumentfenster breiter als 1.000 Pixel ist, wird der Wrapper durch das Verknüpfen des Skripts unter Umständen in der Ansicht „Live“ nach links gerückt. Drücke in diesem Fall einfach die F5-Taste, um die Ansicht „Live“ zu aktualisieren.
   
   
10. Speichere die Datei „sights.html“.

Vermutlich fragst du dich, ob es nicht sinnvoller gewesen wäre, das Navigationsmenü vorab fertigzustellen, anstatt die unfertige Version aus dem dritten Teil zu kopieren und in dieser Lektion zu aktualisieren. In der Praxis verläuft die Entwicklung einer Website selten ohne großes Hin und Her. Du und/oder dein Kunde habt im Laufe eines Projekts vielleicht neue Ideen oder Anforderungen. Daher ist es wichtig, zu wissen, wie du Elemente von einer Seite in eine andere kopieren kannst. Das war auch eine Übung, wie du Elemente korrekt verschachtelst. Diese Seite würde zwar auch funktionieren, wenn das Skript innerhalb des Footers verschachtelt wäre. Aber falsch verschachtelte Elemente führen einfach oft zu Problemen. Außerdem lassen sich Fehler bei gut organisiertem Code viel leichter ermitteln und beheben.

Im vorherigen Abschnitt hast du mehrfach zwischen den Seiten „index.html“ und „sights.html“ hin- und hergeschaltet. Dabei ist dir vielleicht ein Unterschied beim Trigger-Link auf den beiden Seiten aufgefallen. Der Text „MENU“ auf der Seite „index.html“ ist dünner als auf der Seite „sights.html“ (siehe Abbildung 9).

Das kommt daher, dass die Schrift im BODY-Bereich als „source-sans-pro“ mit der „font-weight“-Property „400“ (normal) deklariert wird. Als du diese CSS-Anweisung im vierten Teil dieses Tutorials erstellt hast, hat Dreamweaver die Property „font-weight“ anfangs auf den Wert „200“ (dünn) gesetzt. Deshalb lädt das Skript auf der Seite „index.html“ den Adobe Edge Web Font in beiden Stärken herunter. Als du aber das Stylesheet mit der Datei „sights.html“ verknüpft hast, hat Dreamweaver die Schrift „source-sans-pro“ nur mit der normalen „font-weight“-Property gesehen. Um dieses Problem zu beheben, musst du die Stile anpassen, die verschiedene Schriftstärken verwenden.

1. Wähle mit der Datei „sights.html“ als aktiver Seite im Dokumentfenster im Bereich „Selektoren“ von CSS Designer den Selektor „#menulink a“ aus.
   
   
2. Falls nötig, deaktiviere im Bereich „Eigenschaften“ das Kontrollkästchen „Nur verwendete“. Klicke dann auf das Symbol für Text . Lege für die Property „font-family“ source-sans-pro fest. Dadurch wird das Skript im HEAD-Element aktualisiert, das für das Herunterladen von Edge Web Fonts zuständig ist.
   
   
3. Wechsle zur Datei „index.html“. Wähle im Bereich „Selektoren“ von CSS Designer den Selektor „#hero p“ aus. Er deklariert die Property „font-weight“ mit dem Wert „600“. Da dies stärker ist als der normale Wert für die Property „font-weight“, leiten Browser (und auch die Ansicht „Live“) daraus die Schriftstärke „semi-bold“ (halbfett) ab. Das ist aber nicht gewollt. Richte in dieser CSS-Anweisung für die Property „font-family“ ebenfalls source-sans-pro ein. Der Text im Absatz ist nun deutlich schärfer.
   
   
4. Da du inzwischen einige Dateien geändert hast, wähle Datei > Alles speichern.
   
   
5. Dreamweaver fragt, ob die Webfonts in der Datei „sights.html“ aktualisiert werden sollen (siehe Abbildung 10).

6. Klicke auf Aktualisieren und dann im Dialogfeld mit der Meldung, dass die Aktualisierung erfolgreich war, auf Schließen. Dreamweaver speichert die aktualisierten Dateien automatisch.

Normalerweise musst du die Property „font-family“ für eine CSS-Anweisung außerhalb des BODY-Bereichs nur angeben, wenn du eine andere Schrift verwenden möchtest. In diesem Fall verwendest du einen Edge Web Font, der von Adobe-Servern heruntergeladen werden muss. Um die Download-Größe auf ein Minimum zu beschränken, ruft Dreamweaver nur die Schriftstärken ab, die verwendet werden. Obwohl die Schriftstärke „semi-bold“ (600) nur in der Datei „index.html“ verwendet wird, wird diese zusätzliche Property „font-weight“ im Cache des Browsers gespeichert, wenn man die Seite „sights.html“ besucht. Der dadurch verursachte zusätzliche Datenverkehr ist minimal. Aber wenn du viele Webfonts verwendest (was übrigens nicht zu empfehlen ist), solltest du bedenken, wie viele Schriftschnitte insgesamt heruntergeladen werden.

Im fünften Teil dieses Tutorials hast du Bilder direkt aus der Creative Cloud-Bibliothek „Bayside“ in FIGURE-Elemente eingefügt. Meistens wirst du aber wohl eher mit Bildern arbeiten, die auf deinem Rechner gespeichert sind. In diesem Abschnitt wirst du zwei Bilder auf unterschiedliche Weise zur Seite „sights.html“ hinzufügen. Der Vorgang ähnelt dem im fünften Teil, deswegen ist die folgende Anleitung kurz gehalten.

1. Mache im Bedienfeld „CC Libraries“ einen Rechtsklick bzw. Ctrl-Klick auf das Bild mit der Beschriftung alcatraz. Wähle im Kontextmenü Nicht verknüpfte Elemente herunterladen.
   
   
2. Ändere im eingeblendeten Dialogfeld das Bildformat in JPEG und die Bildgröße in 400 x 266.
   
   
3. Wiederhole diese Schritte für das Bild mit der Beschriftung cable_car2. Da du in der ersten Lektion den Ordner „images“ als Standardordner für Bilder festgelegt hast, werden beide Bilder aus der Creative Cloud-Bibliothek extrahiert und im Ordner „images“ der „Bayside Responsive“-Site gespeichert.
   
   
4. Wähle in der Ansicht „Live“ den ersten Absatz auf der Seite „sights.html“ aus – er beginnt mit „The precipitous hills ...“ (Die steilen Hügel ...).
   
   
5. Klicke im Bedienfeld „Einfügen“ unter der Kategorie „HTML“ auf „Figure“, um ein FIGURE-Element mit darin verschachteltem FIGCAPTION-Element einzufügen. Wähle im Dialogfeld zur Positionierungshilfe die Option Nach aus.
   
   
6. Während das FIGURE-Element noch ausgewählt ist, füge das Bild „cable_car2.jpg“ ein:
   
   
   • Klicke im Bedienfeld „Einfügen“ unter „HTML“ auf Image.
   • Oder wähle Einfügen > Image.
   • Oder verwende die Tastenkombination Strg+Alt+I (Windows) bzw. Befehl+Wahl+I (macOS).
      
7. Wähle im Dialogfeld zur Positionierungshilfe die Option Einbetten. Navigiere im nächsten Dialogfeld zum Bild „cable_car2.jpg“.
   
   
8. Entferne die Angaben für Breite und Höhe des Bildes über den Direkt-Eigenschafteninspektor. Lösche den Platzhaltertext im FIGURE-Element. Ersetze den Platzhaltertext in der Beschriftung durch The front seat of a cable car affords a great view of the city (Auf dem vordersten Sitz im Cable Car hast du eine super Aussicht auf die Stadt).
   
   
9. Füge ein weiteres FIGURE-Element inklusive FIGCAPTION-Element zwischen dem dritten und vierten Absatz ein.
   
   
10. Du kannst zwar kein lokal gespeichertes Bild per Drag-and-Drop aus dem Bedienfeld „Einfügen“ platzieren. Aber aus dem Bedienfeld „Elemente“ schon. Es ist im Arbeitsbereich „Entwurf“ standardmäßig neben dem Bedienfeld „DOM“ zu finden.
    
    Klicke auf die Registerkarte „Elemente“, um das Bedienfeld zu öffnen. Vergewissere dich, dass links oben das Symbol für Bilder ausgewählt ist (siehe Abbildung 11).

Falls nötig, aktualisiere die Inhalte im Bedienfeld, indem du rechts unten auf den kreisförmigen Pfeil klickst. Du kannst die Vorschau vergrößern, indem du den unteren Rand des Vorschaubereichs nach unten ziehst.

11. Wähle das Bild alcatraz.jpg entweder in der Dateiliste oder im Vorschaubereich aus. Ziehe es in die Ansicht „Live“. Verfahre dabei wie im fünften Teil des Tutorials: Ziehe das Bild, bis du eine grüne Linie genau über dem FIGURE-Element siehst. Pausiere kurz. Und fahre mit dem Cursor über das eingeblendete </>-Symbol. Ziehe das Bild im schwebenden Bedienfeld „DOM“ weiter. Lasse die Maustaste los, wenn sich der Cursor über dem FIGURE-Element befindet (siehe Abbildung 12). Das Bild wird innerhalb des Elements verschachtelt.

12. Entferne die Angaben für Breite und Höhe des Bildes über den Direkt-Eigenschafteninspektor. Lösche den Platzhaltertext im FIGURE-Element. Ersetze den Platzhaltertext in der Beschriftung durch Alcatraz – former exclusive residence for notorious criminals (Alcatraz – ehemaliges Gefängnis, bekannt für seine berüchtigten Insassen).
    
    
13. Wähle das Bild von Alcatraz aus. Weise ihm über die Elementanzeige die Klasse „.grayscale“ zu. Denke daran, einen Punkt einzufügen, der die Klasse definiert.
    
    
14. Speichere die Datei „sights.html“.

Media Queries sind eine verhältnismäßig neue CSS-Funktion, die aber von allen modernen Browsern unterstützt wird. Die wichtigste Ausnahme bilden Internet Explorer 8 und ältere Versionen. Sie werden von Microsoft aber nicht mehr offiziell unterstützt, sodass sie bald aus der Medienlandschaft verschwinden werden. Der große Vorteil von Media Queries liegt darin, dass sie dem Browser unterschiedliche CSS-Anweisungen übergeben, die sich nach bestimmten Kriterien wie Breite, Ausrichtung oder Pixeldichte des Bildschirms richten. Der Einfachheit halber wirst du nur zwei Media Queries erstellen – beide basierend auf der Mindestbreite des Bildschirms.

1. Das Bedienfeld „CC Libraries“ brauchst du nicht mehr. Ziehe daher die Registerkarte des Bedienfelds neben die des Bedienfelds „Codefragmente“ in der Bedienfeldgruppe auf der rechten Seite deines Arbeitsbereichs (siehe Abbildung 13). Ziehe es nach oben in die Bedienfeldgruppe, bis eine blaue Linie erscheint. Lasse dann die Maustaste los, um es neben den anderen Bedienfeldern anzudocken.

2. Ziehe den Scrubber der Ansicht „Live“ nach links, bis das Dokumentfenster ca. 700px breit ist. Du musst den Wert nicht exakt treffen. Es ist auch egal, ob „index.html“ oder „sights.html“ gerade im Dokumentfenster geöffnet ist.
   
   
3. Klicke oben im Lineal des Dokumentfensters auf das Plussymbol , um das Popup-Bedienfeld zur Einrichtung einer Media Query zu öffnen (siehe Abbildung 14).

4. Wähle im obersten Dropdown-Menü „min-width“ aus. Gib im Feld „min-width“ den Wert 700px ein. Wähle im untersten Dropdown-Menü responsive.css aus. Vergleiche deine Einstellungen mit denen in Abbildung 15. Klicke dann auf OK.

5. Die Leiste für visuelle Media Queries am oberen Rand des Dokumentfensters zeigt nun einen lila Balken. Klicke darauf, um die Breite des Dokumentfensters auf exakt 700 Pixel einzustellen.
   
   
6. Vergewissere dich, dass in CSS Designer oben die Schaltfläche Alle aktiviert ist. Wähle im Bereich „Quellen“ responsive.css aus. Erweitere den Bereich „@Medien“. Die Media Query wird hier nun angezeigt. Wenn du sie auswählst, ist der Bereich „Selektoren“ leer (siehe Abbildung 16).

7. Klicken Sie im Bereich „@Medien“ auf GLOBAL. Alle Selektoren, die Sie in den Lektionen 4 bis 6 angelegt haben, sind hier aufgelistet. Diese Stile werden von allen Browsern unabhängig von der Bildschirmbreite angewendet. Sie verwenden die Media Query nur, um diejenigen Werte zu verändern, die bei einer Bildschirmbreite von mindestens 700 Pixel überschrieben werden sollen.
   
   
8. Speichern Sie Ihre Arbeit über den Menüpfad Datei > Alle zugehörigen Dateien speichern.

Der wahre Nutzen der Leiste für visuelle Media Queries wird deutlich, wenn Sie mit mehreren Media Queries arbeiten. Oben werden die „max-width“-Queries als grüne Balken, in der Mitte die „min-max“-Queries als hellblaue Balken und unten die „min-width“-Queries als lila Balken dargestellt. Wenn Sie auf einen Balken klicken, wird die Breite des Dokumentfensters entsprechend angepasst, sodass Sie die Auswirkungen der unterschiedlichen CSS-Anweisungen sehen können. Weitere Informationen finden Sie in der Dreamweaver-Hilfe unter Leisten für visuelle Medienabfragen.

Das Navigationsmenü wird im zweispaltigen Layout immer angezeigt. Inzwischen weißt du, wie du Selektoren und CSS-Anweisungen erstellst. Daher ist die folgende Anleitung relativ kurz gehalten.

1. Vergewissere dich, dass das Dokumentfenster mindestens 700 Pixel breit ist. Es ist egal, ob „index.html“ oder „sights.html“ gerade im Dokumentfenster geöffnet ist. Klicke in der Ansicht „Live“ auf eine beliebige Stelle im Trigger-Link, um ihn auszuwählen.
   
   
2. Prüfe, ob in CSS Designer die Schaltfläche Alle aktiviert ist. Wähle im Bereich „Quellen“ responsive.css und im Bereich „@Medien“ die Media Query (min-width: 700px) aus. Der Bereich „Selektoren“ sollte leer sein (siehe Abbildung 16).
   
   
3. Klicke im Bereich „Selektoren“ auf das Pluszeichen (+). Erstelle einen Selektor für #menulink. Lege im Abschnitt „Layout“ des Bereichs „Eigenschaften“ für die Property „display“ den Wert none fest. Der Trigger-Link verschwindet.
   
   
4. Ziehe den Scrubber der Ansicht „Live“ nach links, um die Seitenbreite auf weniger als 700 Pixel zu reduzieren. Der Trigger-Link erscheint wieder. Ziehe den Scrubber in die andere Richtung. Der Link wird wieder ausgeblendet, sobald die Seite mindestens 700 Pixel breit ist.
   
   
5. Vergewissere dich, dass die Media Query im Bereich „@Medien“ noch ausgewählt ist (das gilt auch für alle weiteren Schritte). Erstelle einen Selektor für #navlinks. Lege für ihn folgende Properties fest:

Durch die Änderung der Property „position“ in „static“ ist die ungeordnete Liste der Navigations-Links nicht länger absolut positioniert und wird an ihrer normalen Position auf der Seite angezeigt. Dadurch wird der restliche Inhalt der Seite nach unten verschoben. Du kannst die Links noch nicht sehen, weil ihnen über den JavaScript-Code in der Datei „menu.js“ die Klasse „collapsed“ dynamisch zugewiesen wurde.

6. Erstelle einen Selektor für #navlinks.collapsed (ohne Leerzeichen vor oder nach dem Punkt). Gib für die Property „opacity“ den Wert 1 ein. Das Menü erscheint wieder, zeigt aber nur den Link mit der Klasse „.thispage“ an, weil im vorherigen Schritt eine Transparenzstufe festgelegt wurde. Weiße Links sind vor einem weißem Hintergrund unsichtbar!
   
   
7. Korrigiere die Links mithilfe eines Selektors für #navlinks a. Lege für ihn folgende Properties fest:

Dein Navigationsmenü sollte nun wie in Abbildung 17 aussehen.

Das Navigationsmenü enthält fünf Links. Indem du für alle die Property „width“ auf 20% setzt, verteilst du sie gleichmäßig über die Breite der Seite. Da du in Schritt 5 die Property „max-width“ auf „1000px“ gesetzt hast, ragen sie auch nicht über das Wrapper-DIV-Element hinaus.

Die Property „float“ ist zurzeit die zuverlässigste Methode, um Blockelemente horizontal auszurichten. Links sind normalerweise keine Blockelemente, aber ihre „display“-Property wurde in den Lektionen 4 bis 6 in den globalen CSS-Anweisungen auf den Wert „block“ gesetzt.

Im fünften Teil dieses Tutorials hast du den Absatz unter dem Bild mit der Golden Gate Bridge in halbfetter rosa Schrift mit einem unteren Rahmen formatiert. Für das zweispaltige Layout wirst du ihn mittels absoluter Positionierung über dem Bild platzieren und in einer anderen Schriftfarbe mit einem Rahmen auf allen Seiten formatieren. Du lernst außerdem, wie du häufige Fehler bei der absoluten Positionierung vermeidest.

1. Falls nötig, wechsle zur Seite „index.html“. Klicke auf der Leiste für visuelle Media Queries auf den lila Balken, um die Breite des Dokumentfensters auf 700 Pixel einzustellen.
   
   Falls das Lineal am oberen Seitenrand nicht richtig positioniert ist, schließe die Datei „index.html“, und öffne sie wieder. Der JavaScript-Code, der das Navigationsmenü bei einer Breite von weniger als 700 Pixel steuert, verschiebt das Lineal manchmal.
   
   
2. Wähle in der Ansicht „Live“ den Absatz unter dem Bild mit der Golden Gate Bridge aus. Vergewissere dich, das in CSS Designer „responsive.css“ und die Media Query noch immer ausgewählt sind. Erstelle einen Selektor für #hero p. Lege folgende Properties fest:

Sobald du für die Property „position“ den Wert „absolute“ festlegst, werden die Überschrift „Riding the Cable Cars“ und der darauffolgende Text nach oben hinter den Absatz verschoben, den du gerade formatierst. Durch die absolute Positionierung wird ein Element aus dem normalen Fluss der Dokumentenelemente ausgeschlossen und auf eine Ebene vor den anderen Elementen platziert.

3. Verwende das visuelle Tool direkt unter der Property „position“, um den Absatz vor das Bild mit der Golden Gate Bridge zu positionieren. Das erreichst du mit einem Abstand oben und rechts. Ein positiver Abstand rückt die betreffende Seite des Elements von der entsprechenden Seite des ihn umgebenden Blocks ab.
   
   Dies ist eine gute Gelegenheit, die Scrubbing-Technik aus Teil 5 zu üben. Wähle zuerst px als Maßeinheit aus. Positioniere den Cursor auf oder direkt unter das Wertefeld, bis der Cursor sich in einen Doppelpfeil verwandelt (siehe Abbildung 18). Ziehe die Maus nach links, um den Wert zu erhöhen, oder nach rechts, um ihn zu verringern.

4. Richte für die Property „color“ den Wert white und auf allen Seiten einen Rahmen mit einer Breite von 5px und dem Stil solid ein. Abbildung 19 zeigt, wie der Absatz nun vor dem Bild mit der Golden Gate Bridge positioniert sein sollte.

5. Mache einen Doppelklick in den grauen Bereich neben der Ansicht „Live“, damit sie die gesamte Breite des Dokumentfensters einnimmt. Je nach Größe deines Monitors wird das Ergebnis entweder schlecht oder richtig schlecht aussehen.

Der erste Gedanke ist, dass sich das absolut positionierte Element bewegt haben muss. Hat es nicht. Die Abstände oben und rechts sind unverändert. Das Problem ist, dass die Abstände in Abhängigkeit vom Block, der das Element umgibt, berechnet werden. Aber ist es nicht innerhalb des Hero-DIV-Elements verschachtelt? Ist das nicht der Container?

Auch das ist eine berechtigte Annahme. Aber die CSS-Spezifikation schreibt vor, dass der umgebende Block eines positionierten Elements ebenfalls positioniert sein muss. Wenn das nicht der Fall ist, wird die Seite selbst zum Container. Folglich ist die Breite von 36 % relativ zur Breite der Seite und nicht des Hero-DIV-Elements zu sehen. Die Abstände werden also vom oberen und rechten Rand der Seite aus berechnet.

6. Das Problem lässt sich erstaunlich einfach beheben. Erstelle einen neuen Selektor für „#hero“. Lege für die Property „position“ den Wert relative fest. Dadurch wird das übergeordnete DIV-Element zum Container für den absolut positionierten Absatz. Die Abstände werden nicht länger relativ zum oberen und rechten Seitenrand berechnet.
   
   
7. Passe die Position des Absatzes an, indem du den Selektor „#hero p“ auswählst und die Property „top“ auf ca. 90px setzt. Bei voller Breite sollte das Hauptbild nun wie in Abbildung 21 aussehen.

Auch bei 700 Pixel sollte der Text in derselben Position bleiben (siehe Abbildung 19).

8. Speichere deine Arbeit über den Menüpfad Datei > Alle zugehörigen Dateien speichern.

Wenn die Property „position“ eines Elements auf „relative“ gesetzt wird, wird das Element relativ zu seiner normalen Position auf der Seite positioniert, ohne die umliegenden Elemente zu beeinflussen. In diesem Fall wurden keine Abstände für das Hero-DIV-Element festgelegt, also bewegt es sich auch nicht. Da es sich hier aber um ein positioniertes Element handelt, verhält es sich wie der es umgebende absolut positionierte Absatz. Das mag seltsam erscheinen, aber so funktioniert absolute Positionierung.

Eine absolute in Kombination mit einer relativen Positionierung ist für bestimmte Anwendungsfälle sehr nützlich, z. B. um einen Text wie hier vor ein Bild zu legen. Allerdings ist sie eher weniger geeignet, um damit eine komplette Web-Seite zu layouten. Das Web ist schließlich ein fließendes Medium.

Mithilfe der Property „float“ hast du vorhin die Navigations-Links horizontal ausgerichtet. Diese Property ist aktuell die zuverlässigste Methode, um ein zweispaltiges Layout zu erstellen. Wenn für ein Element eine linke oder rechte Property „float“ eingerichtet ist, bewegt es sich zur jeweiligen Seite. Die folgenden Elemente rücken in den frei gewordenen Platz. Die Property „float“ setzt eine bestimmte Breite oder maximale Breite voraus.

1. Vergewissere dich, dass „responsive.css“ und die Media Query in CSS Designer ausgewählt sind. Erstelle einen Selektor für main. Richte eine Breite von 60% ein.
   
   
2. Erstelle einen Selektor für aside. Setze die Breite auf 28%. Gib für den linken Rand zudem den Wert 0px ein. Das ist notwendig, um den über die globalen CSS-Anweisungen vererbten Rand von 4% zu überschreiben.
   
   Das MAIN-Element übernimmt einen Rand von 4 % auf beiden Seiten aus den globalen CSS-Anweisungen. Das ASIDE-Element weist rechts noch immer einen Rand von 4 % auf. Die kombinierte Breite beider Elemente und ihre horizontalen Ränder ergeben exakt 100 %.
   
   
3. Erstelle eine Gruppe von Selektoren für „main, aside“. Lege die folgenden Properties fest:

Sobald du die Property „float“ festlegst, passiert etwas Unerwartetes: Fast der komplette Hintergrund ist plötzlich schwarz (siehe Abbildung 22).

Keine Sorge, das ist alles normal. Elemente mit der Property „float“ werden ähnlich wie absolut positionierte Elemente aus dem normalen Fluss der Dokumentenelemente ausgeschlossen. Was ist passiert? Das FOOTER-Element hat sich zusammen mit dem MAIN-Element nach oben bewegt, und sein Hintergrund hat den frei gewordenen Platz ausgefüllt. Das Problem lässt sich leicht beheben.

1.    Erstelle einen Selektor für „footer“. Setze die Property „clear“ auf left. Nun ist alles wieder an seinem richtigen Platz.

Es gibt noch eine Methode zur Erstellung eines zweispaltigen Layouts: Flexbox. Sie wird von allen modernen Browsern unterstützt. Leider verwenden viele Browser ältere Versionen der Flexbox-Properties, sodass die Browser-übergreifende Umsetzung dieser Methode schwierig ist.

Ursprünglich war die Property „float“ dazu gedacht, Text um Bilder fließen zu lassen. Du wirst das Design jetzt mit einer zweiten Media Query vervollständigen und den Text um die Bilder auf der Seite „sights.html“ fließen lassen, wenn das Browser-Fenster breiter als 900 Pixel ist.

1. Wechsle zur Seite sights.html. Ziehe sie mithilfe des Scrubbers der Ansicht „Live“ auf eine Breite von ungefähr 900 Pixel.
   
   
2. Klicke im Lineal auf das Pluszeichen . Erstelle in der CSS-Datei „responsive.css“ eine Media Query mit der Einstellung „min-width: 900 px“.

3. Klicke auf der Leiste für visuelle Media Queries rechts neben den Wert „900px“, um die Breite der Ansicht „Live“ auf 900 Pixel einzustellen.
   
   
4. Wähle oben auf der Seite „sights.html“ das Bild mit den Cable Cars aus. Drücke die Nach-oben-Taste einmal, um das übergeordnete FIGURE-Element auszuwählen. Klicke auf das Pluszeichen (+) der Elementanzeige. Gib „.floatright“ in das editierbare Feld ein. Drücke die Tabulator- oder Eingabetaste, um dem Element die Klasse zuzuweisen. Vergewissere dich, dass im Popup-Bedienfeld „responsive.css“ ausgewählt ist. Wähle im zweiten Dropdown-Menü die Media Query „min-width: 900px“ aus (siehe Abbildung 24).

5. Wähle im Bereich „@Medien“ von CSS Designer die Media Query „min-width: 900px“ aus. Wähle im Bereich „Selektoren“ den Selektor „.floatright“ aus. Lege die folgenden Properties für die Klasse fest:

Der Text des folgenden Absatzes wird links um das Bild und seine Beschriftung umbrochen (siehe Abbildung 25).

Falls das Bild nicht nach rechts verschoben wird, hast du die Klasse vermutlich dem Bild selbst und nicht dem übergeordneten FIGURE-Element zugewiesen.

5. Wiederhole die Schritte 4 und 5 mit dem Bild von Alcatraz. Erstelle dieses Mal aber eine Klasse namens „.floatleft“ mit folgenden Properties:

7. Speichere deine Arbeit über den Menüpfad Datei > Alle zugehörigen Dateien speichern.

Dein responsives Layout ist fertig. Damit deine Website korrekt auf Smartphones und Tablets dargestellt werden kann, ist nur noch ein letzter Schritt nötig.

Wähle im Bedienfeld „Einfügen“ unter der Kategorie „HTML“ Viewport aus (siehe Abbildung 26). Du findest es im dritten Abschnitt.

Dieses Tag musst du für alle Seiten deiner Website einrichten. Smartphones skalieren Web-Seiten automatisch und ignorieren Media Queries, wenn das Meta-Tag fehlt.

Das war ein schönes Stück Arbeit, aber du hast dabei nicht nur viel über Dreamweaver, sondern auch über aktuelle Trends im Webdesign gelernt. Falls dir manche Techniken noch Schwierigkeiten bereiten, wiederhole die entsprechenden Teile des Tutorials einfach. Die Grundlagen von HTML und CSS sind nicht schwer zu erlernen, aber Webdesigns werden einfach immer anspruchsvoller. Erwarte also nicht, dass du im Handumdrehen zum Experten wirst. Irgendwann kommt der Punkt, an dem viele Grafik-Designer darauf bestehen, sie seien nun einmal Designer und keine Programmierer. Natürlich designst du, wenn du eine Website erstellst. Aber du designst mit Code. Dreamweaver fügt den größten Teil des Codes automatisch für dich ein. Trotzdem musst du wissen, welche CSS-Properties und Werte du brauchst, um den gewünschten Effekt zu erzielen.

Falls du Hilfe bei Layout- und Design-Problemen benötigst, lade deine Problemseite auf eine Website hoch, und poste eine Frage im Dreamweaver-Support-Forum. Gib in deinem Post die URL der Website sowie eine Kurzbeschreibung des Problems an. Es finden sich in der Regel mehrere Community-Mitglieder, die dir gerne helfen.

Im letzten Teil dieses Tutorials lernst du, wie du deine Web-Seiten und sonstigen Inhalte auf einen Webserver hochladen kannst.