Elementtien kohdistaminen kellukkeiden kanssa Dreamweaverissa

Suunnittelijat kohdistavat usein kuvan, a

-tunnisteen tai muun Web-sivun vasemmalla tai oikealla puolella olevaa elementtiä Dreamweaverissa ja kääri sitten teksti tai muu sisältö kyseisen elementin ympärille. Kuva on tasattu sarakkeen oikealle puolelle siten, että teksti rivittyy sen viereen vasemmalle. Seuraavissa vaiheissa opit luomaan tämän kaltaisia ​​tyylejä.

Luotto: Kuva istockphoto.com-sivustolta

CSS tarjoaa monia etuja, kun kyse on tällaisten elementtien kohdistamisesta, mutta tapa, jolla asetat nämä tyylit, ei ole niin ilmeinen kuin aluksi voisi odottaa, koska käytät float-vaihtoehtoa.

Kun ymmärrät, että voit kelluttaa elementtejä, kuten kuvia, sivun vasemmalle tai oikealle puolelle, on melko helppoa luoda tyylejä, jotka saavuttavat tämän tavoitteen. Tässä harjoituksessa opit luomaan kaksi tyyliä, jotka sopivat ihanteellisesti kuvien kohdistamiseen sivun vasemmalle ja oikealle puolelle, täydennettynä pienellä marginaalilla juuri sinne, missä sitä tarvitset.

Dreamweaver CC:n CSS-asetteluissa on jo float-tyylejä, joita voit käyttää elementtien tasaamiseen oikealle ja vasemmalle. Nämä luokkatyylit ovat nimeltään .fltlft (arvasit, float vasemmalle) ja .fltrt (kellus oikealle).

Voit luoda kaksi luokkatyyliä, joita voit käyttää kuvien ja muiden elementtien tasaamiseen sivun vasemmalle ja oikealle puolelle, seuraavasti:

Napsauta plusmerkkiä CSS Designer Selectors -paneelissa.

Riippuen siitä, mitä sivulla on, Valitsijat-paneeliin lisätään uusi tyylinimi tai tyhjä kenttä, johon voit kirjoittaa tyylin nimen.

Kaksoisnapsauta valitaksesi nimen, jonka Dreamweaver lisäsi paneeliin, ja muuta se uudelle tyylillesi haluamasi nimeksi, tai napsauta tyhjää kenttää ja anna nimi.

Jos nimeä ei ole lisätty, kirjoita haluamasi nimi tyhjään kenttään. Voit nimetä tyylin mitä tahansa, mutta muista kirjoittaa piste ennen nimeä, jos luot luokkatyylin tai #-merkin tunnustyylille.

Kaksoisnapsauta uutta nimeä ja muokkaa sitä haluamallasi tavalla.

Vaikka voit nimetä nämä tyylit haluamallasi tavalla, kohdistustyylit nimetään yleensä lyhenteillä fltrt ja fltlft, jotka tarkoittavat vastaavasti float right ja float left.

Jos esimerkiksi luot tyylin kohdistaaksesi elementit vasemmalle, annat sille nimeksi .fltlft.

Napsauta Ominaisuudet-paneelissa kuvaketta, joka asettaa Float-asetuksen vasemmalle.

Käytä Ominaisuudet-paneelin Marginaali-asetuksia luodaksesi marginaalin kelluvan elementin ympärille.

On hyvä käytäntö lisätä marginaalitilaa float-asetuksen vastakkaiselle puolelle. Jos luot tyylin kelluttamaan kuvaa vasemmalle, lisää 5 tai 10 pikseliä tilaa Oikean marginaalin kenttään. Kun kohdistat kuvan sivun vasempaan reunaan, kuvan ja minkä tahansa muun kuvan viereen kietoutuvan elementin väliin luodaan marginaali.

Valitse kuva tai muu elementti, jonka haluat tasata sivulla.

Valitse luomasi tyylin nimi ominaisuusasetusten avattavasta Luokka-valikosta.

Tyyliä luodessasi määrittämiäsi tyylisääntöjä sovelletaan automaattisesti. Jos olisit valinnut tekstisivulta kuvan, kuva siirtyisi sivun vasempaan reunaan ja teksti kääriisi sen ympärille marginaalilla kuvan ja tekstin välissä.

Toista vaiheet 1–7, kerran kellunta-asetuksen ollessa oikea ja 5–10 pikseliä marginaalitilaa vasemman reunan kentässä Box-kategoriassa, ja uudelleen kellunta-asetuksen ollessa Vasen ja 5–10 pikseliä marginaalitilaa oikealla. Laatikko-luokan marginaalikenttä.