AP div tag

Het verschil tussen een div-tag en een AP div-tag is dat je een AP div tag een absolute positionering geeft op de pagina.
Het voordeel hiervan is dat, ongeacht de grootte van de monitor van de bezoeker van je site, de AP div tags op de positie blijven staan waar je deze hebt geplaatst.
Het nadeel van een AP div is wanneer je deze wil centreren op de pagina, dit is zo goed als onmogelijk. Dus gebruik enkel een AP div tag wanneer je zeker bent over de positie hiervan.

Om een AP div-tag toe te voegen aan je pagina klik je de knop “AP Div tekenen” in de werkbalk.
Klik en sleep op de plaats in je document waar je deze wil hebben.
Je kunt de afmetingen steeds wijzigen in het eigenschappenvenster, of door te klikken en te slepen met de blokjes aan de rand van de AP div-tag.
Om de positie te wijzigen klik en sleep je met het icoontje in de linkerbovenhoek van de AP div-tag, of gebruik je de invulvakken “L” en “T” in het eigenschappenvenster.

Om een afbeelding in een AP div-tag in te voegen plaats je de cursor in de div-tag, en klik je “Invoegen” in de menubalk. Kies “Afbeelding” in het drop-downmenu, en navigeer naar de afbeelding op je harddisk. Selecteer deze en klik OK.
Staat je afbeelding reeds in je site-map, kan je deze klikken en slepen naar de AP Div-tag.
Om tekst toe te voegen plaats je de cursor in de AP Div-tag en begin je te typen.

Wanneer je werkt met verschillende AP Div-tags in je document hebben deze allen een Z-waarde.
Dit kan je zien in het deelvenster AP-elementen.
De Z-waarde bepaalt de positie van de AP Div-tag in de diepte.
Vergelijk het met lagen in Photoshop. Trouwens in eerdere versies van Dreamweaver noemden dit ook lagen.

Wijzig je deze waarde, dan zal ook de positie (lees diepte) van deze AP Div-tag wijzigen.
Een tweede manier om de diepte van een AP div-tag te wijzigen, is door deze te klikken en te slepen in het deelvenster AP-elementen, naar de positie die je wenst.

Absoluut naar relatief

Een AP div tag centreren op onze pagina is onmogelijk.
Wat we wel kunnen doen is bijvoorbeeld een absolute div tag relatief maken tegenover een gecentreerde div tag.

Hiervoor moeten we twee dingen doen.
De eerste is in onze broncode de absolute div tag (<div id=”absoluut”></div>) in de div tag plaatsen van de gecentreerde div (<div id=”container”></div>).

Dubbelklik daarna de absolute div tag in het deelvenster CSS-stijlen.

Dit opent het dialoogvenster “Definitie van CSS-regel”.
Kies de categorie “Positioneren”, en in het vak ‘Type:” kies je de optie “relatief”.
Voor het invullen van de sectie “Plaatsing” moet je een beetje rekenen wens je de absolute div in het midden van de pagina te krijgen.
Dit komt omdat de absolute div-tag zich nu niet meer positioneert op de pagina maar op de “container” div.
Klik de knop OK wanneer je klaar bent. Niet getreurd, je kan dit later mocht blijken dat de positie toch niet naar je wensen is, steeds wijzigen door de absolute div tag, of beter gezegd de relatieve div tag, te dubbelklikken in het deelvenster..

Zoals je kunt zien in onderstaande afbeelding is het veld “position” in het deelvenster “Eigenschappen voor #absoluut” nu gewijzigd in relatief.

Bekijk je deze pagina nu in je Browservenster, zul je zien dat de AP div tag, die wel is gewijzigd in een relatieve div tag nu ook zal gecentreerd worden weergegeven.

Cursussen

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats