Sådan skaber du relativt positionerede DIV'er i Adobe Dreamweaver CS6 - dummies

Positioneringen af ​​AP (Absolut-Positioned) i Adobe Dreamweaver CS6 kan være helt befriende for designere, især dem der kan lide fleksibiliteten i printbaserede layouter.

Men i visse tilfælde vil du måske have, at kasser flyder inline med andet indhold på siden. AP Divs flyder over andre elementer, så skiftende andet sideindhold har ingen effekt på deres position, hvilket kan være en god eller en dårlig ting.

For mere traditionel inlineadfærd kan du oprette DIV'er, der bruger relativ positionering . Dette gør det muligt at flytte et element sammen med det indhold, der omgiver det, hvilket giver et mere flydende layout. Denne type positionering er vigtig for indlejret indhold eller enhver situation, hvor elementer skal falde i tråd med andet sideindhold.

Til denne opgave skal du bruge værktøjet Indsæt div Tag, som du finder i Indsæt-panelets Fælles og Layout-kategorier.

Følg disse trin for at oprette en relativt positioneret DIV:

1. Klik på din side for at placere markøren inden for en eksisterende AP Div, og klik derefter på Insert Div Tag-værktøjet under Insert panelets Common og Layout Kategorier.

2. Når dialogboksen Indsæt div-mærke vises, skal du finjustere placeringen af ​​din nye DIV ved at vælge en placering fra rullelisten Indsæt.

   Vælg efter eksempel Start af tag for at placere det inden for et eksisterende DIV-tag på din side.

   Du kan også bruge dialogboksen Indsæt div Tag-dialogboksen til at placere DIV før, efter eller inde i eksisterende elementer på siden. Forlad rullegardinlisten Indsæt sat til På Indsætningssted for at forlade kassen, hvor du tegnede den, eller vælg et andet sted, hvor du vil have DIV oprettet.

   

3. Hvis du har en eksisterende klassevælger, du vil anvende, skal du vælge den fra rullelisten Klasse; Ellers, lad det være tomt.

4. Hvis et eksisterende ID ikke er tilgængeligt, skal du indtaste et nyt navn i id-feltet og klikke på knappen Ny CSS-regel for at oprette en.

5. Når dialogboksen Ny CSS-regel vises, skal du være sikker på, at din nye vælger er indstillet til ID, og ​​at navnet har et pundskilt (#) foran det. Klik på OK.

6. Når dialogboksen CSS-regelsæt vises, skal du klikke og vælge Positionering fra kategoristilen til venstre for at få vist CSS-positioneringsegenskaber.

7. I positioneringsområdet skal du vælge Relativ fra positionsmenuen, indtaste en bredde- og højdeværdi i tekstfeltene Bredde og Højde og indtaste en top og venstre værdi under positioneringsegenskaberne.Klik på OK.

8. Klik på OK for at lukke dialogboksen Indsæt div Tag.

   En ny, relativt positioneret DIV vises med pladsholdertekst.

   

De øverste og venstre værdier opfører sig lidt anderledes for absolutte versus relativt positionerede DIV'er. I tilfælde af relativ positionering angiver disse værdier en forskydning fra omgivende indhold, i modsætning til en indstillet position inden for siden.