Slik lager du Absolutt-Posisjonert (AP) Divs i Adobe Dreamweaver CS6 - Dummies

Adobe Dreamweaver CS6 bruker CSS-kontrollerte virtuelle beholdere, eller bokser, opprettet av DIV-taggen for å plassere innhold på en side fritt. DIV -taggen er en grunnleggende kode som brukes til å opprette områder for innhold på siden din.

Du kan opprette DIV-tagger fra flere steder i Dreamweaver, inkludert Layout-delen av Insert-panelet. Hver DIV-tag kan ha en unik ID-stil som er tildelt den til å kontrollere sin posisjon, utseende og størrelse. Prosessen med å plassere innhold krever ofte to trinn: Opprett DIV-taggen og opprett den tilsvarende stilen.

Dreamweaver gjør denne oppgaven enkel med AP Div-verktøyet, som lar deg tegne bokser fritt på siden og plassere innhold inni.

CSS behandler de fleste containerelementene på en side som bokser ; Denne tilnærmingen, referert til som CSS Box-modellen , gjør det mulig for disse elementene å dele enhetlige egenskaper som polstring, marginer, bredde, høyde og grenser.

Selv om CSS kan betrakte det meste som inneholder element på en side som en boks (for eksempel et bord eller en liste), brukes DIV-koder mest til å lage virtuelle bokser som du kan bruke til å plassere tekst, bilder og til og med nestet esker.

Hver boks kan ha sin egen bredde, høyde, posisjon (via topp og venstre egenskaper), kantlinje, marginer og polstring; hver enkelt er satt ved hjelp av de riktige CSS egenskapene.

For å opprette AP (Absolutt-Posisjonert) Divs, følg disse trinnene:

1. Opprett en ny side eller åpne en eksisterende side fra nettstedet ditt.

2. På innsettingspanelet velger du kategorien Layout.

3. Velg Draw AP Div-verktøyet.

   Markøren vises som et krysshår når du flytter det tilbake over siden.

4. Klikk hvor som helst på siden og dra for å tegne en ny AP Div; slipp museknappen.

   

5. Flytt musepekeren over kanten av boksen til den endres til en 4-veis pil; Klikk en gang og håndtak vises på alle sider.

6. Klikk og dra noen av disse håndtakene for å endre størrelsen på boksen vertikalt eller horisontalt.

7. For å flytte boksen, klikk og dra den på fanen som sitter øverst til venstre, og plasser boksen der du vil ha den på siden.

   Ta en titt på eiendomsinspektøren, og du ser navnet så vel som mange DIV-egenskaper som er oppført.

8. Hvis CSS-stilpanelet ikke er åpent, velger du Vindu → CSS-stiler for å åpne det; Under Alle-panelet klikker du til venstre for stilarket () for å utvide det.

   Du ser en ny # apDiv1 ID-stil som er knyttet til den nye AP Div du opprettet. For hver ny DIV opprettet, tilordner Dreamweaver apDiv med et tilsvarende nummer i rekkefølge av opprettelsen.

   

9. Klikk i den nye boksen for å skrive inn, lime inn eller sette inn nytt innhold.

Når du tegner en AP Div på siden, oppstår to ting: Dreamweaver setter inn en tag for å lage boksen og oppretter en CSS ID-selector som lagrer DIVs posisjon, bredde, høyde og andre egenskaper.

Når du har opprettet en AP Div, kan du skrive inn, lime inn eller sette inn innhold direkte i det. Du kan også tilordne en klasseregel til noen DIV fra egenskapsinspektøren - oftest for å håndtere innholdsformatering, og la ID-väljeren kontrollere posisjonering og dimensjoner.