Operation Manual

165
DREAMWEAVER GEBRUIKEN
Pagina's maken met CSS
Laatst bijgewerkt 2/5/2011
Wijzig de tekst voor de tijdelijke aanduiding in een label voor een div-tag
❖ Selecteer de tekst en typ er vervolgens overheen, of druk op Verwijderen.
Opmerking: U kunt inhoud toevoegen aan de label voor het
div-element op dezelfde manier als bij het toevoegen van
inhoud aan een pagina.
De markeringskleur van labels voor div-tags wijzigen
Wanneer u de muisaanwijzer over de rand van de label voor een div-element beweegt in de ontwerpweergave,
markeert Dreamweaver de randen van de label. U kunt de markeerfunctie desgewenst in- of uitschakelen, of de
markeerkleur wijzigen in het dialoogvenster Voorkeuren.
1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).
2 Selecteer Markering in de lijst Categorie aan de linkerkant.
3 Maak een van beide volgende wijzigingen en klik op OK:
• Als u de markeerkleur van de labels voor div-elementen wilt wijzigen, klikt u op het kleurvak Bij aanwijzen met
muis en selecteert u vervolgens een markeerkleur met behulp van de kleurkiezer (of geeft u de hexadecimale waarde
voor de markeerkleur op in het tekstvak).
• Als u markeren van de labels voor div-elementen wilt in- of uitschakelen, schakelt u het selectievakje Tonen bij Bij
aanwijzen met muis in respectievelijk uit.
Opmerking: Deze opties zijn van invloed op alle objecten, zoals tabellen, die Dreamweaver markeert wanneer u de
muisaanwijzer over deze objecten beweegt.
CSS-lay-outblokken
CSS-lay-outblokken visualiseren
U kunt CSS-lay-outblokken visualiseren terwijl u in de ontwerpweergave werkt. Een CSS-lay-outblok is een HTML-
pagina-element dat u op een willekeurige plaats op uw pagina kunt positioneren. Meer in het bijzonder is een CSS-lay-
outblok een label voor een
div-element zonder display:inline of een willekeurig ander pagina-element met daarin
de CSS-declaratie
display:block, position:absolute, of position:relative. Hieronder volgen enkele
voorbeelden van elementen die in Dreamweaver als CSS-lay-outblokken worden beschouwd:
• Een label voor een div-element
• Een afbeelding, waaraan een absolute of relatieve positie is toegewezen
• De label voor een a-element, waaraan de stijl display:block is toegewezen
• Een alinea, waaraan een absolute of relatieve positie is toegewezen
Opmerking: Ten behoeve van de visuele weergave omvatten CSS-lay-outblokken geen inline elementen (d.w.z. elementen
waarvan de code binnen een regel tekst staat) of enkelvoudige blokelementen zoals alinea's.
Dreamweaver biedt een aantal visuele hulpmiddelen voor de weergave van CSS-lay-outblokken. Zo kunt u omtrekken,
achtergronden en het kadermodel voor CSS-lay-outblokken inschakelen terwijl u ontwerpt. Ook kunt u de knopinfo
weergeven voor de eigenschappen van een geselecteerd CSS-lay-outblok wanneer u de muisaanwijzer over het lay-
outblok beweegt.
De volgende lijst van visuele hulpmiddelen voor CSS-lay-outblokken beschrijft wat Dreamweaver als zichtbaar voor
elke blok weergeeft:
Omtrek van CSS-lay-out Hiermee worden de omtrekken van alle CSS-lay-outblokken op de pagina weergegeven.