Handboek Annuleren

Pagina's opmaken met CSS ontwerpen

 

 

Lees hoe u het deelvenster CSS ontwerpen gebruikt om stijlpagina's, mediaquery's en kiezers te maken of te koppelen en om CSS-eigenschappen in te stellen.

Het deelvenster CSS ontwerpen
Het deelvenster CSS ontwerpen

Het deelvenster CSS ontwerpen (Venster > CSS ontwerpen) is een CSS-eigenschappencontrole waarmee u 'visueel' CSS-stijlen en -bestanden kunt maken en eigenschappen en mediaquery's kunt instellen.

De volgende secties zijn beschikbaar in de interface CSS ontwerpen:

  • Bronnen: Een verzameling CSS-bestanden die aan het project is gekoppeld
  • @Media: Mediaquery's om de schermgrootte te beheren
  • Kiezers: Kiezers die aan de geselecteerde mediaquery zijn gekoppeld in het deelvenster @Media
  • Eigenschappen: Eigenschappen die aan de geselecteerde kiezer zijn gekoppeld met een optie om alleen de ingestelde eigenschappen weer te geven

U kunt CSS ontwerpen gebruiken om een afzonderlijke regel in een CSS-stijlpagina te bewerken (gebruik het tabblad Huidig in CSS ontwerpen), maar u kunt ook rechtstreeks in de CSS-stijlpagina werken (gebruik het tabblad Alles in CSS ontwerpen).

Stijlpagina's maken en koppelen

  1. Klik in het deelvenster Bronnen van het deelvenster CSS ontwerpen op en klik vervolgens op een van de volgende opties:

    • Nieuw CSS-bestand maken: een nieuw CSS-bestand maken en koppelen aan het document
    • Bestaand CSS-bestand koppelen: een bestaand CSS-bestand aan het document koppelen
    • Definiëren in pagina: CSS in het document definiëren
    Stijlpagina's maken en koppelen met CSS ontwerpen
    Stijlpagina's maken en koppelen met CSS ontwerpen

    Afhankelijk van de geselecteerde optie, Nieuw CSS-bestand maken of Bestaand CSS-bestand koppelen, wordt een dialoogvenster weergegeven.

  2. Klik op Bladeren om de naam van het CSS-bestand op te geven, en de locatie waar u het nieuwe bestand wilt opslaan als u een nieuw CSS-bestand maakt.

  3. Voer een van de volgende handelingen uit:

    • Klik op Koppeling om het Dreamweaver-document te koppelen met het CSS-bestand
    • Klik op Importeren om het CSS-bestand te importeren in het document.
  4. (Optioneel) Klik op Voorwaardelijk gebruik en geef de mediaquery op die u met het CSS-bestand wilt koppelen.

Mediaquery's definiëren

  1. Klik op een CSS-bron in het deelvenster Bronnen van het deelvenster CSS ontwerpen.

  2. Klik op in het deelvenster @Media om een nieuwe mediaquery toe te voegen.

    Het deelvenster Mediaquery definiëren wordt weergegeven met alle mediaqueryvoorwaarden die door Dreamweaver worden ondersteund.

  3. Selecteer de voorwaarden op basis van uw vereisten.

    Mediaquery's definiëren
    Mediaquery's definiëren

    Zorg dat u geldige waarden opgeeft voor elke voorwaarde die u selecteert. Anders worden de bijbehorende mediaquery's niet gemaakt.

    Opmerking:

    Momenteel wordt alleen de bewerking 'En' ondersteund voor meerdere voorwaarden.

Als u mediaqueryvoorwaarden via code toevoegt, worden alleen de ondersteunde voorwaarden ingevuld in het dialoogvenster Mediaquery definiëren. In het tekstvak Code wordt echter de volledige code weergegeven (inclusief niet-ondersteunde voorwaarden).

Als u op een mediaquery klikt in de ontwerpweergave of in Live View, schakelt de viewport over naar de geselecteerde mediaquery. Klik op Algemeen in het deelvenster @Media als u de volledige viewport wilt weergeven.

CSS-kiezers definiëren

  1. Selecteer in het deelvenster CSS ontwerpen een CSS-bron in het deelvenster Bronnen of een mediaquery in het deelvenster @Media.

  2. Klik in het deelvenster Kiezers op . Op basis van het geselecteerde element in het document identificeert CSS ontwerpen de juiste kiezer en geeft deze weer (maximaal drie regels).

    Voer een of meer van de volgende handelingen uit:

    • Gebruik de toets pijl-omhoog of pijl-omlaag om de voorgestelde kiezer meer of minder specifiek te maken.
    • Verwijder de voorgestelde regel en typ de gewenste kiezer. Zorg ervoor dat u de naam van de kiezer en de aanduiding voor Type kiezer invoert. Als u bijvoorbeeld een id opgeeft, moet u voor de naam van de kiezer een '#' plaatsen.
    • Als u naar een specifieke kiezer wilt zoeken, gebruikt u het zoekvak bovenaan in het deelvenster.
    • Als u de naam van een kiezer wilt wijzigen, klikt u op de kiezer en typt u de gewenste naam.
    • Als u de kiezers opnieuw wilt indelen, sleept u de kiezers naar de gewenste positie.
    • Als u een kiezer van de ene bron naar een andere wilt verplaatsen, sleept u de kiezer naar de gewenste bron in het deelvenster Bronnen.
    • Als u een kiezer in de geselecteerde bron wilt dupliceren, klikt u met de rechtermuisknop op de kiezer en klikt u op Dupliceren.
    • Als u een kiezer wilt dupliceren en toevoegen aan een mediaquery, klikt u met de rechtermuisknop op de kiezer en plaatst u de muisaanwijzer op Dupliceren in mediaquery. Kies vervolgens de mediaquery.

    Opmerking: De optie Dupliceren naar mediaquery is alleen beschikbaar als de bron van de geselecteerde kiezer mediaquery's bevat. U kunt een kiezer uit een bron niet dupliceren naar een mediaquery van een andere bron.

Stijlen kopiëren en plakken

U kunt nu stijlen in de ene kiezer kopiëren en deze in een andere kiezer plakken. U kunt alle stijlen of alleen een specifieke categorie stijlen kopiëren, zoals Lay-out, Tekst en Rand. 

Klik met de rechtermuisknop en kies een van de beschikbare opties:

  • Als een kiezer geen stijlen bevat, zijn Kopiëren en Alle stijlen kopiëren uitgeschakeld.
  • Stijlen plakken is uitgeschakeld voor externe sites die niet kunnen worden bewerkt. Maar de opdrachten Kopiëren en Alle stijlen kopiëren zijn wel beschikbaar.
  • Stijlen die al gedeeltelijk in een kiezer (overlappend) bestaan, kunnen wel worden geplakt. De samenvoeging van alle kiezers wordt geplakt.
  • Het kopiëren en plakken van stijlen kan ook worden gebruikt voor verschillende koppelingen van CSS-bestanden: Importeren, Koppelen, Inline
    stijlen.
Stijlen kopiëren en plakken
Stijlen kopiëren en plakken

Kiezers opnieuw rangschikken

Klik op de gewenste kiezer en sleep deze naar de nieuwe positie in het deelvenster Kiezers.

CSS-eigenschappen instellen

De eigenschappen worden gegroepeerd in de volgende categorieën en worden aangegeven met de verschillende pictogrammen bovenaan in het deelvenster Eigenschappen:

  • Lay-out
  • Tekst
  • Rand
  • Achtergrond
  • Meer (lijst met 'alleen-tekst'-eigenschappen en eigenschappen zonder visuele besturingselementen)
Opmerking:

Voordat u de eigenschappen van een CSS-kiezer gaat bewerken, kunt u Omgekeerde controle gebruiken om de elementen die zijn gekoppeld aan de CSS-kiezer te identificeren. Als u dit doet, kunt u bekijken of alle elementen die worden gemarkeerd door Omgekeerde controle ook daadwerkelijk moeten worden gewijzigd. 

Schakel het selectievakje Set tonen in om alleen de set met ingestelde eigenschappen weer te geven. Schakel het selectievakje Set tonen uit om alle eigenschappen weer te geven.

Als u een eigenschap, zoals width of border-collapse, wilt instellen, klikt u op de vereiste opties naast de eigenschap in het deelvenster Eigenschappen.

Overschreven eigenschappen worden doorgehaald weergegeven.

Marges, opvulling en positie instellen

Met de vakbesturingselementen in het deelvenster Eigenschappen van CSS ontwerpen, kunt u snel de eigenschappen voor marges, opvulling en positie instellen. Als u de voorkeur geeft aan code, kunt u stenocode voor marge en opvulling in de tekstvakken voor snel bewerken opgeven, zoals getoond in dit voorbeeld.

eigenschap margin
De eigenschap margin

Klik op de waarden en typ de vereiste waarde. Als u wilt dat alle vier waarden gelijk zijn en tegelijkertijd worden gewijzigd, klikt u op het koppelingspictogram in het midden.

U kunt op elk moment specifieke waarden uitschakelen of verwijderen. Zo kunt u de waarde voor de marge aan de linkerkant uitschakelen en de waarden voor de rechterkant, bovenkant en onderkant behouden.

Randeigenschappen instellen

De eigenschappen voor het aanpassen van randen zijn ingedeeld in logische tabbladen zodat u snel de eigenschappen kunt weergeven of wijzigen. 

Eigenschappen voor het aanpassen van randen
Eigenschappen voor het aanpassen van randen

Als u de voorkeur geeft aan code, kunt u stenocode voor randen en de straal van de rand opgeven in het tekstvak voor snel bewerken.

Als u eigenschappen voor het aanpassen van randen wilt opgeven, stelt u eerst de eigenschappen in op het tabblad Alle zijden. De andere tabbladen worden dan ingeschakeld en de eigenschappen van het tabblad Alle zijden worden weergegeven voor afzonderlijke randen.

Wanneer u een eigenschap op de afzonderlijke randtabbladen wijzigt, verandert de waarde van de overeenkomstige eigenschap op het tabblad 'Alle zijden' in 'undefined' (standaardwaarde). 

In het onderstaande voorbeeld is de randkleur ingesteld op zwart en vervolgens gewijzigd in rood voor de bovenrand. 

Randkleur voor alle zijden instellen
Randkleur voor alle zijden instellen

Rand aan alle zijden
Rand aan alle zijden

Randkleur voor bovenzijde instellen
Randkleur voor bovenzijde instellen

Randkleur voor bovenzijde ingesteld op rood
Randkleur voor bovenzijde ingesteld op rood

De code die wordt ingevoegd, is afhankelijk van de voorkeursinstelling voor de korte of de lange versie. 

Tijdens de controle worden de tabbladen gebruikt op basis van de prioriteit van de ingestelde tabbladen. De hoogste prioriteit is voor 'Alle zijden', gevolgd door 'Boven', 'Rechts', 'Onder' en 'Links'. Als bijvoorbeeld alleen de waarde voor boven voor een rand is ingesteld, wordt in de berekende modus de focus verplaatst naar het tabblad 'Boven' en wordt 'Alle zijden' genegeerd omdat het tabblad 'Alle zijden' niet is ingesteld.

Eigenschappen uitschakelen of verwijderen

Met de functie CSS-eigenschap uit-/inschakelen kunt u gedeelten met CSS weglaten vanuit het deelvenster CSS ontwerpen zonder dat u de wijzigingen rechtstreeks in de code hoeft aan te brengen. Wanneer u bepaalde gedeelten weglaat uit de CSS, kunt u nagaan welke effecten bepaalde eigenschappen en waarden op uw pagina hebben.

Als u een CSS-eigenschap uitschakelt, voegt Dreamweaver CSS-commentaartags en het label [uitgeschakeld] toe aan de CSS-eigenschap die u hebt uitgeschakeld. Vervolgens kunt u desgewenst de CSS-eigenschap eenvoudig opnieuw inschakelen of verwijderen.

In het deelvenster CSS ontwerpen kunt u elke eigenschap uitschakelen of verwijderen.

De volgende schermafbeelding bevat de pictogrammen voor het uitschakelen en verwijderen van de eigenschap height. Deze pictogrammen zijn zichtbaar wanneer u de muisaanwijzer op de eigenschap plaatst.

Eigenschap uitschakelen/verwijderen
Eigenschap uitschakelen/verwijderen

U kunt de besturingselementen voor verwijderen en uitschakelen ook gebruiken op het niveau van de groep aanpassingen voor randen om deze acties op alle eigenschappen toe te passen.

Sneltoetsen

U kunt CSS-kiezers en -eigenschappen toevoegen of verwijderen met behulp van sneltoetsen. U kunt ook van de ene naar de andere eigenschappengroep gaan in het deelvenster Eigenschappen. 

Sneltoets

Workflow

CTRL + Alt +[Shift =]

Hiermee voegt u een kiezer toe (als het besturingselement zich in de kiezerssectie bevindt)

CTRL + Alt+ S

Hiermee voegt u een kiezer toe (als het besturingselement zich ergens anders in de toepassing bevindt)

CTRL + Alt +[Shift =]

Hiermee voegt u een eigenschap toe (als het besturingselement zich in de sectie met eigenschappen bevindt)

CTRL + Alt+ P

Hiermee voegt u een eigenschap toe (als het besturingselement zich ergens in de toepassing bevindt)

Selecteren + verwijderen

Hiermee verwijdert u de kiezer als de kiezer is geselecteerd

CTRL + Alt + (PgUp/PgDn)

Hiermee springt u van de ene naar de andere sectie in het subdeelvenster met eigenschappen 

Pagina-elementen identificeren die zijn gekoppeld met een CSS-kiezer

Doorgaans is één CSS-kiezer gekoppeld aan meerdere pagina-elementen. Zo kan de tekst in het hoofdgedeelte, de koptekst en voettekst allemaal aan dezelfde CSS-kiezer worden gekoppeld. Wanneer u de eigenschappen van een CSS-kiezer gaat bewerken, heeft dit invloed op alle elementen die zijn gekoppeld aan de kiezer, waaronder de elementen die u niet wilt wijzigen.

Met Livemarkering kunt u alle elementen identificeren die zijn gekoppeld aan een CSS-kiezer. Als u slechts één of een aantal elementen wilt wijzigen, kunt u een nieuwe CSS-kiezer voor die elementen maken en vervolgens de bijbehorende eigenschappen bewerken.

Als u de pagina-elementen wilt identificeren die zijn gekoppeld aan een CSS-kiezer, houdt u de muis boven de kiezer in Live View (met Live Code 'uit'). Dreamweaver markeert de bijbehorende elementen met stippellijnen.

Als u de markering wilt instellen voor de elementen, klikt u op de kiezer. De elementen zijn nu gemarkeerd met een blauwe rand.

Als u de blauwe markering rond de elementen wilt verwijderen, klikt u nogmaals op de kiezer.

Livemarkering is standaard ingeschakeld. Als u Livemarkering wilt uitschakelen, klikt u op Live View-opties op de documentwerkbalk en klikt u op Livemarkering uitschakelen. 

Koppelen aan een externe CSS-stijlpagina

Als u een externe CSS-stijlpagina bewerkt, worden alle aan die CSS-stijlpagina gekoppelde documenten bijgewerkt om deze bewerkingen door te voeren.

U kunt de in een document aangetroffen CSS-stijlen exporteren om zo een nieuwe CSS-stijlpagina te maken en deze te koppelen aan een externe stijlpagina door de hier gevonden stijlen toe te passen.

U kunt aan uw pagina's elke stijlpagina koppelen die u maakt of kopieert naar uw site.

  1. Open CSS ontwerpen op een van de volgende manieren:

    • Selecteer Venster > CSS ontwerpen.
    • Druk op Shift + F11.
  2. Klik in CSS ontwerpen op het pictogram + naast Bronnen en selecteer Bestaand CSS-bestand koppelen.

    Bestaand CSS-bestand koppelen
    Bestaand CSS-bestand koppelen

  3. Voer een van de volgende handelingen uit:

    • Klik op Bladeren om naar een externe CSS-stijlpagina te bladeren.
    • Typ het pad naar de stijlpagina in het vak Bestand/URL.
  4. Klik op de knop Voorvertoning om te controleren of de stijlpagina de gewenste stijlen toepast op de huidige pagina.

    Als de toegepaste stijlen niet de stijlen zijn die u verwacht, klikt u op Annuleren om de stijlpagina te verwijderen. Het vorige uiterlijk van de pagina wordt hersteld.

  5. Klik op OK.

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?