Zweite Seite fertigstellen und Website für Tablets und Desktops formatieren

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.

Willkommen zu Teil 7 dieses Tutorials zur Erstellung einer einfachen, responsiven Website mit Dreamweaver CC. Sie haben das Projekt fast abgeschlossen. Sie müssen 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 werden Sie 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 werden Sie lernen, Fehler bei der absoluten Positionierung von Elementen zu vermeiden. Zunächst müssen Sie 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 Sie das Stylesheet mit der Datei „sights.html“ verknüpft haben, müssen Sie nur noch das Navigationsmenü auf dieser Seite aktualisieren.

1. Öffnen Sie die Datei sights.html mit einem Doppelklick auf den Dateinamen im Bedienfeld „Dateien“.
   
   
2. Klicken Sie im CSS Designer-Bedienfeld links oben im Bereich „Quellen“ auf das Pluszeichen (+), und wählen Sie Vorhandene CSS-Datei anhängen (siehe Abbildung 3).

3. Klicken Sie im Dialogfeld auf die Schaltfläche Durchsuchen, und navigieren Sie zur Datei responsive.css im Ordner „styles“. Klicken Sie auf „OK“ (Windows) bzw. auf „Öffnen“ (macOS), und schließen Sie 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ählen Sie im DOM-Bedienfeld die ungeordnete Liste aus (sie ist in den Elementen HEADER und NAV verschachtelt). Doppelklicken Sie auf das UL-Element, und geben Sie 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 Live-Ansicht breiter als 1.000 Pixel ist, machen Sie sich keine Sorgen wegen des halbtransparenten Hintergrunds, der rechts über das Wrapper-DIV-Element hinausragt. Er wird im zweispaltigen Layout nicht zu sehen sein.

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

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

6. Um das Navigationsmenü zu vervollständigen, müssen Sie noch den Trigger-Link und die JavaScript-Datei hinzufügen. Dafür gibt es mehrere Methoden, aber da Sie sich bereits im DOM-Bedienfeld befinden, bietet es sich an, dort gleich weiterzuarbeiten.
   
   Wechseln Sie im Dokumentfenster zur Datei „index.html“, machen Sie im DOM-Bedienfeld einen Rechtsklick bzw. Ctrl-Klick auf das Element „h2 #menulink“, und wählen Sie im Kontextmenü Kopieren (siehe Abbildung 7).

7. Kehren Sie zur Datei „sights.html“ zurück. Klicken Sie im DOM-Bedienfeld mit der rechten Maustaste auf das NAV-Element, und wählen Sie Als untergeordnetes Element einfügen.
   
   Achtung: Wenn Sie „Einfügen“ statt „Als untergeordnetes Element einfügen“ wählen, wird der Trigger-Link gleichrangig mit dem NAV-Element (also auf derselben Ebene in der HTML-Hierarchie) und damit im DOM-Bedienfeld unterhalb des UL-Elements eingefügt. In der Live-Ansicht 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üfen Sie im DOM-Bedienfeld, 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, machen Sie diese Änderung mit der Tastenkombination Strg+Z (Windows) bzw. Befehl+Z (macOS) rückgängig. Wählen Sie dann das NAV-Element erneut aus, machen Sie einen Rechtsklick bzw. Ctrl-Klick darauf, und wählen Sie diesmal Als untergeordnetes Element einfügen.

8. Wechseln Sie zurück zur Datei „index.html“. Klicken Sie unten im DOM-Bedienfeld mit der rechten Maustaste auf das SCRIPT-Element, und wählen Sie im Kontextmenü Kopieren.
   
   
9. Kehren Sie zurück zur Datei „sights.html“. Klicken Sie im DOM-Bedienfeld mit der rechten Maustaste auf das FOOTER-Element, und wählen Sie 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 Sie das Skript angehängt haben, 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 u. U. in der Live-Ansicht nach links gerückt. Drücken Sie in diesem Fall einfach die F5-Taste, um die Live-Ansicht zu aktualisieren.
   
   
10. Speichern Sie die Datei „sights.html“.

Vermutlich fragen Sie sich, 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. Sie oder ihr Kunde haben im Laufe eines Projekts vielleicht neue Ideen oder Anforderungen. Daher ist es wichtig, zu wissen, wie Sie Elemente von einer Seite in eine andere kopieren können. Das war auch eine Übung, wie Sie Elemente korrekt verschachteln. 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 haben Sie mehrfach zwischen den Seiten „index.html“ und „sights.html“ hin- und hergeschaltet. Dabei ist Ihnen 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 Sie diese CSS-Anweisung im vierten Teil dieses Tutorials erstellt haben, 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 Sie aber das Stylesheet mit der Datei „sights.html“ verknüpft haben, hat Dreamweaver die Schrift „source-sans-pro“ nur mit der normalen „font-weight“-Property gesehen. Um dieses Problem zu beheben, müssen Sie die Stile anpassen, die verschiedene Schriftstärken verwenden.

1. Wählen Sie 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, deaktivieren Sie im Bereich „Eigenschaften“ das Kontrollkästchen „Nur verwendete“. Klicken Sie dann auf das Symbol für Text , und legen Sie 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. Wechseln Sie zur Datei „index.html“, und wählen Sie 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 Live-Ansicht) daraus die Schriftstärke „semi-bold“ (halbfett) ab. Das ist aber nicht gewollt. Richten Sie 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 Sie inzwischen einige Dateien geändert haben, wählen Sie Datei > Alles speichern.
   
   
5. Dreamweaver fragt, ob die Webfonts in der Datei „sights.html“ aktualisiert werden sollen (siehe Abbildung 10).

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

Normalerweise müssen Sie die Property „font-family“ für eine CSS-Anweisung außerhalb des BODY-Bereichs nur angeben, wenn Sie eine andere Schrift verwenden möchten. In diesem Fall verwenden Sie 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 Sie viele Webfonts verwenden (was übrigens nicht zu empfehlen ist), sollten Sie bedenken, wie viele Schriftschnitte insgesamt heruntergeladen werden.

Im fünften Teil dieses Tutorials haben Sie Bilder direkt aus der Creative Cloud-Bibliothek „Bayside“ in FIGURE-Elemente eingefügt. Meistens werden Sie aber wohl eher mit Bildern arbeiten, die auf Ihrem Rechner gespeichert sind. In diesem Abschnitt werden Sie 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. Machen Sie im Bedienfeld „CC Libraries“ einen Rechtsklick bzw. Ctrl-Klick auf das Bild mit der Beschriftung alcatraz, und wählen Sie im Kontextmenü Nicht verknüpfte Elemente herunterladen.
   
   
2. Ändern Sie im eingeblendeten Dialogfeld das Bildformat in JPEG und die Bildgröße in 400 x 266.
   
   
3. Wiederholen Sie diese Schritte für das Bild mit der Beschriftung cable_car2. Da Sie in der ersten Lektion den Ordner „images“ als Standardordner für Bilder festgelegt haben, werden beide Bilder aus der Creative Cloud-Bibliothek extrahiert und im Ordner „images“ der „Bayside Responsive“-Site gespeichert.
   
   
4. Wählen Sie in der Live-Ansicht den ersten Absatz auf der Seite „sights.html“ aus – er beginnt mit „The precipitous hills ...“ (Die steilen Hügel ...).
   
   
5. Klicken Sie im Bedienfeld „Einfügen“ unter der Kategorie „HTML“ auf „Figure“, um ein FIGURE-Element mit darin verschachteltem FIGCAPTION-Element einzufügen. Wählen Sie im Dialogfeld zur Positionierungshilfe die Option Nach aus.
   
   
6. Während das FIGURE-Element noch ausgewählt ist, fügen Sie das Bild „cable_car2.jpg“ ein:
   
   
   • Klicken Sie im Bedienfeld „Einfügen“ unter „HTML“ auf Image.
   • Oder wählen Sie Einfügen > Image.
   • Oder verwenden Sie die Tastenkombination Strg+Alt+I (Windows) bzw. Befehl+Wahl+I (macOS).
      
7. Wählen Sie im Dialogfeld zur Positionierungshilfe die Option Einbetten, und navigieren Sie im nächsten Dialogfeld zum Bild „cable_car2.jpg“.
   
   
8. Entfernen Sie die Angaben für Breite und Höhe des Bildes über den Direkt-Eigenschafteninspektor. Löschen Sie den Platzhaltertext im FIGURE-Element, und ersetzen Sie 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 haben Sie eine super Aussicht auf die Stadt).
   
   
9. Fügen Sie ein weiteres FIGURE-Element inklusive FIGCAPTION-Element zwischen dem dritten und vierten Absatz ein.
   
   
10. Sie können 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 DOM-Bedienfeld zu finden.
    
    Klicken Sie auf die Registerkarte „Elemente“, um das Bedienfeld zu öffnen, und vergewissern Sie sich, dass links oben das Symbol für Bilder ausgewählt ist (siehe Abbildung 11).

Falls nötig, aktualisieren Sie die Inhalte im Bedienfeld, indem Sie rechts unten auf den kreisförmigen Pfeil klicken. Sie können die Vorschau vergrößern, indem Sie den unteren Rand des Vorschaubereichs nach unten ziehen.

11. Wählen Sie das Bild alcatraz.jpg entweder in der Dateiliste oder im Vorschaubereich aus, und ziehen Sie es in die Live-Ansicht. Verfahren Sie dabei wie im fünften Teil des Tutorials: Ziehen Sie das Bild, bis Sie eine grüne Linie genau über dem FIGURE-Element sehen, pausieren Sie kurz, und fahren Sie mit dem Cursor über das eingeblendete </>-Symbol. Ziehen Sie das Bild im schwebenden DOM-Bedienfeld weiter, und lassen Sie die Maustaste los, wenn sich der Cursor über dem FIGURE-Element befindet (siehe Abbildung 12). Das Bild wird innerhalb des Elements verschachtelt.

12. Entfernen Sie die Angaben für Breite und Höhe des Bildes über den Direkt-Eigenschafteninspektor. Löschen Sie den Platzhaltertext im FIGURE-Element, und ersetzen Sie 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ählen Sie das Bild von Alcatraz aus, und weisen Sie ihm über die Elementanzeige die Klasse „.grayscale“ zu. Denken Sie daran, einen Punkt einzufügen, der die Klasse definiert.
    
    
14. Speichern Sie 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 werden Sie nur zwei Media Queries erstellen – beide basierend auf der Mindestbreite des Bildschirms.

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

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

4. Wählen Sie im obersten Dropdown-Menü „min-width“ aus. Geben Sie im Feld „min-width“ den Wert 700px ein, und wählen Sie im untersten Dropdown-Menü responsive.css aus. Vergleichen Sie Ihre Einstellungen mit denen in Abbildung 15, und klicken Sie auf OK.

5. Die Leiste für visuelle Media Queries am oberen Rand des Dokumentfensters zeigt nun einen lila Balken. Klicken Sie darauf, um die Breite des Dokumentfensters auf exakt 700 Pixel einzustellen.
   
   
6. Vergewissern Sie sich, dass in CSS Designer oben die Schaltfläche Alle aktiviert ist. Wählen Sie im Bereich „Quellen“ responsive.css aus, und erweitern Sie den Bereich „@Medien“. Die Media Query wird hier nun angezeigt. Wenn Sie sie auswählen, 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 wissen Sie, wie Sie Selektoren und CSS-Anweisungen erstellen, daher ist die folgende Anleitung relativ kurz gehalten.

1. Vergewissern Sie sich, dass das Dokumentfenster mindestens 700 Pixel breit ist. Es ist egal, ob „index.html“ oder „sights.html“ gerade im Dokumentfenster geöffnet ist. Klicken Sie in der Live-Ansicht auf eine beliebige Stelle im Trigger-Link, um ihn auszuwählen.
   
   
2. Prüfen Sie, ob in CSS Designer die Schaltfläche Alle aktiviert ist. Wählen Sie 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. Klicken Sie im Bereich „Selektoren“ auf das Pluszeichen (+), und erstellen Sie einen Selektor für #menulink. Legen Sie im Abschnitt „Layout“ des Bereichs „Eigenschaften“ für die Property „display“ den Wert none fest. Der Trigger-Link verschwindet.
   
   
4. Ziehen Sie den Scrubber der Live-Ansicht nach links, um die Seitenbreite auf weniger als 700 Pixel zu reduzieren. Der Trigger-Link erscheint wieder. Ziehen Sie den Scrubber in die andere Richtung. Der Link wird wieder ausgeblendet, sobald die Seite mindestens 700 Pixel breit ist.
   
   
5. Vergewissern Sie sich, dass die Media Query im Bereich „@Medien“ noch ausgewählt ist (das gilt auch für alle weiteren Schritte), erstellen Sie einen Selektor für #navlinks, und legen Sie 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. Sie können die Links noch nicht sehen, weil ihnen über den JavaScript-Code in der Datei „menu.js“ die Klasse „collapsed“ dynamisch zugewiesen wurde.

6. Erstellen Sie einen Selektor für #navlinks.collapsed (ohne Leerzeichen vor oder nach dem Punkt), und geben Sie 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. Korrigieren Sie die Links mithilfe eines Selektors für #navlinks a, und legen Sie für ihn folgende Properties fest:

Ihr Navigationsmenü sollte nun wie in Abbildung 17 aussehen.

Das Navigationsmenü enthält fünf Links. Indem Sie für alle die Property „width“ auf 20% setzen, verteilen Sie sie gleichmäßig über die Breite der Seite. Da Sie in Schritt 5 die Property „max-width“ auf „1000px“ gesetzt haben, 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 haben Sie den Absatz unter dem Bild mit der Golden Gate Bridge in halbfetter rosa Schrift mit einem unteren Rahmen formatiert. Für das zweispaltige Layout werden Sie ihn mittels absoluter Positionierung über dem Bild platzieren und in einer anderen Schriftfarbe mit einem Rahmen auf allen Seiten formatieren. Sie werden auch lernen, wie Sie häufige Fehler bei der absoluten Positionierung vermeiden.

1. Falls nötig, wechseln Sie zur Seite „index.html“, und klicken Sie in 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ßen Sie die Datei „index.html“, und öffnen Sie sie wieder. Der JavaScript-Code, der das Navigationsmenü bei einer Breite von weniger als 700 Pixel steuert, verschiebt das Lineal manchmal.
   
   
2. Wählen Sie in der Live-Ansicht den Absatz unter dem Bild mit der Golden Gate Bridge aus. Vergewissern Sie sich, das in CSS Designer „responsive.css“ und die Media Query noch immer ausgewählt sind. Erstellen Sie einen Selektor für #hero p, und legen Sie folgende Properties fest:

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

3. Verwenden Sie das visuelle Tool direkt unter der Property „position“, um den Absatz vor das Bild mit der Golden Gate Bridge zu positionieren. Das erreichen Sie 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ählen Sie zuerst px als Maßeinheit aus, und positionieren Sie den Cursor auf oder direkt unter das Wertefeld, bis der Cursor sich in einen Doppelpfeil verwandelt (siehe Abbildung 18). Ziehen Sie die Maus nach links, um den Wert zu erhöhen, oder nach rechts, um ihn zu verringern.

4. Richten Sie 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. Machen Sie einen Doppelklick in den grauen Bereich neben der Live-Ansicht, damit sie die gesamte Breite des Dokumentfensters einnimmt. Je nach Größe Ihres 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. Erstellen Sie einen neuen Selektor für „#hero“, und legen Sie für die Property „position“ den Wert relative fest. Dadurch wird das übergeordnete DIV-Element zum Container für den absolut positionierten Absatz, und die Abstände werden nicht länger relativ zum oberen und rechten Seitenrand berechnet.
   
   
7. Passen Sie die Position des Absatzes an, indem Sie den Selektor „#hero p“ auswählen und die Property „top“ auf ca. 90px setzen. 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. Speichern Sie Ihre 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“ haben Sie 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, und die folgenden Elemente rücken in den frei gewordenen Platz. Die Property „float“ setzt eine bestimmte Breite oder maximale Breite voraus.

1. Vergewissern Sie sich, dass „responsive.css“ und die Media Query in CSS Designer ausgewählt sind, und erstellen Sie einen Selektor für main. Richten Sie eine Breite von 60% ein.
   
   
2. Erstellen Sie einen Selektor für aside, und setzen Sie die Breite auf 28%. Geben Sie 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, und 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. Erstellen Sie eine Gruppe von Selektoren für „main, aside“. Legen Sie die folgenden Properties fest:

Sobald Sie die Property „float“ festlegen, tritt augenscheinlich eine Katastrophe ein: 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.    Erstellen Sie einen Selektor für „footer“, und setzen Sie 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. Sie werden 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. Wechseln Sie zur Seite sights.html, und ziehen Sie sie mithilfe des Scrubbers der Live-Ansicht auf eine Breite von ungefähr 900 Pixel.
   
   
2. Klicken Sie im Lineal auf das Pluszeichen , und erstellen Sie in der CSS-Datei „responsive.css“ eine Media Query mit der Einstellung „min-width: 900 px“.

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

5. Wählen Sie im Bereich „@Medien“ von CSS Designer die Media Query „min-width: 900px“ aus, und wählen Sie im Bereich „Selektoren“ den Selektor „.floatright“ aus. Legen Sie 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, haben Sie die Klasse vermutlich dem Bild selbst und nicht dem übergeordneten FIGURE-Element zugewiesen.

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

7. Speichern Sie Ihre Arbeit über den Menüpfad Datei > Alle zugehörigen Dateien speichern.

Ihr responsives Layout ist fertig. Damit Ihre Website korrekt auf Mobilgeräten dargestellt werden kann, ist nur noch ein letzter Schritt nötig.

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

Dieses Tag müssen Sie für alle Seiten Ihrer 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 Sie haben dabei nicht nur viel über Dreamweaver CC, sondern auch über aktuelle Trends im Webdesign gelernt. Falls Ihnen manche Techniken noch Schwierigkeiten bereiten, wiederholen Sie die entsprechenden Teile des Tutorials einfach. Die Grundlagen von HTML und CSS sind nicht schwer zu erlernen, aber Webdesigns werden einfach immer anspruchsvoller. Erwarten Sie also nicht, dass Sie im Handumdrehen zum Experten werden. Irgendwann kommt der Punkt, an dem viele Grafik-Designer darauf bestehen, sie seien nun einmal Designer und keine Programmierer. Natürlich designen Sie, wenn Sie eine Website erstellen. Aber Sie designen mit Code. Dreamweaver fügt den größten Teil des Codes automatisch für Sie ein. Trotzdem müssen Sie wissen, welche CSS-Properties und Werte Sie brauchen, um den gewünschten Effekt zu erzielen.

Falls Sie Hilfe bei Layout- und Design-Problemen benötigen, laden Sie Ihre Problemseite auf eine Website hoch, und posten Sie eine Frage im Dreamweaver-Support-Forum. Geben Sie in Ihrem Post die URL und eine Kurzbeschreibung des Problems an. Es finden sich i. d. R. mehrere Community-Mitglieder, die Ihnen gerne helfen.

In Teil 8 – Website veröffentlichen lernen Sie nun, wie Sie Ihre Web-Seiten und sonstigen Inhalte auf einen Webserver hochladen.