Hvordan du oppretter relativt posisjonerte DIVer i Adobe Dreamweaver CS6 - dummies

Posisjonering og plassering av AP (Absolutt-Posisjonert) Divs i Adobe Dreamweaver CS6 kan være ganske frigjørende for designere, spesielt de som liker fleksibiliteten til utskriftsbaserte oppsett.

Det kan imidlertid hende at du kanskje vil at bokser skal flyte i linje med annet innhold på siden. AP Divs flyter over andre elementer, slik at skifting av annet sideinnhold ikke har noen effekt på deres posisjon, noe som kan være en god eller en dårlig ting.

For mer tradisjonell inlineadferd kan du opprette DIVer som bruker relativ posisjonering . Dette gjør at et element kan skiftes sammen med innhold som omgir det, noe som gjør for et mer flytende layout. Denne typen posisjonering er viktig for nestet innhold eller en situasjon der elementer skal falle i tråd med annet sideinnhold.

For denne oppgaven, bruk Insert Div Tag-verktøyet, som du finner i Innlegg-panelets Vanlige og Layout-kategorier.

Følg disse trinnene for å opprette en relativt plassert DIV:

1. Klikk på siden din for å plassere markøren i en eksisterende AP Div, og klikk deretter på Insert Div Tag-verktøyet under Sett inn panelets Common og Layout kategorier.

2. Når dialogboksen Sett inn div-merkeliste vises, finjusterer du plasseringen til den nye DIV-en din ved å velge et sted fra rullegardinlisten Sett inn.

   Velg for eksempel Etter start av tag for å plassere den i en eksisterende DIV-tag på siden din.

   Du kan også bruke rullegardinlisten Insert Div Tag-dialogboksen til å plassere DIV før, etter eller inne i eksisterende elementer på siden. Legg inn rullegardinlisten Sett inn på Innsettingspunkt for å forlate boksen der du trakk det, eller velg et annet sted der du vil at DIV er opprettet.

   

3. Hvis du har en eksisterende klasseväljare du vil bruke, velger du den fra rullegardinlisten Klasse; Ellers, la det være tomt.

4. Hvis en eksisterende ID ikke er tilgjengelig, skriv inn et nytt navn i ID-feltet og klikk på Ny CSS Rule-knappen for å opprette en.

5. Når dialogboksen Ny CSS-regel vises, må du være sikker på at den nye velgeren er satt til ID, og ​​at navnet har et pundstegn (#) foran den. Klikk på OK.

6. Når dialogboksen CSS-regeldefinisjon vises, klikker du og velger Posisjonering fra kategorilisten til venstre for å vise CSS-posisjoneringsegenskaper.

7. I posisjoneringsområdet velger du Relativ fra Posisjonsmenyen, angir en bredde- og høydeverdi i tekstboksen Bredde og Høyde, og angir en topp- og venstreverdi under posisjoneringsegenskapene.Klikk på OK.

8. Klikk på OK for å lukke dialogboksen Sett inn div-tagg.

   En ny, relativt posisjonert DIV vises med plassholdertekst.

   

De øverste og venstre verdiene oppfører seg litt annerledes for absolutt versus relativt posisjonerte DIVs. Ved relativ posisjonering angir disse verdiene en forskyvning fra omgivende innhold, i motsetning til en settposisjon på siden.