MENU
 
Home
Nieuwsbrief
GC in de media
SiteMap
 
Tips en Tricks
Excel
Word
Photoshop
PowerPoint
Surf Tips
Gmail
Android
iPad
Excel ClipTips
 
cursus Office 2016
Access
Excel
Outlook
PowerPoint
Word
 
cursus Office 2013
Excel
PowerPoint
Word
Nieuw in Excel 2013
Nieuw in Word 2013
Nieuw in PowerPoint 2013
 
cursus Office 2010
Access
Nieuw in Excel 2010
Excel automatiseren
Excel
OneNote
Outlook
PowerPoint
Word
 
cursus Office 2007
Access
Excel
Outlook
PowerPoint
Publisher
Visio
Word
 
cursus Office
2000-2002-2003-XP
Access
Excel
PowerPoint
Outlook
Word
 
cursus Photoshop
CC -3D
Animatie
CS6
CS5
CS4
CS2 - CS3
Lightroom 3
Elements 6
Mask Pro
Nik Collection
 
cursus Dreamweaver
CS3
 
cursus Illustrator
CS4
 
cursus Flash
CS4
 
cursus Fireworks
CS4
 
cursus Paint Shop Pro
X en X2
 
cursus Premiere
Elements 7-8
 
cursus Joomla
Joomla 1.5
 
Sociale Netwerk sites
Facebook
LinkedIn
Twitter
 
iPad
Apps
 
Diversen
Celtx
CSS
DropBox
Firefox 3.6
GIMP
Internet Explorer 9
LIME
Linux
OpenSUZE
PREZI
ProShow Producer
YouTube
 
cursus Google
Agenda
Analytics
Gmail
Zoeken
Picasa 3
SketchUp
Chrome
Street View
 
cursus Windows
Live Movie Maker
Windows 10
Windows 8
Windows 7
XP
Vista
 
cursus Office '97
Word
Excel
 
 
>

 

Cursus Dreamweaver   Index - vorige - volgende
       
Les 34 Het tabblad Lay-out (2)  
     
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..
style="display:inline-block;width:120px;height:90px" >
 
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.
 
 
Index - vorige - volgende

copyright © 2012 - gratiscursus.be

>