03.05.2013 Views

Dreamweaver CS3 - Adobe

Dreamweaver CS3 - Adobe

Dreamweaver CS3 - Adobe

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

• Een afbeelding, waaraan een absolute of relatieve positie is toegewezen<br />

• De label voor een a-element, waaraan de stijl display:block is toegewezen<br />

• Een alinea, waaraan een absolute of relatieve positie is toegewezen<br />

Opmerking: Ten behoeve van de visuele weergave omvatten CSS-lay-outblokken geen inline elementen (d.w.z. elementen<br />

waarvan de code binnen een regel tekst staat) of enkelvoudige blokelementen zoals alinea's.<br />

DREAMWEAVER <strong>CS3</strong><br />

Handboek<br />

<strong>Dreamweaver</strong> biedt een aantal visuele hulpmiddelen voor de weergave van CSS-lay-outblokken. Zo kunt u omtrekken,<br />

achtergronden en het kadermodel voor CSS-lay-outblokken inschakelen terwijl u ontwerpt. Ook kunt u de knopinfo<br />

weergeven voor de eigenschappen van een geselecteerd CSS-lay-outblok wanneer u de muisaanwijzer over het lay-outblok<br />

beweegt.<br />

De volgende lijst van visuele hulpmiddelen voor CSS-lay-outblokken beschrijft wat <strong>Dreamweaver</strong> als zichtbaar voor elke<br />

blok weergeeft:<br />

Omtrek van CSS-lay-out Displays the outlines of all CSS layout blocks on the page.<br />

CSS-lay-outachtergronden Displays temporarily assigned background colors for individual CSS layout blocks, and hides<br />

any other background colors or images that normally appear on the page.<br />

Wanneer u het visuele hulpmiddel inschakelt om CSS-lay-outblokachtergronden weer te geven, wijst <strong>Dreamweaver</strong><br />

automatisch aan elk CSS-lay-outblok een opvallende achtergrondkleur toe. (<strong>Dreamweaver</strong> selecteert de kleuren met behulp<br />

van een algoritmisch proces—u kunt de kleuren op geen enkele manier zelf toewijzen.) De toegewezen kleuren zijn visueel<br />

opvallend en zijn ontworpen om u te helpen bij het onderscheiden van verschillende CSS-lay-outblokken.<br />

CSS-lay-outkadermodel Displays the box model (that is, padding and margins) of the selected CSS layout block.<br />

CSS-lay-outblokken weergeven<br />

U kunt desgewenst visuele hulpmiddelen voor CSS-lay-outblokken in- of uitschakelen.<br />

Omtrekken van CSS-lay-outblokken weergeven<br />

❖ Selecteer Beeld > Visuele hulpmiddelen > Omtrek van CSS-lay-out.<br />

Achtergronden van CSS-lay-outblokken weergeven<br />

❖ Selecteer Beeld > Visuele hulpmiddelen > CSS-lay-outachtergronden.<br />

CSS-lay-outblokkadermodellen weergeven<br />

❖ Selecteer Beeld > Visuele hulpmiddelen > CSS-lay-outkadermodel.<br />

Ook hebt u toegang tot opties voor visuele hulpmiddelen voor CSS-lay-outblokken door op de knop Visuele hulpmiddelen<br />

op de werkbalk Documenten te klikken.<br />

Visuele hulpmiddelen gebruiken bij niet-CSS-lay-outblokelementen<br />

U kunt een Design-Time stijlpagina gebruiken om de achtergronden, randen of het kadermodel voor elementen weer te<br />

geven die normaal gesproken niet als CSS-lay-outblokken worden beschouwd. Hiervoor moet u eerst een Design-Time<br />

stijlpagina maken, die het kenmerk display:block toewijst aan het juiste pagina-element.<br />

1 Maak een externe CSS-stijlpagina door de selectie van Bestand > Nieuw, van Basispagina in de kolom Categorie, van CSS<br />

in de kolom Basispagina en door te klikken op Maken.<br />

2 Maak op de nieuwe stijlpagina regels die het kenmerk display:block toewijzen aan de pagina-elementen die u als CSSlay-outblokken<br />

wilt weergeven.<br />

Als u bijvoorbeeld een achtergrondkleur wilt weergeven voor alinea's en lijstitems, maakt u een stijlpagina met de volgende<br />

regels:<br />

159

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!