Lerne im siebten Teil dieses Tutorials, wie du Media Queries (Medienabfragen) verwendest, um von einem zweispaltigen Layout zu einem einspaltigen Design zu wechseln, wenn die Website auf einem Smartphone oder Tablet angezeigt wird.
Bunte, gemusterte Kacheln schweben in den Himmel.

Hinweis: Über die Download-Buttons kannst du die Creative Cloud-Bibliothek und alle Projektdateien für dieses Tutorial herunterladen. Du kannst entweder mit der Datei weiterarbeiten, die du im ersten Teil des Tutorials angelegt hast, oder die Version im Ordner für diese Lektion verwenden.

Einführung.

Willkommen zu Teil 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 Bayside Beat-Website wird mit einspaltigem Layout auf einem Smartphone angezeigt.
Abbildung 1: Das einspaltige Layout funktioniert gut auf kleineren Geräten.

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.

Die fertige Bayside Beat-Website im zweispaltigen Layout
Abbildung 2: So sieht das fertige zweispaltige Layout aus.

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.

Die zweite Seite formatieren.

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).
Über den Bereich „Quellen“ können ein neues Stylesheet erstellt, ein vorhandenes angehängt oder CSS-Anweisungen direkt auf der Seite definiert werden.
Abbildung 3: Über den Bereich „Quellen“ können ein neues Stylesheet erstellt, ein vorhandenes angehängt oder CSS-Anweisungen direkt auf der Seite definiert werden.
  1. 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.

  2. 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).
Im Bedienfeld „DOM“ werden Codehints für die im Stylesheet definierten IDs und Klassen eingeblendet.
Abbildung 4: Im Bedienfeld „DOM“ werden Codehints für die im Stylesheet definierten IDs und Klassen eingeblendet.

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.

  1. 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).
Dem zweiten Link im Navigationsmenü wird eine Klasse zugewiesen.
Abbildung 5: Weise dem zweiten Navigations-Link eine Klasse zu.

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

Dem zweiten Link wurde die Klasse zugewiesen, die die aktuelle Seite identifiziert.
Abbildung 6: Dem zweiten Link wurde die Klasse zugewiesen, die die aktuelle Seite identifiziert.
  1. 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).
Der Trigger-Link wird aus der Datei „index.html“ kopiert.
Abbildung 7: Kopiere den Trigger-Link aus der Datei „index.html“.
  1. 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).
Der Trigger-Link ist im NAV-Element korrekt verschachtelt.
Abbildung 8: Der Trigger-Link sollte korrekt im NAV-Element verschachtelt sein.

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.

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

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

  3. 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).

Oben: Der Text im Trigger-Link in „index.html“ ist dünner als in „sights.html“.
Abbildung 9: Der Text des Trigger-Links ist auf der Seite „sights.html“ (unten) kräftiger als auf der Seite „index.html“.
Unten: Der Text im Trigger-Link in „sights.html“ ist kräftiger als in „index.html“.

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).
Dreamweaver fragt, ob das Skript für Webfonts auf anderen Seiten aktualisiert werden soll.
Abbildung 10: Gib an, ob Dreamweaver das Skript für Edge Web Fonts auf anderen Seiten aktualisieren soll.
  1. 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.

Bilder aus einer lokalen Quelle einfügen.

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).
Im Bedienfeld „Elemente“ sind alle Bilder, Farben, URLs und Medien der aktuellen Website aufgelistet.
Abbildung 11: Im Bedienfeld „Elemente“ sind alle Bilder, Farben, URLs und Medien der aktuellen Website aufgelistet.

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.

  1. 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.
Ein Bild wird in die Ansicht „Live“ gezogen. Das Symbol </> erscheint. Das Bild wird im Bedienfeld „DOM“ verschachtelt.
  1. 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).

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

  3. Speichere die Datei „sights.html“.

Eine Media Query für das Layout der Seite auf Tablets und Desktops hinzufügen.

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.
Das Bedienfeld „CC Libraries“ wird an der ursprünglichen Position angedockt.
Abbildung 13: Du kannst das Bedienfeld „CC Libraries“ wieder an seiner ursprünglichen Position andocken.
  1. 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.

  2. Klicke oben im Lineal des Dokumentfensters auf das Plussymbol , um das Popup-Bedienfeld zur Einrichtung einer Media Query zu öffnen (siehe Abbildung 14).
Ein Popup-Bedienfeld ermöglicht die schnelle Erstellung einer Media Query.
Abbildung 14: Mit diesem Bedienfeld erstellst du schnell eine Media Query.
  1. 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.
fig15
Abbildung 15: Die neue Media Query wirkt sich nur auf Bildschirme mit einer Breite von mindestens 700 Pixel aus.
  1. 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.

  2. 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).
In einer Media Query wurden noch keine Selektoren angelegt.
Abbildung 16: Es wurden noch keine Selektoren in der Media Query angelegt.
  1. Klicke im Bereich „@Medien“ auf GLOBAL. Alle Selektoren, die du in den Lektionen 4 bis 6 angelegt hast, sind hier aufgelistet. Diese Stile werden von allen Browsern unabhängig von der Bildschirmbreite angewendet. Du verwendest die Media Query nur, um diejenigen Werte zu verändern, die bei einer Bildschirmbreite von mindestens 700 Pixel überschrieben werden sollen.

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

Der wahre Nutzen der Leiste für visuelle Media Queries wird deutlich, wenn du mit mehreren Media Queries arbeitest. 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 du auf einen Balken klickst, wird die Breite des Dokumentfensters entsprechend angepasst, sodass du die Auswirkungen der unterschiedlichen CSS-Anweisungen sehen kannst. Weitere Informationen findest du in der Dreamweaver-Hilfe unter Leisten für visuelle Medienabfragen.

Das Navigationsmenü für das zweispaltige Layout formatieren.

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:
max-width: 1000px position: static background-color: transparent

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.

  1. 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!

  2. Korrigiere die Links mithilfe eines Selektors für #navlinks a. Lege für ihn folgende Properties fest:
width: 20% margin-bottom: 20px padding-top: 15px padding-bottom: 15px float: left (it’s the first icon for this property) color: #1E1E1E

Dein Navigationsmenü sollte nun wie in Abbildung 17 aussehen.

Ein neu formatiertes Navigationsmenü für das zweispaltige Layout
Abbildung 17: Das Navigationsmenü wurde für das zweispaltige Layout neu formatiert.

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.

Text mithilfe absoluter Positionierung vor einem Bild platzieren.

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:
width: 36% padding-top: 20px padding-left: 25px padding-right: 25px position: absolute

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.

  1. 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.
Die Abstände für die Property „position“ eines Elements lassen sich durch Ziehen mit der Maus visuell festlegen.
Abbildung 18: Die Abstände für die Position des Elements lassen sich durch Ziehen mit der Maus visuell festlegen.
  1. 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.
Text wird über einem Bild der Golden Gate Bridge visuell positioniert.
Abbildung 19: Der Text ist vor dem Bild absolut positioniert.
  1. 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.
Das Textfeld nimmt die gesamte Breite des Dokumentfensters ein und muss neu positioniert werden.
Abbildung 20: Der Text ist nicht mehr korrekt positioniert.

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.

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

  2. 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.
Für „#hero“ wurde ein neuer Selektor mit relativer Positionierung erstellt. Die Property „top“ wurde zurückgesetzt.
Abbildung 21: Der Absatz weist nun die korrekten Abstände zum Hero-DIV-Element auf.

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

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

Spalten nebeneinander fließen lassen.

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:
margin-top: 30px margin-bottom: 30px float: left font-size: 0.875em

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

Wenn die Property „float“ festgelegt wird, werden der Hintergrund schwarz und der Footer nach oben verschoben.
Abbildung 22: Der Footer bewegt sich ebenfalls zusammen mit dem MAIN-Element mit der Property „float“.

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.

Text um Bilder fließen lassen.

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“.
Einstellungen für eine zweite Media Query
Abbildung 23: Lege eine zweite Media Query an.
  1. Klicke auf der Leiste für visuelle Media Queries rechts neben den Wert „900px“, um die Breite der Ansicht „Live“ auf 900 Pixel einzustellen.

  2. 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).
Über ein Dropdown-Menü wird festgelegt, zu welcher Media Query eine Klasse hinzugefügt werden soll.
Abbildung 24: Du kannst festlegen, zu welcher Media Query die Klasse hinzugefügt werden soll.
  1. 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:
float: right margin-right: 0px margin-left: 10px

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

Text fließt um ein Bild und seine Beschriftung.
Abbildung 25: Der Text fließt ganz natürlich um das Bild und seine Beschriftung.

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

  1. Wiederhole die Schritte 4 und 5 mit dem Bild von Alcatraz. Erstelle dieses Mal aber eine Klasse namens „.floatleft“ mit folgenden Properties:
float: left margin-right: 10px margin-left: 0px
  1. Speichere deine Arbeit über den Menüpfad Datei > Alle zugehörigen Dateien speichern.

Das Meta-Tag für die Anzeige festlegen.

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.

Für responsive Seiten muss das Meta-Tag „viewport“ hinzugefügt werden.
Abbildung 26: Für responsive Seiten musst du das Meta-Tag „viewport“ hinzufügen.

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.

Nächste Schritte.

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.

10/19/2021

Beitrag von: David Powers, Tom Alex Buch

War diese Seite hilfreich?