Absolute-Positioned (AP) Div-ek létrehozása az Adobe Dreamweaver CS6-ban

Az Adobe Dreamweaver CS6 CSS-vezérelt virtuális konténereket vagy dobozokat használ , amelyeket a DIV címke hoz létre a tartalom szabad elhelyezéséhez az oldalon. A DIV címke egy alapvető címke, amellyel tartalomterületeket hozhat létre az oldalon.

A Dreamweaverben több helyről is létrehozhat DIV címkéket, beleértve a Beszúrás panel Elrendezés szakaszát. Minden DIV címkéhez egyedi azonosító stílus rendelhető, amely szabályozza a pozícióját, megjelenését és méretét. A tartalom elhelyezésének folyamata gyakran két lépést igényel: a DIV címke létrehozása, majd a megfelelő stílus létrehozása.

A Dreamweaver megkönnyíti ezt a feladatot az AP Div eszközzel, amely lehetővé teszi, hogy szabadon rajzoljon dobozokat az oldalra, és helyezzen el benne tartalmat.

A CSS az oldal legtöbb konténerelemét dobozként kezeli ; ez a CSS Box-modellként emlegetett megközelítés lehetővé teszi, hogy ezek az elemek egységes tulajdonságokat, például kitöltést, margókat, szélességet, magasságot és szegélyeket osztozzanak meg.

Bár a CSS az oldalon található legtöbb elemet képes mezőnek tekinteni (például táblázatnak vagy listának), a DIV címkéket leggyakrabban virtuális dobozok létrehozására használják, amelyek segítségével szövegeket, képeket vagy akár beágyazott mezőket helyezhet el.

Minden doboznak megvan a maga szélessége, magassága, pozíciója (a felső és bal oldali tulajdonságokon keresztül), szegélye, margója és kitöltése; mindegyik a megfelelő CSS-tulajdonságokkal van beállítva.

AP (abszolút pozicionált) osztások létrehozásához kövesse az alábbi lépéseket:

Hozzon létre egy új oldalt, vagy nyisson meg egy meglévő oldalt a webhelyéről.

A Beszúrás panelen válassza ki az Elrendezés kategóriát.

Válassza ki a Draw AP Div eszközt.

A kurzor hajszálkeresztként jelenik meg, ha visszamozgatja az oldalon.

Kattintson az oldal tetszőleges részére, és húzza az új AP Div-t; engedje fel az egérgombot.

Vigye az egérmutatót a doboz széle fölé, amíg az négyirányú nyíllá nem változik; kattintson egyszer, és fogantyúk jelennek meg minden oldalon.

Kattintson és húzza a fogantyúk bármelyikét a doboz függőleges vagy vízszintes átméretezéséhez.

A doboz áthelyezéséhez kattintson rá, és húzza a bal felső szélén lévő fülnél fogva, és helyezze a dobozt a kívánt helyre az oldalon.

Vessen egy pillantást az ingatlanfelügyelőre, és látni fogja a nevet, valamint számos DIV-tulajdont.

Ha a CSS-stílusok panel nincs megnyitva, válassza az Ablak→CSS-stílusok menüpontot a megnyitásához; az Összes panel alatt kattintson a stíluslap bal oldalán (

Kattintson az új mezőbe új tartalom beírásához, beillesztéséhez vagy beszúrásához.

Amikor egy AP Div-t rajzol az oldalra, két dolog történik: a Dreamweaver beszúr egy címkét a doboz létrehozásához, és létrehoz egy CSS-azonosító választót, amely tárolja a DIV pozícióját, szélességét, magasságát és egyéb tulajdonságait.

Az AP Div létrehozása után beírhat, beilleszthet vagy beszúrhat tartalmat közvetlenül abba. Osztályszabályt is hozzárendelhet bármely DIV-hez a Tulajdonságvizsgálóból – leggyakrabban a tartalom formázásának kezelésére, az azonosító választóra bízva a pozicionálást és a méreteket.