Plaats in het documentvenster het invoegpunt
waar je wilt dat de div-tag verschijnt.
Laatst bijgewerkt op
25 sep. 2023
Lees hoe u div-tags gebruikt om blokken inhoud te centreren, kolomeffecten te maken, gebieden met verschillende kleuren te maken en meer.
Je kunt paginalay-outs maken door handmatig div-tags in te voegen en CSS-positioneerstijlen toe te passen. Een div-tag is een tag die logische verdelingen binnen de content van een webpagina definieert.Je kunt div-tags gebruiken om contentblokken te centreren, kolomeffecten te maken, verschillende kleurgebieden te maken en nog veel meer.
Als je niet bekend bent met het gebruik van div-tags en Cascading Style Sheets (CSS) om webpagina's te maken, kun je een CSS-lay-out maken op basis van een van de voorontworpen lay-outs die bij Dreamweaver zitten. Als je niet graag met CSS werkt, maar wel bekend bent met het gebruik van tabellen, kun je ook proberen tabellen te gebruiken.
Div-tags invoegen
Je kunt div-tags gebruiken om CSS-lay-outblokken te maken en ze in je document te positioneren. Dit is handig als je een bestaand CSS-stijlblad hebt met positioneerstijlen die aan je document zijn gekoppeld. Met Dreamweaver kun je snel een div-tag invoegen en er bestaande stijlen op toepassen.
Voer een van de volgende stappen uit:
Selecteer Invoegen > HTML > Div.
Klik in de HTML-categorie van het deelvenster Invoegen op Div.
Stel vervolgens de volgende opties naar wens in:
Invoegen
Hiermee kun je de locatie van de div-tag en de tagnaam selecteren als het geen nieuwe tag is.
Klasse
Hiermee geeft u de klassenstijl weer, die momenteel op de tag wordt toegepast. Als je een stijlblad hebt gekoppeld, verschijnen klassen die in dat stijlblad zijn gedefinieerd in de lijst. Gebruik dit pop-upmenu om de stijl te selecteren die je 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 je document staan worden niet weergegeven.
Notitie
Dreamweaver waarschuwt je als je dezelfde ID invoert als een andere tag in je document.
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. Wanneer je de muisaanwijzer over de rand van het vak beweegt, markeert Dreamweaver het.
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 je een div-tag hebt ingevoegd, kun je deze bewerken of content toevoegen.
Notitie
Div-tags die absoluut gepositioneerd zijn 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. Ook kunt u inhoud toevoegen aan de label voor een div-element door gewoon de invoegpositie binnen de label voor het div-element 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
Let op de markering om de rand te zien.
Klik binnen de label voor het div-element en druk twee maal op Control+A (Windows) of Command+A (Macintosh).
Klik binnen de label voor het div-element en selecteer vervolgens de label voor het div-element in de labelkiezer onder aan het documentvenster.
Selecteer Venster > CSS Designer om het deelvenster CSS Designer te openen als dit nog niet open is.
Regels die op de div-tag zijn toegepast verschijnen in het paneel.
Breng desgewenst wijzigingen aan.
De markeringskleur van div-tags wijzigen
Wanneer je de muisaanwijzer over de rand van een div-tag beweegt in de ontwerpweergave, markeert Dreamweaver de randen van de tag. Je kunt markering indien nodig in- of uitschakelen of de markeringskleur 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 markeren van de labels voor div-elementen wilt in- of uitschakelen, schakelt u het selectievakje Tonen bij Bij aanwijzen met muis in respectievelijk uit.
Notitie
Deze opties zijn van toepassing op alle objecten, zoals tabellen, die Dreamweaver markeert wanneer je de aanwijzer eroverheen beweegt.
CSS-lay-outblokken
Je kunt CSS-layoutblokken visualiseren terwijl je werkt in de ontwerpweergave.Een CSS-layoutblok is een HTML-pagina-element dat je overal op je pagina kunt positioneren.Meer specifiek is een CSS-layoutblok een div tag zonder display:inline, of elk ander pagina-element dat de display:block, position:absolute, of position:relative CSS-declaraties bevat. Hieronder staan enkele voorbeelden van elementen die worden beschouwd als CSS-layoutblokken in Dreamweaver:
Een label voor een div-element
Een afbeelding met een absolute of relatieve positie die eraan is toegewezen
Een a tag met de display:block stijl eraan toegewezen
Een alinea met een absolute of relatieve positie die eraan toegewezen is
Notitie
Voor visuele weergave bevatten CSS-layoutblokken geen inline-elementen (dat wil zeggen, elementen waarvan de code binnen een tekstlijn valt) of eenvoudige blokelementen zoals alinea's.
Dreamweaver biedt een aantal visuele hulpmiddelen voor het bekijken van CSS-layoutblokken. Je kunt bijvoorbeeld omtrekken, achtergronden en het boxmodel inschakelen voor CSS-layoutblokken tijdens het ontwerpen. Je kunt ook knopinfo bekijken waarin eigenschappen worden weergegeven voor een geselecteerd CSS-layoutblok wanneer je de muisaanwijzer over het layoutblok beweegt.
De volgende lijst van visuele hulpmiddelen voor CSS-layoutblokken beschrijft wat Dreamweaver weergeeft als zichtbaar voor elk:
Omtrek van CSS-lay-out
Hiermee worden de omtrekken van alle CSS-lay-outblokken op de pagina weergegeven.
CSS-lay-outachtergronden
Geeft tijdelijk toegewezen achtergrondkleuren weer voor individuele CSS-layoutblokken en verbergt alle andere achtergrondkleuren of afbeeldingen die normaal op de pagina verschijnen.
Wanneer je de visuele hulp inschakelt om CSS-layoutblokachtergronden te bekijken, wijst Dreamweaver automatisch elk CSS-layoutblok een aparte achtergrondkleur toe. (Dreamweaver selecteert de kleuren met behulp van een algoritme—er is geen manier voor jou om de kleuren zelf toe te wijzen.)De toegewezen kleuren zijn visueel onderscheidend en zijn ontworpen om je te helpen onderscheid te maken tussen CSS-layoutblokken.
CSS-lay-outkadermodel
Geeft het boxmodel weer (dat wil zeggen, opvulling en marges) van het geselecteerde CSS-layoutblok.
CSS-lay-outblokken weergeven
U kunt desgewenst visuele hulpmiddelen voor CSS-lay-outblokken in- of uitschakelen. Om alle CSS-layoutblokken te bekijken, selecteer je Weergave > Opties Ontwerpweergave > Visuele hulpmiddelen.
Je kunt CSS-layoutachtergronden, CSS-layoutboxmodel en CSS-layoutomtrekken inschakelen of uitschakelen.
Prachtige websites ontwerpen in Dreamweaver
Ontwerp, codeer en beheer dynamische websites in een krachtige alles-in-één tool.
