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 Designer (Window > CSS Designer) is een CSS-eigenschappen-inspector waarmee je "visueel" CSS-stijlen, bestanden kunt maken en eigenschappen kunt instellen, samen met media queries.
De volgende secties zijn beschikbaar in de interface van CSS Designer:
Met CSS Designer kun je een individuele regel in een CSS-stylesheet bewerken (gebruik het tabblad Huidig in CSS Designer), of als je dat liever hebt, kun je direct in de CSS-stylesheet werken (gebruik het tabblad Alle in CSS Designer).
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.
Alleen de bewerking 'En' wordt 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 Designer een CSS-bron in het deelvenster Sources of een media query in het deelvenster @Media.
Klik in het deelvenster Kiezers op . Op basis van het element dat in het document is geselecteerd, identificeert CSS Designer slim de relevante selector en toont deze (tot drie regels).
Voer een 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 op een selectiefunctie en kies uit de beschikbare opties:
Klik op de gewenste selectiefunctie en sleep deze naar de nieuwe positie in het deelvenster Selectors.
De eigenschappen worden gegroepeerd in de volgende categorieën en worden aangegeven met de verschillende pictogrammen boven aan 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 je liever code gebruikt, kun je shorthand-code voor marge en opvulling opgeven in de snelbewerkingsvakken, zoals getoond in dit voorbeeld.
Klik op de waarden en typ de vereiste waarde. Als je wilt dat alle vier de waarden hetzelfde zijn en tegelijkertijd wijzigen, klik je op het koppelingspictogram in het midden.
Op elk moment kun je specifieke waarden uitschakelen of verwijderen, bijvoorbeeld de waarde van de linkermarge, terwijl je de waarden van de rechter-, boven- en ondermarge behoudt.
Eigenschappen van Rander Control zijn georganiseerd in logische tabbladen om je te helpen de eigenschappen snel te bekijken of wijzigen.
Als je liever code gebruikt, kun je shorthand-code voor randen en randerstraal opgeven in het snelbewerkingstekstvak.
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 die zijn ingesteld in het tabblad 'Alle zijden' worden weergegeven voor individuele randen.
Wanneer je een eigenschap in de afzonderlijke randtabbladen wijzigt, verandert de waarde van de overeenkomstige eigenschap in het tabblad 'Alle zijden' naar 'ongedefinieerd' (standaardwaarde).
In onderstaand voorbeeld werd de randerkleur ingesteld op zwart en vervolgens gewijzigd naar rood voor de bovenrander.
De code die wordt ingevoegd is gebaseerd op de voorkeurinstelling voor verkorte of volledige notatie.
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 bovenwaarde voor een rander is ingesteld, neemt de berekende modus het focus naar het tabblad "Boven" waarbij het tabblad "Alle zijden" wordt 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.
Je kunt elke eigenschap uitschakelen of verwijderen met de CSS Designer.
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.
Je kunt ook de verwijder- en uitschakelingsbedieningen op het niveau van de Randerbesturing-groep gebruiken om deze acties toe te passen op alle eigenschappen.
U kunt CSS-kiezers en -eigenschappen toevoegen of verwijderen met behulp van sneltoetsen. Je kunt ook navigeren tussen de eigenschapsgroepen 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) |
Springen van de ene naar de andere sectie in het subpaneel 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:
In CSS ontwerpen klikt u op het pictogram + naast Bronnen en selecteert u 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. De pagina keert dan terug naar het vorige uiterlijk.
Klik op OK.
Prachtige websites ontwerpen in Dreamweaver
Ontwerp, codeer en beheer dynamische websites in een krachtige alles-in-één tool.
