Werken met div-tags

U kunt paginalay-outs maken door div-tags handmatig in te voegen en hierop CSS-positioneringsstijlen toe te passen. Een div-tag is een tag waarmee logische scheidingen binnen de inhoud van een webpagina worden gedefinieerd. U kunt div-tags gebruiken om blokken inhoud te centreren, kolomeffecten te maken, gebieden met verschillende kleuren te maken en nog veel meer.

Als u niet vertrouwd bent met het gebruik van div-tags en Cascading Style Sheets (CSS) voor het maken van webpagina's, kunt u een CSS-lay-out maken die is gebaseerd op een van de vooraf gedefinieerde lay-outs die worden meegeleverd met Dreamweaver. Als u niet graag werkt met CSS, maar wel vertrouwd bent met het gebruik van tabellen, kunt u ook proberen tabellen te gebruiken.

U kunt div-tags gebruiken om CSS-lay-outblokken te maken en deze in uw document te plaatsen. Dit is handig als u een bestaande CSS-stijlpagina met positioneringsstijlen aan uw document hebt gekoppeld. Met Dreamweaver kunt u snel een div-tag invoegen en bestaande stijlen erop toepassen.

Div-tags bewerken

Nadat u een div-tag hebt ingevoegd, kunt u de tag manipuleren of kunt u er inhoud aan toevoegen.

Als u randen toewijst aan div-tags of als u Omtrek van CSS-layout hebt geselecteerd, hebben deze tags zichtbare randen. (Omtrek van CSS-lay-out wordt standaard geselecteerd in het menu Beeld > Visuele hulpmiddelen.) Als u de muisaanwijzer over een div-tag beweegt, markeert Dreamweaver de tag. U kunt de markeerkleur wijzigen of markeren uitschakelen.

Als u een div-tag selecteert, kunt u regels voor de tag bekijken en bewerken in het deelvenster CSS ontwerpen. U kunt ook inhoud aan de div-tag toevoegen door eenvoudigweg de invoegpositie in de div-tag te plaatsen en vervolgens inhoud toe te voegen op de manier waarop u inhoud toevoegt aan een pagina.

De markeringskleur van div-tags wijzigen

Wanneer u de muisaanwijzer op de rand van een div-tag plaatst in de ontwerpweergave, markeert Dreamweaver de randen van de tag. U kunt de markeerfunctie desgewenst in- of uitschakelen, of de markeerkleur wijzigen in het dialoogvenster Voorkeuren.

CSS-lay-outblokken

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 div-tag 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 div-tag.

• Een afbeelding waaraan een absolute of relatieve positie is toegewezen.

• Een a-tag waaraan de stijl display:block is toegewezen.

• Een alinea waaraan een absolute of relatieve positie is toegewezen.

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 met visuele hulpmiddelen voor CSS-lay-outblokken beschrijft wat in Dreamweaver voor elk blok als zichtbaar wordt weergegeven:

Hiermee worden de omtrekken van alle CSS-lay-outblokken op de pagina weergegeven.

Hiermee worden voor afzonderlijke CSS-lay-outblokken tijdelijk toegewezen achtergrondkleuren weergegeven en worden de overige achtergrondkleuren en -afbeeldingen die gewoonlijk op de pagina worden weergegeven, verborgen.

Wanneer u het visuele hulpmiddel inschakelt om CSS-lay-outblokachtergronden weer te geven, wordt in Dreamweaver automatisch aan elk CSS-lay-outblok een opvallende achtergrondkleur toegewezen. (De kleuren worden in Dreamweaver geselecteerd op basis van een algoritmisch proces; u kunt de kleuren op geen enkele manier zelf toewijzen.) De toegewezen kleuren zijn visueel opvallend en zijn ontworpen om u te helpen bij het onderscheiden van verschillende CSS-lay-outblokken.

Hiermee wordt het kadermodel (dat wil zeggen opvulling en marges) voor het geselecteerde CSS-lay-outblok weergegeven.

CSS-lay-outblokken weergeven

U kunt desgewenst visuele hulpmiddelen voor CSS-lay-outblokken in- of uitschakelen. Als u alle CSS-lay-outblokken wilt weergeven, selecteert u Weergave > Opties voor ontwerpweergave > Visuele hulpmiddelen.

U kunt CSS-lay-outachtergronden, CSS-lay-outkadermodellen en omtrekken van CSS-lay-outs in- of uitschakelen.