Hallo!
Thema dieses Tutorials sind Media Queries.
Media Queries sind CSS-Abschnitte zur Steuerung von Layout und Design einer Website für unterschiedliche Bildschirmgrößen wie Smartphone, Tablet und Desktop sowie diverse andere Ausgaben, beispielsweise die Druckversion Ihrer Site.
Dreamweaver CC bietet Funktionen, die das Hinzufügen und Aktualisieren von Media Queries ganz leicht machen.
Die zeige ich Ihnen.
Ich bin im Arbeitsbereich „Standard“ in der Live-Ansicht.
Hier ist die Option, die ich Ihnen zeigen möchte: die Leiste für Media Queries.
Sie bietet eine visuelle Darstellung der Media Queries in meinem CSS-Code.
Mit einem Klick ändert sich die Größe meiner Site auf Basis dieser Media Queries für verschiedene Ansichten meiner Site.
Wenn Sie die Leiste nicht sehen können, klicken Sie auf die kleine Option hier links.
Um die Ausführung von Media Queries zu stoppen, klicken Sie doppelt auf den grauen Bereich hier rechts.
Momentan zeige ich die Vorschau in Dreamweaver CC in der Live-Ansicht an.
Wenn Sie lieber im Browser arbeiten, rufen Sie die Browser-Vorschau in Echtzeit auf.
Dazu klicken Sie hier unten auf dieses Symbol.
Damit können Sie eine Live-Vorschau der responsiven Media Queries in einem Browser oder auf anderen Geräten anzeigen.
So können Sie in Echtzeit damit interagieren.
Ein weiteres Tutorial behandelt das Einrichten der Browser-Vorschau in Echtzeit.
Schauen Sie sich auch das an.
Ich zeige Ihnen jetzt den Code, der zum Erstellen einer Media Query verwendet wird.
Dazu wechsle ich zur Ansicht „Teilen“ (Split) und zur Datei „styles.css“.
Ich scrolle zum Ende der bestehenden Site.
So sieht eine Media Query aus.
Sie beginnt immer mit „@media“.
Sie sehen meine drei Ansichten für unterschiedliche Bildschirmgrößen.
Eine Media Query funktioniert so: Beim Öffnen Ihrer Site wird die Breite des Browsers geprüft.
Auf einem Tablet zum Beispiel wird der gesamte CSS-Code in dieser Media Query ausgelöst.
Wenn ich auf diesen kleinen Pfeil klicke, sehen Sie den Code, der auf dem Tablet ausgeführt wird.
Dasselbe gilt für diese Media Query für Desktops oder sehr große Bildschirme.
Ich öffne jetzt das Bedienfeld „CSS Designer“.
Das finden Sie im Menü „Fenster“ (Window).
Im Bereich „Quellen“ (Sources) werden alle verknüpften und internen Stylesheets angezeigt, die mit dieser Web-Seite verbunden sind.
In diesem Beispiel gibt es nur „style.css“.
Ich klicke darauf.
Unter „@Medien“ (@Media) klicke ich die verschiedenen Media Queries an.
Die Selektoren hier unten ändern sich, je nachdem, welche Query ausgewählt ist.
Im Bereich „Selektoren" (Selectors) stehen alle definierten Selektoren für die ausgewählte Media Query.
Das sind alle in dieser Website definierten Media Queries, inklusive der globalen Stile für diese Seite.
Sie bestimmen das Grund-Design der gesamten Site.
Diese drei Media Queries überschreiben die globalen Werte bei der Anzeige der verschiedenen Ansichten.
In diesem Beispiel gelten die globalen Anweisungen für die Ansicht auf Mobilgeräten, weil das Ausgangs-Design für Mobilgeräte erstellt wurde.
Das heißt, das erste Layout und die ersten Formatierungen für diese Website wurden für ein Mobiltelefon bzw. einen Browser mit einer Breite von weniger als 768 Pixeln festgelegt.
Wenn die Website diese Breite überschreitet, kommen die Selektoren ins Spiel, die die Anzeige für Tablets und größere Desktops optimieren.
Ich möchte eine Media Query anpassen.
Zuerst muss ich sicherstellen, dass „styles.css“ ausgewählt ist.
Dann werde ich diesen Titel hier anpassen, der den Selektor „.hero-title“ verwendet.
Ich ändere nur die Größe von 992 Pixel für den Desktop.
Die Größe soll nur für diese Media Query erhöht werden.
Dazu klicke ich auf die Media Query.
Hier unten sehen Sie den Selektor „.hero-title“.
Fällt Ihnen etwas auf?
Im Code in „styles.css“ ist der Cursor zur entsprechenden Zeile gesprungen.
Ich könnte die Änderung in der Code-Ansicht vornehmen.
Im Bedienfeld „CSS Designer“ sehen Sie, dass das Programm gleich zu den Eigenschaften navigiert ist, die im Selektor aufgelistet sind.
In diesem Fall möchte ich die Schriftgröße ändern.
Dazu klicke ich, halte und ziehe.
Jetzt ist sie viel zu groß geworden.
Aber das ist gut für das, was ich Ihnen zeigen möchte.
Ich blende kurz das Bedienfeld aus, damit Sie die verschiedenen Media Queries sehen können.
Bei der richtig großen Ansicht sieht alles gut und stimmig aus.
Auf dem Tablet sieht es ebenfalls gut aus.
Und bei schmaleren Ansichten, z.
B. auf einem Smartphone, sieht es auch gut aus.
Nur bei der gerade bearbeiteten Media Query für 992 Pixel ist die Schrift wirklich riesig.
Es gibt eine Alternative zum Bedienfeld „CSS Designer“.
Ich klicke einfach auf das Element, das geändert werden soll.
Hier greift der Selektor „.hero-title“, den ich gerade bearbeite.
Ich klicke mit der rechten Maustaste darauf und wähle „Gehe zu Code“ (Go to Code).
Die globale Anweisung für den Titel wird zuerst aufgeführt.
Der nächste Eintrag ist aus meiner Media Query für 768 Pixel.
Den nächsten Eintrag für 992 Pixel habe ich gerade geändert.
Und hier der für große Displays.
Ich muss mir also nur überlegen, welcher geändert werden soll.
Ich wähle diesen Eintrag aus, und die Anzeige springt zur zugehörigen Zeile im Code hier unten.
Hier kann ich den Wert nun manuell korrigieren.
Ich setze ihn auf 8,4 zurück.
In diesem Beispiel gibt es eine Seite, für die keine Media Queries definiert sind.
Ich zeige Ihnen, wie Sie sie über das Bedienfeld „CSS Designer“ hinzufügen können.
Zuerst muss ich sicherstellen, dass das richtige CSS-Stylesheet ausgewählt ist, in diesem Fall „styles.css“.
Unter „@Medien“ (@Media) klicke ich auf das Pluszeichen.
Alle Bedingungen in dieser Dropdown-Liste zeigen weitere Einstellungen an.
Mit „media“ können Sie die Ausgabe des Designs festlegen, z.
B. für einen Bildschirm (screen) oder den Druck (print).
Das wird mit diesem Code festgelegt.
Die Query „orientation“ prüft, ob die Anzeige auf dem Gerät im Hoch- oder Querformat erfolgt.
Eine weitere bestimmt die Auflösung (resolution) auf hochauflösenden Displays, z.
B. 144 dpi.
Der Code wird hier unten für Sie generiert.
Ich möchte jetzt eine Media Query für mein responsives Design hinzufügen.
Dazu wähle ich „min-width“ aus.
Ich setze den Wert auf 768 Pixel.
Als Einheiten werden hier Pixel verwendet.
Es stehen aber viele weitere Maßeinheiten zur Auswahl.
Mit dem Pluszeichen kann ich weitere Bedingungen hinzufügen.
Ich gebe jetzt eine maximale Breite (max-width) von 991 Pixeln an.
Hier unten sehen Sie die AND-Anweisung.
Sie legt fest, dass beide Angaben erfüllt sein müssen, damit die Media Query ausgeführt wird.
Das möchte ich aber nicht.
Ich lösche die zweite Angabe, indem ich auf das Minuszeichen klicke.
Ich klicke auf „OK“.
Sie sehen die Media Query hier im Bedienfeld „CSS Designer“.
Außerdem wird sie in der Media-Query-Leiste angezeigt.
Da ich die Mindestbreite verwendet habe, zeigen diese hilfreichen kleinen Pfeile an, dass die Media Query ab diesem Mindestwert ausgelöst wird, bis die nächste Media Query erreicht wird.
Die lila Farbe kennzeichnet die Mindestbreite.
Ich zeige das mal in einem anderen Projekt, das ich gerade bearbeite.
Wenn ich die Höchstbreite (max-width) verwende, wird die Query grün markiert.
Wenn sowohl die Mindest- als auch die Höchstbreite verwendet werden, sind die Balken blau.
Kehren wir zu unserem Projekt zurück.
Die Media Query wird ein drittes Mal verwendet.
In der Datei „style.css“ steht die Media Query unten am Ende des Codes.
Ich füge jetzt Code zur Media Query hinzu.
Dazu füge ich einige Leerzeilen hinzu, zwischen den geschweiften Klammern.
Über die Zwischenablage kopiere ich Code, den ich schon erstellt habe.
Dieser Klassen-Selektor legt die Schrift für „Exhibition“ fest und steuert Schriftart und Abstände.
Und was passiert hier?
Sehen Sie hier oben!
Das ist meine Media Query.
Die habe ich eben im Bedienfeld „CSS Designer“ erstellt.
Was passiert, wenn ich jetzt diese Seitenleiste ziehe?
Das erste Design war für ein Smartphone.
So hatte ich alles designt.
Mit diesem Layout.
Aber meine Media Query überschreibt jetzt den Stil für „.hero-leadin“.
Schauen Sie sich das an.
Die Schrift wird für die Anzeige auf dem Tablet vergrößert.
So funktionieren also Media Queries.
Wir haben diese Media Query mit dem Bedienfeld „CSS Designer“ erstellt.
Das schließe ich bzw. blende ich jetzt aus, damit Sie mehr sehen können.
Die nächste Media Query erstelle ich in der Leiste.
Wie Sie Queries erstellen, bleibt Ihnen überlassen.
Diese Variante ist eher visuell.
Es spielt aber keine Rolle, wo Sie Queries definieren.
Sie sehen das kleine Pluszeichen hier.
Darauf klicke ich jetzt.
Momentan ist „max-width“ angegeben sowie der Wert, an dem sich die Seitenleiste befindet.
Ich möchte jedoch „min-width“ verwenden, wie im vorherigen Beispiel, und gebe 992 Pixel an.
Unter „Neue CSS-Datei erstellen“ (Create A New CSS File) wähle ich die vorhandene Datei „styles.css“ und klicke auf „OK“.
Sie können diese Vorgehensweise oder das Bedienfeld „CSS Designer“ verwenden.
Das Ergebnis ist dasselbe.
Am Ende meines Codes sehen Sie die Anweisung für „min-width“.
Jetzt füge ich den bereits erstellten Selektor hinzu.
Das kann man auch mit dem Bedienfeld „CSS Designer“ machen.
Aber ich füge ihn jetzt über die Zwischenablage ein.
Er betrifft dieselbe Klasse – „.hero-leadin“ –, wird jedoch erst ab einer Mindestbreite von 992 Pixel ausgelöst.
Hier sehen Sie die Version für mobile Geräte.
Mit der nächsten Media Query ändert sich das Layout.
Ab 992 Pixel ändert es sich erneut.
Per Klick wechsle ich zwischen den verschiedenen Media Queries.
Damit haben wir das Ende des Videos erreicht.
Wenn Sie den hier verwendeten Code herunterladen möchten, nutzen Sie den Link auf dieser Seite.
Ich habe Ihnen hier oben die Live-Ansicht gezeigt, hier unten den Code und das Bedienfeld „CSS Designer“.
Mit diesen Komponenten können Sie rasch und einfach Media Queries für Ihre responsiven Websites erstellen.
Das war es auch schon.
Es gibt viele weitere Tutorials zu Dreamweaver CC.
Sehen Sie sich alle an.
