Open de eigenschappeninspector (Venster > Eigenschappen), als deze nog niet open is en selecteer de CSS-optie in de linkerhoek van het paneel.
Laatst bijgewerkt op
20 dec. 2021
Lees hoe u de eigenschappencontrole voor tekst kunt gebruiken om HTML-opmaak of CSS-opmaak toe te passen in Dreamweaver.
Je kunt de eigenschap-inspector voor tekst gebruiken om HTML-opmaak of Cascading Style Sheet (CSS)-opmaak toe te passen.Wanneer je HTML-opmaak toepast, voegt Dreamweaver eigenschappen toe aan de HTML-code in de hoofdtekst van je pagina. Wanneer je CSS-opmaak toepast, schrijft Dreamweaver eigenschappen naar de kop van het document of naar een apart stijlblad.
als u inline CSS-stijlen maakt, voegt Dreamweaver rechtstreeks stijlkenmerkcode toe aan de hoofdtekst van de pagina.
Over tekstopmaak (CSS versus HTML)
Tekst opmaken in Dreamweaver lijkt op het gebruik van een standaard tekstverwerker. Je kunt standaardopmaakstijlen (Alinea, Kop 1, Kop 2, enzovoort) instellen voor een tekstblok, het lettertype, de grootte, kleur en uitlijning van geselecteerde tekst wijzigen, of tekststijlen toepassen zoals vet, cursief, code (monospace) en onderstrepen.
Dreamweaver heeft twee eigenschappeninspectors, geïntegreerd in één: de CSS-eigenschappeninspector en de HTML-eigenschappeninspector. Wanneer je de CSS-eigenschappeninspector gebruikt, maakt Dreamweaver tekst op met behulp van Cascading Style Sheets (CSS). CSS geeft webdesigners en ontwikkelaars meer controle over het ontwerp van webpagina's, terwijl het verbeterde functies biedt voor toegankelijkheid en een kleinere bestandsgrootte.De CSS-eigenschappeninspector biedt je toegang tot bestaande stijlen en stelt je in staat nieuwe te maken.
Het gebruik van CSS is een manier om de stijl van een webpagina te regelen zonder de structuur ervan aan te tasten. Door visuele ontwerpelementen (lettertypen, kleuren, marges, enzovoort) te scheiden van de structurele logica van een webpagina, geeft CSS webdesigners visuele en typografische controle zonder de integriteit van de content op te offeren. Bovendien zorgt het definiëren van typografisch ontwerp en paginalay-out vanuit een enkel, apart codeblok—zonder toevlucht te hoeven nemen tot afbeeldingskaarten, lettertype-tags, tabellen en afstandhouder-GIFs—voor snellere downloads, gestroomlijnd site-onderhoud en een centraal punt van waaruit je ontwerpeigenschappen kunt regelen over meerdere webpagina's.
Je kunt stijlen die gemaakt zijn met CSS direct in het document opslaan, of voor meer mogelijkheden en flexibiliteit kun je stijlen opslaan in een extern stijlblad.Als je een extern stijlblad aan meerdere webpagina's koppelt, weerspiegelen alle pagina's automatisch alle wijzigingen die je in het stijlblad aanbrengt. Om toegang te krijgen tot alle CSS-regels voor een pagina, gebruik je het CSS-stijlenpaneel (Venster > CSS-stijlen). Om toegang te krijgen tot regels die van toepassing zijn op een huidige selectie, gebruik je het CSS-stijlenpaneel (Huidige modus) of het pop-upmenu Doelregel in de CSS-eigenschappeninspector.
Als je dat liever doet, kun je HTML-opmaaktags gebruiken om tekst op te maken in je webpagina's. Om HTML-tags te gebruiken in plaats van CSS, maak je tekst op met behulp van de HTML-eigenschappeninspector.
U kunt CSS- en HTML 3.2-opmaak op dezelfde pagina combineren. Opmaak wordt hiërarchisch toegepast: HTML 3.2-opmaak heeft voorrang op opmaak die wordt toegepast door externe CSS-stijlpagina's, en CSS die in een document zit ingesloten, gaat voor op externe CSS.
CSS-regels bewerken in de eigenschappeninspector
Voer een van de volgende stappen uit:
- Plaats het invoegpunt in een tekstblok dat is opgemaakt met een regel die je wilt bewerken.De regel verschijnt in het pop-upmenu Doelregel.
- Selecteer een regel in het pop-upmenu Doelregel.
- Klik op Regel bewerken.
Breng wijzigingen aan in de regel door de verschillende opties
in de CSS-eigenschap inspector te gebruiken.
Doelregel
Dit is de regel die u bewerkt in de CSS-eigenschappencontrole. Wanneer je een bestaande stijl hebt toegepast op tekst, verschijnt de regel die de tekstopmaak beïnvloedt wanneer je in de tekst op de pagina klikt.Je kunt ook het pop-upmenu Doelregel gebruiken om nieuwe CSS-regels te maken, nieuwe inlinestijlen of bestaande klassen toe te passen op geselecteerde tekst.Als je een nieuwe regel maakt, moet je het dialoogvenster Nieuwe CSS-regel invullen.Voor meer informatie, zie de koppelingen aan het einde van dit onderwerp.
Regel bewerken
Opent het dialoogvenster CSS-regeldefinitie voor de beoogde regel.Als je Nieuwe CSS-regel selecteert in het pop-upmenu Doelregel en op de knop Regel bewerken klikt, opent Dreamweaver in plaats daarvan het dialoogvenster Nieuwe CSS-regel definitie.
CSS ontwerpen
Opent het CSS Designer-paneel en toont eigenschappen voor de beoogde regel in de huidige weergave.
Lettertype
Hiermee verandert u het lettertype van de doelregel.
Grootte
Hiermee stelt u de tekengrootte voor de doelregel in.
Tekstkleur
Hiermee stelt u de geselecteerde kleur als tekenkleur voor de doelregel in. Selecteer een webveilige kleur door op het kleurvak te klikken of voer een hexadecimale waarde in (bijvoorbeeld #BB5153) in het aangrenzende tekstveld.
Vet
Hiermee voegt u de eigenschap Vet aan de doelregel toe.
Cursief
Hiermee voegt u de eigenschap Cursief aan de doelregel toe.
Links, in het midden en rechts uitlijnen
Lijnt de doelregel links, in het midden of rechts uit.
Bij de eigenschappen Lettertype, Grootte, Tekstkleur, Vet, Cursief en Uitlijning worden altijd de eigenschappen weergegeven voor de regel die van toepassing is op de huidige selectie in het venster Document. Als u een van deze eigenschappen wijzigt, heeft dat invloed op de doelregel.
Tekstkleur bewerken met de eigenschappencontrole
Als u geen speciale regel op uw tekst hebt toegepast, kunt u de kleur van uw tekst rechtstreeks in de eigenschappencontrole bewerken. Bekijk de kleur van de tekst in het volgende voorbeeld voordat de kleur werd bewerkt. Het veld naast de kleurkiezer toont wit, wat de kleur aangeeft van de tekst waar je je cursor hebt geplaatst.
Als u de kleur van tekst wilt bewerken, selecteert u de tekst waarvan u de kleur wilt bewerken. Klik op de kleurkiezer en selecteer de gewenste kleur. Zie de volgende afbeelding waar de eigenschapsinspector de nieuwe kleur weergeeft.
HTML-opmaak instellen in de eigenschapsinspector
Open de Eigenschapsinspector (Venster > Eigenschappen), als deze nog niet open is, en klik op de HTML-knop.
Selecteer de tekst die je wilt opmaken.
Stel de opties in die u wilt toepassen op de geselecteerde tekst:
Indeling
Bepaalt de alineastijl van de geselecteerde tekst. Alinea past de standaardopmaak toe voor een <p> tag, Kop 1 voegt een H1 tag toe, enzovoort.
ID
Hiermee kent u een id aan uw selectie toe. Het ID-pop-upmenu (indien van toepassing) toont alle ongebruikte, gedeclareerde ID's van het document.
Klasse
Toont de klassestijl die momenteel is toegepast op de geselecteerde tekst.Als er geen stijlen zijn toegepast op de selectie, toont het pop-upmenu Geen CSS-stijl.Als er meerdere stijlen zijn toegepast op de selectie, is het menu leeg.
Gebruik het menu Stijl om een van de volgende acties uit te voeren:
Selecteer de stijl die je wilt toepassen op de selectie.
Selecteer Geen om de huidige geselecteerde stijl te verwijderen.
Selecteer Naam wijzigen als u de naam van de stijl wilt veranderen.
Selecteer Stijlblad koppelen om een dialoogvenster te openen waarmee je een extern stijlblad aan de pagina kunt koppelen.
Vet
Past <b> of <strong> toe op de geselecteerde tekst volgens de stijlvoorkeur die is ingesteld in de categorie Algemeen van het dialoogvenster Voorkeuren.
Cursief
Past <i> of <em> toe op de geselecteerde tekst volgens de stijlvoorkeur die is ingesteld in de categorie Algemeen van het dialoogvenster Voorkeuren.
Niet-geordende lijst
Hiermee maakt u een lijst met opsommingstekens van de geselecteerde tekst. Als er geen tekst is geselecteerd, wordt een nieuwe lijst met opsommingstekens gestart.
Geordende lijst
Hiermee maakt u een genummerde lijst van de geselecteerde tekst. Als er geen tekst is geselecteerd, wordt een nieuwe genummerde lijst gestart.
Blockquote en Blockquote verwijderen
Spring de geselecteerde tekst in of verwijder inspringing door de tag blockquote toe te passen of te verwijderen. In een lijst creëert inspringen een geneste lijst en het verwijderen van de inspringing heft de nesting van de lijst op.
Koppeling
Hiermee maakt u een hypertekstkoppeling van de geselecteerde tekst. Klik op het mappictogram om naar een bestand in je site te verkennen; typ de URL; sleep het pictogram Aanwijzen naar bestand naar een bestand in het paneel Bestanden; of sleep een bestand uit het paneel Bestanden naar het vak.
Titel
Hier kunt u de inhoud van de knopinfo voor een hyperlink opgeven.
Doel
Specificeert het frame of venster waarin het gekoppelde document wordt geladen:
_blank laadt het gekoppelde bestand in een nieuw, naamloos browservenster.
_parent laadt het gekoppelde bestand in het bovenliggende frameset of venster van het frame dat de koppeling bevat.Als het frame dat de koppeling bevat niet genest is, wordt het gekoppelde bestand geladen in het volledige browservenster.
_self laadt het gekoppelde bestand in hetzelfde frame of venster als de koppeling. Dit doel wordt geïmpliceerd, dus je hoeft het over het algemeen niet te specificeren.
_top laadt het gekoppelde bestand in het volledige browservenster en verwijdert daarbij alle frames.
Een klasse hernoemen vanuit de HTML-eigenschap inspector
Dreamweaver toont alle klassen die beschikbaar zijn voor je pagina in het Class-menu van de HTML-eigenschappeninspector.Je kunt stijlen in deze lijst hernoemen door de optie Hernoemen te selecteren aan het einde van de lijst met klassestijlen.
Selecteer in het deelvenster Eigenschappeninspecteur de vervolgkeuzelijst Klasse.
Selecteer in de lijst die verschijnt de optie Hernoemen aan het einde van de lijst.
Selecteer de stijl die je wilt hernoemen in het pop-upmenu Stijl hernoemen.
Voer een nieuwe naam in het tekstveld Nieuwe naam in en klik op
OK.
Verwante informatie
Prachtige websites ontwerpen in Dreamweaver
Ontwerp, codeer en beheer dynamische websites in een krachtige alles-in-één tool.
