Operation Manual

Werken met labels voor div-tags
Naar boven
Div-tags invoegen en bewerken
CSS-lay-outblokken
Werken met AP-elementen
(Alleen Creative Cloud-gebruikers): Er zijn zeven nieuwe semantische tags beschikbaar wanneer u Invoegen > Lay-out selecteert. De nieuwe tags
zijn: Artikel, Aside, HGroup, Navigatie, Sectie, Koptekst en Voettekst. Zie Semantische elementen van HTML5 invoegen vanuit het deelvenster
Invoegen voor meer informatie.
Div-tags invoegen en bewerken
U kunt paginalay-outs maken door labels voor div-elementen handmatig in te voeren en hierop CSS-positioneringsstijlen toe te passen. De label
voor een div-element is een label waarmee logische scheidingen binnen de inhoud van een webpagina worden gedefinieerd. U kunt labels voor
div-elementen gebruiken om blokken inhoud te centreren, om kolomeffecten te maken, om gebieden met verschillende kleuren aan te brengen en
nog veel meer.
Als u niet vertrouwd bent met het gebruik van labels voor div-elementen 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.
Opmerking: Dreamweaver behandelt alle labels voor div-tags met een absolute positie als AP-elementen (absoluut gepositioneerde elementen),
zelfs als u deze labels voor div-tags niet hebt gemaakt met het gereedschap voor het tekenen van AP Div-elementen.
Labels voor div-tags invoegen
U kunt labels voor div-elementen gebruiken om CSS-lay-outblokken te maken en deze in uw document te positioneren. Dit is handig als u een
bestaande CSS-stijlpagina met positioneringsstijlen aan uw document hebt gekoppeld. Met Dreamweaver kunt u snel de label voor een div-tag
invoegen en bestaande stijlen erop toepassen.
1. Plaats de invoegpositie in het documentvenster op de plaats waar u de label voor een div-element wilt invoegen.
2. Voer een van de volgende handelingen uit:
Selecteer Invoegen > Lay-outobjecten > Div Tag.
Klik in de categorie Lay-out van het paneel Invoegen op de knop Div-tag invoegen .
3. Stel vervolgens de volgende opties naar wens in:
Invoegen Hiermee kunt u de locatie van de tag div en de naam van de tag (als het geen nieuwe tag is) selecteren.
Klasse Hiermee geeft u de klassenstijl weer, die momenteel op de label 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 label voor het div-element 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 label in uw document opgeeft.
Nieuwe CSS-regel Hiermee opent u het dialoogvenster Nieuwe CSS-regel.
4. Klik op OK.
De label voor het div-element wordt als een vak in uw document met de tekst van een tijdelijke aanduiding weergegeven. Als u de
muisaanwijzer over de rand van het vak beweegt, wordt het element door Dreamweaver gemarkeerd.
Als de label voor het div-element absoluut is gepositioneerd, wordt het een AP-element. (U kunt labels voor div-elementen die niet absoluut
zijn gepositioneerd, bewerken.)
Labels voor div-tags bewerken
Nadat u de label voor een div-element hebt ingevoegd, kunt u het element manipuleren of kunt u er inhoud aan toevoegen.
Opmerking: Labels voor div-tags die absoluut zijn gepositioneerd, worden AP-elementen.
Als u randen toewijst aan div-labels of als u Omtrek van CSS-layout hebt geselecteerd, hebben deze elementen zichtbare randen. (Omtrek van
CSS-lay-out wordt standaard geselecteerd in het menu Beeld > Visuele hulpmiddelen.) Als u de muisaanwijzer over de label voor een div-element
beweegt, markeert Dreamweaver de label. U kunt de markeerkleur wijzigen of markeren uitschakelen.
Als u de label voor een div-element selecteert, kunt u regels hiervoor bekijken en bewerken in het deelvenster CSS-stijlen. Ook kunt u inhoud
245