CSS Designer Dreamweaver: zo werk je met het paneel

Met de CSS Designer, Dreamweavers paneel voor visueel CSS-werk, maak en bewerk je stijlen zonder dat je elke regel CSS zelf hoeft te typen. Het paneel laat in één overzicht zien welke stijlbestanden aan je pagina gekoppeld zijn, welke media queries erin staan, welke selectors er zijn en welke eigenschappen die selectors hebben. Wat je aanpast, schrijft Dreamweaver direct als nette CSS-code weg.

Deze uitleg is bedoeld voor beginners die visueel willen werken én voor hobbyisten die sneller willen schakelen tussen code en ontwerp. Je leert de vier onderdelen van het paneel kennen, maakt een stijlregel met een media query en krijgt tips om veelgemaakte fouten te voorkomen.

CSS Designer openen

Open het paneel via Venster > CSS Designer of met de sneltoets Shift + F11 (Windows) of Cmd + F11 (macOS). In de Nederlandse interface heet het paneel ook wel CSS ontwerpen. Meer handige combinaties vind je in het overzicht met Dreamweaver-sneltoetsen.

Het paneel werkt het prettigst samen met de Live-weergave. Klik je in de Live-weergave op een element, dan laat CSS Designer zien welke regels erop van toepassing zijn. Zo zie je direct welke stijl waar vandaan komt, en past de weergave zich aan zodra je iets wijzigt.

De vier onderdelen van het paneel

CSS Designer bestaat uit vier vakken die van boven naar beneden van algemeen naar specifiek gaan:

Bronnen (Sources): de CSS-bestanden die aan je document gekoppeld zijn, plus eventuele stijlen in de <head> van de pagina.
@Media: de media queries binnen de gekozen bron. Hiermee stuur je stijlen voor bepaalde schermformaten.
Selectors (Kiezers): de CSS-selectors binnen de gekozen bron of media query, zoals .knop, #header of nav a.
Eigenschappen (Properties): de CSS-eigenschappen van de geselecteerde selector, zoals kleur, marge en lettergrootte.

De volgorde is belangrijk. Wat je in het onderste vak aanpast, komt terecht in de selector, media query en bron die je daarboven hebt geselecteerd. Controleer dus altijd eerst of je in het juiste bestand werkt.

Bronnen: CSS-bestanden maken of koppelen

Klik in het vak Bronnen op het plusteken. Je krijgt drie keuzes:

Nieuw CSS-bestand maken: Dreamweaver maakt een nieuw stijlbestand en koppelt het aan je pagina.
Bestaand CSS-bestand koppelen: je kiest een CSS-bestand dat al in je site staat.
Definiëren in pagina: de stijlen komen in een <style>-blok in de pagina zelf.

Kies voor een website met meerdere pagina’s altijd een extern bestand, bijvoorbeeld css/stijl.css. Je wijzigt dan één bestand en alle gekoppelde pagina’s passen zich aan. Bij het koppelen kies je tussen Link (een <link>-tag, de gebruikelijke keuze) en Import (@import). Via Conditional Usage (voorwaardelijk gebruik) kun je een heel bestand alleen laten gelden binnen een bepaalde media query.

CSS-code met selectors en eigenschappen op een monitor

@Media: stijlen per schermgrootte

Selecteer een bron en klik in het vak @Media op het plusteken. In het dialoogvenster Define Media Query kies je voorwaarden, zoals max-width of min-width met een waarde in pixels. Meerdere voorwaarden worden gecombineerd met and; andere operatoren ondersteunt het dialoogvenster niet. Onderin zie je meteen de code die Dreamweaver gaat schrijven.

Klik je in de lijst op een media query, dan springt de Live-weergave naar de bijbehorende breedte. Met Algemeen (Global) bovenaan de lijst ga je terug naar de volledige breedte en naar stijlen die altijd gelden. Werk je met Bootstrap, lees dan ook hoe je een responsive website bouwt met Bootstrap.

Selectors toevoegen en beheren

Selecteer een element in de Live-weergave, kies de juiste bron (en eventueel media query) en klik bij Selectors op het plusteken. Dreamweaver stelt dan zelf een selector voor op basis van het geselecteerde element. Klopt die niet, typ dan je eigen selector. Vergeet het voorvoegsel niet: een punt voor een class (.intro) en een hekje voor een id (#footer).

Met het zoekveld boven de lijst vind je snel een selector in grote stijlbestanden.
Sleep selectors om de volgorde te veranderen. Bij gelijke specificiteit wint in CSS de regel die het laatst staat.
Sleep een selector naar een andere bron om hem naar dat bestand te verplaatsen.
Klik met rechts op een selector voor Dupliceren (Duplicate) of Dupliceren in mediaquery (Duplicate Into Media Query), handig om een regel voor mobiel aan te passen.
Via het rechtermuismenu kopieer en plak je ook stijlen tussen selectors, desgewenst per categorie.

Eigenschappen instellen

De eigenschappen zijn verdeeld in categorieën die je met de pictogrammen bovenin kiest: Lay-out, Tekst, Rand, Achtergrond en Meer. Onder Meer typ je eigenschappen in die geen visuele bediening hebben.

Vink Set tonen (Show Set) aan om alleen de eigenschappen te zien die al een waarde hebben. Dat houdt het overzicht klein.
Marge, opvulling en positie stel je in met een visueel vak. Klik op het koppelingspictogram in het midden om alle vier de zijden tegelijk te wijzigen.
Een doorgestreepte eigenschap wordt overschreven door een andere regel. Zoek dan de regel die voorrang heeft.
Beweeg over een eigenschap om hem tijdelijk uit te schakelen of te verwijderen. Uitschakelen zet de regel in commentaar, zodat je snel ziet wat het effect is.

Een voorbeeld: je maakt de selector .knop-primair, geeft hem onder Achtergrond een kleur en onder Lay-out wat opvulling. Daarna dupliceer je hem in een media query voor kleine schermen en zet je de breedte op 100%. Dreamweaver schrijft dan deze CSS:

.knop-primair {
  background-color: #1a73e8;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 6px;
}

@media (max-width: 767px) {
  .knop-primair {
    display: block;
    width: 100%;
  }
}

Tips om sneller en foutloos te werken

Met Ctrl + Alt + S (Windows) of Cmd + Option + S (macOS) voeg je een selector toe. Met Ctrl + Alt + P of Cmd + Option + P voeg je een eigenschap toe.
Beweeg in de Live-weergave over een selector in CSS Designer. Dreamweaver markeert dan alle elementen die erdoor worden opgemaakt. Klik op de selector om die markering vast te zetten.
Zie je geen wijziging na het aanpassen? Controleer of je de juiste bron hebt gekozen en of de selector niet overschreven wordt.
Vergeet niet je CSS-bestand op te slaan. Wijzigingen in een gekoppeld bestand worden pas bewaard als je dat bestand opslaat.

Tip: In Bootstrap-pagina’s is bootstrap.css alleen-lezen, waardoor het vak Eigenschappen daarvoor uitgeschakeld is. Koppel een eigen CSS-bestand na Bootstrap en maak daarin je aanpassingen.

Zie je je opmaak helemaal niet terug in de browser, dan is het pad naar je CSS-bestand vaak de oorzaak. Dat en andere veelvoorkomende fouten lees je in Dreamweaver-problemen oplossen.

Tot slot

De CSS Designer is een handige brug tussen visueel ontwerpen en zelf CSS schrijven. Werk altijd van boven naar beneden: kies de bron, eventueel een media query, dan de selector en tot slot de eigenschappen. Kijk regelmatig in de Code-weergave wat Dreamweaver schrijft. Zo leer je ondertussen CSS en houd je je stijlbestanden overzichtelijk.

Veelgestelde vragen

Wat is het verschil tussen CSS Designer en het deelvenster Eigenschappen?

Het deelvenster Eigenschappen (Properties) toont vooral HTML-kenmerken van het geselecteerde element, zoals een link of class. In CSS Designer beheer je de stijlregels zelf: bestanden, media queries, selectors en CSS-eigenschappen.

Kan ik inline CSS omzetten naar een CSS-regel?

Ja, Dreamweaver heeft een optie om inline stijlen om te zetten naar een CSS-regel in een stijlblad. Dat is beter onderhoudbaar dan stijlen in style-attributen per element.

Waarom staat een eigenschap doorgestreept in CSS Designer?

Een doorgestreepte eigenschap wordt overschreven door een andere regel met meer specificiteit of die later in de CSS staat. Pas die andere regel aan of maak je selector specifieker.

Werkt CSS Designer ook met Sass of Less?

Dreamweaver ondersteunt CSS-preprocessors en kan Sass- en Less-bestanden compileren. Voor het visueel bewerken is CSS Designer vooral gericht op gewone CSS-bestanden.