Adobe Dreamweaver CC

Mit dem CSS Designer in Adobe Dreamweaver Web-Seiten gestalten

(Artikel: 30 Min.)

Mit dem CSS Designer in Adobe Dreamweaver Web-Seiten gestalten

30 Min.

Entdecken Sie die Vorteile des CSS Designer: Elementprüfung, Edge Web Fonts, Verläufe, Kopieren von Formaten über die Zwischenablage sowie Gestaltung von Navigationselementen und Rahmen.

Was brauche ich?

Dateien herunterladen Beispieldateien zum Üben (ZIP, 27 KB)

PDF herunterladen Schnellreferenz zu Dreamweaver

Der CSS Designer ist ein visuelles Werkzeug für die intuitive Bearbeitung von CSS-Code (siehe Abbildung 1). In diesem Artikel wird Schritt für Schritt beschrieben, wie Sie Web-Seitenelemente mit dem CSS Designer formatieren. Sie erfahren außerdem, wie Sie ein Responsive-Design-Template mit den Funktionen des CSS Designer visuell bearbeiten.  


Abbildung 1: Das Bedienfeld „CSS Designer“ besteht aus vier Bereichen.

Das CSS Designer-Bedienfeld enthält folgende Bereiche:

  • Quellen: CSS-Dateien, die dem Projekt zugeordnet sind
  • @Medien: Media Queries zur Steuerung der Anzeige je nach Bildschirmgröße
  • Selektoren: Selektoren, die der im Bedienfeld „@Medien“ ausgewählten Media Query zugeordnet sind
  • Eigenschaften: Dem ausgewählten Selektor zugeordnete Properties; optional können Sie nur die verwendeten Eigenschaften anzeigen

Erste Schritte mit dem CSS Designer

Bei Ihrer Arbeit kommt es sicherlich vor, dass Sie eine Website bearbeiten müssen, die schon in der Entwicklung ist, oder dass Sie Änderungen an einer bereits veröffentlichten Website vornehmen sollen. Bei dieser ersten Übung richten wir ein Beispielprojekt ein. Anhand dieses Projekts lernen Sie, wie Sie mit dem CSS Designer die Formatierung einer vorhandenen Website aktualisieren.

Gehen Sie folgendermaßen vor, um das Responsive-Design-Template in Dreamweaver CC zu laden:

  1. Starten Sie Dreamweaver CC. Wählen Sie „Datei“ > „Öffnen“, um das Template zu öffnen. Wählen Sie die Datei „index.html“ im Stammverzeichnis des Projekts aus, und klicken Sie auf „Öffnen“.

  2. Aktivieren Sie die Live-Ansicht, um die Seite wie in einem Browser anzuzeigen.

  3. Passen Sie den Arbeitsbereich an. Wählen Sie dazu den Arbeitsbereich „Kompakt“ aus, und blenden Sie das Bedienfeld „Einfügen“ per Doppelklick aus.

  4. Klicken Sie auf das Bedienfeld „CSS Designer“, und ziehen Sie, bis alle Bereiche sich in einer Spalte auf der rechte Seite des Arbeitsbereichs befinden.

  5. Klicken Sie im CSS Designer-Bedienfeld auf „Quellen“ und dann auf „@Medien“, um die Bereiche auszublenden. So haben Sie optimal Platz für die Bearbeitung von Selektoren und Properties (siehe Abbildung 2).

     

    Abbildung 2: Konfigurieren Sie das CSS Designer-Bedienfeld, um den Platz im Arbeitsbereich zu optimieren.

Elementen überprüfen und Stile hinzufügen

Nehmen Sie weitere Formatierungen am geladenen Responsive Template für einen Blog vor. Zuerst bearbeiten wir das Logo (siehe Abbildung 3).  

Abbildung 3: Das ursprüngliche Logo überschreibt den Slogan.

Im aktuellen Design wird der Slogan teilweise vom Logo verdeckt. In diesem Teil des Tutorials werden Sie mit dem CSS Designer die Formatierung des Logos verbessern.

  1. Blenden Sie die Fluid Grid Layout-Hilfslinien aus, sofern sie angezeigt werden.

  2. Klicken Sie in der Dokument-Symbolleiste auf „Überprüfen“. Bewegen Sie den Cursor über das Logo, bis der gewünschte Bereich hervorgehoben wird (siehe Abbildung 4).
Abbildung 4: Überprüfen Sie Ihre CSS-Elemente.
  1. Klicken Sie zweimal auf das Logo. Mit dem ersten Klick wird es ausgewählt und bleibt ausgewählt, wenn der Prüfmodus beendet wird. Mit dem zweiten Klick wird eine Elementanzeige gestartet, die das HTML-Element und die angewendeten Stilnamen zeigt. In diesem Beispiel wird für das H1-Element die Logo-ID angewendet.

  2. Klicken Sie im CSS Designer-Bedienfeld unter „Selektoren“ auf „Berechnet“, um eine Liste der berechneten Properties anzuzeigen. Für „font-family“ ist „Arial“ angegeben. Um weitere Informationen anzuzeigen, klicken Sie auf den Property-Namen (font-family). Im Bereich „Selektoren“ darüber wird der Selektor „#logo“ daraufhin in Fettschrift angezeigt (siehe Abbildung 5). Das weist darauf hin, dass die Property „font-family“ zum Selektor „#logo“ gehört.
Abbildung 5: Überprüfen Sie die Property „font-family“.
Abbildung 5: Überprüfen Sie die Property „font-family“.

In den ausgeblendeten Bereichen „@Medien“ und „Quellen“ (siehe Abbildung 6) können Sie sehen, welche Media Query ggf. den Selektor enthält, dessen Stil Sie ändern, und in welcher CSS-Datei der Selektor definiert ist. Da die Titel in den Bereichen aktualisiert werden, müssen Sie die Bereiche nicht erweitern, um sie erkennen zu können.  

Abbildung 6: Überprüfen Sie die CSS-Dateiquelle und Media Queries.
Abbildung 6: Überprüfen Sie die CSS-Dateiquelle und Media Queries.

Edge Web Fonts verwenden  

Edge Web Fonts ist ein kostenloser Schriftendienst der Adobe Creative Cloud. Der Dienst bietet Zugriff auf Hunderte von Web-Schriften, die Sie für die Formatierung von Website-Text verwenden können. Edge Web Fonts ist auch mit anderen Adobe-Applikationen integriert. Im nächsten Schritt werden Sie Ihre Seite in Dreamweaver mit Edge Web Fonts aktualisieren und das Design weiter verfeinern.

Statt Arial können Sie eine andere Schrift wählen. Klicken Sie im Bereich „Eigenschaften“ bei „font-family“ auf „Arial“. Wählen Sie „Schriften verwalten“, um das Menü für Edge Web Fonts zu öffnen, und blättern Sie die Schriftenliste durch. Wählen Sie „Bebas Neue“, und klicken Sie auf „Fertig“. Klicken Sie auf „Arial“, um die Schriftenliste erneut anzuzeigen, und wählen Sie „Bebas Neue“. Bei aktivierter Live-Ansicht wird das Logo vor Ihren Augen aktualisiert.

Stile und Verläufe per CSS hinzufügen  

Jetzt wollen wir das komplette Logo und den Slogan vom Seitenrand absetzen. Klicken Sie erneut auf „Überprüfen“, und isolieren Sie den gesamten Bereich, indem Sie den Cursor unterhalb und knapp außerhalb des Logos bewegen.

Doppelklicken Sie auf den Bereich, um den Prüfmodus zu beenden und die Live-Elementanzeige aufzurufen. Sie können auch den Tag-Selektor am unteren Rand des Dokumentfensters verwenden, um den DIV-Container auszuwählen, der das Logo enthält. Beachten Sie, dass für das DIV-Tag die Klassen „fluid“ und „logo“ verwendet werden.

Im CSS Designer wird die Klasse „.logo“ dreimal aufgeführt. Wenn Sie die Klassen einzeln auswählen, sehen Sie, dass zwei Klassen in Media Queries enthalten sind und die andere global definiert ist.

Wählen Sie die globale Option, und stellen Sie sicher, dass „Nur verwendete“ im Bereich „Eigenschaften“ deaktiviert ist. Sie sehen eine komplette Liste der grafischen Steuerungen, u. a. für Auffüllungen (padding), für die vier Grauwerte definiert sind. Bewegen Sie den Cursor über den Auffüllungswert auf der linken Seite. Erhöhen Sie diesen Wert per Klicken und Ziehen auf 20 Px (siehe Abbildung 7).

Abbildung 7: Bearbeiten Sie globale Properties mit CSS Designer.
Abbildung 7: Bearbeiten Sie globale Properties mit CSS Designer.

Das Logo-Element wird um 20 Pixel vom linken Seitenrand verschoben.  

Stile über die Zwischenablage einfügen  

Mit dem CSS Designer können Sie CSS-Properties ganz einfach aus lokalen und online verwalteten Stylesheets kopieren, ohne die Dreamweaver-Umgebung zu verlassen. Das zeitaufwendige Hin- und Herschalten zwischen Website-Dateien entfällt damit. Sie können alle Stile oder nur eine bestimmte Stilkategorie von einem Selektor kopieren und für einen anderen einfügen.

  1. Klicken Sie mit der rechten Maustaste auf den Selektor „.logo“, und wählen Sie „Stile kopieren“ > „Layoutstile kopieren“ (siehe Abbildung 8).

Sie können entweder alle Stile oder nur einen bestimmten Stiltyp kopieren. Das Menü enthält folgende Optionen:

  • Layoutstile kopieren
  • Textstile kopieren
  • Rahmenstile kopieren
  • Hintergrundstile kopieren
  • Animations-/Übergangsstile kopieren
  • Andere Stile kopieren
Abbildung 8: Kopieren Sie Stile von einem Selektor.
Abbildung 8: Kopieren Sie Stile von einem Selektor.
  1. Wählen Sie den Text „Blog Title Goes Here“, um das H2-Tag zu bearbeiten. Bewegen Sie den Cursor im Bedienfeld „CSS Designer“ über die Stile für „.blog_detry h2“, um den globalen Stil zu ermitteln. Klicken Sie dann mit der rechten Maustaste auf den Stil, und wählen Sie „Stile einfügen“ (siehe Abbildung 9).
Abbildung 9: Fügen Sie Stile über die Zwischenablage bei einem anderen Selektor ein.
Abbildung 9: Fügen Sie Stile über die Zwischenablage bei einem anderen Selektor ein.

Die rote Blog-Überschrift wird in der Live-Ansicht sofort um 20 Pixel verschoben. Ihre Änderungen werden in Echtzeit im Seitenentwurf umgesetzt.

Änderungen mit CSS Designer rückgängig machen  

Nachdem Sie den Wert für die Auffüllung links neben der roten Blog-Überschrift um 20 Pixel erhöht haben, ist die Überschrift zu breit für ihren Container. Wählen Sie „Bearbeiten“ > „Rückgängig“, um die Zuordnung der eingefügten Stile wieder aufzuheben. Beachten Sie, dass die Live-Ansicht erneut aktualisiert wird und das ursprüngliche Layout anzeigt.

Navigationselemente formatieren  

Sehen Sie sich die Navigationsleiste unterhalb des Logos an. Die Leerräume zwischen den Navigationselementen müssen korrigiert werden. Wählen Sie ein Navigationselement aus.

  1. Klicken Sie in der Live-Ansicht auf den „Home“-Button und dann im Bereich „Selektoren“ auf „Berechnet“, um die berechneten Properties im Bereich „Eigenschaften“ anzuzeigen. Es werden margin-Properties angezeigt (siehe Abbildung 10).

     

    Abbildung 10: Zeigen Sie die berechneten Properties für das „Home“-Element an.
  2. Klicken Sie auf „margin“, und beachten Sie, dass „.nav_items a“ in Fettschrift angezeigt wird. Das bedeutet, dass der Rand von diesem Selektor festgelegt wird (siehe Abbildung 11).

     

    Abbildung 11: Definieren Sie Randeigenschaften.
    Abbildung 11: Definieren Sie Randeigenschaften.
  3. Klicken Sie auf den fett angezeigten Selektor „.nav_items a“. Der Bereich „Eigenschaften“ zeigt jetzt sowohl die Eigenschaften für diesen Selektor als auch nicht eingerichtete Eigenschaften an – sofern Sie die Option „Nur verwendete“ im letzten Schritt deaktiviert haben (siehe Abbildung 12).

     

    Abbildung 12: Der Bereich „Eigenschaften“ zeigt alle Properties für einen bestimmten Selektor an.
  4. Klicken Sie auf das Symbol in der Mitte des padding-Rechtecks. Das Erscheinungsbild des Symbols ändert sich. Wenn Sie einen Auffüllungswert auf 20 Px erhöhen, ändern sich auch alle anderen Werte (siehe Abbildung 13).

     

    Abbildung 13: Sie können alle Auffüllungswerte für einen bestimmten Selektor gleichzeitig ändern.
    Abbildung 13: Sie können alle Auffüllungswerte für einen bestimmten Selektor gleichzeitig ändern.

Stile zu Formularelementen hinzufügen

Jetzt formatieren wir das Eingabefeld für die Suche. Aktivieren Sie zuerst die Option „Nur verwendete“ im Bereich „Eigenschaften“. Diese nützliche Funktion zeigt eine konsolidierte Liste der Properties an, während Sie die Selektoren durchblättern. Klicken Sie auf „Überprüfen“, und bewegen Sie den Cursor über das Suchfeld. Sie sehen zwei Selektoren mit dem Wort „input“. Wählen Sie den ersten Selektor (nav.containr form input), und beachten Sie, dass nur die Breite festgelegt ist. Wählen Sie jetzt den Selektor darunter mit dem Namen „input“ aus. Dieser enthält mehrere Stilangaben, daher ist er besser für weitere Formatierungen geeignet.

Rahmen-Properties festlegen

Der input-Selektor für das Suchfeld ist noch ausgewählt. Klicken Sie auf das Rahmensymbol, um zum Abschnitt „Rahmen“ unter „Eigenschaften“ zu wechseln.

  1. Der Abschnitt „Rahmen“ im CSS Designer-Bedienfeld enthält Registerkarten zur einfachen und intuitiven Festlegung der Rahmen-Properties. Wenn keine Werte für die Properties definiert wurden, ist standardmäßig die Registerkarte „Alle Seiten“ ausgewählt (siehe Abbildung 14).
Abbildung 14: Fügen Sie im Abschnitt „Rahmen“ des CSS Designer-Bedienfelds Properties hinzu.
Abbildung 14: Fügen Sie im Abschnitt „Rahmen“ des CSS Designer-Bedienfelds Properties hinzu.
  1. Legen Sie die Werte in der Registerkarte „Alle Seiten“ fest, um rasch die gleichen Rahmeneinstellungen auf alle vier Kanten anzuwenden.

  2. Wenn Sie Properties zur Definition von Rahmen hinzufügen, werden bei den übrigen Registerkarten („Oben“, „Rechts“, „Unten“ und „Links“) dunklere Rahmen angezeigt, die auf angegebene Werte hinweisen. Registerkarten von nicht festgelegten Rahmen erkennen Sie an der helleren Symbolfarbe.

  3. Klicken Sie auf eine der vier Seitenregisterkarten, wenn Sie nur für eine Seite einen Rahmen definieren möchten.

  4. In den Textfeldern zur Schnellbearbeitung können Sie die Rahmenwerte für jede Registerkarte manuell eingeben. Beispiel: Sie wählen eine Registerkarte aus und geben „4px solid #DA6E6E“ ein, um einen 4 Pixel breiten roten Rahmen hinzuzufügen, anstatt jede Property einzeln im Bedienfeld auszuwählen (siehe Abbildung 15).
Abbildung 15: Geben Sie Properties manuell im Abschnitt „Rahmen“ ein.
Abbildung 15: Geben Sie Properties manuell im Abschnitt „Rahmen“ ein.
  1. Mit Strg+Z (bzw. Befehlstaste+Z) oder über „Bearbeiten“ > „Rückgängig“ heben Sie diese Änderungen wieder auf.

Benutzerdefinierte Properties festlegen

Nun erstellen wir eine neue benutzerdefinierte Property im Abschnitt „Benutzerdefiniert“ des Bereichs „Eigenschaften“. In den früheren Versionen von Dreamweaver hieß dieser Abschnitt „Andere“.

  1. Der input-Selektor für das Suchfeld ist noch ausgewählt. Klicken Sie im Bereich „Eigenschaften“ auf „Benutzerdefiniert“ (Symbol mit drei Punkten), um den Abschnitt „Benutzerdefiniert“ anzuzeigen.

  2. Geben Sie im Feld „Eigenschaft hinzufügen“ die ersten Buchstaben des Wortes „cursor“ ein. Es wird eine Liste der verfügbaren Properties angezeigt, sodass Sie den Namen automatisch vervollständigen können. Geben Sie „text“ im Feld „Wert hinzufügen“ ein, und drücken Sie die Eingabetaste (siehe Abbildung 16).
Abbildung 16: Richten Sie eine benutzerdefinierte Property und den zugehörigen Wert ein.
Abbildung 16: Richten Sie eine benutzerdefinierte Property und den zugehörigen Wert ein.
  1. Testen Sie Ihre Änderungen in der Live-Ansicht. Bewegen Sie den Cursor über das Suchfeld. Der Cursor ändert sich von einem Zeiger in eine Texteinfügemarke.

Rahmenradius-Properties hinzufügen

Mit dem Werkzeug „Rahmenradius“ können Sie weitere Formatierungen für den input-Selektor des Suchfelds definieren. Wenn Sie bei einer Höhe von 40 Px einen Rahmenradius von 20 Px angeben, erzielen Sie einen ovalen Effekt. 

  1. Klicken Sie auf den Link in der Mitte, und setzen Sie einen der vier Werte auf 20 Px.

  2. Wiederholen Sie die Arbeitsschritte für die Schaltfläche „Suchen“.

  3. Klicken Sie auf „Überprüfen“, und bewegen Sie den Cursor über das Suchfeld.

  4. Im Bereich „Eigenschaften“ sehen Sie unter anderem Steuerungen für „position“ und „margin“. Wählen Sie diese Properties, um den am besten geeigneten Selektor im Bereich „Selektoren“ zu ermitteln.

  5. Wählen Sie die Steuerungen für „margin“ aus. Sie sehen, dass „nav.containr.btn“ in Fettschrift angezeigt wird. Wenn Sie diesen Selektor auswählen, wird der Bereich „Eigenschaften“ aktualisiert.

  6. Navigieren Sie zu den Properties für Rahmen.

  7. Klicken Sie auf den Link in der Mitte, und setzen Sie einen der Werte auf 20 Px.

Textschatten hinzufügen

Probieren Sie doch einmal einen Textschatten aus. Gehen Sie dieses Mal aber ein bisschen anders vor.

  1. Klicken Sie auf „Überprüfen“ und dann auf das Wort „Suchen“. Beachten Sie, wie die Selektoren und Properties aktualisiert werden.

  2. Wählen Sie „nav.containr a“ im Bereich „Selektoren“. Es werden einige Textsteuerungen angezeigt. Die aktuelle Farbe ist Weiß. Ändern Sie diese in Hellgrau.

  3. Deaktivieren Sie die Option „Nur verwendete“, um alle Steuerungen einzublenden.

  4. Klicken Sie auf das T-Symbol, um die Textsteuerungen aufzurufen.

  5. Setzen Sie für den Textschatten „v-shadow“ auf 1 Px und die Farbe auf Weiß.

  6. Das Ergebnis sieht allerdings nicht sehr toll aus. Machen Sie diese Änderung rückgängig, und setzen Sie die Textfarbe wieder auf Weiß.

Verlauf hinzufügen

Jetzt fügen wir einen Verlauf zum Such-Button hinzu.

  1. Klicken Sie erneut auf „Überprüfen“, und wählen Sie den Such-Button aus.

  2. Klicken Sie im Bereich „Eigenschaften“ auf „Hintergrund“ (Symbol mit Grau-Weiß-Verlauf), um zum Abschnitt „Hintergrund“ zu wechseln.

  3. Gehen Sie die Hintergrund-Properties durch. Sobald „nav.btn“ in Fettschrift angezeigt wird, klicken Sie auf diesen Selektor. Wenn „Nur verwendete“ deaktiviert ist, sehen Sie eine lange Liste der verfügbaren Property-Optionen.

  4. Aktuell ist die Hintergrundfarbe auf Hellblau gesetzt. Klicken Sie auf das leere Farbfeld (mit einer diagonalen roten Linie).

  5. Um einen subtilen Farbverlauf hinzuzufügen, legen Sie zuerst die obere Bezugsfarbe fest.

  6. Klicken Sie neben dem Eingabefeld auf „Hex“, und geben Sie den Wert der Hintergrundfarbe ein: #6ecada.

  7. Ziehen Sie im großen Farbfeld jetzt einfach den Kreis auf den gewünschten dunkleren Blauton. Wählen Sie anschließend „RGBa“ aus, und passen Sie mit dem letzten Schieberegler auf der rechten Seite die Deckkraft an.

  8. Wählen Sie die untere Bezugsfarbe, die standardmäßig auf Rot gesetzt ist. Geben Sie im Eingabefeld „#6ecada“ ein, um einen sanften Farbverlauf für die Suchen-Schaltfläche zu erzielen.

Neuen Selektor hinzufügen und Detailgrad steuern

Mit dem CSS Designer können Sie einen neuen Selektor hinzufügen und Stile definieren. Mithilfe der Live-Elementanzeige können Sie den neuen Selektor auf die HTML-Seite anwenden.

  1. Klicken Sie auf den Text „Blog Title Goes Here“, um den H2-Container auszuwählen. Klicken Sie auf das Pluszeichen (+), und geben Sie den Namen der Klasse ein (siehe Abbildung 17).
Abbildung 17: Fügen Sie der HTML-Seite eine neue Klasse hinzu.
Abbildung 17: Fügen Sie der HTML-Seite eine neue Klasse hinzu.
  1. Wählen Sie die gewünschten Quell- und Mediendateien für den neuen Stil aus, und klicken Sie dann auf das Pluszeichen (+) neben dem Bereich „Selektoren“ im CSS Designer, um den Selektor hinzuzufügen (siehe Abbildung 18).
Abbildung 18: Fügen Sie einen neuen Selektor hinzu.
Abbildung 18: Fügen Sie einen neuen Selektor hinzu.
  1. Um den Detailgrad des Selektors zu senken, drücken Sie die Nach-oben-Taste. Mit der Nach-unten-Taste erhöhen Sie den Detailgrad. Das Selektorfeld wird dabei entsprechend aktualisiert. Drücken Sie die Eingabetaste, um den aktuellen Wert im Feld zu übernehmen.

  2. Mit den Optionen im Bereich „Eigenschaften“ können Sie Properties und Werte für den neuen Selektor hinzufügen.

Nächste Schritte

Der CSS Designer ist ein unverzichtbares Werkzeug von Dreamweaver CC, das nur im Rahmen eines Abos der Adobe Creative Cloud erhältlich ist.

Sehen Sie sich die einzelnen Bereiche des Bedienfelds „CSS Designer“ genauer an. Sie werden einige andere Steuerungen entdecken, die bei Ihren Webdesign-Projekten von Vorteil sein könnten, z. B.:

  • Im Bereich „@Medien“ können Sie genauer definieren, wie die Responsive-Design-Properties Ihrer Website in verschiedenen Browsern umgesetzt werden.
  • Wählen Sie im Bereich „Quellen“ die Datei „fluid.css“ aus, und klicken Sie auf die Einträge im Bereich „@Medien“, um die Ausgabe der Website auf verschiedenen Endgeräten in der Vorschau anzuzeigen.
  • Mit dem CSS Designer lässt sich das Design für die unterschiedlichsten Endgeräte und Bildschirme optimieren.

Probieren Sie auch die neuen Tastaturkürzel zum Hinzufügen oder Löschen von CSS-Selektoren und -Properties aus. Übrigens können Sie innerhalb des Eigenschaften-Bereichs zwischen den Eigenschaftsgruppen navigieren.

In den folgenden Videos erfahren Sie mehr:

Ihre Meinung ist gefragt.

Das war schon alles! Damit ist dieses Training abgeschlossen. Teilen Sie uns Ihre Meinung zu diesem Tutorial mit.

alejandro-gutierrez_83x83

Alejandro Gutierrez
Alejandro Gutierrez ist Experte für Web- und Mobile-Design. Nach vielen Jahren als Musiker ist Gutierrez 2006 in die Software-Branche zurückgekehrt und war zunächst für die Firma GameHouse tätig. Später arbeitete er für SiriusXM und ein kleines Startup-Unternehmen, bevor er schließlich 2012 zu Adobe wechselte. Gutierrez beschäftigt sich hauptsächlich mit der Neuausrichtung und Neugestaltung von Web- und Mobile-Applikationen.