Handboek Annuleren

Werken met div-tags

Zoeken

Laatst bijgewerkt op 3 mei 2021

Lees hoe u div-tags kunt gebruiken om blokken inhoud te centreren, kolomeffecten te maken, gebieden met verschillende kleuren te maken en meer.

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.

Div-tags invoegen

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.

Plaats in het documentvenster de invoegpositie op de positie waar u de div-tag wilt invoegen.
Voer een van de volgende handelingen uit:
- Selecteer Invoegen > HTML > Div.
- Klik in categorie HTML van het deelvenster Invoegen op Div.
Stel vervolgens de volgende opties naar wens in:

Invoegen

Hiermee kunt u de locatie van de div-tag en de naam van de tag (als het geen nieuwe tag is) selecteren.

Klasse

Hiermee geeft u de klassenstijl weer, die momenteel op de tag wordt toegepast. Als u een stijlpagina hebt gekoppeld, worden op die stijlpagina gedefinieerde klassen weergegeven in de lijst. Gebruik dit pop-upmenu om de stijl te selecteren die u op de tag wilt toepassen.

ID

Hiermee kunt u de naam wijzigen die is gebruikt om de div-tag aan te duiden. Als u een stijlpagina hebt gekoppeld, worden op die stijlpagina gedefinieerde id's weergegeven in de lijst. Id's voor blokken die al in uw document staan, worden niet vermeld.

Notitie

Dreamweaver geeft een waarschuwing als u dezelfde id als die van een andere tag in uw document opgeeft.

Nieuwe CSS-regel

Hiermee opent u het dialoogvenster Nieuwe CSS-regel.
Klik op OK.

De div-tag wordt als een vak in uw document met de tekst van een tijdelijke aanduiding weergegeven. Als u de muisaanwijzer op de rand van het vak plaatst, wordt het vak door Dreamweaver gemarkeerd.

Als de div-tag absoluut is gepositioneerd, wordt het een AP-element. (U kunt div-tags die niet absoluut zijn gepositioneerd, bewerken.)

Div-tags bewerken

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

Notitie

Div-tags die absoluut zijn gepositioneerd, worden AP-elementen.

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.

Voer een van de volgende handelingen uit om de div-tag te selecteren:
- Klik op de rand van de div-tag.
Notitie

Controleer de markering om de rand te zien.
- Klik binnen de div-tag en druk twee maal op Control+A (Windows) of Command+A (Macintosh).
- Klik binnen de div-tag en selecteer vervolgens de div-tag in de tagkiezer onder aan het documentvenster.
Selecteer Venster > CSS Designer om het deelvenster CSS Designer te openen, als dit nog niet is geopend.

Regels die worden toegepast op de div-tag, worden in het deelvenster weergegeven.
Breng desgewenst wijzigingen aan.

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.

Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).
Selecteer Markering in de lijst Categorie aan de linkerkant.
Maak een van beide volgende wijzigingen en klik op OK:
- Als u de markeerkleur voor div-tags 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 het markeren van div-tags wilt in- of uitschakelen, schakelt u het selectievakje bij de optie Bij aanwijzen met muis in of uit.
Notitie

deze opties zijn van invloed op alle objecten, zoals tabellen, die in Dreamweaver worden gemarkeerd wanneer u de muisaanwijzer op deze objecten plaatst.

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.

Notitie

Ten behoeve van de visuele weergave omvatten CSS-lay-outblokken geen inline-elementen (dit zijn 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 met visuele hulpmiddelen voor CSS-lay-outblokken beschrijft wat in Dreamweaver voor elk blok als zichtbaar wordt weergegeven:

Omtrek van CSS-lay-out

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

CSS-lay-outachtergronden

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.

CSS-lay-outkadermodel

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.

Verwante informatie

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?