Handboek Annuleren

Werken met div-tags

 

 

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.

  1. Plaats in het documentvenster de invoegpositie op de positie waar u de div-tag wilt invoegen.
  2. Voer een van de volgende handelingen uit:
    • Selecteer Invoegen > HTML > Div.

    • Klik in categorie HTML van het deelvenster Invoegen op Div.

  3. 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.

    Opmerking:

    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.

  4. 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.

Opmerking:

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.

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

    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.

  2. 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.

  3. 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.

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

    Opmerking:

    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.

Opmerking:

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.

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?