I Adobe Dreamweaver CS6 - dummies

Adobe Dreamweaver CS6 använder CSS-kontrollerade virtuella behållare, eller lådor, skapad av DIV-taggen för att fritt placera innehåll på en sida. Taggen DIV är en grundläggande tagg som används för att skapa områden för innehåll på din sida.

Du kan skapa DIV-taggar från flera ställen i Dreamweaver, inklusive Layout-delen i Insert-panelen. Varje DIV-tagg kan ha en unik ID-stil tilldelad den för att styra dess position, utseende och storlek. Processen med att placera innehåll kräver ofta två steg: skapa DIV-taggen och skapa dess motsvarande stil.

Dreamweaver gör den här uppgiften enkelt med AP Div-verktyget, vilket gör att du kan rita lådor fritt på sidan och placera innehåll på insidan.

CSS behandlar de flesta behållarelementen på en sida som lådor ; Detta tillvägagångssätt, kallat CSS Box-modellen , gör det möjligt för dessa element att dela enhetliga egenskaper som vaddering, marginaler, bredd, höjd och gränser.

Även om CSS kan betrakta det mesta som innehåller innehåll på en sida som en ruta (t.ex. en tabell eller en lista) används DIV-taggar oftast för att skapa virtuella lådor som du kan använda för att placera text, bilder och till och med nestade lådor.

Varje ruta kan ha sin egen bredd, höjd, position (via de övre och vänstra egenskaperna), kant, marginal och vaddering var och en är inställd med hjälp av lämpliga CSS-egenskaper.

Så här skapar du divisionsavdelningar (Absolute-Posed): Följande steg gör du:

1. Skapa en ny sida eller öppna en befintlig sida från din webbplats.

2. På Layout-panelen väljer du Layout-kategorin.

3. Välj Draw AP Div-verktyget.

   Markören visas som ett korshår när du flyttar det tillbaka över sidan.

4. Klicka var som helst på sidan och dra för att rita en ny AP Div; släpp musknappen.

   

5. Flytta muspekaren över kanten av rutan tills den ändras till en fyrvägspil; klicka en gång och handtag visas på alla sidor.

6. Klicka och dra någon av dessa handtag för att ändra storlek på rutan vertikalt eller horisontellt.

7. För att flytta rutan, klicka och dra den på fliken som sitter längst upp till vänster och placera rutan där du vill ha den på sidan.

   Ta en titt på egenskapsinspektören, och du ser namnet såväl som många DIV-egenskaper som listas.

8. Om panelen CSS Styles inte är öppen väljer du Fönster → CSS Styles för att öppna den; Under panelen Alla, klicka till vänster om stilarket () för att expandera det.

   Du ser en ny # apDiv1 ID-stil som är kopplad till den nya AP Div du skapade. För varje ny DIV skapad, tilldelar Dreamweaver apDiv med ett motsvarande nummer i ordningens ordning.

   

9. Klicka in i den nya rutan för att skriva, klistra in eller infoga nytt innehåll.

När du ritar en AP Div på sidan uppstår två saker: Dreamweaver sätter in en tagg för att skapa rutan och skapar en CSS ID-väljare som lagrar DIV: s position, bredd, höjd och andra egenskaper.

När du har skapat en AP Div kan du skriva, klistra in eller infoga innehåll direkt inuti den. Du kan också tilldela en klassregel till någon DIV från egenskapsinspektören - oftast för hantering av innehållsformatering, vilket lämnar ID-väljaren för att styra positionering och dimensioner.