In diesem Video lernen Sie, wie CSS Designer funktioniert und wie einfach Sie damit CSS-Code in Dreamweaver verwalten können.
Anhand des Designs der Seite „Cowboy Concept“ werden Sie den Dreamweaver-Arbeitsbereich kennenlernen.
Das Design der Web-Seite ist einfach: ein bildschirmfüllendes Hintergrundbild, ein Header-Bereich mit Branding und Navigation, eine Überschrift und Text.
Wenn ich die Breite der Live-Ansicht verändere, passt sich das Layout für kleine, mittlere und große Bildschirme an.
Dieser Effekt wird mithilfe von Media Queries erzielt, die Sie noch kennenlernen werden.
Legen wir los.
Erstellen Sie eine neue Website, und verweisen Sie sie auf den Ordner „style-web-page-CSS“.
Öffnen Sie die Datei „index.html“, und sehen Sie sich den Code an.
Die Datei enthält die HTML-Struktur der Seite, ist aber noch nicht mit einer CSS-Datei verknüpft.
Sie werden mit CSS Designer Stile zur Seite hinzufügen.
Das Bedienfeld „CSS Designer“ ist standardmäßig rechts im Arbeitsbereich geöffnet.
Falls nicht, können Sie es über das Menü „Fenster“ (Window) aufrufen.
Oder Sie setzen den Arbeitsbereich zurück.
Ich löse das Bedienfeld „CSS Designer“, damit Sie es besser sehen können, und blende die restlichen Bedienfelder aus.
Sie können das Bedienfeld per Ziehen vergrößern, um mehr Platz bei der Bearbeitung von Properties zu haben.
Fügen Sie nun die bereitgestellte CSS-Datei hinzu.
Ich gehe sie dann im Detail durch.
Klicken Sie im Bedienfeld „CSS Designer“ im Bereich „Quellen“ (Sources) auf das Pluszeichen.
Es gibt drei Befehle, mit denen Sie CSS-Code zu einer Seite hinzufügen können: „Neue CSS-Datei erstellen“ (Create a New CSS File), „Vorhandene CSS-Datei anhängen“ (Attach Existing CSS File) oder „Auf der Seite definieren“ (Define in Page).
Wählen Sie „Vorhandene CSS-Datei anhängen“, und navigieren Sie zur Datei „main.css“ im CSS-Ordner.
Klicken Sie dann auf „OK“.
In der Code-Ansicht können Sie im HEAD-Tag sehen, dass die Datei mit der HTML-Seite verbunden wurde.
Die Live-Ansicht wurde mit dem Hintergrundbild und formatierten Text aktualisiert.
Sehen wir uns den CSS-Code genauer an, der dafür verantwortlich ist.
Um Code zu suchen, klicken Sie im Bedienfeld „CSS Designer“ auf „Alle“ (All) oder „Aktuell“ (Current) hier oben.
Wählen Sie „Alle“, um alle Stile anzuzeigen, die mit der HTML-Seite verbunden sind.
So erhalten Sie einen guten Überblick, wie der CSS-Code organisiert ist.
Wählen Sie ein Element aus, und klicken Sie auf „Aktuell“, um Stile der Kategorie „BERECHNET“ (COMPUTED) zu sehen.
Unter „BERECHNET“ werden Properties und Selektoren für die aktuelle Auswahl in Dreamweaver angezeigt.
Dazu gehören auch geerbte und direkt verbundene Stile, die dem ausgewählten Element zugeordnet sind.
Wechseln Sie zurück zur Registerkarte „Alle“, um alle Stile anzuzeigen.
Unter „@Medien“ (@Media) werden Media Queries definiert.
Mithilfe von Media Queries geben Sie Änderungen am Design auf Basis bestimmter Bedingungen vor, z.
B. der Bildschirmgröße.
In dieser verbundenen CSS-Datei sind zwei Media Queries definiert.
Weitere Stile lassen sich problemlos hinzufügen.
Fügen wir zunächst eine Klasse zur Formatierung des H1-Texts hinzu.
Wählen Sie in der Live-Ansicht das H1-Tag aus, klicken Sie auf das Pluszeichen, und fügen Sie die Klasse „.headline“ hinzu.
Drücken Sie die Eingabetaste.
Wählen Sie dann „main.css“ als Quelle aus, und drücken Sie erneut die Eingabetaste, um die Klasse zu erstellen.
Machen Sie in der Live-Ansicht einen Rechtsklick auf die Klasse, und wählen Sie „Gehe zu Code“ (Go to Code), um in der Code-Ansicht direkt zum CSS-Code zu springen.
Die Klasse wird unten angezeigt.
Ziehen Sie die Klasse über die Media Queries, um sie zum Standard-Code im Kopf der Seite hinzuzufügen.
Fügen Sie nun weitere Properties hinzu, um das Element zu formatieren.
Wählen Sie in der Live-Ansicht das H1-Element und dann im Bedienfeld „CSS Designer“ die Klasse „.headline“ aus.
Diese finden Sie im Abschnitt „GLOBAL“ am Ende der Liste der Selektoren.
Im Abschnitt „Eigenschaften“ (Properties) können Sie Properties nach Kategorie filtern.
Klicken Sie auf das Symbol für Text, um nach Text-Properties zu filtern.
Geben Sie als Schriftgröße 64 Pixel ein, wählen Sie „em“ als Maßeinheit für die Zeilenhöhe, und geben Sie den Wert 0,95 ein.
Klicken Sie auf das Symbol für die Layout-Eigenschaften, und richten Sie einen unteren Rand von 10 Pixel ein.
Aktivieren Sie das Kontrollkästchen „Nur verwendete“ (Show Set), um die Anzeige zu filtern und nur die soeben hinzugefügten Properties anzuzeigen.
Aktualisieren Sie nun die Klasse in den Media Queries.
Machen Sie einen Rechtklick auf die Klasse „.headline“, und wählen Sie „In die Medienabfrage duplizieren“ (Duplicate into media query).
Wählen Sie die Media Query für 768 Pixel aus – der Code wird kopiert.
Wählen Sie im Abschnitt „@Medien“ die Media Query für 768 Pixel und dann im Abschnitt „Selektoren“ den Selektor „.headline“ aus.
Da die Option „Nur verwendete“ (Show Set) noch aktiviert ist, werden nur die festgelegten Properties angezeigt.
Ändern Sie die Schriftgröße in 90, die Zeilenhöhe in 0,85 em und den unteren Rand in 30 Pixel.
Wiederholen Sie die Schritte, um die Schriftgröße auch in der Media Query für 1024 Pixel anzupassen.
Machen Sie einen Rechtsklick auf den Selektor „.headline“, und kopieren Sie ihn in die Media Query für 1024 Pixel.
Wählen Sie im Abschnitt „@Medien“ die Media Query und dann den Selektor „.headline“ aus.
Ändern Sie die Schriftgröße in 120, die Zeilenhöhe in 0,9 em und den unteren Rand in 20 Pixel.
Achten Sie auf den Code.
Sie haben die Klasse aktualisiert, um großen Text anzuzeigen, wenn die Seite auf größeren Bildschirmen angezeigt wird.
In beiden Media Queries wurden Kopien der Klasse „.headline“ angelegt.
[COWBOY CONCEPT] Durch die Integration von CSS Designer mit dem Arbeitsbereich von Dreamweaver wird die Arbeit mit CSS-Layouts sehr einfach.
Um einen Selektor zu erstellen, wählen Sie ein Element aus – in der Live-Ansicht oder im DOM-Bedienfeld.
Mit dem DOM-Bedienfeld werden wir jetzt einen neuen Selektor für das PARAGRAPH-Tag (P) anlegen.
Schalten Sie zurück zum Quell-Code (Source Code), um die DOM-Struktur anzuzeigen.
Wählen Sie im DOM-Bedienfeld das P-Tag aus.
Sie können hier die gesamte Code-Struktur der Seite durchsuchen – ganz bequem.
Blenden Sie das DOM-Bedienfeld aus.
Kehren Sie zu CSS Designer zurück.
Wählen Sie unter „Quellen“ (Sources) die Datei „main.css“ und unter „@Medien“ die Kategorie „GLOBAL“.
Klicken Sie im Abschnitt „Selektoren“ auf das Pluszeichen.
Dreamweaver legt den Selektor mit zwei Detailgraden an – „body“ und „p“ (für „paragraph“).
Sie können den Detailgrad mit den Nach-oben- und Nach-unten-Tasten ändern.
Regeln mit spezifischeren Selektoren haben eine höhere Priorität.
Deaktivieren Sie „Nur verwendete“ (Show Set), um alle verfügbaren Optionen für den neuen Selektor anzuzeigen.
Wechseln Sie zu den Text-Properties, legen Sie als Schriftgröße 15 Pixel und als Zeilenhöhe 1,75 em fest.
Kopieren Sie den Stil in die Media Query für 768 Pixel, wählen Sie die Media Query und dann den BODY-P-Selektor aus, um seine Properties anzuzeigen.
Ändern Sie die Schriftgröße in 18 Pixel und die Zeilenhöhe in 1,5 em.
[COWBOY CONCEPT] Kopieren Sie nun noch den BODY-P-Selektor in die Media Query für 1024 Pixel.
Wählen Sie die Media Query und dann den Selektor aus.
Ändern Sie die Schriftgröße in 24 Pixel.
Löschen Sie per Klick auf das Papierkorb-Symbol die Property für die Zeilenhöhe.
Wir möchten dieselben Einstellungen wie in der Media Query für 768 Pixel verwenden, daher muss die Property für die Zeilenhöhe nicht erneut festgelegt werden.
In der Live-Ansicht passt sich die Textformatierung an die jeweilige Bildschirmgröße an, wenn ich die Größe der Live-Ansicht verändere.
Über die Live-Ansicht können Sie bequem zum Code bestimmter Elemente navigieren.
Wählen Sie z.
B. das H1-Tag erneut aus, und machen Sie einen Rechtsklick auf die Klasse „.headline“.
Wählen Sie „Gehe zu Code“ (Go to Code).
Sie können zum ursprünglichen HEADLINE-Selektor navigieren oder zu den Varianten für die Media Queries.
Wählen Sie eine Media Query aus.
Code-Ansicht und CSS Designer ändern sich entsprechend.
Mit einem Rechtsklick auf eine Media Query in der Media-Query-Leiste können Sie ebenfalls zum betreffenden Code springen.
Machen Sie z.
B. einen Rechtsklick auf die Media Query für 768 Pixel.
Die angezeigten Zeilennummern dienen der leichteren Unterscheidung der Media Queries und Suche des betreffenden Codes.
Sie können auch im Prüfmodus (Inspect Mode) nach Stilen suchen, die mit Elementen verbunden sind.
Klicken Sie auf das Symbol für den Prüfmodus, fahren Sie mit dem Cursor über Elemente, um sie hervorzuheben und ihren Code im Bedienfeld „CSS Designer“ zu sehen.
Klicken Sie doppelt auf ein Element, um den Prüfmodus wieder zu verlassen.
[COWBOY CONCEPT] Es ist also wirklich einfach, ein Webdesign zu gestalten.
Sie können durch Ihren Code navigieren, indem Sie alle Selektoren anzeigen oder mittels kontextbezogener Bearbeitung nur die Stile ausgewählter Elemente anpassen.
[COWBOY CONCEPT] CSS Designer macht die Verwaltung von Code und das Verständnis einer Design-Struktur einfacher als je zuvor.
Probieren Sie das Feature aus.
[COWBOY CONCEPT]
