AP Divs Creation in Adobe CS5 Dreamweaver - dummies

Adobe Creative Suite 5 (Adobe CS5) Dreamweaver gebruikt door CSS gepositioneerde virtuele containers of vakken, door de DIV-tag om inhoud vrijelijk op een pagina te plaatsen. De DIV -tag is een basistag die wordt gebruikt om gebieden voor inhoud op uw pagina te maken. 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. Met de AP Div-tool kun je vakken vrij op de pagina tekenen en de inhoud erin plaatsen.

AP Div is een afkorting van absoluut gepositioneerd DIV; een item met een absolute positie wordt vastgesteld op een specifieke locatie op de pagina. Wanneer u een AP Div Divisie tekent, wordt de positie ervan meestal ingesteld met behulp van de CSS-kenmerken boven en links, met de linkerbovenhoek van de pagina als referentiepunt.

CSS behandelt elk element op een pagina als een vak dat inhoud bevat; aangeduid als het CSS Box-model. Hoewel CSS een vak als het meest omvattende element op een pagina kan beschouwen (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 andere vakken.

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

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

2. Selecteer het hulpmiddel Draw AP Div.

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

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

   

   Klik en sleep de pagina met het Draw AP Div-hulpmiddel om een ​​kader te maken.

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

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

6. 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.

7. 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.

8. 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, voegt Dreamweaver een tag in om het kader te maken en wordt een ID-selector gemaakt 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 in de eigenschappencontrole.

Elke AP Div-lijn die u tekent, wordt automatisch weergegeven in het paneel AP-elementen (kies Venster → AP-elementen om het weer te geven.) Het paneel AP-elementen kan u helpen bij het selecteren, verbergen en weergeven van AP Divs op de pagina. het paneel AP-elementen om AP Div's op uw pagina te selecteren, te verbergen en opnieuw in te delen.