Hoe u absoluut geplaatste (AP) divs kunt maken in Adobe Dreamweaver CS6 - dummies

Adobe Dreamweaver CS6 gebruikt door CSS gestuurde virtuele containers of vakken die door de DIV-tag zijn gemaakt om inhoud op een pagina vrij te positioneren. De DIV -tag is een basistag die wordt gebruikt om gebieden voor inhoud op uw pagina te maken.

U kunt DIV-labels maken op verschillende plaatsen in Dreamweaver, inclusief het gedeelte Lay-out van het paneel Invoegen. Aan elke DIV-tag kan een unieke ID-stijl worden toegewezen om de positie, het uiterlijk en de grootte ervan te bepalen. Het plaatsen van inhoud vereist vaak twee stappen: de DIV-tag maken en vervolgens de bijbehorende stijl maken.

Dreamweaver maakt deze taak eenvoudig met de AP Div-tool, waarmee je vakken vrij kunt tekenen op de pagina en inhoud erin kunt plaatsen.

CSS behandelt de meeste containerelementen op een pagina als vakken ; deze benadering, aangeduid als het CSS Box-model , maakt het voor deze elementen mogelijk uniforme eigenschappen te delen, zoals vulling, marges, breedte, hoogte en randen.

Hoewel CSS het grootste deel van elk element op een pagina kan zien als een vak (zoals een tabel of een lijst), worden DIV-tags meestal gebruikt om virtuele kaders te maken die u kunt gebruiken om tekst, afbeeldingen en zelfs geneste tekst te plaatsen dozen.

Elke doos kan zijn eigen breedte, hoogte, positie (via de bovenste en linker eigenschappen), rand, marges en opvulling hebben; elke wordt ingesteld met behulp van de juiste CSS-eigenschappen.

Ga als volgt te werk om AP (Absolute Positioned) Divs te maken:

1. Maak een nieuwe pagina of open een bestaande pagina van uw site.

2. Selecteer de categorie Lay-out in het deelvenster Invoegen.

3. Selecteer het hulpmiddel Draw AP Div.

   De cursor verschijnt als een kruishaar wanneer u deze over de pagina verplaatst.

4. Klik ergens op de pagina en sleep om een ​​nieuw AP Div-element te tekenen; laat de muisknop los.

   

5. Plaats de muisaanwijzer op de rand van het vak totdat deze verandert in een pijl met 4 richtingen; klik eenmaal en grepen verschijnen aan alle kanten.

6. Klik en sleep een van deze handvatten om de grootte van het kader verticaal of horizontaal aan te passen.

7. Als u het vak wilt verplaatsen, klikt en sleept u het naar het tabblad dat zich op de linkerbovenrand bevindt en plaatst u het vak waar u het op de pagina wilt plaatsen.

   Bekijk de eigenschappencontrole en u ziet de naam evenals vele DIV-eigenschappen.

8. Als het deelvenster CSS-stijlen niet is geopend, kiest u Venster → CSS-stijlen om het te openen; Klik onder het deelvenster Alles aan de linkerkant van het stijlblad () om het uit te vouwen.

   U ziet een nieuwe # apDiv1 ID-stijl die is gekoppeld aan het nieuwe AP Div-element dat u hebt gemaakt. Voor elke nieuwe DIV die wordt gemaakt, wijst Dreamweaver apDiv toe met een overeenkomstig nummer in volgorde van creatie.

   

9. Klik in het nieuwe vak om nieuwe inhoud te typen, te plakken of in te voegen.

Wanneer u een AP Div op de pagina tekent, gebeuren er twee dingen: Dreamweaver voegt een tag in om het kader te maken en maakt een CSS ID selector waarin de positie, breedte, hoogte en andere eigenschappen van de DIV worden opgeslagen.

Nadat u een AP Div-div zijn gemaakt, kunt u de inhoud er direct in typen, plakken of invoegen. U kunt ook een klassenregel toewijzen aan een DIV uit de eigenschappencontrole - meestal voor het verwerken van inhoudsformattering, waarbij u de ID-selector overlaat om de positionering en dimensies te regelen.