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 (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:
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).
Klik in het deelvenster Bronnen van het deelvenster CSS ontwerpen op 
en klik vervolgens op een van de volgende opties:
Afhankelijk van de geselecteerde optie, Nieuw CSS-bestand maken of Bestaand CSS-bestand koppelen, wordt een dialoogvenster weergegeven.
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.
Voer een van de volgende handelingen uit:
(Optioneel) Klik op Voorwaardelijk gebruik en geef de mediaquery op die u met het CSS-bestand wilt koppelen.
Klik op een CSS-bron in het deelvenster Bronnen van het deelvenster CSS ontwerpen.
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.
Selecteer de voorwaarden op basis van uw vereisten.
Zorg dat u geldige waarden opgeeft voor elke voorwaarde die u selecteert. Anders worden de bijbehorende mediaquery's niet gemaakt.
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.
Selecteer in het deelvenster CSS ontwerpen een CSS-bron in het deelvenster Bronnen of een mediaquery in het deelvenster @Media.
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:
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.
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:
Klik op de gewenste kiezer en sleep deze naar de nieuwe positie in het deelvenster Kiezers.
De eigenschappen worden gegroepeerd in de volgende categorieën en worden aangegeven met de verschillende pictogrammen bovenaan in het deelvenster Eigenschappen:
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.
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.
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.
De eigenschappen voor het aanpassen van randen zijn ingedeeld in logische tabbladen zodat u snel de eigenschappen kunt weergeven of wijzigen.
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.
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.
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.
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.
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 |
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.
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.
Open CSS ontwerpen op een van de volgende manieren:
Klik in CSS ontwerpen op het pictogram + naast Bronnen en selecteer Bestaand CSS-bestand koppelen.
Voer een van de volgende handelingen uit:
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.
Klik op OK.
