Hur man skapar relativt positionerade DIV i Adobe Dreamweaver CS6 - dummies

Precisions- och pixelpositioneringen av AP (Absolut-Positioned) Divs i Adobe Dreamweaver CS6 kan vara ganska befriande för designers, särskilt de som gillar flexibiliteten hos utskriftsbaserade layouter.

Vid vissa tillfällen kanske du vill att rutorna ska flöda inline med annat innehåll på sidan. AP Divs flyter över andra element, så att byta annat sidinnehåll har ingen inverkan på deras position, vilket kan vara bra eller dåligt.

För mer traditionellt inline-beteende kan du skapa DIV-enheter som använder relativ positionering . Detta gör att ett element kan förskjutas tillsammans med innehållet som omger det, vilket ger en mer flytande layout. Denna typ av positionering är viktig för kapslade innehåll eller alla situationer där objekt ska falla i linje med annat sidinnehåll.

För den här uppgiften använder du Insert Div Tag-verktyget, som du hittar i Inlägg-panelens Vanliga och Layout-kategorier.

Följ dessa steg för att skapa en relativt placerad DIV:

1. Klicka på din sida för att placera markören i en befintlig AP Div och klicka sedan på Insert Div Tag-verktyget under Infoga panelens gemensamma och Layout kategorier.

2. När dialogrutan Insert Div Tag visas, finjustera platsen för din nya DIV genom att välja en plats från listrutan Infoga.

   Välj till exempel efter Start av tagg för att placera den i en befintlig DIV-tagg på din sida.

   Du kan också använda dialogrutan Infoga div-tagg i rullgardinsmenyn för att placera DIV före, efter eller inne i befintliga element på sidan. Lämna listrutan Infoga inställd till Vid infogningspunkt för att lämna rutan där du ritade den eller välj en annan plats där du vill skapa DIV.

   

3. Om du har en befintlig klassväljare som du vill tillämpa, välj den från rullgardinsmenyn Klass; Annars, lämna det tomt.

4. Om ett befintligt ID inte är tillgängligt anger du ett nytt namn i fältet ID och klickar på knappen Ny CSS Rule för att skapa en.

5. När dialogrutan Ny CSS-regel visas, var noga med att din nya väljare är inställd på ID och att namnet har ett pundtecken (#) framför det. Klicka på OK.

6. När dialogrutan CSS Rule Definition visas, klickar du på och väljer Positionering från kategorilistan till vänster för att visa CSS-positionsegenskaper.

7. I positioneringsområdet, välj Relativ från Position-menyn, ange ett bredd- och höjdvärde i rutorna Bredd och Höjd och ange ett topp- och vänstervärde under positioneringsegenskaperna.Klicka på OK.

8. Klicka på OK för att stänga dialogrutan Infoga div Tag.

   En ny, relativt placerad DIV visas med platshållartekst.

   

Värdena Top och Vänster beter sig något annorlunda för absoluta kontra relativt placerade DIV. I fråga om relativ positionering anger dessa värden en förskjutning från omgivande innehåll, i motsats till en inställd position inom sidan.