AP Divs Creation i Adobe CS5 Dreamweaver - dummies

Adobe Creative Suite 5 (Adobe CS5) Dreamweaver använder CSS-positionerade virtuella behållare eller lådor, skapade 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. 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. Med AP Div-verktyget kan du rita lådor fritt på sidan och placera innehåll inuti.

AP Div är kort för absolut positionerad DIV; ett objekt med en absolut position är fixerad på en viss plats på sidan. När du ritar en AP-Div, ställs dess läge vanligtvis med de övre och vänstra CSS-egenskaperna, med sidans övre vänstra hörn som referenspunkt.

CSS behandlar varje element på en sida som en låda som innehåller innehåll; kallad CSS Box-modellen. Även om CSS kan överväga att en låda är den mest innehållande delen på en sida (till exempel en tabell eller en lista), används DIV-taggar oftast för att skapa virtuella rutor som du kan använda för att placera text, bilder och till och med andra lådor.

Varje ruta kan ha sin egen bredd, höjd, position (via de övre och vänstra egenskaperna), kant, marginal och vaddering varje är inställd med CSS-regler.

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

2. Välj Draw AP Div-verktyget.

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

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

   

   Klicka och dra sidan med Draw AP Div-verktyget för att skapa en ruta.

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

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

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

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

8. 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 sätter Dreamweaver in en tagg för att skapa rutan och skapar en 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 det. Du kan också tilldela en klassregel till någon DIV från egenskapsinspektören.

Varje AP Div du ritar är listad automatiskt i AP Elements-panelen (välj Fönster → AP-element för att visa den. AP-panelen kan hjälpa dig att välja, dölja och visa några AP-Divs på sidan.

Använd AP-panelen för att välja, dölja och omordna AP Divs på din sida.