Az elemek és az úszóelemek összehangolása a Dreamweaverben

A tervezők gyakran igazítanak egy képet, a

címkét vagy egy másik elemet egy weboldaltól balra vagy jobbra a Dreamweaverben, majd az elem köré csomagolja a szöveget vagy más tartalmat. A kép az oszlop jobb oldalához igazodik úgy, hogy a szöveg a bal oldalon sorakozik mellé. A következő lépésekben megtudhatja, hogyan hozhat létre ehhez hasonló stílusokat.

Köszönet: Kép az istockphoto.com webhelyről

A CSS számos előnnyel jár, amikor az ehhez hasonló elemek igazításáról van szó, de a stílusok beállítása nem olyan nyilvánvaló, mint elsőre gondolná, mivel a float opciót használja.

Miután megértette, hogy elemeket, például képeket lebegtethet az oldal bal vagy jobb oldalára, meglehetősen könnyű stílusokat létrehozni, amelyek elérik ezt a célt. Ebben a gyakorlatban megtanul két olyan stílust létrehozni, amelyek ideálisak a képek oldal bal és jobb oldalához igazítására, kiegészítve egy kis margóval, ahol szükség van rá.

A Dreamweaver CC-ben található CSS-elrendezések már rendelkeznek lebegőstílusokkal, amelyek segítségével az elemeket jobbra és balra igazíthatja. Ezek az osztálystílusok neve .fltlft (kitaláltad, balra lebeg) és .fltrt (jobbra lebegtetés).

Ha két osztálystílust szeretne létrehozni, amelyek segítségével képeket és egyéb elemeket igazíthat az oldal bal és jobb oldalához, kövesse az alábbi lépéseket:

Kattintson a pluszjelre a CSS Designer Selectors panelen.

Attól függően, hogy mi van az oldalon, egy új stílusnév vagy egy üres mező, ahol megadhatja a stílus nevét, megjelenik a Kijelölők panelen.

Kattintson duplán a Dreamweaver által a panelhez adott név kiválasztásához, és módosítsa az új stílushoz kívánt névre, vagy kattintson az üres mezőre, és írjon be egy nevet.

Ha nem ad hozzá nevet, írja be a kívánt nevet az üres mezőbe. Bármilyen nevet megadhat a stílusnak, de ügyeljen arra, hogy a név elé egy pontot írjon be, ha osztálystílust vagy # jelet hoz létre egy azonosító stílushoz.

Kattintson duplán az új névre, és módosítsa tetszés szerint.

Bár ezeket a stílusokat tetszés szerint elnevezheti, az igazítási stílusokat általában az fltrt és fltlft rövidítésekkel nevezik, amelyek a jobbra és a balra lebegtetést jelentik.

Például, ha létrehoz egy stílust az elemek balra igazításához, akkor azt .fltlft néven kell elneveznie.

A Tulajdonságok panelen kattintson arra az ikonra, amely a Lebegést balra állítja.

A Tulajdonságok panel Margó beállításaival hozzon létre margót a lebegő elem körül.

Jó gyakorlat, ha a lebegőbeállítással ellentétes oldalra margóteret ad. Ha stílust hoz létre a kép balra lebegtetéséhez, adjon hozzá 5 vagy 10 képpontnyi helyet a Jobb margó mezőhöz. Amikor egy képet az oldal bal oldalához igazít, margó jön létre a kép és a kép melletti többi elem között.

Válassza ki az oldalon az igazítani kívánt képet vagy más elemet.

Válassza ki a létrehozott stílus nevét a Tulajdonságvizsgáló Osztály legördülő menüjéből.

A stílus létrehozásakor megadott stílusszabályok automatikusan alkalmazásra kerülnek. Ha egy szövegoldalon választott ki egy képet, akkor a kép az oldal bal oldalára kerül, és a szöveg körbefutna, és a kép és a szöveg között margó található.

Ismételje meg az 1–7. lépéseket, egyszer úgy, hogy a lebegés jobbra van állítva és 5–10 pixel margótér a Left margó mezőben a Box kategóriában, majd ismét úgy, hogy a Lebegés balra van állítva és 5–10 pixel margótér a jobb oldalon. margó mezőt a Doboz kategóriában.