AP Divs Creation i Adobe CS5 Dreamweaver - dummies

Adobe Creative Suite 5 (Adobe CS5) Dreamweaver bruker CSS-posisjonerte virtuelle beholdere eller bokser, opprettet ved 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. 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. AP Div-verktøyet lar deg tegne bokser fritt på siden og plassere innhold inni.

AP Div er kort for absolutt posisjonert DIV; et element med en absolutt posisjon er festet til et bestemt sted på siden. Når du tegner en AP Div, blir dens posisjon vanligvis satt ved hjelp av de øverste og venstre CSS-egenskapene, med øverste venstre hjørne av siden som referansepunkt.

CSS behandler hvert element på en side som en boks som inneholder innhold; referert til som CSS Box-modellen. Selv om CSS kan vurdere en boks som det meste av innholdet på en side (for eksempel et bord eller en liste), brukes DIV-koder oftest til å lage virtuelle bokser som du kan bruke til å plassere tekst, bilder og til og med andre bokser.

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

1. På innsettingspanelet velger du kategorien Layout.

2. Velg Draw AP Div-verktøyet.

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

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

   

   Klikk og dra siden med Draw AP Div-verktøyet for å lage en boks.

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

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

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

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

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

Når du tegner en AP Div på siden, legger Dreamweaver inn en kode for å lage boksen og oppretter en ID-velger som lagrer DIVs posisjon, bredde, høyde og andre egenskaper. Når du har opprettet en AP Div, kan du skrive, lime inn eller sette inn innhold direkte i det. Du kan også tilordne en klasseregel til noen DIV fra eiendomsinspektøren.

Hver AP Div du tegner, blir oppført automatisk i AP Elements-panelet (velg Window → AP Elements for å vise det. AP Elements-panelet kan hjelpe deg å velge, skjule og vise noen AP Divs på siden.

Bruk AP-elementpanelet for å velge, skjule og omorganisere AP Divs på siden din.