Relatief geplaatste DIV-creatie in Adobe CS5 Dreamweaver - dummies

Adobe Creative Suite 5 (Adobe CS5) Dreamweaver ondersteunt het maken en bewerken van DIV's die relatieve positionering gebruiken . Relatief geplaatste DIV's maken het mogelijk een element te verschuiven samen met de inhoud eromheen, wat zorgt voor een meer vloeibare lay-out. Dit type positionering is belangrijk voor geneste inhoud of elke situatie waarin items in overeenstemming moeten zijn met de inhoud van andere pagina's.

Gebruik het gereedschap Div Tag invoegen, dat u kunt vinden in de algemene en lay-outcategorieën van het deelvenster Invoegen voor het maken of bewerken van een relatief geplaatste DIV.

1. Klik binnen uw pagina om de cursor in een bestaand AP Div-element te plaatsen en klik vervolgens op het hulpmiddel Div Tag invoegen onder de categorieën Common en Layout van het deelvenster Invoegen.

2. Wanneer het dialoogvenster Insert Div Tag verschijnt, stelt u de locatie van uw nieuwe DIV nauwkeurig in door een locatie te selecteren in de vervolgkeuzelijst Insert.

   Kies bijvoorbeeld After Start of Tag om het in een bestaande DIV-tag op uw pagina te plaatsen.

   U kunt ook de vervolgkeuzelijst Diviatags invoegen gebruiken om de DIV vóór, na of in bestaande elementen op de pagina te plaatsen. Laat de vervolgkeuzelijst Invoegen ingesteld op Op invoegpunt om het vak te verlaten waar u het tekende of kies een andere locatie waar u de DIV wilt maken.

   

   Kies een specifieke locatie om de nieuwe DIV te maken en te plaatsen.

1. Als u een bestaande klasse-selector heeft die u wilt toepassen, kiest u deze uit de vervolgkeuzelijst Klasse; anders laat u het leeg.

2. Wijs een ID-selector toe aan de DIV om het uiterlijk ervan te regelen door de ID-vervolgkeuzelijst ID te selecteren.

   Als er geen beschikbaar is, voert u een nieuwe naam in en klikt u op de knop Nieuwe CSS-regel om er een te maken.

3. Wanneer het dialoogvenster Nieuwe CSS-regel verschijnt, zorgt u ervoor dat uw nieuwe selector is ingesteld op ID en dat de naam een ​​hekje (#) ervoor heeft. Klik OK.

4. Wanneer het dialoogvenster CSS-regeldefinitie wordt weergegeven, klikt u op en selecteert u Positie kiezen in de categorielijst aan de linkerkant om CSS-positioneringseigenschappen te bekijken.

5. Selecteer in het gebied Positiebepaling Relatief in het menu Positie, voer een breedte- en hoogtewaarde in de tekstvakken Breedte en Hoogte in en klik vervolgens op OK.

6. Klik op OK om het dialoogvenster Div Tag invoegen te sluiten.

   Er verschijnt een nieuwe, relatief gepositioneerde DIV met tekst voor de plaatsaanduiding.

   

   U kunt een nieuwe DIV maken binnen een andere DIV.